Merge pull request #24 from faraplay/document_start

Document start
OctoNezd · Jul 7, 2023 · 4a83870 · 4a83870
2 parents 1b303e3 + 1f7ac50
commit 4a83870
Show file tree

Hide file tree

Showing 25 changed files with 474 additions and 370 deletions.
diff --git a/.gitignore b/.gitignore
@@ -134,4 +134,7 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
+
+# VSCode preferences
+.vscode/
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
diff --git a/css/redditChanges.css b/css/redditChanges.css
@@ -22,7 +22,7 @@
     max-width: unset !important;
 }
 .midcol {
-    margin: 0;
+    margin: 0 !important;
 }
 .sitetable.linklisting > .thing:not(.comment) {
     display: flex;

diff --git a/css/subreddit_sidebar.css → css/subredditSidebar.css b/css/subreddit_sidebar.css → css/subredditSidebar.css
@@ -16,7 +16,7 @@
     padding-right: 10px;
 }
 
-#sidebar-toggle {
+#custom-sidebar-close {
     position: sticky;
     display: none;
     flex-direction: column;
@@ -25,10 +25,10 @@
     text-align: center;
     background-color: rgba(0, 0, 0, 0.5);
 }
-#sidebar-toggle::before {
+#custom-sidebar-close::before {
     font-size: 1.5em;
 }
-#custom-sidebar.active #sidebar-toggle {
+#custom-sidebar.active #custom-sidebar-close {
     display: flex;
 }
 #custom-sidebar.active {
@@ -38,7 +38,7 @@
     display: block;
     width: 80%;
 }
-#custom-sidebar.active #sidebar-toggle {
+#custom-sidebar.active #custom-sidebar-close {
     flex-grow: 1;
 }
 #custom-sidebar.showingup .side {

diff --git a/css/userSidebar.css b/css/userSidebar.css
@@ -12,6 +12,7 @@
 #user-sidebar .side {
     display: none;
     overflow-y: scroll;
+    background-color: var(--md-sys-color-surface);
     margin-left: 0px;
     margin-right: 0px;
 }
@@ -31,9 +32,6 @@
     display: block;
     width: 80%;
 }
-#user-sidebar-open:before {
-    content: "menu";
-}
 #user-sidebar-open {
     width: 40px;
     height: 40px;

diff --git a/dev/my_style_loader/index.js b/dev/my_style_loader/index.js
@@ -0,0 +1,16 @@
+path = require("path");
+
+module.exports = {
+    pitch: function (request) {
+        const insertStylePath = this.utils.contextify(
+            this.context, path.resolve(__dirname, "./insertStyle.js"));
+        const cssPath = this.utils.contextify(this.context, `!!${request}`);
+
+        const outputJs = `
+        import insertStyle from ${JSON.stringify(insertStylePath)};
+        import content from ${JSON.stringify(cssPath)};
+        insertStyle(content.toString());
+        `;
+        return outputJs;
+    },
+};
diff --git a/dev/my_style_loader/insertStyle.js b/dev/my_style_loader/insertStyle.js
@@ -0,0 +1,17 @@
+export default function insertStyle(style) {
+    var element = document.createElement("style");
+    element.innerText = style;
+    if (document.head) {
+        document.head.appendChild(element);
+        return;
+    }
+    var observer = new MutationObserver(function () {
+        if (document.head) {
+            observer.disconnect();
+            document.head.appendChild(element);
+        }
+    });
+    observer.observe(document.documentElement, {
+        childList: true,
+    });
+}
diff --git a/js/cs.js b/js/cs.js
@@ -1,7 +1,2 @@
 import "./setPublicPath.js";
-import "./general.js";
-import "./header.js";
-import "./sidebars.js";
-import "./posts";
-import "./preferences.js";
-console.log("Content script loaded.");
+import "./user.js";
diff --git a/js/general.js b/js/general.js
diff --git a/js/header.js b/js/header.js
@@ -1,58 +1,16 @@
 import "~/css/header.css";
 import modal from "./modal";
-function makeSortSelector() {
-    // remove old selectors if exist
-    document
-        .querySelectorAll("#sortsel")
-        .forEach((el) => el.parentElement.removeChild(el));
-    const options = {};
-    const header = document.querySelector("#ol-header");
+import querySelectorAsync from "./utility/querySelectorAsync";
 
-    for (const tab of document.querySelectorAll(".tabmenu li")) {
-        if (
-            tab.innerText === "" ||
-            tab.innerText.includes("show images") ||
-            !tab.innerText.trim().length
-        ) {
-            continue;
-        }
-        console.log(tab.innerText);
-        let itemtext = tab.innerText[0].toUpperCase() + tab.innerText.slice(1);
-        options[itemtext] = tab.children[0].href;
-        if (tab.classList.contains("selected")) {
-            header.querySelector(".sort-mode").innerText = tab.innerText;
-        }
-    }
-    if (options.length <= 1) {
-        return;
-    }
-    const optionmenu = document.createElement("ul");
-    for (const [option_text, option_link] of Object.entries(options)) {
-        const optel = document.createElement("li");
-        const optel_link = document.createElement("a");
-        optel_link.classList.add("sortmodeselector");
-        optel_link.href = option_link;
-        optel_link.innerText = option_text;
-        optel.appendChild(optel_link);
-        optionmenu.appendChild(optel);
-    }
-    const btn = document.createElement("button");
-    btn.id = "sortsel";
-    btn.classList.add("material-symbols-outlined");
-    btn.innerText = "sort";
-    header.querySelector(".aux-buttons").appendChild(btn);
-    btn.onclick = () => {
-        modal("Sort mode", optionmenu, () => {});
-    };
-}
-function setupOldLanderHeader() {
+async function createHeader() {
     const oldheader = document.getElementById("ol-header");
     if (oldheader != null) {
         oldheader.remove();
     }
     const header = document.createElement("div");
     header.id = "ol-header";
-    document.body.insertBefore(header, document.getElementById("header"));
+    const body = await querySelectorAsync("body");
+    body.insertBefore(header, await querySelectorAsync("#header"));
     header.innerHTML = `<div class="sr-info">
                             <p class="subreddit-name"></p>
                             <p class="sort-mode"></p>
@@ -63,11 +21,8 @@ function setupOldLanderHeader() {
         pageName === null ? "Homepage" : pageName.innerText;
 
     let prevScrollPos = window.scrollY;
-
-    window.addEventListener("scroll", function () {
-        // current scroll position
+    function onScroll() {
         const currentScrollPos = window.scrollY;
-
         if (prevScrollPos > currentScrollPos) {
             // user has scrolled up
             let playAnim = true;
@@ -92,21 +47,85 @@ function setupOldLanderHeader() {
                     header.classList.remove("stick");
                 });
         }
-
         // update previous scroll position
         prevScrollPos = currentScrollPos;
-    });
+    }
+    window.addEventListener("scroll", onScroll);
+
+    return header;
+}
+
+function makeSortSelector(header) {
+    // remove old selectors if exist
+    document
+        .querySelectorAll("#sortsel")
+        .forEach((el) => el.parentElement.removeChild(el));
+
+    const options = {};
+    for (const tab of document.querySelectorAll(".tabmenu li")) {
+        if (
+            tab.innerText === "" ||
+            tab.innerText.includes("show images") ||
+            !tab.innerText.trim().length
+        ) {
+            continue;
+        }
+        let itemtext = tab.innerText[0].toUpperCase() + tab.innerText.slice(1);
+        options[itemtext] = tab.children[0].href;
+        if (tab.classList.contains("selected")) {
+            header.querySelector(".sort-mode").innerText = tab.innerText;
+        }
+    }
+    if (Object.keys(options).length <= 1) {
+        return;
+    }
+    const optionmenu = document.createElement("ul");
+    for (const [option_text, option_link] of Object.entries(options)) {
+        const optel = document.createElement("li");
+        const optel_link = document.createElement("a");
+        optel_link.classList.add("sortmodeselector");
+        optel_link.href = option_link;
+        optel_link.innerText = option_text;
+        optel.appendChild(optel_link);
+        optionmenu.appendChild(optel);
+    }
+    const btn = document.createElement("button");
+    btn.id = "sortsel";
+    btn.classList.add("material-symbols-outlined");
+    btn.innerText = "sort";
+    header.querySelector(".aux-buttons").appendChild(btn);
+    btn.onclick = () => {
+        modal("Sort mode", optionmenu, () => {});
+    };
 }
-function addSubSidebarButton() {
+
+function addSubSidebarButton(header) {
     const btn = document.createElement("button");
     btn.innerText = "info";
     btn.classList.add("material-symbols-outlined");
     btn.onclick = () => {
         const evt = new Event("toggleSub");
         document.dispatchEvent(evt);
     };
-    document.querySelector("#ol-header .aux-buttons").appendChild(btn);
+    header.querySelector(".aux-buttons").appendChild(btn);
+}
+function addUserSidebarButton(header){
+    const btn = document.createElement("button");
+    btn.innerText = "menu";
+    btn.classList.add("material-symbols-outlined");
+    btn.id = "user-sidebar-open";
+    btn.onclick = () => {
+        const evt = new Event("toggleUser");
+        document.dispatchEvent(evt);
+    };
+    header.prepend(btn);
 }
-setupOldLanderHeader();
-makeSortSelector();
-addSubSidebarButton();
+
+async function setupOldLanderHeader() {
+    const header = await createHeader();
+    makeSortSelector(header);
+    addSubSidebarButton(header);
+    addUserSidebarButton(header);
+}
+
+setupOldLanderHeader();
diff --git a/js/modal.js b/js/modal.js
@@ -1,9 +1,11 @@
 import "~/css/modal.css";
+
 export default function createModal(title, contents, callback) {
     const oldmodal = document.getElementById("modal");
     if (oldmodal !== null) {
         oldmodal.remove();
     }
+
     const modal = document.createElement("div");
     modal.id = "modal";
     modal.innerHTML = `
@@ -28,16 +30,18 @@ export default function createModal(title, contents, callback) {
                         duration: 250,
                     }
                 );
-                anim.addEventListener("finish", () => {
+                const onFinish = () => {
                     console.log(anim.playState);
-                    modal.removeEventListener("animationend");
+                    modal.removeEventListener("animationend", onFinish);
                     modal.classList.add("hide");
-                });
+                };
+                anim.addEventListener("finish", onFinish);
             })
     );
     modal.querySelector(".olmodal-buttons button.ok").onclick = callback;
     document.body.appendChild(modal);
 }
+
 window.testModal = () => {
     const modalContents = document.createElement("div");
     modalContents.innerHTML =