Kiwix-serve: Language filter of zim list on welcome page

[sharun-s]

I added a little bookmarklet to inject a language filter dropdown to filters zims on the library.kiwix.org site. It could probably work as is in a jquery ready function in home.html.tmpl. Unfamiliar with kiwix-tools and the build/test process to figure out how to submit this as a pr. So pasting code here...after library.kiwix.org loads just paste it into the dev console to see it in action...

sel=$("<div><label for='langSelect'>Language</label> \
         <select id='langSelect'>\
         <option value='ar'>العربية</option>\
         ‎<option value='az'>azərbaycanca</option>\
         ‎<option value='bn'>বাংলা</option>\
         <option value='ca'>català</option>\
         <option value='da'>dansk</option>\
         <option value='de'>Deutsch</option>\
         <option value='el'>Ελληνικά</option>\
         <option value='en' selected>‎English</option> \
         <option value='es'> español</option> \
         <option value='fa'>فارسی</option> \
         <option value='fr'>français</option> \
         <option value='gl'>galego</option> \
         <option value='he'>עברית</option> \
         <option value='id'>Bahasa Indonesia</option> \
         <option value='it'>italiano</option> \
         <option value='ja'>日本語</option>\
         <option value='ka'>ქართული</option>\
         <option value='ko'>한국어</option>\
         <option value='ku-latn'>Kurdî (latînî)‎‎</option>\
         <option value='lt'>lietuvių</option>\
         <option value='ml'>മലയാളം</option>\
         <option value='ms'>Bahasa Melayu</option> \
         ‎<option value='nl'>Nederlands</option>\
         <option value='pl'>polski</option>\
         <option value='ps'>پښتو</option>\
         <option value='pt'>português</option>\
         <option value='ru'>русский</option> ‎\
         <option value='sd'>سنڌي</option> ‎\
         <option value='tr'>Türkçe</option> ‎\
         <option value='ur'>اردو</option> ‎\
         <option value='zh'>中文</option> ‎\
         ‎<option value='zh-cn'> 中文（中国大陆）‎</option> ‎\
         ‎<option value='zh-tw'>中文（台灣）‎</option></select></div>");

$(sel).insertBefore(".book__list")

catalog=$(".book__list a")

$("#langSelect").on("change",function (){
         lang = this.value;console.log(lang + " lang selected");
         catalog.hide();
         catalog.filter(function(){return $(this).attr("href").includes('_'+lang+'_');}).show();
        });

[kelson42]

@sharun-s Thank you for your ticket. I think the feature request is great, but pretty much disagree with the way of doing it. This should go through the backend.

[sharun-s]

Ah I see you referenced the issue on the "web" repo...I remember seeing that issue and kept searching for it, but couldn't remember on which repo it was on. Too many repos and issue trackers!

And yup agree fix should be in the kiwix-serve code. I tried building to patch, but ran into some pkg-config issues. My Ubuntu system recently upgraded from 16 to 18 and something went haywire. Will try again sometime after resolving that.

[kelson42]

@sharun-s FYI, the OPDS backend provides now a way to filter by language see http://wiki.kiwix.org/wiki/OPDS#End_points. The way to implement that feature is IMO to make the whole rendering of books boxes based on the OPDS backend.

[sharun-s]

Thanks. Will check it out.

[kelson42]

Would be good as well that:

• We better use a pre-existing js/css component
• We can select many languages
• Its default value is the browser language

[holta]

Mass Market / commercial UI's often put very common "Quick Pick" languages on top of long drop-down / pop-up menus that ask you to pick among many languages. e.g. highlighting EN/ES/FR at minimum...or sometimes a subset of 5-to-10 frequent languages, possibly including Portuguese/Chinese/Hindi/Arabic/Russian/Swahili?

With most all the other ~200 languages being buried down there in "alphabetical order", as PR #534 today implements.

Recap: Should PR #534 or its successors possibly consider "Quick Pick" languages at the top of the Languages drop-down menu?

Aside: Pre-selecting the browser's default language is a great idea (as mentioned above) in combination with any such UI!