Implement #133

Author: OctoNezd

src/features/base.ts

@@ -1,4 +1,4 @@
-import { store } from "../extensionPreferences"
+import { store } from "../extensionPreferences";
 export class OLFeature {
     moduleName = "unset";
     moduleId = "unset";
@@ -33,28 +33,39 @@ export class SettingButton extends SettingOption {
 export class SettingToggle extends SettingOption {
     settingId: string;
     callback: (newState: boolean) => void;
-    constructor(title: string, description: string, settingId: string, callback: (newState: boolean) => void) {
+    constructor(
+        title: string,
+        description: string,
+        settingId: string,
+        callback: (newState: boolean) => void
+    ) {
         super(title, description);
         this.settingId = settingId;
         this.callback = callback;
         this.element.classList.add("ol-setting-toggle");
         this.element.innerHTML = `<span class="ol-set-inner"><p class="ol-set-title">${title}</p><p class="ol-set-desc">${description}</p></span><input type="checkbox" id="${settingId}" class="ol-setting-toggle-checkbox">`;
-        this.element.addEventListener("click", async () => await this.toggleSetting());
-        this.loadPD()
+        this.element.addEventListener(
+            "click",
+            async () => await this.toggleSetting()
+        );
+        this.loadPD();
+    }
+    async getValue(): Promise<boolean> {
+        const prefData = await store.get(this.settingId);
+        return !!prefData;
     }
     async loadPD() {
-        const prefData = await store.get(this.settingId)
-        const value = !!prefData
+        const value = await this.getValue();
         this.element.querySelector("input")!.checked = value;
         this.callback(value);
     }
     async toggleSetting() {
-        const prefData = await store.get(this.settingId)
-        const old_value = prefData
-        const new_value = !old_value
+        const prefData = await store.get(this.settingId);
+        const old_value = prefData;
+        const new_value = !old_value;
         await store.set(this.settingId, new_value);
         console.log("updating", this.settingId, old_value, new_value);
         this.element.querySelector("input")!.checked = !old_value;
-        this.callback(new_value)
+        this.callback(new_value);
     }
-}
+}

src/features/posts/css/votes.css renamed to src/features/posts/css/votes.scss

@@ -59,9 +59,11 @@
     font-weight: bold;
     font-size: 125%;
 }
-.ol-votecount::after {
-    content: " votes ";
-}
-.ol-votecount.ol-votecount-one::after {
-    content: " vote " !important;
+html:not(.votesNearButtons) {
+    .ol-votecount::after {
+        content: " votes ";
+    }
+    .ol-votecount.ol-votecount-one::after {
+        content: " vote " !important;
+    }
 }

src/features/posts/reimplementVotes.ts

@@ -1,5 +1,5 @@
-import { OLFeature } from "../base";
-import "./css/votes.css";
+import { OLFeature, SettingToggle } from "../base";
+import "./css/votes.scss";
 
 const getRedditConfig = `
 setTimeout(function() {
@@ -18,7 +18,23 @@ export default class ReimplementVotes extends OLFeature {
     modHash: string;
     // @ts-ignore
     voteEventData: string;
+    // @ts-ignore
+    votesNearButtons: SettingToggle;
+
     async init() {
+        this.votesNearButtons = new SettingToggle(
+            "Display votes between upvote and downvote buttons",
+            "Reload required",
+            "votesNearButtons",
+            (value) => {
+                document.documentElement.classList.toggle(
+                    "votesNearButtons",
+                    value
+                );
+            }
+        );
+        this.settingOptions.push(this.votesNearButtons);
+
         this.voteHash = "";
         this.modHash = "";
         document.addEventListener("oldLanderConfigRequest", (e) => {
@@ -102,7 +118,15 @@ export default class ReimplementVotes extends OLFeature {
         if (postState === -1) {
             downVote.classList.add("act");
         }
-
+        if (
+            (await this.votesNearButtons.getValue()) ||
+            post.dataset.type === "comment"
+        ) {
+            voteContainer.append(upVote, voteCount, downVote);
+        } else {
+            voteContainer.append(upVote, downVote);
+            post.querySelector(".tagline")?.prepend(voteCount);
+        }
         if (post.dataset.type === "comment") {
             voteContainer.append(upVote, voteCount, downVote);
             for (const button of [downVote, upVote]) {
@@ -129,8 +153,6 @@ export default class ReimplementVotes extends OLFeature {
                 );
             }
         } else {
-            voteContainer.append(upVote, downVote);
-            post.querySelector(".tagline")?.prepend(voteCount);
             buttons?.prepend(voteContainer);
         }
     }