#3 improved performance of language display update in lists
Only tries to update if the node is a list element and only updates the single node instead of fetching and updating all nodes each time the page changes
This commit is contained in:
parent
d3f633f559
commit
378389863a
GPG key ID:
3690B4E7364525D3
|
|
@ -10,186 +10,190 @@ export function init() {
|
||||||
}, "^/anime/[0-9]*$");
|
}, "^/anime/[0-9]*$");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const langPrefix = 'ep.lang.';
|
||||||
|
const dubSuffix = 'dub';
|
||||||
|
const subSuffix = 'sub';
|
||||||
|
|
||||||
|
const dubIcon = 'volume_up';
|
||||||
|
const subIcon = 'closed_caption';
|
||||||
|
const zeroWidthSpace = ''; // ​
|
||||||
|
|
||||||
function updateLanguageDisplay(node) {
|
function updateLanguageDisplay(node) {
|
||||||
const langPrefix = 'ep.lang.';
|
const listNodeName = 'MD-LIST-ITEM';
|
||||||
const dubSuffix = 'dub';
|
|
||||||
const subSuffix = 'sub';
|
|
||||||
|
|
||||||
const dubIcon = 'volume_up';
|
if (node.nodeName === listNodeName) {
|
||||||
const subIcon = 'closed_caption';
|
updateLanguageDisplayListMode(node);
|
||||||
const zeroWidthSpace = ''; // ​
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let listItems = document.querySelectorAll('md-list-item');
|
function updateLanguageDisplayListMode(node) {
|
||||||
|
// last column with flags
|
||||||
|
let col = node.querySelector('h3.layout-align-end-center');
|
||||||
|
|
||||||
listItems.forEach(item => {
|
if (typeof col === 'undefined' || col.eaManipulated) {
|
||||||
// last column with flags
|
return;
|
||||||
let col = item.querySelector('h3.layout-align-end-center');
|
}
|
||||||
|
|
||||||
if (col.eaManipulated) {
|
let subs = [];
|
||||||
return;
|
let dubs = [];
|
||||||
|
|
||||||
|
// find subs
|
||||||
|
let 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));
|
||||||
|
if (element.attributes['aria-hidden'].value == 'false') {
|
||||||
|
subs.push(lang);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// find dubs
|
||||||
|
let 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.attributes['aria-hidden'].value == 'false') {
|
||||||
|
dubs.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', 'mg-all-1');
|
||||||
|
dubDiv.appendChild(japIcon);
|
||||||
|
|
||||||
|
colDiv.appendChild(dubDiv);
|
||||||
}
|
}
|
||||||
|
|
||||||
let subs = [];
|
// do the subs
|
||||||
let dubs = [];
|
let subDiv = document.createElement('div');
|
||||||
|
subDiv.setAttribute('layout', 'row');
|
||||||
|
subDiv.setAttribute('layout-align', 'start center');
|
||||||
|
subDiv.classList.add('layout-align-start-center', 'layout-row');
|
||||||
|
|
||||||
// find subs
|
let subIconDiv = document.createElement('i');
|
||||||
let subCols = col.querySelectorAll('[ng-hide*="sub"]');
|
if (iconsRequired) {
|
||||||
subCols.forEach(element => {
|
subIconDiv.classList.add('material-icons', 'mr-3');
|
||||||
let langAttr = element.attributes['ng-hide'].value;
|
subIconDiv.innerText = subIcon;
|
||||||
let lang = langAttr.substring(langAttr.indexOf(langPrefix) + langPrefix.length, langAttr.indexOf(subSuffix));
|
}
|
||||||
if (element.attributes['aria-hidden'].value == 'false') {
|
// add dummy with 24px for correct presentation
|
||||||
subs.push(lang);
|
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}`, 'mg-all-1');
|
||||||
|
subDiv.appendChild(langIcon);
|
||||||
});
|
});
|
||||||
|
|
||||||
// find dubs
|
colDiv.appendChild(subDiv);
|
||||||
let 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.attributes['aria-hidden'].value == 'false') {
|
|
||||||
dubs.push(lang);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// build output html
|
cols.push(colDiv);
|
||||||
let iconsRequired = true;
|
iconsRequired = false;
|
||||||
let cols = [];
|
}
|
||||||
|
|
||||||
// subs first;
|
if (dubs.length > 0) {
|
||||||
if (subs.length > 0) {
|
dubs.forEach(lang => {
|
||||||
let colDiv = document.createElement('div');
|
let colDiv = document.createElement('div');
|
||||||
colDiv.setAttribute('layout', 'column');
|
colDiv.setAttribute('layout', 'column');
|
||||||
colDiv.classList.add('layout-column');
|
colDiv.classList.add('layout-column');
|
||||||
|
|
||||||
// do we have dubs?
|
let dubDiv = document.createElement('div');
|
||||||
if (dubs.length > 0) {
|
dubDiv.setAttribute('layout', 'row');
|
||||||
let dubDiv = document.createElement('div');
|
dubDiv.setAttribute('layout-align', 'start center');
|
||||||
dubDiv.setAttribute('layout', 'row');
|
dubDiv.classList.add('layout-align-start-center', 'layout-row');
|
||||||
dubDiv.setAttribute('layout-align', 'start center');
|
|
||||||
dubDiv.classList.add('layout-align-start-center', 'layout-row');
|
|
||||||
|
|
||||||
let dubIconDiv = document.createElement('i');
|
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', 'mg-all-1');
|
|
||||||
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) {
|
if (iconsRequired) {
|
||||||
subIconDiv.classList.add('material-icons', 'mr-3');
|
dubIconDiv.classList.add('material-icons', 'mr-3');
|
||||||
subIconDiv.innerText = subIcon;
|
dubIconDiv.innerText = dubIcon;
|
||||||
}
|
}
|
||||||
// add dummy with 24px for correct presentation
|
// add dummy with 24px for correct presentation
|
||||||
else {
|
else {
|
||||||
subIconDiv.style.height = '24px';
|
dubIconDiv.style.height = '24px';
|
||||||
subIconDiv.innerText = zeroWidthSpace;
|
dubIconDiv.innerText = zeroWidthSpace;
|
||||||
}
|
}
|
||||||
|
|
||||||
subDiv.appendChild(subIconDiv);
|
dubDiv.appendChild(dubIconDiv);
|
||||||
subs.forEach(lang => {
|
|
||||||
let langIcon = document.createElement('i');
|
|
||||||
langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1');
|
|
||||||
subDiv.appendChild(langIcon);
|
|
||||||
});
|
|
||||||
|
|
||||||
colDiv.appendChild(subDiv);
|
let langIcon = document.createElement('i');
|
||||||
|
langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1');
|
||||||
|
dubDiv.appendChild(langIcon);
|
||||||
|
|
||||||
cols.push(colDiv);
|
colDiv.appendChild(dubDiv);
|
||||||
iconsRequired = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (dubs.length > 0) {
|
// do we have subs?
|
||||||
dubs.forEach(lang => {
|
if (subs.length > 0) {
|
||||||
let colDiv = document.createElement('div');
|
let subDiv = document.createElement('div');
|
||||||
colDiv.setAttribute('layout', 'column');
|
subDiv.setAttribute('layout', 'row');
|
||||||
colDiv.classList.add('layout-column');
|
subDiv.setAttribute('layout-align', 'start center');
|
||||||
|
subDiv.classList.add('layout-align-start-center', 'layout-row');
|
||||||
|
|
||||||
let dubDiv = document.createElement('div');
|
let subIconDiv = document.createElement('i');
|
||||||
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) {
|
if (iconsRequired) {
|
||||||
dubIconDiv.classList.add('material-icons', 'mr-3');
|
subIconDiv.classList.add('material-icons', 'mr-3');
|
||||||
dubIconDiv.innerText = dubIcon;
|
subIconDiv.innerText = subIcon;
|
||||||
}
|
}
|
||||||
// add dummy with 24px for correct presentation
|
// add dummy with 24px for correct presentation
|
||||||
else {
|
else {
|
||||||
dubIconDiv.style.height = '24px';
|
subIconDiv.style.height = '24px';
|
||||||
dubIconDiv.innerText = zeroWidthSpace;
|
subIconDiv.innerText = zeroWidthSpace;
|
||||||
}
|
}
|
||||||
|
|
||||||
dubDiv.appendChild(dubIconDiv);
|
subDiv.appendChild(subIconDiv);
|
||||||
|
colDiv.appendChild(subDiv);
|
||||||
|
}
|
||||||
|
|
||||||
let langIcon = document.createElement('i');
|
cols.push(colDiv);
|
||||||
langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1');
|
iconsRequired = false;
|
||||||
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;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
col.innerHTML = '';
|
|
||||||
cols.forEach(div => {
|
|
||||||
col.appendChild(div);
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
item.querySelectorAll('.layout-column:not(:last-child)').forEach(div => {
|
col.innerHTML = '';
|
||||||
div.style.borderRight = '1px solid rgba(155,155,155, 0.2)';
|
cols.forEach(div => {
|
||||||
})
|
col.appendChild(div);
|
||||||
|
|
||||||
item.querySelectorAll('.layout-column').forEach(div => {
|
|
||||||
div.style.paddingLeft = '2px';
|
|
||||||
div.style.paddingRight = '2px';
|
|
||||||
})
|
|
||||||
|
|
||||||
col.eaManipulated = true;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
node.querySelectorAll('.layout-column:not(:last-child)').forEach(div => {
|
||||||
|
div.style.borderRight = '1px solid rgba(155,155,155, 0.2)';
|
||||||
|
})
|
||||||
|
|
||||||
|
node.querySelectorAll('.layout-column').forEach(div => {
|
||||||
|
div.style.paddingLeft = '2px';
|
||||||
|
div.style.paddingRight = '2px';
|
||||||
|
})
|
||||||
|
|
||||||
|
col.eaManipulated = true;
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue