Serraniel/AniwatchPlus
Serraniel/AniwatchPlus
1
0
Fork 0
Code Issues 9 Pull requests 8 Packages Projects Releases 10 Wiki Activity

#48 Added types for language display enhancements

Browse source
This commit is contained in:
Serraniel 2020-12-28 23:08:04 +01:00
parent ecebbdddda
commit 413f35f35d
Signed by: Serraniel
GPG key ID: 3690B4E7364525D3
1 changed files with 49 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
src/javascript/enhancements/languageDisplay.ts
View file

@ -2,12 +2,14 @@ import { getGlobalConfiguration, SETTINGS_animeLanguageDisplay } from '../config
import * as core from '../utils/aniwatchCore'; import * as core from '../utils/aniwatchCore';
import * as helper from '../utils/helpers'; import * as helper from '../utils/helpers';
export function init() { const MANIPULATED_ATTR_NAME = 'awpManipulated';
export function init(): void {
getGlobalConfiguration().getProperty(SETTINGS_animeLanguageDisplay, value => { getGlobalConfiguration().getProperty(SETTINGS_animeLanguageDisplay, value => {
if (value) { if (value) {
core.registerScript(node => { core.registerScript((node: Node) => {
// run the scripts // run the scripts
if (helper.isHtmlElement(node)) { if (node instanceof Element) {
updateLanguageDisplay(node) updateLanguageDisplay(node)
} }
}, "^/anime/[0-9]*$"); }, "^/anime/[0-9]*$");
@ -15,34 +17,35 @@ export function init() {
}); });
} }
function updateLanguageDisplay(node) { function updateLanguageDisplay(node: Element): void {
const listNodeName = 'MD-LIST-ITEM'; const LIST_NODE_NAME = 'MD-LIST-ITEM';
const boxNodeName = 'DIV'; const BOX_NODE_NAME = 'DIV';
const boxClassName = 'card-margin'; const BOX_CLASS_NAME = 'card-margin';
if (node.nodeName === listNodeName) { if (node.nodeName === LIST_NODE_NAME) {
updateLanguageDisplayListMode(node); updateLanguageDisplayListMode(node);
} }
else if (node.nodeName === boxNodeName && node.classList.contains(boxClassName)) { else if (node.nodeName === BOX_NODE_NAME && node.classList.contains(BOX_CLASS_NAME)) {
updateLanguageDisplayBoxMode(node); updateLanguageDisplayBoxMode(node);
} }
} }
function updateLanguageDisplayListMode(node) { function updateLanguageDisplayListMode(node: Element): void {
// last column with flags // last column with flags
let col = node.querySelector('h3.layout-align-end-center'); let col = node.querySelector('h3.layout-align-end-center');
if (!helper.assigned(col) || col.awpManipulated) {
if (!helper.assigned(col) || col.hasAttribute(MANIPULATED_ATTR_NAME)) {
return; return;
} }
doUpdateLanguageDisplay(col, false); doUpdateLanguageDisplay(col, false);
} }
function updateLanguageDisplayBoxMode(node) { function updateLanguageDisplayBoxMode(node: Element): void {
// last column with flags // last column with flags
let col = node.querySelector('div.layout-align-end-start'); let col = node.querySelector('div.layout-align-end-start');
if (!helper.assigned(col) || col.awpManipulated) { if (!helper.assigned(col) || col.hasAttribute(MANIPULATED_ATTR_NAME)) {
return; return;
} }
@ -50,27 +53,27 @@ function updateLanguageDisplayBoxMode(node) {
} }
function doUpdateLanguageDisplay(parent, isBoxedModed) { function doUpdateLanguageDisplay(parent: Element, isBoxedModed: boolean): void {
const listLangPrefix = 'ep.lang.'; const LIST_LANG_PREFIX = 'ep.lang.';
const boxLangPrefix = 'episodeObject.lang.'; const BOX_LANG_PREFIX = 'episodeObject.lang.';
// aniwatch uses different prefixes in list und box mode :/ // aniwatch uses different prefixes in list und box mode :/
let realLangPrefix = isBoxedModed ? boxLangPrefix : listLangPrefix; let realLangPrefix = isBoxedModed ? BOX_LANG_PREFIX : LIST_LANG_PREFIX;
const dubSuffix = 'dub'; const DUB_SUFFIX = 'dub';
const subSuffix = 'sub'; const SUB_SUFFIX = 'sub';
const dubIcon = 'volume_up'; const DUB_ICON = 'volume_up';
const subIcon = 'closed_caption'; const SUB_ICON = 'closed_caption';
const zeroWidthSpace = ''; // ​ const ZERO_WIDTH_SPACE_CHARACTER = ''; // ​
let subs = []; let subs: Array<string> = [];
let dubs = []; let dubs: Array<string> = [];
// find subs // find subs
let subCols = parent.querySelectorAll('[ng-hide*="sub"]'); let subCols = parent.querySelectorAll('[ng-hide*="sub"]');
subCols.forEach(element => { subCols.forEach((element: Element) => {
let langAttr = element.attributes['ng-hide'].value; let langAttr = element.attributes['ng-hide'].value;
let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(subSuffix)); let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(SUB_SUFFIX));
if (element.attributes['aria-hidden'].value == 'false') { if (element.attributes['aria-hidden'].value == 'false') {
subs.push(lang); subs.push(lang);
} }
@ -78,9 +81,9 @@ function doUpdateLanguageDisplay(parent, isBoxedModed) {
// find dubs // find dubs
let dubCols = parent.querySelectorAll('[ng-hide*="dub"]'); let dubCols = parent.querySelectorAll('[ng-hide*="dub"]');
dubCols.forEach(element => { dubCols.forEach((element: Element) => {
let langAttr = element.attributes['ng-hide'].value; let langAttr = element.attributes['ng-hide'].value;
let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(dubSuffix)); let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(DUB_SUFFIX));
if (element.attributes['aria-hidden'].value == 'false') { if (element.attributes['aria-hidden'].value == 'false') {
dubs.push(lang); dubs.push(lang);
} }
@ -106,12 +109,12 @@ function doUpdateLanguageDisplay(parent, isBoxedModed) {
let dubIconDiv = document.createElement('i'); let dubIconDiv = document.createElement('i');
if (iconsRequired) { if (iconsRequired) {
dubIconDiv.classList.add('material-icons', 'mr-3'); dubIconDiv.classList.add('material-icons', 'mr-3');
dubIconDiv.innerText = dubIcon; dubIconDiv.innerText = DUB_ICON;
} }
// add dummy with 24px for correct presentation // add dummy with 24px for correct presentation
else { else {
dubIconDiv.style.height = '24px'; dubIconDiv.style.height = '24px';
dubIconDiv.innerText = zeroWidthSpace; dubIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
} }
dubDiv.appendChild(dubIconDiv); dubDiv.appendChild(dubIconDiv);
@ -132,16 +135,16 @@ function doUpdateLanguageDisplay(parent, isBoxedModed) {
let subIconDiv = document.createElement('i'); let subIconDiv = document.createElement('i');
if (iconsRequired) { if (iconsRequired) {
subIconDiv.classList.add('material-icons', 'mr-3'); subIconDiv.classList.add('material-icons', 'mr-3');
subIconDiv.innerText = subIcon; subIconDiv.innerText = SUB_ICON;
} }
// add dummy with 24px for correct presentation // add dummy with 24px for correct presentation
else { else {
subIconDiv.style.height = '24px'; subIconDiv.style.height = '24px';
subIconDiv.innerText = zeroWidthSpace; subIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
} }
subDiv.appendChild(subIconDiv); subDiv.appendChild(subIconDiv);
subs.forEach(lang => { subs.forEach((lang: string) => {
let langIcon = document.createElement('i'); let langIcon = document.createElement('i');
langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1'); langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1');
subDiv.appendChild(langIcon); subDiv.appendChild(langIcon);
@ -154,7 +157,7 @@ function doUpdateLanguageDisplay(parent, isBoxedModed) {
} }
if (dubs.length > 0) { if (dubs.length > 0) {
dubs.forEach(lang => { dubs.forEach((lang: string) => {
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');
@ -167,12 +170,12 @@ function doUpdateLanguageDisplay(parent, isBoxedModed) {
let dubIconDiv = document.createElement('i'); let dubIconDiv = document.createElement('i');
if (iconsRequired) { if (iconsRequired) {
dubIconDiv.classList.add('material-icons', 'mr-3'); dubIconDiv.classList.add('material-icons', 'mr-3');
dubIconDiv.innerText = dubIcon; dubIconDiv.innerText = DUB_ICON;
} }
// add dummy with 24px for correct presentation // add dummy with 24px for correct presentation
else { else {
dubIconDiv.style.height = '24px'; dubIconDiv.style.height = '24px';
dubIconDiv.innerText = zeroWidthSpace; dubIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
} }
dubDiv.appendChild(dubIconDiv); dubDiv.appendChild(dubIconDiv);
@ -193,12 +196,12 @@ function doUpdateLanguageDisplay(parent, isBoxedModed) {
let subIconDiv = document.createElement('i'); let subIconDiv = document.createElement('i');
if (iconsRequired) { if (iconsRequired) {
subIconDiv.classList.add('material-icons', 'mr-3'); subIconDiv.classList.add('material-icons', 'mr-3');
subIconDiv.innerText = subIcon; subIconDiv.innerText = SUB_ICON;
} }
// add dummy with 24px for correct presentation // add dummy with 24px for correct presentation
else { else {
subIconDiv.style.height = '24px'; subIconDiv.style.height = '24px';
subIconDiv.innerText = zeroWidthSpace; subIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
} }
subDiv.appendChild(subIconDiv); subDiv.appendChild(subIconDiv);
@ -216,13 +219,17 @@ function doUpdateLanguageDisplay(parent, isBoxedModed) {
}); });
parent.querySelectorAll('.layout-column:not(:last-child)').forEach(div => { parent.querySelectorAll('.layout-column:not(:last-child)').forEach(div => {
div.style.borderRight = '1px solid rgba(155,155,155, 0.2)'; if (div instanceof HTMLElement) {
div.style.borderRight = '1px solid rgba(155,155,155, 0.2)';
}
}) })
parent.querySelectorAll('.layout-column').forEach(div => { parent.querySelectorAll('.layout-column').forEach(div => {
div.style.paddingLeft = '2px'; if (div instanceof HTMLElement) {
div.style.paddingRight = '2px'; div.style.paddingLeft = '2px';
div.style.paddingRight = '2px';
}
}) })
parent.awpManipulated = true; parent.setAttribute('awpManipulated', String(true));
} }