Merge pull request #55 from Serraniel/feature/#3-better-display-of-language-icons
Feature/#3 better display of language icons
This commit is contained in:
GitHub
commit
30bf841dc3
224
src/javascript/enhancements/languageDisplay.js
Normal file
224
src/javascript/enhancements/languageDisplay.js
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
import * as core from '../utils/aniwatchCore';
|
||||
import * as helper from '../utils/helpers';
|
||||
|
||||
export function init() {
|
||||
core.registerScript(node => {
|
||||
// run the scripts
|
||||
if (helper.isHtmlElement(node)) {
|
||||
updateLanguageDisplay(node)
|
||||
}
|
||||
}, "^/anime/[0-9]*$");
|
||||
}
|
||||
|
||||
function updateLanguageDisplay(node) {
|
||||
const listNodeName = 'MD-LIST-ITEM';
|
||||
const boxNodeName = 'DIV';
|
||||
const boxClassName = 'card-margin';
|
||||
|
||||
if (node.nodeName === listNodeName) {
|
||||
updateLanguageDisplayListMode(node);
|
||||
}
|
||||
else if (node.nodeName === boxNodeName && node.classList.contains(boxClassName)) {
|
||||
updateLanguageDisplayBoxMode(node);
|
||||
}
|
||||
}
|
||||
|
||||
function updateLanguageDisplayListMode(node) {
|
||||
// last column with flags
|
||||
let col = node.querySelector('h3.layout-align-end-center');
|
||||
|
||||
if (typeof col === 'undefined' || col.awpManipulated) {
|
||||
return;
|
||||
}
|
||||
|
||||
doUpdateLanguageDisplay(col, false);
|
||||
}
|
||||
|
||||
function updateLanguageDisplayBoxMode(node) {
|
||||
// last column with flags
|
||||
let col = node.querySelector('div.layout-align-end-start');
|
||||
|
||||
if (typeof col === 'undefined' || col.awpManipulated) {
|
||||
return;
|
||||
}
|
||||
|
||||
doUpdateLanguageDisplay(col, true);
|
||||
}
|
||||
|
||||
|
||||
function doUpdateLanguageDisplay(parent, isBoxedModed) {
|
||||
const listLangPrefix = 'ep.lang.';
|
||||
const boxLangPrefix = 'episodeObject.lang.';
|
||||
// aniwatch uses different prefixes in list und box mode :/
|
||||
let realLangPrefix = isBoxedModed ? boxLangPrefix : listLangPrefix;
|
||||
|
||||
const dubSuffix = 'dub';
|
||||
const subSuffix = 'sub';
|
||||
|
||||
const dubIcon = 'volume_up';
|
||||
const subIcon = 'closed_caption';
|
||||
const zeroWidthSpace = ''; // ​
|
||||
|
||||
let subs = [];
|
||||
let dubs = [];
|
||||
|
||||
// find subs
|
||||
let subCols = parent.querySelectorAll('[ng-hide*="sub"]');
|
||||
subCols.forEach(element => {
|
||||
let langAttr = element.attributes['ng-hide'].value;
|
||||
let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(subSuffix));
|
||||
if (element.attributes['aria-hidden'].value == 'false') {
|
||||
subs.push(lang);
|
||||
}
|
||||
});
|
||||
|
||||
// find dubs
|
||||
let dubCols = parent.querySelectorAll('[ng-hide*="dub"]');
|
||||
dubCols.forEach(element => {
|
||||
let langAttr = element.attributes['ng-hide'].value;
|
||||
let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.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);
|
||||
}
|
||||
|
||||
// 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}`, 'mg-all-1');
|
||||
subDiv.appendChild(langIcon);
|
||||
});
|
||||
|
||||
colDiv.appendChild(subDiv);
|
||||
|
||||
cols.push(colDiv);
|
||||
iconsRequired = false;
|
||||
}
|
||||
|
||||
if (dubs.length > 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}`, 'mg-all-1');
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
parent.innerHTML = '';
|
||||
cols.forEach(div => {
|
||||
parent.appendChild(div);
|
||||
});
|
||||
|
||||
parent.querySelectorAll('.layout-column:not(:last-child)').forEach(div => {
|
||||
div.style.borderRight = '1px solid rgba(155,155,155, 0.2)';
|
||||
})
|
||||
|
||||
parent.querySelectorAll('.layout-column').forEach(div => {
|
||||
div.style.paddingLeft = '2px';
|
||||
div.style.paddingRight = '2px';
|
||||
})
|
||||
|
||||
parent.awpManipulated = true;
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import { initCore } from './utils/aniwatchCore';
|
|||
import { initHelpers } from './utils/helpers';
|
||||
// enhancements
|
||||
import { init as animeRequests } from './enhancements/animeRequests';
|
||||
import { init as languageDisplay } from './enhancements/languageDisplay';
|
||||
import { init as lists } from './enhancements/lists';
|
||||
import { init as quickSearch } from './enhancements/quickSearch';
|
||||
|
||||
|
|
@ -15,5 +16,6 @@ initHelpers();
|
|||
|
||||
// enhancements
|
||||
animeRequests();
|
||||
languageDisplay();
|
||||
lists();
|
||||
quickSearch();
|
||||
Loading…
Reference in a new issue