feat: buttons to reset sliders

2 files changed, 38 insertions, 2 deletions

diff --git a/index.html b/index.html
index 704c76c..ef7ffb2 100644
--- a/index.html
+++ b/index.html
@@ -54,7 +54,7 @@
         </div>
       </div>
       <div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor">
-        <aside class="menu" style="width: 300px">
+        <aside class="menu mr-3" style="width: 300px">
           <h1 class="title">Imagine</h1>
           <h2 class="subtitle">Image Editor</h2>
 
@@ -76,6 +76,9 @@
               <label class="label">
                 <i class="fa-solid fa-sun fa-fw"></i>
                 Brightness
+                <span class="icon is-pulled-right brightness-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
               </label>
               <div class="control">
                 <input type="range"
@@ -88,6 +91,9 @@
               <label class="label">
                 <i class="fa-solid fa-leaf fa-fw"></i>
                 Saturation
+                <span class="icon is-pulled-right saturate-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
               </label>
               <div class="control">
                 <input type="range"
@@ -100,6 +106,9 @@
               <label class="label">
                 <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
                 Contrast
+                <span class="icon is-pulled-right contrast-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
               </label>
               <div class="control">
                 <input type="range"
@@ -119,6 +128,9 @@
               <label class="label">
                 <i class="fa-solid fa-water fa-fw"></i>
                 Blur
+                <span class="icon is-pulled-right blur-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
               </label>
               <div class="control">
                 <input type="range"
@@ -155,6 +167,9 @@
           <label class="label">
             <i class="fa-solid fa-sun fa-fw"></i>
             Brightness
+            <span class="icon is-pulled-right brightness-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
           </label>
           <div class="control">
             <input type="range"
@@ -167,6 +182,9 @@
           <label class="label">
             <i class="fa-solid fa-leaf fa-fw"></i>
             Saturation
+            <span class="icon is-pulled-right saturate-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
           </label>
           <div class="control">
             <input type="range"
@@ -179,6 +197,9 @@
           <label class="label">
             <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
             Contrast
+            <span class="icon is-pulled-right contrast-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
           </label>
           <div class="control">
             <input type="range"
@@ -198,6 +219,9 @@
           <label class="label">
             <i class="fa-solid fa-water fa-fw"></i>
             Blur
+            <span class="icon is-pulled-right blur-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
           </label>
           <div class="control">
             <input type="range"
diff --git a/main.js b/main.js
index a3617e1..0960448 100644
--- a/main.js
+++ b/main.js
@@ -32,9 +32,21 @@ document.addEventListener("DOMContentLoaded", function() {
     for (let element of elements) {
       element.addEventListener("input", settings_apply);
     }
+
+    const reset_elements = document.getElementsByClassName(setting + "-reset");
+    for (let reset_element of reset_elements) {
+      reset_element.addEventListener("click", () => reset_all(setting));
+    }
   }
+});
 
-})
+function reset_all(setting) {
+  console.log("reseting " + setting);
+  for (let element of settings[setting].elements) {
+    element.value = element.defaultValue;
+  }
+  draw(true);
+}
 
 function take_picture() {
   document.body.classList.add("editor-enabled");