diff --git a/assets/javascripts/app/settings.js b/assets/javascripts/app/settings.js index 1fe45798..49dea2e0 100644 --- a/assets/javascripts/app/settings.js +++ b/assets/javascripts/app/settings.js @@ -1,252 +1,216 @@ -// TODO: This file was created by bulk-decaffeinate. -// Sanity-check the conversion and remove this comment. -/* - * decaffeinate suggestions: - * DS101: Remove unnecessary use of Array.from - * DS102: Remove unnecessary code created because of implicit returns - * DS103: Rewrite code to no longer use __guard__, or convert again using --optional-chaining - * DS104: Avoid inline assignments - * DS206: Consider reworking classes to avoid initClass - * DS207: Consider shorter variations of null checks - * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md - */ -(function () { - let PREFERENCE_KEYS = undefined; - let INTERNAL_KEYS = undefined; - app.Settings = class Settings { - static initClass() { - PREFERENCE_KEYS = [ - "hideDisabled", - "hideIntro", - "manualUpdate", - "fastScroll", - "arrowScroll", - "analyticsConsent", - "docs", - "dark", // legacy - "theme", - "layout", - "size", - "tips", - "noAutofocus", - "autoInstall", - "spaceScroll", - "spaceTimeout", - ]; - - INTERNAL_KEYS = ["count", "schema", "version", "news"]; - - this.prototype.LAYOUTS = [ - "_max-width", - "_sidebar-hidden", - "_native-scrollbars", - "_text-justify-hyphenate", - ]; - - this.defaults = { - count: 0, - hideDisabled: false, - hideIntro: false, - news: 0, - manualUpdate: false, - schema: 1, - analyticsConsent: false, - theme: "auto", - spaceScroll: 1, - spaceTimeout: 0.5, - }; - } - - constructor() { - this.store = new CookiesStore(); - this.cache = {}; - this.autoSupported = - window.matchMedia("(prefers-color-scheme)").media !== "not all"; - if (this.autoSupported) { - this.darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); - this.darkModeQuery.addListener(() => this.setTheme(this.get("theme"))); - } - } - - get(key) { - let left; - if (this.cache.hasOwnProperty(key)) { - return this.cache[key]; - } - this.cache[key] = - (left = this.store.get(key)) != null - ? left - : this.constructor.defaults[key]; - if ( - key === "theme" && - this.cache[key] === "auto" && - !this.darkModeQuery - ) { - return (this.cache[key] = "default"); - } else { - return this.cache[key]; - } - } - - set(key, value) { - this.store.set(key, value); - delete this.cache[key]; - if (key === "theme") { - this.setTheme(value); - } - } - - del(key) { - this.store.del(key); - delete this.cache[key]; - } - - hasDocs() { - try { - return !!this.store.get("docs"); - } catch (error) {} - } - - getDocs() { - return ( - __guard__(this.store.get("docs"), (x) => x.split("/")) || - app.config.default_docs - ); - } - - setDocs(docs) { - this.set("docs", docs.join("/")); - } - - getTips() { - return __guard__(this.store.get("tips"), (x) => x.split("/")) || []; - } - - setTips(tips) { - this.set("tips", tips.join("/")); - } - - setLayout(name, enable) { - this.toggleLayout(name, enable); - - const layout = (this.store.get("layout") || "").split(" "); - $.arrayDelete(layout, ""); - - if (enable) { - if (layout.indexOf(name) === -1) { - layout.push(name); - } - } else { - $.arrayDelete(layout, name); - } - - if (layout.length > 0) { - this.set("layout", layout.join(" ")); - } else { - this.del("layout"); - } - } - - hasLayout(name) { - const layout = (this.store.get("layout") || "").split(" "); - return layout.indexOf(name) !== -1; - } - - setSize(value) { - this.set("size", value); - } - - dump() { - return this.store.dump(); - } +app.Settings = class Settings { + static PREFERENCE_KEYS = [ + "hideDisabled", + "hideIntro", + "manualUpdate", + "fastScroll", + "arrowScroll", + "analyticsConsent", + "docs", + "dark", // legacy + "theme", + "layout", + "size", + "tips", + "noAutofocus", + "autoInstall", + "spaceScroll", + "spaceTimeout", + ]; + + static INTERNAL_KEYS = ["count", "schema", "version", "news"]; + + static LAYOUTS = [ + "_max-width", + "_sidebar-hidden", + "_native-scrollbars", + "_text-justify-hyphenate", + ]; + + static defaults = { + count: 0, + hideDisabled: false, + hideIntro: false, + news: 0, + manualUpdate: false, + schema: 1, + analyticsConsent: false, + theme: "auto", + spaceScroll: 1, + spaceTimeout: 0.5, + }; - export() { - const data = this.dump(); - for (var key of Array.from(INTERNAL_KEYS)) { - delete data[key]; + constructor() { + this.store = new CookiesStore(); + this.cache = {}; + this.autoSupported = + window.matchMedia("(prefers-color-scheme)").media !== "not all"; + if (this.autoSupported) { + this.darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + this.darkModeQuery.addListener(() => this.setTheme(this.get("theme"))); + } + } + + get(key) { + let left; + if (this.cache.hasOwnProperty(key)) { + return this.cache[key]; + } + this.cache[key] = + (left = this.store.get(key)) != null + ? left + : this.constructor.defaults[key]; + if (key === "theme" && this.cache[key] === "auto" && !this.darkModeQuery) { + return (this.cache[key] = "default"); + } else { + return this.cache[key]; + } + } + + set(key, value) { + this.store.set(key, value); + delete this.cache[key]; + if (key === "theme") { + this.setTheme(value); + } + } + + del(key) { + this.store.del(key); + delete this.cache[key]; + } + + hasDocs() { + try { + return !!this.store.get("docs"); + } catch (error) {} + } + + getDocs() { + return this.store.get("docs")?.split("/") || app.config.default_docs; + } + + setDocs(docs) { + this.set("docs", docs.join("/")); + } + + getTips() { + return this.store.get("tips")?.split("/") || []; + } + + setTips(tips) { + this.set("tips", tips.join("/")); + } + + setLayout(name, enable) { + this.toggleLayout(name, enable); + + const layout = (this.store.get("layout") || "").split(" "); + $.arrayDelete(layout, ""); + + if (enable) { + if (layout.indexOf(name) === -1) { + layout.push(name); } - return data; + } else { + $.arrayDelete(layout, name); } - import(data) { - let key, value; - const object = this.export(); - for (key in object) { - value = object[key]; - if (!data.hasOwnProperty(key)) { - this.del(key); - } - } - for (key in data) { - value = data[key]; - if (PREFERENCE_KEYS.indexOf(key) !== -1) { - this.set(key, value); - } - } + if (layout.length > 0) { + this.set("layout", layout.join(" ")); + } else { + this.del("layout"); } + } - reset() { - this.store.reset(); - this.cache = {}; - } + hasLayout(name) { + const layout = (this.store.get("layout") || "").split(" "); + return layout.indexOf(name) !== -1; + } - initLayout() { - if (this.get("dark") === 1) { - this.set("theme", "dark"); - this.del("dark"); - } - this.setTheme(this.get("theme")); - for (var layout of Array.from(this.LAYOUTS)) { - this.toggleLayout(layout, this.hasLayout(layout)); - } - this.initSidebarWidth(); - } + setSize(value) { + this.set("size", value); + } - setTheme(theme) { - if (theme === "auto") { - theme = this.darkModeQuery.matches ? "dark" : "default"; - } - const { classList } = document.documentElement; - classList.remove("_theme-default", "_theme-dark"); - classList.add("_theme-" + theme); - this.updateColorMeta(); - } + dump() { + return this.store.dump(); + } - updateColorMeta() { - const color = getComputedStyle(document.documentElement) - .getPropertyValue("--headerBackground") - .trim(); - $("meta[name=theme-color]").setAttribute("content", color); + export() { + const data = this.dump(); + for (var key of Settings.INTERNAL_KEYS) { + delete data[key]; } + return data; + } - toggleLayout(layout, enable) { - const { classList } = document.body; - // sidebar is always shown for settings; its state is updated in app.views.Settings - if ( - layout !== "_sidebar-hidden" || - !(app.router != null ? app.router.isSettings : undefined) - ) { - classList.toggle(layout, enable); + import(data) { + let key, value; + const object = this.export(); + for (key in object) { + value = object[key]; + if (!data.hasOwnProperty(key)) { + this.del(key); } - classList.toggle("_overlay-scrollbars", $.overlayScrollbarsEnabled()); } - - initSidebarWidth() { - const size = this.get("size"); - if (size) { - document.documentElement.style.setProperty( - "--sidebarWidth", - size + "px", - ); + for (key in data) { + value = data[key]; + if (Settings.PREFERENCE_KEYS.indexOf(key) !== -1) { + this.set(key, value); } } - }; - app.Settings.initClass(); - return app.Settings; -})(); - -function __guard__(value, transform) { - return typeof value !== "undefined" && value !== null - ? transform(value) - : undefined; -} + } + + reset() { + this.store.reset(); + this.cache = {}; + } + + initLayout() { + if (this.get("dark") === 1) { + this.set("theme", "dark"); + this.del("dark"); + } + this.setTheme(this.get("theme")); + for (var layout of app.Settings.LAYOUTS) { + this.toggleLayout(layout, this.hasLayout(layout)); + } + this.initSidebarWidth(); + } + + setTheme(theme) { + if (theme === "auto") { + theme = this.darkModeQuery.matches ? "dark" : "default"; + } + const { classList } = document.documentElement; + classList.remove("_theme-default", "_theme-dark"); + classList.add("_theme-" + theme); + this.updateColorMeta(); + } + + updateColorMeta() { + const color = getComputedStyle(document.documentElement) + .getPropertyValue("--headerBackground") + .trim(); + $("meta[name=theme-color]").setAttribute("content", color); + } + + toggleLayout(layout, enable) { + const { classList } = document.body; + // sidebar is always shown for settings; its state is updated in app.views.Settings + if ( + layout !== "_sidebar-hidden" || + !(app.router != null ? app.router.isSettings : undefined) + ) { + classList.toggle(layout, enable); + } + classList.toggle("_overlay-scrollbars", $.overlayScrollbarsEnabled()); + } + + initSidebarWidth() { + const size = this.get("size"); + if (size) { + document.documentElement.style.setProperty("--sidebarWidth", size + "px"); + } + } +}; diff --git a/assets/javascripts/views/content/settings_page.js b/assets/javascripts/views/content/settings_page.js index 8ad39bea..8b1dd32c 100644 --- a/assets/javascripts/views/content/settings_page.js +++ b/assets/javascripts/views/content/settings_page.js @@ -21,7 +21,7 @@ app.views.SettingsPage = class SettingsPage extends app.View { settings.spaceScroll = app.settings.get("spaceScroll"); settings.spaceTimeout = app.settings.get("spaceTimeout"); settings.autoSupported = app.settings.autoSupported; - for (var layout of app.settings.LAYOUTS) { + for (var layout of app.Settings.LAYOUTS) { settings[layout] = app.settings.hasLayout(layout); } return settings;