From 32846df78249032048ec6f95367064e0ab782944 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Tue, 4 Aug 2020 15:23:58 +0200 Subject: [PATCH 01/18] Added empty template --- enhancements/languageDisplay.js | 10 ++++++++++ manifest.json | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 enhancements/languageDisplay.js diff --git a/enhancements/languageDisplay.js b/enhancements/languageDisplay.js new file mode 100644 index 0000000..a9a5063 --- /dev/null +++ b/enhancements/languageDisplay.js @@ -0,0 +1,10 @@ +registerScript(node => { + // run the scripts + if (isHtmlElement(node)) { + updateLanguageDisplay(node) + } +}, ".*"); + +function updateLanguageDisplay(node) { + +} \ No newline at end of file diff --git a/manifest.json b/manifest.json index a7777d7..8d24705 100644 --- a/manifest.json +++ b/manifest.json @@ -22,7 +22,8 @@ ], "js": [ "enhancements/quickSearch.js", - "enhancements/animeRequests.js" + "enhancements/animeRequests.js", + "enhancements/languageDisplay.js" ], "run_at": "document_end" } -- 2.43.5 From bde1ce08ea715048f5cdf1700ecdd2405866c4c0 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Tue, 4 Aug 2020 15:32:32 +0200 Subject: [PATCH 02/18] #3 Optimized regex --- enhancements/languageDisplay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/enhancements/languageDisplay.js b/enhancements/languageDisplay.js index a9a5063..db95e14 100644 --- a/enhancements/languageDisplay.js +++ b/enhancements/languageDisplay.js @@ -3,7 +3,7 @@ registerScript(node => { if (isHtmlElement(node)) { updateLanguageDisplay(node) } -}, ".*"); +}, "^/anime/[0-9]*$"); function updateLanguageDisplay(node) { -- 2.43.5 From 33f17e37cb6a3f5ec17b9c3f69efdb5a28fe1d56 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Thu, 6 Aug 2020 21:10:55 +0200 Subject: [PATCH 03/18] #3 First draft to manipulate icons --- enhancements/languageDisplay.js | 168 ++++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) 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 -- 2.43.5 From 3a09d5a2c961f84e9b4bd7942a5ada87623be953 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Thu, 6 Aug 2020 21:15:09 +0200 Subject: [PATCH 04/18] #3 Remove old icons --- enhancements/languageDisplay.js | 1 + 1 file changed, 1 insertion(+) diff --git a/enhancements/languageDisplay.js b/enhancements/languageDisplay.js index d4791b1..2f6d887 100644 --- a/enhancements/languageDisplay.js +++ b/enhancements/languageDisplay.js @@ -169,6 +169,7 @@ function updateLanguageDisplay(node) { }); } + col.innerHTML = ''; cols.forEach(div => { col.appendChild(div); }); -- 2.43.5 From 8fb9fdfccaecdfd036fe83809970812ab61926e2 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Thu, 6 Aug 2020 21:18:34 +0200 Subject: [PATCH 05/18] #3 Fixed issue with sub and dub detection --- enhancements/languageDisplay.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/enhancements/languageDisplay.js b/enhancements/languageDisplay.js index 2f6d887..5491cab 100644 --- a/enhancements/languageDisplay.js +++ b/enhancements/languageDisplay.js @@ -32,7 +32,9 @@ function updateLanguageDisplay(node) { 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; + if (element.ariaHidden) { + subs.push(lang); + } }); // find dubs @@ -41,7 +43,7 @@ function updateLanguageDisplay(node) { 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); + dubs.push(lang); } }); @@ -76,7 +78,7 @@ function updateLanguageDisplay(node) { dubDiv.appendChild(dubIconDiv); let japIcon = document.createElement('i'); - japIcon.classList.add('flag flag-jp'); + japIcon.classList.add('flag', 'flag-jp'); dubDiv.appendChild(japIcon); colDiv.appendChild(dubDiv); -- 2.43.5 From dcb5ce2f38b3bcd2f595a7b9a2e1a36176b877f2 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Thu, 6 Aug 2020 21:21:55 +0200 Subject: [PATCH 06/18] #3 Fixed even more issues with the detection of subs and dubs --- enhancements/languageDisplay.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/enhancements/languageDisplay.js b/enhancements/languageDisplay.js index 5491cab..c710ff9 100644 --- a/enhancements/languageDisplay.js +++ b/enhancements/languageDisplay.js @@ -32,7 +32,7 @@ function updateLanguageDisplay(node) { subCols.forEach(element => { let langAttr = element.attributes['ng-hide'].value; let lang = langAttr.substring(langAttr.indexOf(langPrefix) + langPrefix.length, langAttr.indexOf(subSuffix)); - if (element.ariaHidden) { + if (element.attributes['aria-hidden'].value == 'false') { subs.push(lang); } }); @@ -42,11 +42,15 @@ function updateLanguageDisplay(node) { 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) { + if (element.attributes['aria-hidden'].value == 'false') { dubs.push(lang); } }); + + console.log(subs) + console.log(dubs) + // build output html let iconsRequired = true; let cols = []; -- 2.43.5 From af24f5a4fa5887a6f67b50ebf656d5399fc94ae7 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Thu, 6 Aug 2020 21:23:33 +0200 Subject: [PATCH 07/18] #3 Removed debugging output --- enhancements/languageDisplay.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/enhancements/languageDisplay.js b/enhancements/languageDisplay.js index c710ff9..b4c7fac 100644 --- a/enhancements/languageDisplay.js +++ b/enhancements/languageDisplay.js @@ -47,10 +47,6 @@ function updateLanguageDisplay(node) { } }); - - console.log(subs) - console.log(dubs) - // build output html let iconsRequired = true; let cols = []; -- 2.43.5 From 956ea744c5463e785d2f8113a21e8b40e223b9a7 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Thu, 6 Aug 2020 21:38:03 +0200 Subject: [PATCH 08/18] #3 Optical imrpovements --- enhancements/languageDisplay.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/enhancements/languageDisplay.js b/enhancements/languageDisplay.js index b4c7fac..578c1ea 100644 --- a/enhancements/languageDisplay.js +++ b/enhancements/languageDisplay.js @@ -12,7 +12,7 @@ function updateLanguageDisplay(node) { const dubIcon = 'volume_up'; const subIcon = 'closed_caption'; - const zeroWidthSpace = '​'; + const zeroWidthSpace = ''; // ​ let listItems = document.querySelectorAll('md-list-item'); @@ -78,7 +78,7 @@ function updateLanguageDisplay(node) { dubDiv.appendChild(dubIconDiv); let japIcon = document.createElement('i'); - japIcon.classList.add('flag', 'flag-jp'); + japIcon.classList.add('flag', 'flag-jp', 'mg-all-1'); dubDiv.appendChild(japIcon); colDiv.appendChild(dubDiv); @@ -104,7 +104,7 @@ function updateLanguageDisplay(node) { subDiv.appendChild(subIconDiv); subs.forEach(lang => { let langIcon = document.createElement('i'); - langIcon.classList.add('flag', `flag-${lang}`); + langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1'); subDiv.appendChild(langIcon); }); @@ -114,7 +114,7 @@ function updateLanguageDisplay(node) { iconsRequired = false; } - if (dubs > 0) { + if (dubs.length > 0) { dubs.forEach(lang => { let colDiv = document.createElement('div'); colDiv.setAttribute('layout', 'column'); @@ -139,7 +139,7 @@ function updateLanguageDisplay(node) { dubDiv.appendChild(dubIconDiv); let langIcon = document.createElement('i'); - langIcon.classList.add('flag', `flag-${lang}`); + langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1'); dubDiv.appendChild(langIcon); colDiv.appendChild(dubDiv); @@ -176,6 +176,11 @@ function updateLanguageDisplay(node) { col.appendChild(div); }); + item.querySelectorAll('.layout-column:not(:last-child)').forEach(div => { + div.style.borderRight = '1px solid'; + //div.style.marginRight = '3px'; + }) + col.eaManipulated = true; }); } \ No newline at end of file -- 2.43.5 From 7f9c26bca0d62fa84185decf1f4b91ec41bdb30c Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sun, 20 Sep 2020 15:29:13 +0200 Subject: [PATCH 09/18] #52 Remove href attribute instead of clearing it --- src/javascript/enhancements/quickSearch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/javascript/enhancements/quickSearch.js b/src/javascript/enhancements/quickSearch.js index 197d206..38185ff 100644 --- a/src/javascript/enhancements/quickSearch.js +++ b/src/javascript/enhancements/quickSearch.js @@ -57,7 +57,7 @@ function handleQuickSearch(event) { linkElement.click(); // clean up afterwards - linkElement.href = ''; + linkElement.removeAttribute('href'); quickSearchElement.value = ''; } } -- 2.43.5 From d14040ceb64e0ce97bfecf6087ed6ca528be6016 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sun, 20 Sep 2020 17:44:43 +0200 Subject: [PATCH 10/18] #3 JS fixes after merge --- src/javascript/enhancements/languageDisplay.js | 17 +++++++++++------ src/javascript/index.js | 2 ++ 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/javascript/enhancements/languageDisplay.js b/src/javascript/enhancements/languageDisplay.js index 578c1ea..8021827 100644 --- a/src/javascript/enhancements/languageDisplay.js +++ b/src/javascript/enhancements/languageDisplay.js @@ -1,9 +1,14 @@ -registerScript(node => { - // run the scripts - if (isHtmlElement(node)) { - updateLanguageDisplay(node) - } -}, "^/anime/[0-9]*$"); +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 langPrefix = 'ep.lang.'; diff --git a/src/javascript/index.js b/src/javascript/index.js index 0eb81b4..fe14197 100644 --- a/src/javascript/index.js +++ b/src/javascript/index.js @@ -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(); \ No newline at end of file -- 2.43.5 From e4a7238921d660eaf6fde7c17c57973e59a9f6fe Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sun, 20 Sep 2020 17:46:25 +0200 Subject: [PATCH 11/18] #3 Minor syntax issues --- src/javascript/enhancements/languageDisplay.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/javascript/enhancements/languageDisplay.js b/src/javascript/enhancements/languageDisplay.js index 8021827..e2c209b 100644 --- a/src/javascript/enhancements/languageDisplay.js +++ b/src/javascript/enhancements/languageDisplay.js @@ -33,7 +33,7 @@ function updateLanguageDisplay(node) { let dubs = []; // find subs - subCols = col.querySelectorAll('[ng-hide*="sub"]'); + 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)); @@ -43,7 +43,7 @@ function updateLanguageDisplay(node) { }); // find dubs - dubCols = col.querySelectorAll('[ng-hide*="dub"]'); + 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)); -- 2.43.5 From d3f633f55926285c01f419e3539b1515a519e0aa Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sun, 20 Sep 2020 17:56:27 +0200 Subject: [PATCH 12/18] Optical improvements --- src/javascript/enhancements/languageDisplay.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/javascript/enhancements/languageDisplay.js b/src/javascript/enhancements/languageDisplay.js index e2c209b..fd94aeb 100644 --- a/src/javascript/enhancements/languageDisplay.js +++ b/src/javascript/enhancements/languageDisplay.js @@ -182,8 +182,12 @@ function updateLanguageDisplay(node) { }); item.querySelectorAll('.layout-column:not(:last-child)').forEach(div => { - div.style.borderRight = '1px solid'; - //div.style.marginRight = '3px'; + div.style.borderRight = '1px solid rgba(155,155,155, 0.2)'; + }) + + item.querySelectorAll('.layout-column').forEach(div => { + div.style.paddingLeft = '2px'; + div.style.paddingRight = '2px'; }) col.eaManipulated = true; -- 2.43.5 From 378389863af1d95340822c60e5839cc4837caca5 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sun, 27 Sep 2020 12:01:35 +0200 Subject: [PATCH 13/18] #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 --- .../enhancements/languageDisplay.js | 294 +++++++++--------- 1 file changed, 149 insertions(+), 145 deletions(-) diff --git a/src/javascript/enhancements/languageDisplay.js b/src/javascript/enhancements/languageDisplay.js index fd94aeb..3fd2ea2 100644 --- a/src/javascript/enhancements/languageDisplay.js +++ b/src/javascript/enhancements/languageDisplay.js @@ -10,186 +10,190 @@ export function init() { }, "^/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) { - const langPrefix = 'ep.lang.'; - const dubSuffix = 'dub'; - const subSuffix = 'sub'; + const listNodeName = 'MD-LIST-ITEM'; - const dubIcon = 'volume_up'; - const subIcon = 'closed_caption'; - const zeroWidthSpace = ''; // ​ + if (node.nodeName === listNodeName) { + updateLanguageDisplayListMode(node); + } +} - 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 => { - // last column with flags - let col = item.querySelector('h3.layout-align-end-center'); + if (typeof col === 'undefined' || col.eaManipulated) { + return; + } - if (col.eaManipulated) { - return; + let subs = []; + 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 = []; - let dubs = []; + // 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'); - // 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); - } + 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); }); - // 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); - } - }); + colDiv.appendChild(subDiv); - // build output html - let iconsRequired = true; - let cols = []; + cols.push(colDiv); + iconsRequired = false; + } - // subs first; - if (subs.length > 0) { + if (dubs.length > 0) { + dubs.forEach(lang => { 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 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'); + let dubIconDiv = document.createElement('i'); if (iconsRequired) { - subIconDiv.classList.add('material-icons', 'mr-3'); - subIconDiv.innerText = subIcon; + dubIconDiv.classList.add('material-icons', 'mr-3'); + dubIconDiv.innerText = dubIcon; } // add dummy with 24px for correct presentation else { - subIconDiv.style.height = '24px'; - subIconDiv.innerText = zeroWidthSpace; + dubIconDiv.style.height = '24px'; + dubIconDiv.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); - }); + dubDiv.appendChild(dubIconDiv); - colDiv.appendChild(subDiv); + let langIcon = document.createElement('i'); + langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1'); + dubDiv.appendChild(langIcon); - cols.push(colDiv); - iconsRequired = false; - } + colDiv.appendChild(dubDiv); - if (dubs.length > 0) { - dubs.forEach(lang => { - let colDiv = document.createElement('div'); - colDiv.setAttribute('layout', 'column'); - colDiv.classList.add('layout-column'); + // 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 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'); + let subIconDiv = document.createElement('i'); if (iconsRequired) { - dubIconDiv.classList.add('material-icons', 'mr-3'); - dubIconDiv.innerText = dubIcon; + subIconDiv.classList.add('material-icons', 'mr-3'); + subIconDiv.innerText = subIcon; } // add dummy with 24px for correct presentation else { - dubIconDiv.style.height = '24px'; - dubIconDiv.innerText = zeroWidthSpace; + subIconDiv.style.height = '24px'; + subIconDiv.innerText = zeroWidthSpace; } - dubDiv.appendChild(dubIconDiv); + subDiv.appendChild(subIconDiv); + colDiv.appendChild(subDiv); + } - 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; - }); - } - - col.innerHTML = ''; - cols.forEach(div => { - col.appendChild(div); + cols.push(colDiv); + iconsRequired = false; }); + } - item.querySelectorAll('.layout-column:not(:last-child)').forEach(div => { - div.style.borderRight = '1px solid rgba(155,155,155, 0.2)'; - }) - - item.querySelectorAll('.layout-column').forEach(div => { - div.style.paddingLeft = '2px'; - div.style.paddingRight = '2px'; - }) - - col.eaManipulated = true; + col.innerHTML = ''; + cols.forEach(div => { + col.appendChild(div); }); + + 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; } \ No newline at end of file -- 2.43.5 From 1f7a9e164ace63765167d3aba911228d7e5e35c3 Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sun, 27 Sep 2020 12:47:55 +0200 Subject: [PATCH 14/18] #3 Added support for boxed mode --- .../enhancements/languageDisplay.js | 61 +++++++++++++------ 1 file changed, 44 insertions(+), 17 deletions(-) diff --git a/src/javascript/enhancements/languageDisplay.js b/src/javascript/enhancements/languageDisplay.js index 3fd2ea2..f2e72ad 100644 --- a/src/javascript/enhancements/languageDisplay.js +++ b/src/javascript/enhancements/languageDisplay.js @@ -10,20 +10,17 @@ export function init() { }, "^/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) { 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) { @@ -34,24 +31,54 @@ function updateLanguageDisplayListMode(node) { return; } + dopUpdateLanguageDisplay(col, false); +} + +function updateLanguageDisplayBoxMode(node) { + // last column with flags + let col = node.querySelector('div.layout-align-end-start'); + + console.log(col) + + if (typeof col === 'undefined' || col.eaManipulated) { + return; + } + + dopUpdateLanguageDisplay(col, true); +} + + +function dopUpdateLanguageDisplay(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 = col.querySelectorAll('[ng-hide*="sub"]'); + let subCols = parent.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)); + 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 = col.querySelectorAll('[ng-hide*="dub"]'); + let dubCols = parent.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)); + let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(dubSuffix)); if (element.attributes['aria-hidden'].value == 'false') { dubs.push(lang); } @@ -181,19 +208,19 @@ function updateLanguageDisplayListMode(node) { }); } - col.innerHTML = ''; + parent.innerHTML = ''; cols.forEach(div => { - col.appendChild(div); + parent.appendChild(div); }); - node.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)'; }) - node.querySelectorAll('.layout-column').forEach(div => { + parent.querySelectorAll('.layout-column').forEach(div => { div.style.paddingLeft = '2px'; div.style.paddingRight = '2px'; }) - col.eaManipulated = true; + parent.eaManipulated = true; } \ No newline at end of file -- 2.43.5 From 7e3be1e059ff8eb505bf14d0dcc02681d7d19b1f Mon Sep 17 00:00:00 2001 From: Serraniel Date: Sun, 27 Sep 2020 12:53:45 +0200 Subject: [PATCH 15/18] #3 Renamed custom property and removed console.log --- src/javascript/enhancements/languageDisplay.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/javascript/enhancements/languageDisplay.js b/src/javascript/enhancements/languageDisplay.js index f2e72ad..9952ab9 100644 --- a/src/javascript/enhancements/languageDisplay.js +++ b/src/javascript/enhancements/languageDisplay.js @@ -27,7 +27,7 @@ function updateLanguageDisplayListMode(node) { // last column with flags let col = node.querySelector('h3.layout-align-end-center'); - if (typeof col === 'undefined' || col.eaManipulated) { + if (typeof col === 'undefined' || col.awpManipulated) { return; } @@ -38,9 +38,7 @@ function updateLanguageDisplayBoxMode(node) { // last column with flags let col = node.querySelector('div.layout-align-end-start'); - console.log(col) - - if (typeof col === 'undefined' || col.eaManipulated) { + if (typeof col === 'undefined' || col.awpManipulated) { return; } @@ -222,5 +220,5 @@ function dopUpdateLanguageDisplay(parent, isBoxedModed) { div.style.paddingRight = '2px'; }) - parent.eaManipulated = true; + parent.awpManipulated = true; } \ No newline at end of file -- 2.43.5 From c31a1abab4240ccde806c34ade5518c6f11f1027 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 1 Oct 2020 20:08:11 +0200 Subject: [PATCH 16/18] Update src/javascript/enhancements/languageDisplay.js Co-authored-by: kaffem <29717789+kaffem@users.noreply.github.com> --- src/javascript/enhancements/languageDisplay.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/javascript/enhancements/languageDisplay.js b/src/javascript/enhancements/languageDisplay.js index 9952ab9..c20f8d8 100644 --- a/src/javascript/enhancements/languageDisplay.js +++ b/src/javascript/enhancements/languageDisplay.js @@ -31,7 +31,7 @@ function updateLanguageDisplayListMode(node) { return; } - dopUpdateLanguageDisplay(col, false); + doUpdateLanguageDisplay(col, false); } function updateLanguageDisplayBoxMode(node) { @@ -221,4 +221,4 @@ function dopUpdateLanguageDisplay(parent, isBoxedModed) { }) parent.awpManipulated = true; -} \ No newline at end of file +} -- 2.43.5 From 3178d145a0b147b530cc180a50d66874bf702988 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 1 Oct 2020 20:08:19 +0200 Subject: [PATCH 17/18] Update src/javascript/enhancements/languageDisplay.js Co-authored-by: kaffem <29717789+kaffem@users.noreply.github.com> --- src/javascript/enhancements/languageDisplay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/javascript/enhancements/languageDisplay.js b/src/javascript/enhancements/languageDisplay.js index c20f8d8..944d4f7 100644 --- a/src/javascript/enhancements/languageDisplay.js +++ b/src/javascript/enhancements/languageDisplay.js @@ -42,7 +42,7 @@ function updateLanguageDisplayBoxMode(node) { return; } - dopUpdateLanguageDisplay(col, true); + doUpdateLanguageDisplay(col, true); } -- 2.43.5 From 2960d2ce60c6061be70be99019cc317d4ed757f3 Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 1 Oct 2020 20:08:29 +0200 Subject: [PATCH 18/18] Update src/javascript/enhancements/languageDisplay.js Co-authored-by: kaffem <29717789+kaffem@users.noreply.github.com> --- src/javascript/enhancements/languageDisplay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/javascript/enhancements/languageDisplay.js b/src/javascript/enhancements/languageDisplay.js index 944d4f7..124431e 100644 --- a/src/javascript/enhancements/languageDisplay.js +++ b/src/javascript/enhancements/languageDisplay.js @@ -46,7 +46,7 @@ function updateLanguageDisplayBoxMode(node) { } -function dopUpdateLanguageDisplay(parent, isBoxedModed) { +function doUpdateLanguageDisplay(parent, isBoxedModed) { const listLangPrefix = 'ep.lang.'; const boxLangPrefix = 'episodeObject.lang.'; // aniwatch uses different prefixes in list und box mode :/ -- 2.43.5