Use Bootstrap 5 with dark mode support and remove jQuery

getnikola · Apr 29, 2024 · e6d7732 · e6d7732
1 parent ef39228
commit e6d7732
Show file tree

Hide file tree

Showing 3 changed files with 204 additions and 50 deletions.
diff --git a/checklist.html b/checklist.html
@@ -5,7 +5,90 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Nikola Release Checklist</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script>
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
+    })
+
+    btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+})()
+    </script>
+
     <style>
 ul {
   list-style: none;
@@ -15,19 +98,16 @@
     top: 5px;
     right: 5px;
     padding: 5px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--bs-border-color);
     font-size: 2em;
     transition: all 1s;
     font-variant-numeric: tabular-nums;
-    background: #fff7;
-    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
-    border-radius: 4px;
+    border-radius: var(--bs-border-radius);
 }
 
 #counter.complete {
     color: white;
-    border-color: #000;
-    background: var(--green);
+    background: var(--bs-success);
     text-shadow: none;
 }
     </style>
@@ -87,32 +167,29 @@ <h2>Finishing up</h2>
 <li><input type="checkbox"> Give yourself a pat on the back!</li>
 </ul>
     </div>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script>
     // Completed task counter
-    // © 2015-2018 Chris Warrick. License: MIT
-    var max = 0;
-    var inp;
-    $(document).ready(function() {
-        inp = $('input');
-        max = inp.length;
-        $('#total').text(max);
-    });
-    $('input').click(function() {
-        inp = $('input');
-        var count = 0;
-        for (var i = 0; i < inp.length; i++) {
+    // © 2015-2024 Chris Warrick. License: MIT
+    const max = document.querySelectorAll("input").length;
+    document.getElementById("total").innerText = max;
+    function updateCounter() {
+        const inp = document.querySelectorAll("input");
+        let count = 0;
+        for (let i = 0; i < inp.length; i++) {
             if (inp[i].checked) {
                 count += 1;
             }
         }
-        $('#current').text(count);
-        if (count == max) {
-            $('#counter').addClass('complete');
+        document.getElementById("current").innerText = count;
+        if (count === max) {
+            document.getElementById("counter").classList.add("complete");
         } else {
-            $('#counter').removeClass('complete');
+            document.getElementById("counter").classList.remove("complete");
         }
-    });
+    }
+
+    document.querySelectorAll("input").forEach(i => i.addEventListener("click", updateCounter));
+    updateCounter();
     </script>
   </body>
 </html>
diff --git a/src/bootstrap-foot.html b/src/bootstrap-foot.html
@@ -1,30 +1,27 @@
     </div>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script>
     // Completed task counter
-    // © 2015-2018 Chris Warrick. License: MIT
-    var max = 0;
-    var inp;
-    $(document).ready(function() {
-        inp = $('input');
-        max = inp.length;
-        $('#total').text(max);
-    });
-    $('input').click(function() {
-        inp = $('input');
-        var count = 0;
-        for (var i = 0; i < inp.length; i++) {
+    // © 2015-2024 Chris Warrick. License: MIT
+    const max = document.querySelectorAll("input").length;
+    document.getElementById("total").innerText = max;
+    function updateCounter() {
+        const inp = document.querySelectorAll("input");
+        let count = 0;
+        for (let i = 0; i < inp.length; i++) {
             if (inp[i].checked) {
                 count += 1;
             }
         }
-        $('#current').text(count);
-        if (count == max) {
-            $('#counter').addClass('complete');
+        document.getElementById("current").innerText = count;
+        if (count === max) {
+            document.getElementById("counter").classList.add("complete");
         } else {
-            $('#counter').removeClass('complete');
+            document.getElementById("counter").classList.remove("complete");
         }
-    });
+    }
+
+    document.querySelectorAll("input").forEach(i => i.addEventListener("click", updateCounter));
+    updateCounter();
     </script>
   </body>
 </html>
diff --git a/src/bootstrap-head.html b/src/bootstrap-head.html
@@ -5,7 +5,90 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Nikola Release Checklist</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script>
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
+    })
+
+    btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+})()
+    </script>
+
     <style>
 ul {
   list-style: none;
@@ -15,19 +98,16 @@
     top: 5px;
     right: 5px;
     padding: 5px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--bs-border-color);
     font-size: 2em;
     transition: all 1s;
     font-variant-numeric: tabular-nums;
-    background: #fff7;
-    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
-    border-radius: 4px;
+    border-radius: var(--bs-border-radius);
 }
 
 #counter.complete {
     color: white;
-    border-color: #000;
-    background: var(--green);
+    background: var(--bs-success);
     text-shadow: none;
 }
     </style>