smallsolar
/
libkiwix
mirror of https://github.com/kiwix/libkiwix.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add title with full language name 

This adds title and aria-label attributes with value as the language of book
Provides tooltip on language badges
This commit is contained in:
Nikhil Tanwar 2022-01-28 22:53:38 +05:30
parent dd3338c2d0
commit 4d996584fa
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
static/skin/index.js
View File

@ -16,6 +16,7 @@
let filters = getCookie(filterCookieName); let filters = getCookie(filterCookieName);
let params = new URLSearchParams(window.location.search || filters || ''); let params = new URLSearchParams(window.location.search || filters || '');
let timer; let timer;
let languages = {};
function queryUrlBuilder() { function queryUrlBuilder() {
let url = `${root}/catalog/search?`; let url = `${root}/catalog/search?`;
@ -87,7 +88,8 @@
const title = getInnerHtml(book, 'title'); const title = getInnerHtml(book, 'title');
const description = getInnerHtml(book, 'summary'); const description = getInnerHtml(book, 'summary');
const id = getInnerHtml(book, 'id'); const id = getInnerHtml(book, 'id');
const language = getInnerHtml(book, 'language'); const langCode = getInnerHtml(book, 'language');
const language = languages[langCode];
const tags = getInnerHtml(book, 'tags'); const tags = getInnerHtml(book, 'tags');
let tagHtml = tags.split(';').filter(tag => {return !(tag.split(':')[0].startsWith('_'))}) let tagHtml = tags.split(';').filter(tag => {return !(tag.split(':')[0].startsWith('_'))})
.map((tag) => {return tag.charAt(0).toUpperCase() + tag.slice(1)}) .map((tag) => {return tag.charAt(0).toUpperCase() + tag.slice(1)})
@ -110,7 +112,7 @@
divTag.setAttribute('data-idx', bookOrderMap.get(id)); divTag.setAttribute('data-idx', bookOrderMap.get(id));
} }
const faviconAttr = iconUrl != undefined ? `style="background-image: url('${iconUrl}')"` : ''; const faviconAttr = iconUrl != undefined ? `style="background-image: url('${iconUrl}')"` : '';
const languageAttr = language != '' ? '' : 'style="background-color: transparent"'; const languageAttr = langCode != '' ? `title="${language}" aria-label="${language}"` : 'style="background-color: transparent"';
divTag.innerHTML = `<a class="book__link" href="${link}" data-hover="Preview"> divTag.innerHTML = `<a class="book__link" href="${link}" data-hover="Preview">
<div class="book__wrapper"> <div class="book__wrapper">
<div class="book__icon" ${faviconAttr}></div> <div class="book__icon" ${faviconAttr}></div>
@ -119,7 +121,7 @@
${downloadLink ? `<div class="book__download"><span data-link="${downloadLink}">Download ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}</span></div>`: ''}` : ''} ${downloadLink ? `<div class="book__download"><span data-link="${downloadLink}">Download ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}</span></div>`: ''}` : ''}
</div> </div>
<div class="book__description" title="${description}">${description}</div> <div class="book__description" title="${description}">${description}</div>
<div class="book__languageTag" ${languageAttr}>${getLanguageCodeToDisplay(language)}</div> <div class="book__languageTag" ${languageAttr}>${getLanguageCodeToDisplay(langCode)}</div>
<div class="book__tags"><div class="book__tags--wrapper">${tagHtml}</div></div> <div class="book__tags"><div class="book__tags--wrapper">${tagHtml}</div></div>
</div></div></a>`; </div></div></a>`;
return divTag; return divTag;
@ -244,6 +246,7 @@
const title = getInnerHtml(entry, 'title'); const title = getInnerHtml(entry, 'title');
const value = getInnerHtml(entry, valueEntryNode); const value = getInnerHtml(entry, valueEntryNode);
const hfTitle = humanFriendlyTitle(title); const hfTitle = humanFriendlyTitle(title);
languages[value] = hfTitle;
optionStr += (hfTitle != '') ? `<option value="${value}">${hfTitle}</option>` : ''; optionStr += (hfTitle != '') ? `<option value="${value}">${hfTitle}</option>` : '';
}); });
document.querySelector(nodeQuery).innerHTML += optionStr; document.querySelector(nodeQuery).innerHTML += optionStr;
@ -396,9 +399,9 @@
footer = document.getElementById('kiwixfooter'); footer = document.getElementById('kiwixfooter');
fadeOutDiv = document.getElementById('fadeOut'); fadeOutDiv = document.getElementById('fadeOut');
loader = document.querySelector('.loader'); loader = document.querySelector('.loader');
await loadAndDisplayBooks();
await loadAndDisplayOptions('#languageFilter', `${root}/catalog/v2/languages`, 'language'); await loadAndDisplayOptions('#languageFilter', `${root}/catalog/v2/languages`, 'language');
await loadAndDisplayOptions('#categoryFilter', `${root}/catalog/v2/categories`, 'title'); await loadAndDisplayOptions('#categoryFilter', `${root}/catalog/v2/categories`, 'title');
await loadAndDisplayBooks();
document.querySelectorAll('.filter').forEach(filter => { document.querySelectorAll('.filter').forEach(filter => {
filter.addEventListener('change', () => {resetAndFilter(filter.name, filter.value)}); filter.addEventListener('change', () => {resetAndFilter(filter.name, filter.value)});
}); });