Combined the instances methods to one function

2 files changed, 20 insertions, 172 deletions

diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js
index e1b26efc..70b25428 100644
--- a/src/pages/options/youtube/invidious.js
+++ b/src/pages/options/youtube/invidious.js
@@ -1,4 +1,5 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let invidiousAlwaysProxyElement = document.getElementById("invidious-always-proxy");
 invidiousAlwaysProxyElement.addEventListener("change",
@@ -32,95 +33,14 @@ youtubeHelper.init().then(() => {
     invidiousSubtitlesElement.value = youtubeHelper.getInvidiousSubtitles();
     persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs();
 
-
-    invidiousDefaultRedirects = youtubeHelper.getInvidiousRedirectsChecks();
-    invidiousCheckListElement.innerHTML =
-        [
-            '<div>Toggle All<input type="checkbox" id="invidious-toogle-all" /></div>',
-            ...youtubeHelper.getRedirects().invidious.normal.map((x) => `<div>${x}<input type="checkbox" id="${x}" /></div>`),
-        ].join('\n<hr>\n');
-
-    calcInvidiousCheckBoxes();
-    document.getElementById('invidious-toogle-all').addEventListener("change", (event) => {
-        if (event.target.checked)
-            invidiousDefaultRedirects = [...youtubeHelper.getRedirects().invidious.normal];
-        else
-            invidiousDefaultRedirects = [];
-        youtubeHelper.setInvidiousRedirectsChecks(invidiousDefaultRedirects);
-        calcInvidiousCheckBoxes();
-    });
-
-    for (let element of invidiousCheckListElement.getElementsByTagName('input')) {
-        if (element.id != 'invidious-toogle-all')
-            document.getElementById(element.id).addEventListener("change", (event) => {
-                if (event.target.checked)
-                    invidiousDefaultRedirects.push(element.id)
-                else {
-                    let index = invidiousDefaultRedirects.indexOf(element.id);
-                    if (index > -1) invidiousDefaultRedirects.splice(index, 1);
-                }
-                youtubeHelper.setInvidiousRedirectsChecks(invidiousDefaultRedirects);
-                calcInvidiousCheckBoxes();
-            });
-    }
-
-    invidiousCustomInstances = youtubeHelper.getInvidiousCustomRedirects();
-    calcInvidiousCustomInstances();
+    commonHelper.processDefaultCustomInstances(
+        'invidious',
+        youtubeHelper,
+        document,
+        youtubeHelper.getInvidiousRedirectsChecks,
+        youtubeHelper.setInvidiousRedirectsChecks,
+        youtubeHelper.getInvidiousCustomRedirects,
+        youtubeHelper.setInvidiousCustomRedirects
+    )
 });
 
-
-let invidiousCustomInstanceInput = document.getElementById("invidious-custom-instance");
-let invidiousCustomInstances = [];
-
-let invidiousCheckListElement = document.getElementById("invidious-checklist");
-
-
-let invidiousDefaultRedirects;
-
-function calcInvidiousCheckBoxes() {
-    let isTrue = true;
-    for (const item of youtubeHelper.getRedirects().invidious.normal)
-        if (!invidiousDefaultRedirects.includes(item)) {
-            isTrue = false;
-            break;
-        }
-    for (const element of invidiousCheckListElement.getElementsByTagName('input'))
-        element.checked = invidiousDefaultRedirects.includes(element.id)
-    document.getElementById('invidious-toogle-all').checked = isTrue;
-}
-
-function calcInvidiousCustomInstances() {
-    document.getElementById("invidious-custom-checklist").innerHTML =
-        invidiousCustomInstances.map(
-            (x) => `<div>${x}<button class="add" id="clear-${x}">
-                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                            fill="currentColor">
-                                <path d="M0 0h24v24H0V0z" fill="none" />
-                                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <hr>`
-        ).join('\n');
-
-    for (const item of invidiousCustomInstances) {
-        document.getElementById(`clear-${item}`).addEventListener("click", () => {
-            let index = invidiousCustomInstances.indexOf(item);
-            if (index > -1) invidiousCustomInstances.splice(index, 1);
-            youtubeHelper.setInvidiousCustomRedirects(invidiousCustomInstances);
-            calcInvidiousCustomInstances();
-        });
-    }
-}
-
-document.getElementById("custom-invidious-instance-form").addEventListener("submit", (event) => {
-    event.preventDefault();
-    let val = invidiousCustomInstanceInput.value
-    if (invidiousCustomInstanceInput.validity.valid && !youtubeHelper.getRedirects().invidious.normal.includes(val)) {
-        if (!invidiousCustomInstances.includes(val)) {
-            invidiousCustomInstances.push(val)
-            youtubeHelper.setInvidiousCustomRedirects(invidiousCustomInstances);
-        }
-        calcInvidiousCustomInstances();
-    }
-})
\ No newline at end of file
diff --git a/src/pages/options/youtube/piped.js b/src/pages/options/youtube/piped.js
index 8f12f8ae..ed425237 100644
--- a/src/pages/options/youtube/piped.js
+++ b/src/pages/options/youtube/piped.js
@@ -1,94 +1,22 @@
 import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js";
+import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 youtubeHelper.init().then(() => {
-
-    pipedDefaultRedirects = youtubeHelper.getPipedRedirectsChecks();
-    pipedCheckListElement.innerHTML =
-        [
-            '<div>Toggle All<input type="checkbox" id="piped-toogle-all" /></div>',
-            ...youtubeHelper.getRedirects().piped.normal.map((x) => `<div>${x}<input type="checkbox" id="${x}" /></div>`),
-        ].join('\n<hr>\n');
-
-    calcPipedCheckBoxes();
-    document.getElementById('piped-toogle-all').addEventListener("change", (event) => {
-        if (event.target.checked)
-            pipedDefaultRedirects = [...youtubeHelper.getRedirects().piped.normal];
-        else
-            pipedDefaultRedirects = [];
-        youtubeHelper.setPipedRedirectsChecks(pipedDefaultRedirects);
-        calcPipedCheckBoxes();
-    });
-
-    for (let element of pipedCheckListElement.getElementsByTagName('input')) {
-        if (element.id != 'piped-toogle-all')
-            document.getElementById(element.id).addEventListener("change", (event) => {
-                if (event.target.checked)
-                    pipedDefaultRedirects.push(element.id)
-                else {
-                    let index = pipedDefaultRedirects.indexOf(element.id);
-                    if (index > -1) pipedDefaultRedirects.splice(index, 1);
-                }
-                youtubeHelper.setPipedRedirectsChecks(pipedDefaultRedirects);
-                calcPipedCheckBoxes();
-            });
-    }
-
-    pipedCustomInstances = youtubeHelper.getPipedCustomRedirects();
-    calcPipedCustomInstances();
+    commonHelper.processDefaultCustomInstances(
+        'piped',
+        youtubeHelper,
+        document,
+        youtubeHelper.getPipedRedirectsChecks,
+        youtubeHelper.setPipedRedirectsChecks,
+        youtubeHelper.getPipedCustomRedirects,
+        youtubeHelper.setPipedCustomRedirects
+    )
 });
 
 
-let pipedCustomInstanceInput = document.getElementById("piped-custom-instance");
-let pipedCustomInstances = [];
 
-let pipedCheckListElement = document.getElementById("piped-checklist");
 
-let pipedDefaultRedirects;
 
-function calcPipedCheckBoxes() {
-    let isTrue = true;
-    for (const item of youtubeHelper.getRedirects().piped.normal)
-        if (!pipedDefaultRedirects.includes(item)) {
-            isTrue = false;
-            break;
-        }
-    for (const element of pipedCheckListElement.getElementsByTagName('input'))
-        element.checked = pipedDefaultRedirects.includes(element.id)
-    document.getElementById('piped-toogle-all').checked = isTrue;
-}
 
-function calcPipedCustomInstances() {
-    document.getElementById("piped-custom-checklist").innerHTML =
-        pipedCustomInstances.map(
-            (x) => `<div>${x}<button class="add" id="clear-${x}">
-                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                            fill="currentColor">
-                                <path d="M0 0h24v24H0V0z" fill="none" />
-                                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
-                            </svg>
-                        </button>
-                    </div>
-                    <hr>`
-        ).join('\n');
 
-    for (const item of pipedCustomInstances) {
-        document.getElementById(`clear-${item}`).addEventListener("click", () => {
-            let index = pipedCustomInstances.indexOf(item);
-            if (index > -1) pipedCustomInstances.splice(index, 1);
-            youtubeHelper.setPipedCustomRedirects(pipedCustomInstances);
-            calcPipedCustomInstances();
-        });
-    }
-}
 
-document.getElementById("custom-piped-instance-form").addEventListener("submit", (event) => {
-    event.preventDefault();
-    let val = pipedCustomInstanceInput.value
-    if (pipedCustomInstanceInput.validity.valid && !youtubeHelper.getRedirects().piped.normal.includes(val)) {
-        if (!pipedCustomInstances.includes(val)) {
-            pipedCustomInstances.push(val)
-            youtubeHelper.setPipedCustomRedirects(pipedCustomInstances);
-        }
-        calcPipedCustomInstances();
-    }
-})
\ No newline at end of file