Add switch on/off (#18)

mogrene · Dec 10, 2023 · 0e3f8bf · 0e3f8bf
1 parent 47e6a86
commit 0e3f8bf
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 20 deletions.
diff --git a/public/popup.html b/public/popup.html
@@ -9,9 +9,23 @@
     <div class="app">
       <div class="app-header">
         <p id="currentDomain"></p>
-        <a id="reloadIcon">
-          <img src="/icons/reload-icon.svg" alt="Reload page" width="25" />
-        </a>
+        <div class="app-header-right">
+          <a id="reloadIcon" hidden>
+            <img src="/icons/reload-icon.svg" alt="Reload page" width="25" />
+          </a>
+          <div class="switch-container">
+            <label class="switch-label switch-label-off" id="switch-label-off"
+              >OFF</label
+            >
+            <label class="switch" id="switch">
+              <input type="checkbox" id="statusCheckbox" checked />
+              <span class="slider"></span>
+            </label>
+            <label class="switch-label switch-label-on" id="switch-label-on"
+              >ON</label
+            >
+          </div>
+        </div>
       </div>
     </div>
 

diff --git a/src/popup.css b/src/popup.css
@@ -27,6 +27,7 @@ body {
 
 a {
   cursor: pointer;
+  height: 25px;
 }
 
 .app {
@@ -35,7 +36,6 @@ a {
   align-items: center;
   justify-content: space-between;
   flex-direction: column;
-  text-align: left;
   padding: 20px;
 }
 
@@ -46,3 +46,91 @@ a {
   align-items: center;
   justify-content: space-between;
 }
+
+.app-header-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.switch-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.switch-label {
+  padding: 8px;
+  transition: color 0.4s ease;
+  font-size: 8px;
+  font-weight: bolder;
+}
+
+.switch-label-on {
+  color: var(--green);
+}
+
+.switch-label-off {
+  color: var(--cold-gray);
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  border-radius: 20px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--black-wash);
+  border: 1px solid white;
+  opacity: 50%;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 20px;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 16px;
+  width: 16px;
+  right: 20px;
+  top: 1px;
+  background-color: var(--green);
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: var(--black-wash);
+  opacity: 100%;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+input:checked + .switch-label-on {
+  color: var(--green);
+}
+
+input:checked + .switch-label-off {
+  color: var(--cold-gray);
+}
diff --git a/src/popup.ts b/src/popup.ts
@@ -9,32 +9,44 @@ document.addEventListener('DOMContentLoaded', () => {
         const activeTab = tabs[0]
         if (activeTab.id) {
           browser.tabs.reload(activeTab.id)
+          reloadIcon.hidden = true
         }
       })
     })
   }
+
+  const statusCheckbox = document.getElementById(
+    'statusCheckbox'
+  ) as HTMLInputElement
+
+  if (statusCheckbox) {
+    browser.storage.sync.get(['status']).then((result) => {
+      statusCheckbox.checked = result.status || true
+    })
+
+    statusCheckbox.addEventListener('click', () => {
+      browser.storage.sync.set({ status: !statusCheckbox.checked })
+
+      document.getElementById('switch-label-on')!.style.color =
+        statusCheckbox.checked ? 'var(--green)' : 'var(--cold-gray)'
+
+      if (reloadIcon?.hidden) reloadIcon.hidden = false
+    })
+  }
 })
 
 const extractDomain = (url: string): string | null => {
   const match = url.match(/^(?:https?:\/\/)?(?:www\.)?([^/?]+)/)
   return match ? match[1] : null
 }
 
-const updateTabInfo = (): void => {
-  browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
-    const activeTab = tabs[0]
-    if (activeTab.url) {
-      const domain = extractDomain(activeTab.url)
-      const urlElement = document.getElementById('currentDomain')
-      if (urlElement) {
-        urlElement.textContent = domain || ''
-      }
+browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+  const activeTab = tabs[0]
+  if (activeTab.url) {
+    const domain = extractDomain(activeTab.url)
+    const urlElement = document.getElementById('currentDomain')
+    if (urlElement) {
+      urlElement.textContent = domain || ''
     }
-  })
-}
-
-updateTabInfo()
-
-browser.tabs.onActivated.addListener(() => {
-  updateTabInfo()
+  }
 })