From 6b6ef9fe0de5d36614a77e583790042ccc74e202 Mon Sep 17 00:00:00 2001 From: Sebastiaan van Stijn Date: Tue, 13 Oct 2020 22:02:06 +0200 Subject: [PATCH] js: move theme switcher to its own script, and use localstorage rewrite the script to not depend on jQuery, so that it can be run as soon as possible. Also switch to use localstorage instead of cookies, which is a more suitable mechanism for this, and use the same HTML include as was used on the landing-page for the whole site. Signed-off-by: Sebastiaan van Stijn --- _includes/body-landing.html | 2 +- _includes/body.html | 18 ++--------- _includes/theme-switch.html | 2 +- js/docs.js | 62 ++----------------------------------- js/landing-page.js | 50 ------------------------------ js/theme-switcher.js | 27 ++++++++++++++++ 6 files changed, 34 insertions(+), 127 deletions(-) delete mode 100644 js/landing-page.js create mode 100644 js/theme-switcher.js diff --git a/_includes/body-landing.html b/_includes/body-landing.html index 01403fef96..f46edda07f 100644 --- a/_includes/body-landing.html +++ b/_includes/body-landing.html @@ -470,9 +470,9 @@
{% include footer.html %}
+ - diff --git a/_includes/body.html b/_includes/body.html index e51662ea5d..75620019ee 100644 --- a/_includes/body.html +++ b/_includes/body.html @@ -52,22 +52,7 @@
  • Edit this page
    • {%- endif -%}
  • Request docs changes
    • -
  • -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    • +
  • {%- include theme-switch.html -%}
    • {%- unless page.notoc -%} @@ -88,6 +73,7 @@ {% include footer.html %} + diff --git a/_includes/theme-switch.html b/_includes/theme-switch.html index b75b30c26b..a016ad4b2c 100644 --- a/_includes/theme-switch.html +++ b/_includes/theme-switch.html @@ -5,7 +5,7 @@
    diff --git a/js/docs.js b/js/docs.js index 84165b09e0..06f5213368 100644 --- a/js/docs.js +++ b/js/docs.js @@ -152,42 +152,8 @@ $(window).scroll(function () { } }); - -// Cookie functions -function createCookie(name, value, days) { - var expires = ""; - if (days) { - var date = new Date(); - date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); - expires = "; expires=" + date.toUTCString(); - } - document.cookie = name + "=" + value + expires + "; path=/"; -} - -function readCookie(name) { - var nameEQ = name + "="; - var ca = document.cookie.split(";"); - for (var i = 0; i < ca.length; i++) { - var c = ca[i]; - while (c.charAt(0) === " ") c = c.substring(1, c.length); - if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); - } - return null; -} - -var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; -var selectedNightTheme = readCookie("night"); - -if (selectedNightTheme === "true" || (selectedNightTheme === null && prefersDark)) { - applyNight(); - $("#switch-style").prop("checked", true); -} else { - applyDay(); - $("#switch-style").prop("checked", false); -} - /* - * toggle menu ********************************************************************* + * toggle menu ***************************************************************** */ $("#menu-toggle").click(function (e) { @@ -266,7 +232,7 @@ $(document).ready(function () { }); /* - * make dropdown show on hover ********************************************************************* + * make dropdown show on hover ************************************************* */ $("ul.nav li.dropdown").hover(function () { @@ -276,29 +242,7 @@ $("ul.nav li.dropdown").hover(function () { }); /* - * swapStyleSheet********************************************************************* - */ - -function applyNight() { - $("body").addClass("night"); -} - -function applyDay() { - $("body").removeClass("night"); -} - -$("#switch-style").change(function () { - if ($(this).is(":checked")) { - applyNight(); - createCookie("night", true, 999) - } else { - applyDay(); - createCookie("night", false, 999); - } -}); - -/* - * Components ********************************************************************* + * Components ****************************************************************** */ $(function () { diff --git a/js/landing-page.js b/js/landing-page.js deleted file mode 100644 index e054ba1b60..0000000000 --- a/js/landing-page.js +++ /dev/null @@ -1,50 +0,0 @@ -// Cookie functions -function createCookie(name, value, days) { - var expires = ""; - if (days) { - var date = new Date(); - date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); - expires = "; expires=" + date.toUTCString(); - } - document.cookie = name + "=" + value + expires + "; path=/"; -} - -function readCookie(name) { - var nameEQ = name + "="; - var ca = document.cookie.split(";"); - for (var i = 0; i < ca.length; i++) { - var c = ca[i]; - while (c.charAt(0) === " ") c = c.substring(1, c.length); - if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); - } - return null; -} - -var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; -var selectedNightTheme = readCookie("night"); - -if (selectedNightTheme === "true" || (selectedNightTheme === null && prefersDark)) { - applyNight(); - $("#switch-style").prop("checked", true); -} else { - applyDay(); - $("#switch-style").prop("checked", false); -} - -function applyNight() { - $("body").addClass("night"); -} - -function applyDay() { - $("body").removeClass("night"); -} - -$("#switch-style").change(function () { - if ($(this).is(":checked")) { - applyNight(); - createCookie("night", true, 999) - } else { - applyDay(); - createCookie("night", false, 999); - } -}); diff --git a/js/theme-switcher.js b/js/theme-switcher.js new file mode 100644 index 0000000000..77327ccabf --- /dev/null +++ b/js/theme-switcher.js @@ -0,0 +1,27 @@ +// Replacement for jQuery $(selector) and $.onready() +const _ = s => document.querySelector(s); +const ready = f => document.readyState !== 'loading' ? f() : document.addEventListener('DOMContentLoaded', f) + +const darkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches +const selectedTheme = window.localStorage ? localStorage.getItem("theme") : null; + +if (selectedTheme !== null) { + if (selectedTheme === "night") _("body").classList.add("night"); +} else if (darkMode) { + _("body").classList.add("night"); +} + +function themeToggler() { + const sw = _("#switch-style"), b = _("body"); + if (sw && b) { + sw.checked = b.classList.contains("night") + sw.addEventListener("change", function (){ + b.classList.toggle("night", this.checked) + if (window.localStorage) { + this.checked ? localStorage.setItem("theme", "night") : localStorage.setItem("theme", "day") + } + }) + } +} + +ready(themeToggler)