adjusts on alert display

dhowe · Mar 31, 2022 · 1181931 · 1181931
1 parent cbcaba7
commit 1181931
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 33 deletions.
diff --git a/src/_locales/en/adnauseam.json b/src/_locales/en/adnauseam.json
@@ -188,7 +188,7 @@
     "description": "shown in menu when only 'recent' Ads are shown"
   },
   "adnThisPageStrictBlocked": {
-    "message": "{{domain}} is correct strict blocked.",
+    "message": "{{domain}} is currently strict blocked.",
     "description": "shown in menu when the current page is strict blocked"
   },
   "adnExportedAdsFilename": {

diff --git a/src/css/menu.css b/src/css/menu.css
@@ -1114,4 +1114,10 @@ select {
         opacity: 0;
         margin-bottom: 0;
       }
-  }
+  }
+
+.fa-icon.info {
+  color: white;
+  fill: white;
+  opacity: 0.8;
+}
diff --git a/src/js/adn/menu.js b/src/js/adn/menu.js
@@ -24,7 +24,7 @@
 (function () {
   'use strict';
 
-  let ads, page, settings; // remove? only if we can find an updated ad already in the DOM
+  let ads, page, settings, recent; // remove? only if we can find an updated ad already in the DOM
 
   const ad_list_height = 360;
 
@@ -66,6 +66,7 @@
   const renderPage = function (json) {
     page = json && json.pageUrl;
     settings = json && json.prefs;
+    recent = json && json.recent
 
     if (page) {
       // disable pause & resume buttons for options, vault, about/chrome
@@ -80,21 +81,6 @@
     uDom("#alert-strictblock").addClass('hide'); // reset state of no ads showned
     uDom('#main').toggleClass('disabled', getIsDisabled());
 
-    // set button state
-    if (getIsDisabled()) {
-      // disabled 
-      uDom('#disable').prop('checked', true);
-    } else if (getIsStrictBlocked()) {
-      // strict blocked
-      uDom('#strict').prop('checked', true);
-      toggleStrictAlert(page, true)
-    } else {
-      // active
-      uDom('#active').prop('checked', true);
-    }
-
-
-    // disable 3 state toggle button
 
     if (typeof json !== 'undefined' && json !== null) {
       ads = json.data;
@@ -123,6 +109,20 @@
       }).then((data) => {
         renderNotifications(data.notifications)
         adjustBlockHeight(data.disableWarnings)
+
+        // set button state
+        if (getIsDisabled()) {
+          // disabled 
+          uDom('#disable').prop('checked', true);
+        } else if (getIsStrictBlocked()) {
+          // strict blocked
+          uDom('#strict').prop('checked', true);
+          toggleStrictAlert(page, true)
+        } else {
+          // active
+          uDom('#active').prop('checked', true);
+        }
+
       });
     });
   }
@@ -152,7 +152,7 @@
     const $items = uDom('#ad-list-items');
     $items.removeClass().empty();
 
-    let ads = json.data;
+    ads = json.data;
     if (ads) {
       if (json.recent) doRecent();
       for (let i = 0, j = ads.length; i < j; i++) {
@@ -373,10 +373,19 @@
   }
 
   const toggleStrictAlert = function (pageUrl, state) {
-    console.log("toggleStrictAlert", pageUrl)
+    console.log("toggleStrictAlert", pageUrl, state, ads)
+    let hostname = (new URL(pageUrl)).hostname;
+    uDom("#alert-strictblock .text").text(uDom("#alert-strictblock .text").text().replace("{{domain}}", hostname))
     if (state) {
       uDom("#alert-strictblock").removeClass('hide');
+      uDom("#alert-noads").addClass('hide');
+      uDom('#ad-list-items').addClass('recent-ads');
     } else {
+      if (recent) {
+        uDom("#alert-noads").removeClass('hide');
+      } else {
+        uDom('#ad-list-items').removeClass('recent-ads');
+      }
       uDom("#alert-strictblock").addClass('hide');
     }
   }
@@ -562,11 +571,13 @@
         onClickStrict();
         break;
       case 'disable':
+        toggleStrictAlert(popupData.pageURL, false)
         toggleEnabled(evt, false)
         // open dropdown menu
         onClickDisableArrow()
         break;
       case 'active':
+        toggleStrictAlert(popupData.pageURL, false)
         toggleEnabled(evt, true)
         break;
       default:
@@ -575,21 +586,31 @@
   }
 
   const onChangeDisabledScope = function (evt) {
-    console.log("onChangeDisabledScope", evt)
     var scope = uDom(".disable_type_radio:checked") ? uDom(".disable_type_radio:checked").val() : '' 
+    // first remove previous whichever previous scope from whitelist 
     vAPI.messaging.send(
       'adnauseam', {
       what: 'toggleEnabled',
       url: popupData.pageURL,
       scope: scope,
-      state: false,
+      state: true,
       tabId: popupData.tabId
+    }).then(() => {
+      // then re-add it with current scope
+      vAPI.messaging.send(
+        'adnauseam', {
+        what: 'toggleEnabled',
+        url: popupData.pageURL,
+        scope: scope,
+        state: false,
+        tabId: popupData.tabId
+      });
+      setTimeout(function () {
+        closePopup()
+      }, 500)
     });
-    setTimeout(function () {
-      closePopup()
-    }, 500)
   }
-
+  
   // keep in mind:
   // state == false -> disabled 
   // state == true -> active 
@@ -680,6 +701,8 @@
       'behind-the-scene' && !popupData.advancedUserEnabled)) {
       return;
     }
+    // enable alert
+    toggleStrictAlert(popupData.pageURL, true)
     uDom('#main').removeClass('disabled')
     vAPI.messaging.send(
       'adnauseam', {

diff --git a/src/js/ublock.js b/src/js/ublock.js
@@ -129,11 +129,9 @@ const matchBucket = function(url, hostname, bucket, start) {
     if ( newState === undefined ) {
         newState = !currentState;
     }
-    /*
     if ( newState === currentState ) {
         return currentState;
     }
-    */
 
     const netWhitelist = this.netWhitelist;
     const pos = url.indexOf('#');
@@ -142,10 +140,6 @@ const matchBucket = function(url, hostname, bucket, start) {
     let key = targetHostname;
     let directive = scope === 'page' ? targetURL : targetHostname;
 
-    // if the button is "active" or "disable", remove page from strictBlock
-    // this.removePageFromStrictBlockList(this.netStrictBlockList, targetURL, targetHostname) 
-    // end ADN
-
     // Add to directive list
     if ( newState === false ) {
         let bucket = netWhitelist.get(key);

diff --git a/src/menu.html b/src/menu.html
@@ -9,6 +9,8 @@
   <link rel="stylesheet" href="css/fonts/stylesheet.css">
   <link rel="stylesheet" href="css/common.css">
   <link rel="stylesheet" href="css/menu.css">
+  <link rel="stylesheet" href="css/fa-icons.css">
+
 </head>
 
 <body class="active">
@@ -53,7 +55,7 @@ <h2 id="paused-no-hiding" data-i18n="adnNotHiding" class='hide'></h2>
 
         <div id="alert-strictblock" class="alert hide">
           <img src="img/alert.png" alt="alert">
-          <p data-i18n="adnThisPageStrictBlocked"></p>
+          <p><span data-i18n="adnThisPageStrictBlocked" class="text"></span><span><a class="fa-icon info" href="https://github.com/dhowe/AdNauseam/wiki/Developer-FAQ#what-is-strict-blocking-and-when-should-i-use-it" target="_blank">question-circle</a></span></p>
         </div>
 
         <ul id='ad-list-items'></ul>
@@ -153,6 +155,7 @@ <h2 id="paused-no-hiding" data-i18n="adnNotHiding" class='hide'></h2>
 
 
   </div>
+  <script src="js/fa-icons.js"></script>
   <script src="js/vapi.js"></script>
   <script src="js/vapi-common.js"></script>
   <script src="js/vapi-client.js"></script>