1
Fork 0

Feature: Add Hide Votes (fixes #4)

This commit is contained in:
Bauke 2019-11-12 22:18:48 +01:00
parent 5a299a7efe
commit 46864cc5fc
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
7 changed files with 166 additions and 5 deletions

View File

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

View File

@ -26,6 +26,9 @@
<a id="back-to-top-list"> <a id="back-to-top-list">
Back To Top Back To Top
</a> </a>
<a id="hide-votes-list">
Hide Votes
</a>
<a id="jump-to-new-comment-list"> <a id="jump-to-new-comment-list">
Jump To New Comment Jump To New Comment
</a> </a>
@ -53,6 +56,38 @@
</p> </p>
</div> </div>
</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"> <div id="jump-to-new-comment" class="setting">
<header> <header>
<h2>Jump To New Comment</h2> <h2>Jump To New Comment</h2>

View File

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

View File

@ -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') { if (typeof data.features !== 'undefined') {

View File

@ -20,6 +20,7 @@ import {
window.addEventListener( window.addEventListener(
'load', 'load',
async (): Promise<void> => { async (): Promise<void> => {
const settings: Settings = await getSettings();
// Grab the version anchor from the header and add the tag link to it. // Grab the version anchor from the header and add the tag link to it.
const versionSpan: HTMLAnchorElement = querySelector('#version'); const versionSpan: HTMLAnchorElement = querySelector('#version');
const {version} = browser.runtime.getManifest(); 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( const importSettingsButton: HTMLButtonElement = querySelector(
'#import-button' '#import-button'
); );
@ -66,10 +84,6 @@ window.addEventListener(
); );
removeAllDataButton.addEventListener('click', removeAllDataHandler); 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. // Set the latest feature to active.
const latestActiveListItem: HTMLAnchorElement = querySelector( const latestActiveListItem: HTMLAnchorElement = querySelector(
`#${settings.data.latestActiveFeatureTab}-list` `#${settings.data.latestActiveFeatureTab}-list`

View File

@ -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 = '-';
}
}
}

View File

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