From 84fdd5cfd60f0190adb7139a7f90deb0c69420e3 Mon Sep 17 00:00:00 2001
From: eight <eight04@gmail.com>
Date: Mon, 11 Feb 2019 12:30:16 +0800
Subject: [PATCH] Add: hook exclusion UI

---
 popup.html     |  4 ++--
 popup/popup.js | 29 +++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/popup.html b/popup.html
index 6d0d499a..75d8be2d 100644
--- a/popup.html
+++ b/popup.html
@@ -56,7 +56,7 @@
         <label class="menu-item exclude-by-domain button">
           <div class="menu-icon">
             <div class="checkbox-container">
-              <input type="checkbox" class="checker">
+              <input type="checkbox" class="exclude-by-domain-checkbox">
               <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
             </div>
           </div>
@@ -65,7 +65,7 @@
         <label class="menu-item exclude-by-url button">
           <div class="menu-icon">
             <div class="checkbox-container">
-              <input type="checkbox" class="checker">
+              <input type="checkbox" class="exclude-by-url-checkbox">
               <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
             </div>
           </div>
diff --git a/popup/popup.js b/popup/popup.js
index b6fd8135..b22b1219 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -311,6 +311,9 @@ function createStyleElement(style) {
     $('.main-controls', entry).appendChild(indicator);
 
     $('.menu-button', entry).onclick = handleEvent.toggleMenu;
+
+    $('.exclude-by-domain-checkbox').onchange = e => handleEvent.toggleExclude(e, 'domain');
+    $('.exclude-by-url-checkbox').onchange = e => handleEvent.toggleExclude(e, 'url');
   }
 
   style = Object.assign(entry.styleMeta, style);
@@ -331,9 +334,26 @@ function createStyleElement(style) {
   entry.classList.toggle('not-applied', style.excluded || style.sloppy);
   entry.classList.toggle('regexp-partial', style.sloppy);
 
+  $('.exclude-by-domain-checkbox', entry).checked = styleExcluded(style, 'domain');
+  $('.exclude-by-url-checkbox', entry).checked = styleExcluded(style, 'url');
+
   return entry;
 }
 
+function styleExcluded({exclusions}, type) {
+  if (!exclusions) {
+    return false;
+  }
+  const rule = getExcludeRule(type);
+  return exclusions.includes(rule);
+}
+
+function getExcludeRule(type) {
+  if (type === 'domain') {
+    return new URL(tabURL).origin + '/*';
+  }
+  return tabURL + '*';
+}
 
 Object.assign(handleEvent, {
 
@@ -358,6 +378,15 @@ Object.assign(handleEvent, {
       .then(sortStylesInPlace);
   },
 
+  toggleExclude(event, type) {
+    const entry = handleEvent.getClickedStyleElement(event);
+    if ($(`.exclude-by-${type}-checkbox`, entry).checked) {
+      API.removeExclusion(entry.styleMeta.id, getExcludeRule(type));
+    } else {
+      API.addExclusion(entry.styleMeta.id, getExcludeRule(type));
+    }
+  },
+
   toggleMenu(event) {
     const entry = handleEvent.getClickedStyleElement(event);
     entry.classList.toggle('menu-active');