Add a reset button

Signed-off-by: supechicken <me@supechicken666.dev>
supechicken · Sep 16, 2024 · c12ef28 · c12ef28
1 parent 702a14a
commit c12ef28
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/css/stylesheet.css b/css/stylesheet.css
@@ -176,3 +176,7 @@ input[type="file"] { width: 100px; }
   font-size: 0.9rem;
   margin-right: 10px;
 }
+
+#bottomBtnList > button {
+  width: 150px;
+}
diff --git a/html/settings.html b/html/settings.html
@@ -127,7 +127,10 @@
       </tr>
     </table>
   </fieldset>
-  <button id="saveBtn">Save settings</button>
+  <div id="bottomBtnList" class="horizontal-center">
+    <button id="resetBtn">Reset options</button>
+    <button id="saveBtn">Save settings</button>
+  </div>
 </body>
 
 </html>
diff --git a/js/settings.js b/js/settings.js
@@ -22,6 +22,7 @@ const chromeURLs                = chrome.runtime.getManifest().optional_host_per
       movingBackground          = document.getElementById('movingBackground'),
       backgroundPicker          = document.getElementById('backgroundPicker'),
       chromeUIBgPicker          = document.getElementById('chromeUIBgPicker'),
+      resetBtn                  = document.getElementById('resetBtn'),
       saveBtn                   = document.getElementById('saveBtn');
 
 function printLog(message) {
@@ -111,6 +112,24 @@ chromeUIBgPicker.onchange = async () => {
   chromeUIBgName.innerText = chromeUIBgFile.name;
 };
 
+// reset options
+resetBtn.onclick = () => {
+  chromeUI.checked                    = false;
+  movingBackground.checked            = true;
+  blurRadiusSlider.value              = 0;
+  blurRadiusPercent.innerText         = `${blurRadiusSlider.value}px`;
+  chromeUIBlurRadiusSlider.value      = 0;
+  chromeUIBlurRadiusPercent.innerText = `${chromeUIBlurRadiusSlider.value}px`;
+  menuBlurRadiusSlider.value          = 5;
+  menuBlurRadiusPercent.innerText     = `${menuBlurRadiusSlider.value}px`;
+  UIOpacitySlider.value               = 50;
+  UIOpacityPercent.innerText          = `${UIOpacitySlider.value}%`
+  chromeUIOpacitySlider.value         = 50;
+  chromeUIOpacityPercent.innerText    = `${chromeUIOpacitySlider.value}%`
+  menuOpacitySlider.value             = 50;
+  menuOpacityPercent.innerText        = `${menuOpacitySlider.value}%`;
+}
+
 // save changes
 saveBtn.onclick = async () => {
   saveBtn.disabled = true;