minor refactor to work on firefox, moving files arond

jashkenas · Jul 23, 2024 · 6505d53 · 6505d53
1 parent 75540e3
commit 6505d53
Show file tree

Hide file tree

Showing 7 changed files with 222 additions and 194 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
   <title>Underscore.js</title>
   <style>
+    @import './static/css/theme-toggle.css';
     body {
       font-size: 14px;
       line-height: 22px;
@@ -260,6 +261,7 @@
       }
     }
   </style>
+  <script src="/static/js/themeToggle.js" defer></script>
 </head>
 <body>
 
@@ -4322,9 +4324,11 @@ <h2 id="changelog">Change Log</h2>
   </div>
 
   <form action="#" id="themeForm" data-name="toggleForm">
-    <label for="themeToggle" aria-label="theme">
-      <input type="checkbox" name="theme" id="themeToggle">
-    </label>
+    <div class="theme-control">
+      <label role="listbox" for="themeToggle" aria-label="theme">
+        <input role="option" type="checkbox" name="theme" id="themeToggle">
+      </label>
+    </div>
   </form>
 
 
@@ -4340,196 +4344,5 @@ <h2 id="changelog">Change Log</h2>
         }
       })
   </script>
-
-<script defer>
-
-  function themeToggle(toggleID) {
-
-    this.toggleForm = document.getElementById(toggleID);
-    this.body = document.body
-
-    this.events = function() {
-      this.toggleForm.addEventListener('change', this.handleChange.bind(this)) 
-      this.handleChange()
-    }.bind(this)
-
-
-
-
-    this.handleChange = function(e) {
-
-      var toggle = document.querySelector('input[type="checkbox"]') || e.target.closest('input[type="checkbox"]')
-
-      if (typeof toggle === "undefined") return null
-
-      if (toggle.checked) {
-        toggle.checked = false
-        this.body.setAttribute('data-theme', 'light')
-    } else {
-      toggle.checked = true
-      this.body.setAttribute('data-theme', 'dark')
-    }
-
-    }
-
-
-
-
-
-
-    this.events()
-
-
-
-  }
-
-  new themeToggle('themeForm')
-
-</script>
-
-<style>
-  form[data-name="toggleForm"]{
-    cursor: pointer;
-    display: block;
-    position: absolute;
-    top: 1rem;
-    right: 2rem;
-    height: 50px;
-    width: 50px;
-    label {
-      background: none;
-      cursor: pointer;
-      display: grid;
-      padding: unset;
-      padding-inline: 0.15rem;
-      padding-left: 0.15rem;
-      padding-right: 0.15rem;
-      place-items: center;
-      width: inherit;
-      height: inherit;
-      left: unset;
-      position: relative;
-    }
-
-    label::before {
-      content: "";
-      cursor: inherit;
-      background: #fff url('./sun.svg') no-repeat center / cover;
-      display: block;
-      height: 24px;
-      width: 24px;
-      position: absolute;
-      top: 50%;
-      left: 0;
-      transform: translate(-66%, -50%);
-    }
-    label::after {
-      content: "";
-      cursor: inherit;
-      background: #fff url('./moon.svg') no-repeat center / cover;
-      display: block;
-      height: 24px;
-      width: 24px;
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translate(66%, -50%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    input {
-      cursor: inherit;
-      left: unset;
-      right: unset;
-      top: unset;
-      bottom: unset;
-      margin: unset;
-      padding: unset;
-      position: relative;
-      visibility: hidden;
-    }
-
-    input::before {
-      content: "";
-      height: 1.1rem;
-      width: 2rem;
-      border-radius: 3rem;
-      background: #000;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: block;
-      visibility:visible;
-    }
-
-
-    input::after {
-      border-radius: 50%;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      top: 50%;
-      left: 50%;
-      content: '';
-      background: #0071b5;
-      width: 1rem;
-      height: 1rem;
-      display: block;
-      position: absolute;
-      transform: translate(-0.85rem, -50%);
-      visibility: visible;
-      -moz-transition: transform 350ms;
-      -webkit-transition: transform 350ms;
-      transition: transform 350ms;
-
-    }
-
-    input:checked::after {
-      transform: translate(-0.15rem, -50%);
-    }
-  }
-
-  body[data-theme="dark"] {
-    background: #333;
-    color: #fff;
-
-    label::before,
-    label::after {
-      background-color: #333;
-    }
-
-    label::before {
-      background: url('./sun-light.svg') no-repeat center center / cover;
-    }
-
-    label::after {
-      background: url('./moon-light.svg') no-repeat center center / cover;
-    }
-
-    svg {
-      path {
-        color: #fff;
-      }
-    }
-
-    a {
-      color: #fff;
-    }
-
-    tt {
-      color: #333;
-    }
-
-   #sidebar {
-    background: #333;
-    color: #fff;
-   }
-  }
-</style>
-
 </body>
 </html>
diff --git a/static/css/theme-toggle.css b/static/css/theme-toggle.css
@@ -0,0 +1,160 @@
+  form[data-name="toggleForm"]{
+    cursor: pointer;
+    display: block;
+    position: absolute;
+    top: 1rem;
+    right: 2rem;
+    height: 50px;
+    width: 50px;
+    label {
+      background: none;
+      cursor: pointer;
+      display: grid;
+      padding: unset;
+      padding-inline: 0.15rem;
+      padding-left: 0.15rem;
+      padding-right: 0.15rem;
+      place-items: center;
+      width: inherit;
+      height: inherit;
+      left: unset;
+      position: relative;
+      z-index: 1;
+    }
+
+    label::before {
+      content: "";
+      cursor: inherit;
+      background: #fff url('../images/sun.svg') no-repeat center / cover;
+      display: block;
+      height: 24px;
+      width: 24px;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translate(-66%, -50%);
+      z-index: 10;
+    }
+    label::after {
+      content: "";
+      cursor: inherit;
+      background: #fff url('../images/moon.svg') no-repeat center / cover;
+      display: block;
+      height: 24px;
+      width: 24px;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translate(66%, -50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+    }
+
+    input {
+      cursor: inherit;
+      left: unset;
+      right: unset;
+      top: unset;
+      bottom: unset;
+      margin: unset;
+      padding: unset;
+      position: relative;
+      visibility: hidden;
+      z-index: 9;
+    }
+
+    .theme-control {
+      position: relative;
+      z-index: 0;
+    }
+
+    .theme-control::before {
+      content: "";
+      height: 1.1rem;
+      width: 2rem;
+      border-radius: 3rem;
+      background: #000;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: block;
+      visibility:visible;
+      z-index: 0;
+    }
+
+
+    .theme-control::after {
+      border-radius: 50%;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      top: 50%;
+      left: 50%;
+      content: '';
+      background: #0071b5;
+      width: 1rem;
+      height: 1rem;
+      display: block;
+      position: absolute;
+      transform: translate(-0.85rem, -50%);
+      visibility: visible;
+      -moz-transition: transform 350ms;
+      -webkit-transition: transform 350ms;
+      transition: transform 350ms;
+      z-index: 0;
+
+    }
+
+    .theme-control:has(label > input:checked)::after {
+      transform: translate(-0.15rem, -50%);
+    }
+  }
+
+  body[data-theme="dark"] {
+    background: #333;
+    color: #fff;
+
+    label::before,
+    label::after {
+      background-color: #333;
+    }
+
+    label::before {
+      background: url('../images/sun-light.svg') no-repeat center center / cover;
+    }
+
+    label::after {
+      background: url('../images/moon-light.svg') no-repeat center center / cover;
+    }
+
+    svg {
+      path {
+        color: #fff;
+      }
+    }
+
+    a {
+      color: #fff;
+    }
+
+    tt {
+      color: #333;
+    }
+
+   #sidebar {
+    background: #333;
+    color: #fff;
+    a {
+      color: #fff;
+    }
+
+    a:hover,
+    a:active {
+      color: #e6e6e6;
+    }
+   }
+  }
diff --git a/moon-light.svg → static/images/moon-light.svg b/moon-light.svg → static/images/moon-light.svg
diff --git a/moon.svg → static/images/moon.svg b/moon.svg → static/images/moon.svg
diff --git a/sun-light.svg → static/images/sun-light.svg b/sun-light.svg → static/images/sun-light.svg
diff --git a/sun.svg → static/images/sun.svg b/sun.svg → static/images/sun.svg