Feature: Add Hide Votes (fixes #4)
This commit is contained in:
parent
5a299a7efe
commit
46864cc5fc
|
@ -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"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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') {
|
||||||
|
|
|
@ -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`
|
||||||
|
|
|
@ -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 = '-';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue