Merge pull request #11542 from thaJeztah/separate_themeswitcher

js: move theme switcher to its own script, and use localstorage

_includes/body-landing.html

@@ -470,9 +470,9 @@
   <footer class="footer">
     {% include footer.html %}
   </footer>
+  <script src="/js/theme-switcher.js"></script>
   <script src="/js/jquery.js"></script>
   <script src="/js/bootstrap.min.js"></script>
-  <script src="/js/landing-page.js"></script>
   <script defer src="/js/metadata.js"></script>
   <script defer src="/js/search.js"></script>
 

_includes/body.html

@@ -52,22 +52,7 @@
                                         <li><a href="{{ edit_url }}"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit this page</a></li>
                                         {%- endif -%}
                                         <li><a href="https://github.com/docker/docker.github.io/issues/new?body=File: [{{ page.path }}](https://docs.docker.com{{ page.url }})" class="nomunge"><i class="fa fa-check" aria-hidden="true"></i> Request docs changes</a></li>
-                                        <li>
-                                            <div class="toggle-mode">
-                                                <div class="icon">
-                                                    <i class="fa fa-sun-o" aria-hidden="true"></i>
-                                                </div>
-                                                <div class="toggle-switch">
-                                                    <label class="switch">
-                                                        <input type="checkbox" id="switch-style">
-                                                        <div class="slider round"></div>
-                                                    </label>
-                                                </div>
-                                                <div class="icon">
-                                                    <i class="fa fa-moon-o" aria-hidden="true"></i>
-                                                </div>
-                                            </div>
-                                        </li>
+                                        <li>{%- include theme-switch.html -%}</li>
                                     </ul>
                                 </div>
                                 {%- unless page.notoc -%}
@@ -88,6 +73,7 @@
         {% include footer.html %}
     </footer>
     <script>const pageURL = "{{ page.url }}";</script>
+    <script src="/js/theme-switcher.js"></script>
     <script defer src="/js/anchorlinks.js"></script>
     <script src="/js/jquery.js"></script>
     <script src="/js/bootstrap.min.js"></script>

_includes/theme-switch.html

@@ -5,7 +5,7 @@
   <div class="toggle-switch">
       <label class="switch">
           <input type="checkbox" id="switch-style">
-          <div class="slider round"></div>
+          <span class="slider round"></span>
       </label>
   </div>
   <div class="icon">

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 () {

js/landing-page.js

@@ -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);
-  }
-});

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)