diff --git a/source/assets/manifest.json b/source/assets/manifest.json index 5321919..9469565 100644 --- a/source/assets/manifest.json +++ b/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" ] } ], diff --git a/source/html/options.html b/source/html/options.html index a86d0a1..9c3f5ce 100644 --- a/source/html/options.html +++ b/source/html/options.html @@ -26,6 +26,9 @@ Back To Top + + Hide Votes + Jump To New Comment @@ -53,6 +56,38 @@

+
+
+

Hide Votes

+ +
+
+

+ 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. +

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+

Jump To New Comment

diff --git a/source/scss/_options.scss b/source/scss/_options.scss index 4ab82f9..41b71d0 100644 --- a/source/scss/_options.scss +++ b/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; diff --git a/source/ts/import-export.ts b/source/ts/import-export.ts index 8cfb4e9..e26f685 100644 --- a/source/ts/import-export.ts +++ b/source/ts/import-export.ts @@ -62,6 +62,10 @@ export async function importFileHandler(event: Event): Promise { }); } } + + if (typeof data.data.hideVotes !== 'undefined') { + newSettings.data.hideVotes = data.data.hideVotes; + } } if (typeof data.features !== 'undefined') { diff --git a/source/ts/options.ts b/source/ts/options.ts index 6e04025..46d9ce2 100644 --- a/source/ts/options.ts +++ b/source/ts/options.ts @@ -20,6 +20,7 @@ import { window.addEventListener( 'load', async (): Promise => { + 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 => { + 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` diff --git a/source/ts/scripts/hide-votes.ts b/source/ts/scripts/hide-votes.ts new file mode 100644 index 0000000..3adf3cc --- /dev/null +++ b/source/ts/scripts/hide-votes.ts @@ -0,0 +1,82 @@ +import {Settings, getSettings} from '../utilities'; + +(async (): Promise => { + const settings: Settings = await getSettings(); + if (!settings.features.hideVotes) { + return; + } + + const observer: MutationObserver = new window.MutationObserver( + async (): Promise => { + observer.disconnect(); + await hideVotes(); + startObserver(); + } + ); + + function startObserver(): void { + observer.observe(document, { + childList: true, + subtree: true + }); + } + + await hideVotes(); + startObserver(); +})(); + +async function hideVotes(): Promise { + 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 = 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 `