Implement toggle for marquee, fix #79

Author: OctoNezd

src/css/redditChanges.css

@@ -111,6 +111,20 @@ html.res-nightmode {
 #sr-header-area {
     display: none;
 }
+.redditMarqueEnabled #sr-header-area {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    display: block;
+    overflow-x: scroll !important;
+    max-width: calc(100vw - 69px);
+    color: var(--md-sys-color-on-surface-variant);
+    background-color: var(--md-sys-color-surface);
+}
+
+.sr-bar a {
+    color: var(--md-sys-color-on-surface-variant);
+}
 [data-event-action="title"],
 [data-event-action="title"]:visited {
     color: var(--md-sys-color-on-surface) !important;

src/css/resCompat.css

@@ -53,4 +53,15 @@
 #NREMail {
     /* NREMail doesn't work on mobile devices */
     display: none;
+}
+.redditMarqueEnabled #RESShortcutsEditContainer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 19px;
+    color: var(--md-sys-color-on-surface-variant);
+    background-color: var(--md-sys-color-surface);
+}
+#RESShortcutsEditContainer * {
+    background: transparent !important;
 }

src/features/index.ts

@@ -1,5 +1,6 @@
 import ConsoleSave from "./console_dump";
 import Expandos from "./expandos";
+import Marquee from "./marquee";
 import RESButtons from "./resButtons";
 import Sidebar from "./sidebar";
-export default [ConsoleSave, Expandos, Sidebar, RESButtons];
+export default [ConsoleSave, Expandos, Sidebar, RESButtons, Marquee];

src/features/marquee.ts

@@ -0,0 +1,20 @@
+import querySelectorAsync from "../utility/querySelectorAsync";
+import { waitForElement } from "../utility/waitForElement";
+import { OLFeature, SettingToggle } from "./base";
+
+const marqueeSettingId = "marquee";
+
+export default class Marquee extends OLFeature {
+    moduleId = "marquee";
+    moduleName = "Subreddit marquee list";
+    async init() {
+        this.settingOptions.push(
+            new SettingToggle("Marquee toggle", "Enables old reddit marquee", marqueeSettingId, async (toggle) => {
+                document.documentElement.classList.toggle("redditMarqueEnabled", toggle)
+            })
+        );
+        waitForElement("#sr-header-area", (element) => {
+            document.body.appendChild(element)
+        })
+    }
+}

src/features/sidebar/index.ts

@@ -20,11 +20,26 @@ function setEventListener(type: string, listener: (event: Event) => void) {
 }
 
 const swipeIgnoreTags = ["PRE", "CODE"]
-
+const swipeIgnoreMatches = ["#sr-header-area"]
 const toggleAbles = [
     {name: "Disable random NSFW", settingId: "disableNSFW", className: "ol_noRandNsfw"},
     {name: "Disable random", settingId: "disableRandom", className: "ol_noRandom"},
 ]
+function swipeWrapper(callback: ((event: Event) => void)): ((event: Event) => void) {
+    function wrapped(event: Event) {
+        const target = event.target as HTMLElement;
+        if (target && swipeIgnoreTags.includes(target.tagName)) {
+            return
+        }
+        for (const selector of swipeIgnoreMatches) {
+            if (target.closest(selector) !== null) {
+                return
+            }
+        }
+        callback(event);
+    }
+    return wrapped;
+}
 
 export default class Sidebar extends OLFeature {
     moduleName = "Sidebar";
@@ -67,27 +82,19 @@ export default class Sidebar extends OLFeature {
         console.log("Setting up sidebar events, handlers:", this.subToggle, this.userToggle)
         setEventListener("toggleSub", this.subToggle);
         setEventListener("toggleUser", this.userToggle);
-        setEventListener("swiped-right",  (event) => {
-            const target = event.target as HTMLElement;
-            if (target && swipeIgnoreTags.includes(target.tagName)) {
-                return
-            }
+        setEventListener("swiped-right",  swipeWrapper((event) => {
             if (this.subSide && this.subSide.classList.contains("active")) {
                 this.subToggle();
             } else if (this.userSide && !this.userSide.classList.contains("active")) {
                 this.userToggle();
             }
-        });
-        setEventListener("swiped-left",  (event) => {
-            const target = event.target as HTMLElement;
-            if (target && swipeIgnoreTags.includes(target.tagName)) {
-                return
-            }
+        }));
+        setEventListener("swiped-left", swipeWrapper((event) => {
             if (this.userSide && this.userSide.classList.contains("active")) {
                 this.userToggle();
             } else if (this.subSide && !this.subSide.classList.contains("active")) {
                 this.subToggle();
             }
-        });
+        }));
     }    
 }

src/header/header.css

@@ -19,6 +19,9 @@
     left: 0;
     z-index: 10;
 }
+.redditMarqueEnabled #ol-header {
+    top: 18px !important;
+}
 #ol-header .sort-mode {
     color: var(--md-sys-color-on-surface-variant);
     font-family: var(--md-sys-typescale-title-small-font-family-name);