diff --git a/enhancements/languageDisplay.js b/enhancements/languageDisplay.js index db95e14..d4791b1 100644 --- a/enhancements/languageDisplay.js +++ b/enhancements/languageDisplay.js @@ -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; + }); } \ No newline at end of file