Hide watch/blacklist buttons when action has already been taken

userscripters · Dec 3, 2023 · aea03ce · aea03ce
1 parent 89a4c8d
commit aea03ce
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/dist/fire_extra.user.js b/dist/fire_extra.user.js
@@ -360,9 +360,11 @@
     const container = document.createElement("div");
     const watchButton = document.createElement("a");
     watchButton.classList.add("fire-extra-watch");
+    watchButton.style.display = "none";
     watchButton.innerHTML = "!!/watch";
     const blacklistButton = document.createElement("a");
     blacklistButton.classList.add("fire-extra-blacklist");
+    blacklistButton.style.display = "none";
     blacklistButton.innerHTML = "!!/blacklist";
     container.append(watchButton, blacklistButton);
     return container;
@@ -547,15 +549,12 @@
     const watch = {
       human: helpers.getActionDone("watched", isWatched),
       tooltip: helpers.getButtonsText("watch", term, isWatched || isBlacklisted, domainName),
-      suggested: qualifiesForWatch && !isWatched && !isBlacklisted,
-      // note the button should be disabled if the domain is blacklisted
-      class: `fire-extra-${isWatched || isBlacklisted ? "disabled" : "watch"}`
+      suggested: qualifiesForWatch && !isWatched && !isBlacklisted
     };
     const blacklist = {
       human: helpers.getActionDone("blacklisted", isBlacklisted),
       tooltip: helpers.getButtonsText("blacklist", term, isBlacklisted, domainName),
-      suggested: qualifiesForBlacklist && !isBlacklisted,
-      class: `fire-extra-${isBlacklisted ? "disabled" : "blacklist"}`
+      suggested: qualifiesForBlacklist && !isBlacklisted
     };
     const watchInfo = domainLi?.querySelector(".fire-extra-watch-info");
     const blacklistInfo = domainLi?.querySelector(".fire-extra-blacklist-info");
@@ -573,8 +572,12 @@
       watchButton.append(" ", getTick());
     if (blacklist.suggested)
       blacklistButton.append(" ", getTick());
-    watchButton.classList.add(watch.class);
-    blacklistButton.classList.add(blacklist.class);
+    if (!isBlacklisted) {
+      blacklistButton.style.display = "inline";
+      if (!isWatched) {
+        watchButton.style.display = "inline";
+      }
+    }
     watchButton.setAttribute("fire-tooltip", watch.tooltip);
     blacklistButton.setAttribute("fire-tooltip", blacklist.tooltip);
   }

diff --git a/src/dom_utils.ts b/src/dom_utils.ts
@@ -37,10 +37,12 @@ export function getWatchBlacklistButtons(): HTMLDivElement {
 
     const watchButton = document.createElement('a');
     watchButton.classList.add('fire-extra-watch');
+    watchButton.style.display = 'none';
     watchButton.innerHTML = '!!/watch';
 
     const blacklistButton = document.createElement('a');
     blacklistButton.classList.add('fire-extra-blacklist');
+    blacklistButton.style.display = 'none';
     blacklistButton.innerHTML = '!!/blacklist';
 
     container.append(watchButton, blacklistButton);

diff --git a/src/index.ts b/src/index.ts
@@ -134,15 +134,12 @@ function updateEmojisInformation(term: string): void {
         human: helpers.getActionDone('watched', isWatched),
         tooltip: helpers.getButtonsText('watch', term, isWatched || isBlacklisted, domainName),
         suggested: qualifiesForWatch && !isWatched && !isBlacklisted,
-        // note the button should be disabled if the domain is blacklisted
-        class: `fire-extra-${isWatched || isBlacklisted ? 'disabled' : 'watch'}`
     };
 
     const blacklist = {
         human: helpers.getActionDone('blacklisted', isBlacklisted),
         tooltip: helpers.getButtonsText('blacklist', term, isBlacklisted, domainName),
         suggested: qualifiesForBlacklist && !isBlacklisted,
-        class: `fire-extra-${isBlacklisted ? 'disabled' : 'blacklist'}`
     };
 
     const watchInfo = domainLi?.querySelector('.fire-extra-watch-info');
@@ -158,8 +155,8 @@ function updateEmojisInformation(term: string): void {
     watchInfo.replaceChildren('👀: ', isWatched ? getTick() : getCross());
     blacklistInfo.replaceChildren('🚫: ', isBlacklisted ? getTick() : getCross());
 
-    const watchButton = domainLi?.querySelector('.fire-extra-watch');
-    const blacklistButton = domainLi?.querySelector('.fire-extra-blacklist');
+    const watchButton = domainLi?.querySelector<HTMLElement>('.fire-extra-watch');
+    const blacklistButton = domainLi?.querySelector<HTMLElement>('.fire-extra-blacklist');
 
     // the buttons do not exist if a PR is pending
     if (!watchButton || !blacklistButton) return;
@@ -168,9 +165,14 @@ function updateEmojisInformation(term: string): void {
     if (watch.suggested) watchButton.append(' ', getTick());
     if (blacklist.suggested) blacklistButton.append(' ', getTick());
 
-    // disable buttons if necessary
-    watchButton.classList.add(watch.class);
-    blacklistButton.classList.add(blacklist.class);
+    // show buttons if action has not been taken
+    if (!isBlacklisted){
+        blacklistButton.style.display = 'inline';
+
+        if (!isWatched){
+            watchButton.style.display = 'inline';
+        }
+    }
 
     // add the tooltips (either !!/<action> example\.com or domain already <action>)
     watchButton.setAttribute('fire-tooltip', watch.tooltip);