2 files changed, 109 insertions, 39 deletions

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