diff --git a/src/css/redditChanges.css b/src/css/redditChanges.css index e821aac..3ba819a 100644 --- a/src/css/redditChanges.css +++ b/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; diff --git a/src/css/resCompat.css b/src/css/resCompat.css index 8d0e67d..18fba58 100644 --- a/src/css/resCompat.css +++ b/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; } \ No newline at end of file diff --git a/src/features/index.ts b/src/features/index.ts index f05f79b..11915f1 100644 --- a/src/features/index.ts +++ b/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]; diff --git a/src/features/marquee.ts b/src/features/marquee.ts new file mode 100644 index 0000000..570326c --- /dev/null +++ b/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) + }) + } +} diff --git a/src/features/sidebar/index.ts b/src/features/sidebar/index.ts index 2f0e965..8b09cf8 100644 --- a/src/features/sidebar/index.ts +++ b/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(); } - }); + })); } } \ No newline at end of file diff --git a/src/header/header.css b/src/header/header.css index 2c50b58..9fc7fb1 100644 --- a/src/header/header.css +++ b/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);