Rewrote Exceptions logic and design #29

author: ManeraKai <manerakai@protonmail.com> 2022-02-12 20:40:36 +0300
committer: ManeraKai <manerakai@protonmail.com> 2022-02-12 20:40:36 +0300
commit: 531e7c5fb4c6d0bc9e15a2d04ee9e0188b11e0d0 (patch)
tree: 4fb12639d0ac0f1f2b360fe3169392a5f8621be2
parent: Added redirecting feature #6, will improve it (diff)
download: libredirect-531e7c5fb4c6d0bc9e15a2d04ee9e0188b11e0d0.zip
11 files changed, 151 insertions, 149 deletions
diff --git a/src/assets/javascripts/data.js b/src/assets/javascripts/data.js
deleted file mode 100644
index bf0666ba..00000000
--- a/src/assets/javascripts/data.js
+++ /dev/null
@@ -1,12 +0,0 @@
-"use strict";
-
-let theme;
-function setTheme(val) {
-    theme = val;
-    browser.storage.sync.set({ theme })
-};
-
-export default {
-    theme,
-    setTheme,
-}
-\ No newline at end of file
diff --git a/src/assets/javascripts/helpers/common.js b/src/assets/javascripts/helpers/common.js
index 74f8edf5..e6d4895f 100644
--- a/src/assets/javascripts/helpers/common.js
+++ b/src/assets/javascripts/helpers/common.js
@@ -4,7 +4,6 @@ import instagramHelper from "./instagram.js";
 import mediumHelper from "./medium.js";
 import redditHelper from "./reddit.js";
 import searchHelper from "./search.js";
-import data from '../data.js'
 import translateHelper from "./translate.js";
 import wikipediaHelper from "./wikipedia.js";
 import mapsHelper from "./maps.js";
diff --git a/src/assets/javascripts/helpers/exceptions.js b/src/assets/javascripts/helpers/exceptions.js
new file mode 100644
index 00000000..9b7f1b59
--- /dev/null
+++ b/src/assets/javascripts/helpers/exceptions.js
@@ -0,0 +1,35 @@
+"use strict";
+
+let exceptions = {
+    "url": [],
+    "regex": [],
+};
+const getExceptions = () => exceptions;
+function setExceptions(val) {
+    exceptions = val;
+    browser.storage.sync.set({ exceptions })
+    console.log("exceptions: ", val)
+}
+
+async function init() {
+    let result = await browser.storage.sync.get("exceptions");
+    if (result.exceptions) exceptions = result.exceptions;
+}
+
+function isException(url) {
+    for (const item of exceptions.url) {
+        console.log(item, `${url.protocol}//${url.host}`)
+        if (item == `${url.protocol}//${url.host}`) return true;
+    }
+    for (const item of exceptions.regex)
+        if (new RegExp(item).test(url.href)) return true;
+    return false;
+}
+
+export default {
+    getExceptions,
+    setExceptions,
+
+    isException,
+    init,
+}
+\ No newline at end of file
diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js
index be20b726..b8665dff 100644
--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@@ -5,12 +5,12 @@ import commonHelper from '../common.js'
 window.browser = window.browser || window.chrome;
 
 const targets = [
-  /https?:\/\/(www\.|music|m)youtube\.com(\/.*|$)/,
+  /https?:\/\/(www\.|music\.|m\.|)youtube\.com(\/.*|$)/,
 
   /https?:\/\/img\.youtube\.com\/vi\/.*\/..*/, // https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
   /https?:\/\/(i|s)\.ytimg\.com\/vi\/.*\/..*/,
 
-  /https?:\/\/(www\.|music|)youtube\.com\/watch\?v\=..*/,
+  /https?:\/\/(www\.|music\.|)youtube\.com\/watch\?v\=..*/,
 
   /https?:\/\/youtu\.be\/..*/,
 
diff --git a/src/pages/background/background.html b/src/pages/background/background.html
index a24e1594..c9ae2a81 100644
--- a/src/pages/background/background.html
+++ b/src/pages/background/background.html
@@ -3,7 +3,6 @@
 
 <head>
   <meta charset="utf-8" />
-  <script type="module" src="../../assets/javascripts/data.js"></script>
   <script type="module" src="background.js"></script>
 </head>
 
diff --git a/src/pages/background/background.js b/src/pages/background/background.js
index aa97e2f6..940a2ed7 100644
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@@ -11,6 +11,7 @@ import wikipediaHelper from "../../assets/javascripts/helpers/wikipedia.js";
 import mediumHelper from "../../assets/javascripts/helpers/medium.js";
 import imgurHelper from "../../assets/javascripts/helpers/imgur.js";
 import tiktokHelper from "../../assets/javascripts/helpers/tiktok.js";
+import exceptionsHelper from "../../assets/javascripts/helpers/exceptions.js";
 
 window.browser = window.browser || window.chrome;
 
@@ -26,6 +27,7 @@ function wholeInit() {
   youtubeHelper.init()
   imgurHelper.init()
   tiktokHelper.init()
+  exceptionsHelper.init()
 }
 
 wholeInit();
@@ -43,7 +45,9 @@ browser.webRequest.onBeforeRequest.addListener(
 
     var newUrl;
 
-    if (youtubeHelper.isYoutube(url)) newUrl = youtubeHelper.redirect(url, initiator, details.type)
+    if (exceptionsHelper.isException(url)) newUrl = null;
+
+    else if (youtubeHelper.isYoutube(url)) newUrl = youtubeHelper.redirect(url, initiator, details.type)
 
     else if (twitterHelper.isTwitter(url)) newUrl = twitterHelper.redirect(url, initiator);
 
diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html
index 89b80b11..fbdc52ec 100644
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@@ -122,9 +122,36 @@
       </a>
     </div>
 
-    <script type="module" src="../init.js"></script>
-    <script type="module" src="./general.js"></script>
-    <!-- <script src="../../assets/javascripts/localise.js"></script> -->
+    <div class="some-block option-block">
+      <h4>Exceptions</h4>
+    </div>
+
+    <form id="custom-exceptions-instance-form">
+      <div class="some-block option-block">
+        <div class="some-block" style="padding:0;">
+          <input id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" />
+          &nbsp;
+          <select id="exceptions-custom-instance-type">
+            <option value="url">URL</option>
+            <option value="regex">Regex</option>
+          </select>
+          &nbsp;
+        </div>
+        <button type="submit" class="add" id="exceptions-add-instance">
+          <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 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+          </svg>
+        </button>
+      </div>
+    </form>
+    <div class="checklist" id="exceptions-custom-checklist"></div>
+    </a>
+  </section>
+
+  <script type="module" src="../init.js"></script>
+  <script type="module" src="./general.js"></script>
+  <!-- <script src="../../assets/javascripts/localise.js"></script> -->
 </body>
 
 </html>
 \ No newline at end of file
diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js
index 07097aaf..de69a487 100644
--- a/src/pages/options/general/general.js
+++ b/src/pages/options/general/general.js
@@ -1,49 +1,17 @@
 "use strict";
 
-import data from "../../../assets/javascripts/data.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
-
-import shared from "../shared.js";
-
-const domparser = new DOMParser();
+import exceptionsHelper from "../../../assets/javascripts/helpers/exceptions.js";
 
 let themeElement = document.getElementById("theme");
 
 window.browser = window.browser || window.chrome;
 
-// function prependExceptionsItem(item, index) {
-//   const li = document.createElement("li");
-//   li.appendChild(document.createTextNode(item.toString()));
-//   const button = document.createElement("button");
-//   li.appendChild(button);
-//   document.getElementById("exceptions-items").prepend(li);
-//   const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
-//       <line x1='368' y1='368' x2='144' y2='144'
-//         style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-//       <line x1='368' y1='144' x2='144' y2='368'
-//         style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-//     </svg>`;
-//   button.appendChild(domparser.parseFromString(svg, "image/svg+xml").documentElement);
-//   button.addEventListener("click", () => {
-//     exceptions.splice(index, 1);
-//     browser.storage.sync.set({ exceptions: exceptions });
-//     li.remove();
-//   });
-// }
-
 browser.storage.sync.get(
-  [
-    // "exceptions",
-    "theme",
-  ],
+  ["theme"],
   (result) => {
-    data.theme = result.theme || "";
     themeElement.value = result.theme || "";
-    if (result.theme) document.body.classList.add(result.theme);
-    // data.exceptions = result.exceptions || [];
-    // data.exceptions.forEach(prependExceptionsItem);
-    shared.autocompletes.forEach((value) => {
-    });
+
   }
 );
 
@@ -56,10 +24,85 @@ document.querySelector("#update-instances").addEventListener("click", () => {
   document.querySelector("#update-instances").innerHTML = '...';
   if (commonHelper.updateInstances()) {
     document.querySelector("#update-instances").innerHTML = 'Done!';
-    new Promise(resolve => setTimeout(resolve, 1500)).then( // Sleep 1500ms
+    new Promise(resolve => setTimeout(resolve, 1500)).then( // sleep 1500ms
       () => document.querySelector("#update-instances").innerHTML = 'Update Instances'
     )
   }
   else
     document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
 });
+let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance");
+let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
+let instanceType = "url"
+
+exceptionsHelper.init().then(() => {
+  instanceTypeElement.addEventListener("change",
+    (event) => {
+      instanceType = event.target.options[instanceTypeElement.selectedIndex].value
+      if (instanceType == 'url') {
+        nameCustomInstanceInput.setAttribute("type", "url");
+        nameCustomInstanceInput.setAttribute("placeholder", "https://www.google.com");
+      }
+      else if (instanceType == 'regex') {
+        nameCustomInstanceInput.setAttribute("type", "text");
+        nameCustomInstanceInput.setAttribute("placeholder", "https?:\/\/(www\.|music|)youtube\.com\/watch\?v\=..*");
+      }
+    }
+  )
+  let exceptionsCustomInstances = exceptionsHelper.getExceptions();
+  function calcExceptionsCustomInstances() {
+    console.log("exceptionsCustomInstances", exceptionsCustomInstances)
+    document.getElementById("exceptions-custom-checklist").innerHTML =
+      [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex].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 x of [...exceptionsCustomInstances.url, ...exceptionsCustomInstances.regex]) {
+      document.getElementById(`clear-${x}`).addEventListener("click",
+        () => {
+          console.log(x);
+          let index;
+          index = exceptionsCustomInstances.url.indexOf(x);
+          if (index > -1)
+            exceptionsCustomInstances.url.splice(index, 1);
+          else {
+            index = exceptionsCustomInstances.regex.indexOf(x);
+            if (index > -1)
+              exceptionsCustomInstances.regex.splice(index, 1);
+          }
+          exceptionsHelper.setExceptions(exceptionsCustomInstances);
+          calcExceptionsCustomInstances();
+        });
+    }
+  }
+  calcExceptionsCustomInstances();
+  document.getElementById("custom-exceptions-instance-form").addEventListener("submit", (event) => {
+    event.preventDefault();
+
+    let val
+    if (instanceType == 'url') {
+      if (nameCustomInstanceInput.validity.valid) {
+        let url = new URL(nameCustomInstanceInput.value);
+        val = `${url.protocol}//${url.host}`
+        if (!exceptionsCustomInstances.url.includes(val)) exceptionsCustomInstances.url.push(val)
+      }
+    } else if (instanceType == 'regex') {
+      val = nameCustomInstanceInput.value
+      if (val.trim() != '' && !exceptionsCustomInstances.regex.includes(val)) exceptionsCustomInstances.regex.push(val)
+    }
+    if (val) {
+      exceptionsHelper.setExceptions(exceptionsCustomInstances);
+      console.log("exceptionsCustomInstances", exceptionsCustomInstances)
+      nameCustomInstanceInput.value = '';
+    }
+    calcExceptionsCustomInstances();
+  })
+})
+\ No newline at end of file
diff --git a/src/pages/options/shared.js b/src/pages/options/shared.js
index 36f2ef27..ccc29693 100644
--- a/src/pages/options/shared.js
+++ b/src/pages/options/shared.js
@@ -17,96 +17,6 @@ function parseURL(urlString) {
         return "";
 }
 
-function autocomplete(input, list) {
-    let currentFocus;
-    input.addEventListener("focus", (e) => {
-        showOptions(e, true);
-    });
-    input.addEventListener("input", (e) => {
-        const val = e.target.value;
-        if (!val) {
-            return false;
-        }
-        currentFocus = -1;
-        showOptions(e);
-    });
-    input.addEventListener("keydown", function (e) {
-        let x = document.getElementById(this.id + "autocomplete-list");
-        if (x) x = x.getElementsByTagName("div");
-        if (e.keyCode == 40) {
-            currentFocus++;
-            addActive(x);
-        } else if (e.keyCode == 38) {
-            currentFocus--;
-            addActive(x);
-        } else if (e.keyCode == 13) {
-            e.preventDefault();
-            if (currentFocus > -1) {
-                if (x) x[currentFocus].click();
-            }
-        }
-    });
-    function showOptions(event, showAll = false) {
-        let div,
-            i,
-            val = event.target.value;
-        closeAllLists();
-        div = document.createElement("div");
-        div.setAttribute("id", event.target.id + "autocomplete-list");
-        div.setAttribute("class", "autocomplete-items");
-        event.target.parentNode.appendChild(div);
-        for (i = 0; i < list.length; i++) {
-            if (list[i].toLowerCase().indexOf(val.toLowerCase()) > -1) {
-                div.appendChild(getItem(list[i], val));
-            } else if (showAll) {
-                div.appendChild(getItem(list[i], val));
-            }
-        }
-    }
-    function getItem(item, val) {
-        const div = document.createElement("div");
-        const strong = document.createElement("strong");
-        strong.textContent = item.substr(0, val.length);
-        div.innerText = item.substr(val.length);
-        const hiddenInput = document.createElement("input");
-        hiddenInput.type = "hidden";
-        hiddenInput.value = item;
-        div.prepend(strong);
-        div.appendChild(hiddenInput);
-        div.addEventListener("click", function (e) {
-            input.value = div.getElementsByTagName("input")[0].value;
-            input.dispatchEvent(new Event("input"));
-            closeAllLists();
-        });
-        return div;
-    }
-    function addActive(x) {
-        if (!x) return false;
-        removeActive(x);
-        if (currentFocus >= x.length) currentFocus = 0;
-        if (currentFocus < 0) currentFocus = x.length - 1;
-        x[currentFocus].classList.add("autocomplete-active");
-    }
-    function removeActive(x) {
-        for (let i = 0; i < x.length; i++) {
-            x[i].classList.remove("autocomplete-active");
-        }
-    }
-    function closeAllLists(elmnt) {
-        let x = document.getElementsByClassName("autocomplete-items");
-        for (let i = 0; i < x.length; i++) {
-            if (elmnt != x[i] && elmnt != input) {
-                x[i].parentNode.removeChild(x[i]);
-            }
-        }
-    }
-    document.addEventListener("click", (e) => {
-        if (!autocompletes.find((element) => element.id === e.target.id)) {
-            closeAllLists(e.target);
-        }
-    });
-}
-
 export default {
     autocompletes,
     parseURL,
diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js
index 8d7a7bb5..28b3121c 100644
--- a/src/pages/popup/popup.js
+++ b/src/pages/popup/popup.js
@@ -1,7 +1,6 @@
 "use strict";
 
 import commonHelper from "../../assets/javascripts/helpers/common.js";
-import data from "../../assets/javascripts/data.js";
 import youtubeHelper from "../../assets/javascripts/helpers/youtube/youtube.js";
 import twitterHelper from "../../assets/javascripts/helpers/twitter.js";
 import instagramHelper from "../../assets/javascripts/helpers/instagram.js";
@@ -43,7 +42,6 @@ async function wholeInit() {
 };
 
 wholeInit().then(() => {
-  if (data.theme) document.body.classList.add(data.theme);
   disableTwitterElement.checked = !twitterHelper.getDisableTwitter();
   disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
   disableInstagramElement.checked = !instagramHelper.getDisableInstagram();
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index 1ce529f1..6293184f 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -43,7 +43,6 @@ select {
   width: 350px;
   border-radius: 3px;
   box-sizing: border-box;
-  margin-bottom: var(--space);
   background-color: var(--bg-main);
   border-style: solid;
   border-color: #767676;
author	ManeraKai <manerakai@protonmail.com>	2022-02-12 20:40:36 +0300
committer	ManeraKai <manerakai@protonmail.com>	2022-02-12 20:40:36 +0300
commit	531e7c5fb4c6d0bc9e15a2d04ee9e0188b11e0d0 (patch)
tree	4fb12639d0ac0f1f2b360fe3169392a5f8621be2
parent	Added redirecting feature #6, will improve it (diff)
download	libredirect-531e7c5fb4c6d0bc9e15a2d04ee9e0188b11e0d0.zip