Feature/#3 better display of language icons #55
|
|
@ -6,5 +6,173 @@ registerScript(node => {
|
|||
}, "^/anime/[0-9]*$");
|
||||
|
||||
function updateLanguageDisplay(node) {
|
||||
const langPrefix = 'ep.lang.';
|
||||
const dubSuffix = 'dub';
|
||||
const subSuffix = 'sub';
|
||||
|
||||
const dubIcon = 'volume_up';
|
||||
const subIcon = 'closed_caption';
|
||||
const zeroWidthSpace = '​';
|
||||
|
||||
let listItems = document.querySelectorAll('md-list-item');
|
||||
|
||||
listItems.forEach(item => {
|
||||
// last column with flags
|
||||
let col = item.querySelector('h3.layout-align-end-center');
|
||||
|
||||
if (col.eaManipulated) {
|
||||
return;
|
||||
}
|
||||
|
||||
let subs = [];
|
||||
let dubs = [];
|
||||
|
||||
// find subs
|
||||
subCols = col.querySelectorAll('[ng-hide*="sub"]');
|
||||
subCols.forEach(element => {
|
||||
let langAttr = element.attributes['ng-hide'].value;
|
||||
let lang = langAttr.substring(langAttr.indexOf(langPrefix) + langPrefix.length, langAttr.indexOf(subSuffix));
|
||||
subs[lang] = element.ariaHidden;
|
||||
});
|
||||
|
||||
// find dubs
|
||||
dubCols = col.querySelectorAll('[ng-hide*="dub"]');
|
||||
dubCols.forEach(element => {
|
||||
let langAttr = element.attributes['ng-hide'].value;
|
||||
let lang = langAttr.substring(langAttr.indexOf(langPrefix) + langPrefix.length, langAttr.indexOf(dubSuffix));
|
||||
if (element.ariaHidden) {
|
||||
subs.push(lang);
|
||||
}
|
||||
});
|
||||
|
||||
// build output html
|
||||
let iconsRequired = true;
|
||||
let cols = [];
|
||||
|
||||
// subs first;
|
||||
if (subs.length > 0) {
|
||||
let colDiv = document.createElement('div');
|
||||
colDiv.setAttribute('layout', 'column');
|
||||
colDiv.classList.add('layout-column');
|
||||
|
||||
// do we have dubs?
|
||||
if (dubs.length > 0) {
|
||||
let dubDiv = document.createElement('div');
|
||||
dubDiv.setAttribute('layout', 'row');
|
||||
dubDiv.setAttribute('layout-align', 'start center');
|
||||
dubDiv.classList.add('layout-align-start-center', 'layout-row');
|
||||
|
||||
let dubIconDiv = document.createElement('i');
|
||||
if (iconsRequired) {
|
||||
dubIconDiv.classList.add('material-icons', 'mr-3');
|
||||
dubIconDiv.innerText = dubIcon;
|
||||
}
|
||||
// add dummy with 24px for correct presentation
|
||||
else {
|
||||
dubIconDiv.style.height = '24px';
|
||||
dubIconDiv.innerText = zeroWidthSpace;
|
||||
}
|
||||
|
||||
dubDiv.appendChild(dubIconDiv);
|
||||
|
||||
let japIcon = document.createElement('i');
|
||||
japIcon.classList.add('flag flag-jp');
|
||||
dubDiv.appendChild(japIcon);
|
||||
|
||||
colDiv.appendChild(dubDiv);
|
||||
}
|
||||
|
||||
// do the subs
|
||||
let subDiv = document.createElement('div');
|
||||
subDiv.setAttribute('layout', 'row');
|
||||
subDiv.setAttribute('layout-align', 'start center');
|
||||
subDiv.classList.add('layout-align-start-center', 'layout-row');
|
||||
|
||||
let subIconDiv = document.createElement('i');
|
||||
if (iconsRequired) {
|
||||
subIconDiv.classList.add('material-icons', 'mr-3');
|
||||
subIconDiv.innerText = subIcon;
|
||||
}
|
||||
// add dummy with 24px for correct presentation
|
||||
else {
|
||||
subIconDiv.style.height = '24px';
|
||||
subIconDiv.innerText = zeroWidthSpace;
|
||||
}
|
||||
|
||||
subDiv.appendChild(subIconDiv);
|
||||
subs.forEach(lang => {
|
||||
let langIcon = document.createElement('i');
|
||||
langIcon.classList.add('flag', `flag-${lang}`);
|
||||
subDiv.appendChild(langIcon);
|
||||
});
|
||||
|
||||
colDiv.appendChild(subDiv);
|
||||
|
||||
cols.push(colDiv);
|
||||
iconsRequired = false;
|
||||
}
|
||||
|
||||
if (dubs > 0) {
|
||||
dubs.forEach(lang => {
|
||||
let colDiv = document.createElement('div');
|
||||
colDiv.setAttribute('layout', 'column');
|
||||
colDiv.classList.add('layout-column');
|
||||
|
||||
let dubDiv = document.createElement('div');
|
||||
dubDiv.setAttribute('layout', 'row');
|
||||
dubDiv.setAttribute('layout-align', 'start center');
|
||||
dubDiv.classList.add('layout-align-start-center', 'layout-row');
|
||||
|
||||
let dubIconDiv = document.createElement('i');
|
||||
if (iconsRequired) {
|
||||
dubIconDiv.classList.add('material-icons', 'mr-3');
|
||||
dubIconDiv.innerText = dubIcon;
|
||||
}
|
||||
// add dummy with 24px for correct presentation
|
||||
else {
|
||||
dubIconDiv.style.height = '24px';
|
||||
dubIconDiv.innerText = zeroWidthSpace;
|
||||
}
|
||||
|
||||
dubDiv.appendChild(dubIconDiv);
|
||||
|
||||
let langIcon = document.createElement('i');
|
||||
langIcon.classList.add('flag', `flag-${lang}`);
|
||||
dubDiv.appendChild(langIcon);
|
||||
|
||||
colDiv.appendChild(dubDiv);
|
||||
|
||||
// do we have subs?
|
||||
if (subs.length > 0) {
|
||||
let subDiv = document.createElement('div');
|
||||
subDiv.setAttribute('layout', 'row');
|
||||
subDiv.setAttribute('layout-align', 'start center');
|
||||
subDiv.classList.add('layout-align-start-center', 'layout-row');
|
||||
|
||||
let subIconDiv = document.createElement('i');
|
||||
if (iconsRequired) {
|
||||
subIconDiv.classList.add('material-icons', 'mr-3');
|
||||
subIconDiv.innerText = subIcon;
|
||||
}
|
||||
// add dummy with 24px for correct presentation
|
||||
else {
|
||||
subIconDiv.style.height = '24px';
|
||||
subIconDiv.innerText = zeroWidthSpace;
|
||||
}
|
||||
|
||||
subDiv.appendChild(subIconDiv);
|
||||
colDiv.appendChild(subDiv);
|
||||
}
|
||||
|
||||
cols.push(colDiv);
|
||||
iconsRequired = false;
|
||||
});
|
||||
}
|
||||
|
||||
cols.forEach(div => {
|
||||
col.appendChild(div);
|
||||
});
|
||||
|
||||
col.eaManipulated = true;
|
||||
});
|
||||
}
|
||||
Loading…
Reference in a new issue