Feature: Add Hide Votes (fixes #4)

source/assets/manifest.json

@@ -46,7 +46,8 @@
         "../ts/scripts/jump-to-new-comment.ts",
         "../ts/scripts/back-to-top.ts",
         "../ts/scripts/user-labels.ts",
-        "../ts/scripts/markdown-toolbar.ts"
+        "../ts/scripts/markdown-toolbar.ts",
+        "../ts/scripts/hide-votes.ts"
       ]
     }
   ],

source/html/options.html

@@ -26,6 +26,9 @@
         <a id="back-to-top-list">
           Back To Top
         </a>
+        <a id="hide-votes-list">
+          Hide Votes
+        </a>
         <a id="jump-to-new-comment-list">
           Jump To New Comment
         </a>
@@ -53,6 +56,38 @@
             </p>
           </div>
         </div>
+        <div id="hide-votes" class="setting">
+          <header>
+            <h2>Hide Votes</h2>
+            <button id="hide-votes-button"></button>
+          </header>
+          <div class="content">
+            <p>
+              Select which vote counts you don't want to see, "Comments" and
+              "Topics" will hide the votes on other people's comments/topics
+              while "Own Comments/Topics" will hide the votes on your own
+              comments/topics.
+            </p>
+            <form>
+              <div>
+                <input type="checkbox" id="hide-votes-comments">
+                <label for="hide-votes-comments">Comments</label>
+              </div>
+              <div>
+                <input type="checkbox" id="hide-votes-topics">
+                <label for="hide-votes-topics">Topics</label>
+              </div>
+              <div>
+                <input type="checkbox" id="hide-votes-own-comments">
+                <label for="hide-votes-own-comments">Own Comments</label>
+              </div>
+              <div>
+                <input type="checkbox" id="hide-votes-own-topics">
+                <label for="hide-votes-own-topics">Own Topics</label>
+              </div>
+            </form>
+          </div>
+        </div>
         <div id="jump-to-new-comment" class="setting">
           <header>
             <h2>Jump To New Comment</h2>

source/scss/_options.scss

@@ -200,6 +200,16 @@ p > .red-re {
   }
 }
 
+#hide-votes {
+  form {
+    margin-left: 1rem;
+
+    > div {
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
 #import-export {
   align-items: center;
   display: flex;

source/ts/import-export.ts

@@ -62,6 +62,10 @@ export async function importFileHandler(event: Event): Promise<void> {
             });
           }
         }
+
+        if (typeof data.data.hideVotes !== 'undefined') {
+          newSettings.data.hideVotes = data.data.hideVotes;
+        }
       }
 
       if (typeof data.features !== 'undefined') {

source/ts/options.ts

@@ -20,6 +20,7 @@ import {
 window.addEventListener(
   'load',
   async (): Promise<void> => {
+    const settings: Settings = await getSettings();
     // Grab the version anchor from the header and add the tag link to it.
     const versionSpan: HTMLAnchorElement = querySelector('#version');
     const {version} = browser.runtime.getManifest();
@@ -38,6 +39,23 @@ window.addEventListener(
       )
     );
 
+    ['comments', 'topics', 'own-comments', 'own-topics'].forEach(
+      (val: string): void => {
+        const hideCheckbox: HTMLInputElement = querySelector(
+          `#hide-votes-${val}`
+        );
+        const settingsKey: string = kebabToCamel(val);
+        hideCheckbox.checked = settings.data.hideVotes[settingsKey];
+        hideCheckbox.addEventListener(
+          'change',
+          async (): Promise<void> => {
+            settings.data.hideVotes[settingsKey] = hideCheckbox.checked;
+            await setSettings(settings);
+          }
+        );
+      }
+    );
+
     const importSettingsButton: HTMLButtonElement = querySelector(
       '#import-button'
     );
@@ -66,10 +84,6 @@ window.addEventListener(
     );
     removeAllDataButton.addEventListener('click', removeAllDataHandler);
 
-    // Get the settings and add a bunch of behaviours for them.
-    const settings: Settings = await getSettings();
-    // log(settings);
-
     // Set the latest feature to active.
     const latestActiveListItem: HTMLAnchorElement = querySelector(
       `#${settings.data.latestActiveFeatureTab}-list`

source/ts/scripts/hide-votes.ts

@@ -0,0 +1,82 @@
+import {Settings, getSettings} from '../utilities';
+
+(async (): Promise<void> => {
+  const settings: Settings = await getSettings();
+  if (!settings.features.hideVotes) {
+    return;
+  }
+
+  const observer: MutationObserver = new window.MutationObserver(
+    async (): Promise<void> => {
+      observer.disconnect();
+      await hideVotes();
+      startObserver();
+    }
+  );
+
+  function startObserver(): void {
+    observer.observe(document, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  await hideVotes();
+  startObserver();
+})();
+
+async function hideVotes(): Promise<void> {
+  const settings: Settings = await getSettings();
+  if (settings.data.hideVotes.comments) {
+    const commentVotes: HTMLButtonElement[] = [
+      ...document.querySelectorAll(
+        '.btn-post-action[name="vote"]:not(.trx-votes-hidden)'
+      ),
+      ...document.querySelectorAll(
+        '.btn-post-action[name="unvote"]:not(.trx-votes-hidden)'
+      )
+    ] as HTMLButtonElement[];
+    for (const vote of commentVotes) {
+      vote.classList.add('trx-votes-hidden');
+      vote.textContent = vote.textContent!.slice(
+        0,
+        vote.textContent!.indexOf(' ')
+      );
+    }
+  }
+
+  if (settings.data.hideVotes.ownComments) {
+    const commentVotes: NodeListOf<HTMLDivElement> = document.querySelectorAll(
+      '.comment-votes'
+    );
+    for (const vote of commentVotes) {
+      vote.classList.add('trx-hidden');
+    }
+  }
+
+  if (settings.data.hideVotes.topics || settings.data.hideVotes.ownTopics) {
+    // Topics by other people will be encapsulated with a `<button>`.
+    const topicVotes: Element[] = [];
+    if (settings.data.hideVotes.topics) {
+      topicVotes.push(
+        ...document.querySelectorAll(
+          'button > .topic-voting-votes:not(.trx-votes-hidden)'
+        )
+      );
+    }
+
+    // Topics by yourself will be encapsulated with a `<div>`.
+    if (settings.data.hideVotes.ownTopics) {
+      topicVotes.push(
+        ...document.querySelectorAll(
+          'div > .topic-voting-votes:not(.trx-votes-hidden)'
+        )
+      );
+    }
+
+    for (const vote of topicVotes) {
+      vote.classList.add('trx-votes-hidden');
+      vote.textContent = '-';
+    }
+  }
+}

source/ts/utilities.ts

@@ -11,6 +11,13 @@ export interface UserLabel {
 
 export interface Settings {
   data: {
+    hideVotes: {
+      comments: boolean;
+      topics: boolean;
+      ownComments: boolean;
+      ownTopics: boolean;
+      [index: string]: boolean;
+    };
     latestActiveFeatureTab: string;
     userLabels: UserLabel[];
     version?: string;
@@ -18,6 +25,7 @@ export interface Settings {
   features: {
     backToTop: boolean;
     debug: boolean;
+    hideVotes: boolean;
     jumpToNewComment: boolean;
     markdownToolbar: boolean;
     userLabels: boolean;
@@ -27,12 +35,19 @@ export interface Settings {
 
 export const defaultSettings: Settings = {
   data: {
+    hideVotes: {
+      comments: true,
+      topics: true,
+      ownComments: true,
+      ownTopics: true
+    },
     latestActiveFeatureTab: 'debug',
     userLabels: []
   },
   features: {
     backToTop: true,
     debug: false,
+    hideVotes: false,
     jumpToNewComment: true,
     markdownToolbar: true,
     userLabels: true