Reimplement votes, fix #86

src/features/posts/css/postContainer.css

@@ -0,0 +1,3 @@
+.ol-post-container .entry {
+    flex-grow: 1;
+}

src/features/posts/css/postIcons.css

@@ -22,12 +22,13 @@
     order: 1000;
 }
 .flat-list.buttons a {
+    display: block;
     width: 100%;
     text-align: center;
     font-size: var(--icon-size);
     color: var(--md-sys-color-primary);
 }
-.flat-list.buttons a::before {
+.flat-list.buttons a::before, .flat-list.buttons .voteButton {
     color: var(--md-sys-color-primary);
     display: inline-block;
     text-rendering: auto;
@@ -52,7 +53,7 @@
 .comments {
     font-size: 9pt !important;
     font-weight: bold;
-    display: flex;
+    display: flex !important;
     flex-direction: column;
 }
 .flat-list.buttons a.comments::before {

src/features/posts/css/votes.css

@@ -0,0 +1,53 @@
+.midcol {
+    display: none;
+}
+.ol-vote-container {
+    display: inline-flex !important;
+    flex-direction: row;
+    align-items: center;
+}
+.ol-vote-container a {
+    color: var(--md-sys-color-primary);
+    display: inline-block;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    padding-right: 2px;
+    font-size: var(--icon-size) !important;
+    font-family: "Material Symbols Outlined";
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "liga";
+}
+.ol-vote-container p {
+    font-weight: bold;
+    font-size: calc(var(--icon-size) / 2) !important;
+}
+.ol-upvote.act {
+    font-variation-settings: 'FILL' 1;
+}
+.ol-downvote.act {
+    font-variation-settings: 'FILL' 1;
+}
+.ol-vote-count {
+    display: none;
+}
+.ol-vote-count.ol-votecount-enabled {
+    display: block;
+}
+.score:not(.ol-score) {
+    display: none !important;
+}
+.score.ol-score {
+    display: inline !important;
+    font-size: 1em;
+}

src/features/posts/index.ts

@@ -7,6 +7,7 @@ import setupToggles from "./postToggles";
 import { OLFeature } from "../base";
 import NativeShare from "./nativeSharing";
 import IndentCommentHide from "./indentCommentHide";
+import ReimplementVotes from "./reimplementVotes";
 
 function setupPost(post: HTMLDivElement) {
     const postContainer = setupPostContainer(post);
@@ -40,4 +41,4 @@ class PostsEnhance extends OLFeature {
         setupPost(post)
     }
 }
-export default [PostsEnhance, NativeShare, IndentCommentHide]
+export default [PostsEnhance, NativeShare, IndentCommentHide, ReimplementVotes]

src/features/posts/postContainer.ts

@@ -1,15 +1,10 @@
+import "./css/postContainer.css"
 export default function setupPostContainer(post: HTMLDivElement) {
     // create new postContainer div to hold post & expando preview
     const postContainer = document.createElement("div");
     postContainer.append(...post.children)
     Object.assign(postContainer.dataset, post.dataset)
     postContainer.classList.add("ol-post-container");
-    // const clearLeft = post.nextElementSibling; // i don't know what this div is but let's put it inside too
-    // post.before(postContainer);
-    // postContainer.appendChild(post);
-    // if (clearLeft) {
-        // postContainer.appendChild(clearLeft);
-    // }
     post.appendChild(postContainer);
     const buttons = (post.querySelector(".flat-list.buttons") as HTMLDivElement)
     const entry = post.querySelector(".entry")

src/features/posts/reimplementVotes.ts

@@ -0,0 +1,180 @@
+import { OLFeature } from "../base";
+import "./css/votes.css"
+
+const getRedditConfig = `
+setTimeout(function() {
+    document.dispatchEvent(new CustomEvent('oldLanderConfigRequest', {
+        detail: window.r.config
+    }));
+}, 0);
+`
+
+export default class ReimplementVotes extends OLFeature {
+    moduleId: string = "ReimplementVotes";
+    moduleName: string = "ReimplementVotes";
+    // @ts-ignore
+    voteHash: string;
+    // @ts-ignore
+    modHash: string;
+    // @ts-ignore
+    voteEventData: string;
+    async init() {
+        this.voteHash = ''
+        this.modHash = ''
+        document.addEventListener('oldLanderConfigRequest', (e) => {
+            // @ts-ignore
+            this.modHash = e.detail.modhash
+            // @ts-ignore
+            this.voteHash = e.detail.vote_hash
+            console.log("Grabbed votehash and modhash!", this)
+            this.voteEventData = JSON.stringify({
+                // @ts-ignore
+                page_type: e.detail.event_target.target_type,
+                // @ts-ignore
+                sort: e.detail.event_target.target_sort,
+                // @ts-ignore
+                sort_filter_time: e.detail.event_target.target_filter_time
+            })
+        });
+        var s = document.createElement('script');
+        s.innerText = getRedditConfig;
+        (document.head || document.documentElement).appendChild(s);
+        s.onload = function () {
+            s.remove();
+        };
+    }
+    async onPost(post: HTMLDivElement): Promise<void> {
+        const postState = Number(Boolean(post.querySelector(".upmod"))) +
+            Number(Number(Boolean(post.querySelector(".downmod"))) * -1)
+        post.dataset.olVote = postState.toString();
+
+        let unvotedScoreElContainer = post
+        if (post.dataset.type === "comment") {
+            unvotedScoreElContainer = post.querySelector(".entry") as HTMLDivElement
+        }
+        const unvotedScoreEl = unvotedScoreElContainer.querySelector(".score.unvoted")
+        if (unvotedScoreEl !== null) {
+            post.dataset.neutralScore = (unvotedScoreEl as HTMLSpanElement).title
+            if (post.dataset.type === "comment") {
+                post.dataset.neutralScore = (Number(post.dataset.neutralScore) - postState).toString();
+            }
+        }
+
+        const buttons = post.querySelector(".buttons");
+        const voteContainer = document.createElement("li")
+        voteContainer.className = "ol-vote-container"
+
+        const upVote = document.createElement("a")
+        upVote.classList.add("ol-upvote")
+        upVote.innerText = "arrow_circle_up"
+        upVote.href = "javascript:void(0)"
+        upVote.addEventListener("click", (e) => { this.vote('1', e) })
+        if (postState === 1) {
+            upVote.classList.add("act")
+        }
+
+        const voteCount = document.createElement("p")
+        if (post.dataset.score !== undefined) {
+            voteCount.innerText = (post.dataset.score as string)
+        }
+        voteCount.classList.add("ol-votecount")
+
+        const downVote = document.createElement("a")
+        downVote.classList.add("ol-downvote")
+        downVote.innerText = "arrow_circle_down"
+        downVote.href = "javascript:void(0)"
+        downVote.addEventListener("click", (e) => { this.vote('-1', e) })
+        if (postState === -1) {
+            downVote.classList.add("act")
+        }
+
+        voteContainer.append(upVote, voteCount, downVote)
+        if (post.dataset.type === "comment") {
+            for (const button of [downVote, upVote]) {
+                const listItem = document.createElement("li")
+                listItem.appendChild(button)
+                button.classList.add("voteButton")
+                buttons?.prepend(listItem)
+            }
+            const entry = post.querySelector(".entry") as HTMLDivElement
+            const oldLanderScore = document.createElement("span")
+            oldLanderScore.classList.add("score", "ol-score")
+            if (unvotedScoreEl === null) {
+                oldLanderScore.innerText = "[score unavailable]"
+            } else {
+                oldLanderScore.innerText = `${Number(post.dataset.neutralScore) + postState} point(s)`
+            }
+            const dislikes = entry.querySelector(".score.dislikes");
+            if (dislikes !== null) {
+                (dislikes?.parentNode as Node).insertBefore(oldLanderScore, dislikes)
+            }
+        } else {
+            buttons?.prepend(voteContainer)
+        }
+    }
+    async vote(direction: string, event: MouseEvent): Promise<void> {
+        event.preventDefault()
+        event.stopPropagation()
+        const post = (event.target as HTMLAnchorElement).closest(".thing") as HTMLDivElement
+        if (direction === post.dataset.olVote) {
+            direction = '0'
+        }
+        const params = new URLSearchParams();
+        params.set("dir", direction)
+        params.set("id", post.dataset.fullname as string)
+        params.set("sr", post.dataset.subreddit as string)
+        const bodyParams = new URLSearchParams();
+        bodyParams.set("id", post.dataset.fullname as string)
+        bodyParams.set("direction", direction)
+        bodyParams.set("vh", this.voteHash)
+        bodyParams.set("isTrusted", "true")
+        bodyParams.set("vote_event_data", this.voteEventData)
+        if (post.dataset.rank) {
+            bodyParams.set("rank", post.dataset.rank)
+        }
+        bodyParams.set("r", post.dataset.subreddit as string)
+        bodyParams.set("uh", this.modHash)
+        bodyParams.set("renderstyle", "html")
+        if (post.dataset.neutralScore) {
+            const new_score = (Number(post.dataset.neutralScore) + Number(direction)).toString()
+            if (post.dataset.type !== "comment") {
+                const votecount = (post.querySelector(".ol-votecount") as HTMLParagraphElement)
+                votecount.innerText = new_score
+            } else {
+                const votecount = (post.querySelector(".entry")?.querySelector(".score.ol-score") as HTMLSpanElement)
+                votecount.innerText = `${new_score} point(s)`
+            }
+        }
+        const clickedButton = (event.target as HTMLAnchorElement)
+        clickedButton.classList.toggle("act")
+        let forceOff = ".ol-upvote"
+        if (clickedButton.classList.contains("ol-upvote")) {
+            forceOff = ".ol-downvote"
+        }
+        ((clickedButton.closest(".flat-list") as HTMLDivElement).querySelector(forceOff) as HTMLUListElement).classList.remove("act");
+
+        await fetch("https://old.reddit.com/api/vote?" + params, {
+            "credentials": "include",
+            "headers": {
+                "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0",
+                "Accept": "application/json, text/javascript, */*; q=0.01",
+                "Accept-Language": "en,en-US;q=0.5",
+                "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+                "X-Requested-With": "XMLHttpRequest",
+                "Sec-GPC": "1",
+                "Sec-Fetch-Dest": "empty",
+                "Sec-Fetch-Mode": "no-cors",
+                "Sec-Fetch-Site": "same-origin",
+                "Pragma": "no-cache",
+                "Cache-Control": "no-cache"
+            },
+            "referrer": "https://old.reddit.com/",
+            "body": bodyParams.toString(),
+            "method": "POST",
+            "mode": "cors"
+        }).then(console.log);
+
+        post.dataset.olVote = direction
+
+    }
+}