feat: button to go back to edit another image

author: Orangerot <purple@orangerot.dev> 2024-12-10 03:14:49 +0100
committer: Orangerot <purple@orangerot.dev> 2024-12-10 03:14:49 +0100
commit: a4af4cc514ab80cd3bb221533d51db705248d8e9 (patch)
tree: a3924bbf59a7a87a6189d46fb2b8adb655b9d2b3
parent: bd7ae6218033b436fa39771d75d54acceb9de5ca (diff)
3 files changed, 150 insertions, 129 deletions
diff --git a/index.html b/index.html
index e315a99..704c76c 100644
--- a/index.html
+++ b/index.html
@@ -11,14 +11,14 @@
     <link rel="stylesheet" href="style.css">
     <title>Imagine - Image Editor</title>
   </head>
-  <body style="padding-top: 100dvh; ">
+  <body style="padding-top: 100dvh; " class="">
     <div class="navbar columns is-mobile is-fixed-top">
       <div class="column">
         <div class="hero is-fullheight" style="min-height: 100dvh;">
           <div class="hero-body">
             <div class="container">
-              <canvas id="myCanvas" class="is-hidden" width="300" height="300"></canvas>
-              <div id="imports" class="columns is-mobile">
+              <canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas>
+              <div class="columns is-mobile is-hidden-editor">
                 <div class="column">
                   <button id="take-picture" 
                       class="button is-large is-responsive is-fullwidth py-6"
@@ -42,156 +42,171 @@
                 </div>
               </div>
             </div><br>
-            <a href="#settings" class="button is-hidden-desktop" style="position: absolute; right: 30px;
+            <a href="#settings" class="button is-hidden-desktop is-visible-editor" style="position: absolute; right: 30px;
                      bottom: 30px">
                 <i class="fa-solid fa-sliders mr-2"></i> Settings
             </a>
+            <button id="back" class="button is-visible-editor" style="position: absolute; left: 30px;
+                     top: 30px">
+                <i class="fa-solid fa-arrow-left mr-2"></i> Back
+            </button>
           </div>
         </div>
       </div>
-      <div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only">
+      <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">
           <h1 class="title">Imagine</h1>
           <h2 class="subtitle">Image Editor</h2>
 
-          <button id="save" class="button is-primary">
-            Save Image
-          </button>
-          <button id="share" class="button is-secondary">
-            <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
-            Share
-          </button>
+          <!-- autocomplete off prevents browsers from remebering the value on page reloads -->
+          <form autocomplete="off">
+            <button id="save" class="button is-primary">
+              Save Image
+            </button>
+            <button id="share" class="button is-secondary">
+              <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
+              Share
+            </button>
 
-          <p class="menu-label">
+            <p class="menu-label">
             Color Correction
-          </p>
+            </p>
 
-          <div class="field">
-            <label class="label">
-              <i class="fa-solid fa-sun fa-fw"></i>
-              Brightness
-            </label>
-            <div class="control">
-              <input type="range"
-                     id="brightness" 
-                     class="brightness slider is-fullwidth is-primary" 
-                     min="0" max="2" value="1" step="0.1">
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-sun fa-fw"></i>
+                Brightness
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="brightness" 
+                       class="brightness slider is-fullwidth is-primary" 
+                       min="0" max="2" value="1" step="0.1">
+              </div>
             </div>
-          </div>
-          <div class="field">
-            <label class="label">
-              <i class="fa-solid fa-leaf fa-fw"></i>
-              Saturation
-            </label>
-            <div class="control">
-              <input type="range"
-                     id="saturate" 
-                     class="saturate slider is-fullwidth is-primary" 
-                     min="0" max="2" value="1" step="0.1">
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-leaf fa-fw"></i>
+                Saturation
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="saturate" 
+                       class="saturate slider is-fullwidth is-primary" 
+                       min="0" max="2" value="1" step="0.1">
+              </div>
             </div>
-          </div>
-          <div class="field">
-            <label class="label">
-              <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
-              Contrast
-            </label>
-            <div class="control">
-              <input type="range"
-                     id="contrast" 
-                     class="contrast slider is-fullwidth is-primary" 
-                     min="0" max="2" value="1" step="0.1">
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
+                Contrast
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="contrast" 
+                       class="contrast slider is-fullwidth is-primary" 
+                       min="0" max="2" value="1" step="0.1">
+              </div>
             </div>
-          </div>
 
-          <p class="menu-label">
+            <p class="menu-label">
             Distortion
-          </p>
-          <p class="menu-label">
+            </p>
+            <p class="menu-label">
             Blur and Sharpen
-          </p>
-          <div class="field">
-            <label class="label">
-              <i class="fa-solid fa-water fa-fw"></i>
-              Blur
-            </label>
-            <div class="control">
-              <input type="range"
-                     id="blur" 
-                     class="blur slider is-fullwidth is-primary" 
-                     min="0" max="1" value="0" step="0.05">
+            </p>
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-water fa-fw"></i>
+                Blur
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="blur" 
+                       class="blur slider is-fullwidth is-primary" 
+                       min="0" max="1" value="0" step="0.05">
+              </div>
             </div>
-          </div>
+          </form>
         </aside>
       </div>
     </div>
-    <div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200">
-      <button id="save" class="button is-primary">
-        Save Image
-      </button>
-      <button id="share" class="button is-secondary">
-        <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
-        Share
-      </button>
+    <div class="notification is-fullwidth is-hidden-desktop is-visible-editor" style="z-index: 200">
+      <!-- #settings is an anhor to scroll to when clicked on the settings-button -->
+      <span id="settings"></span>
+      <!-- #top is an anchor provided by the browser to go to the top of the page -->
+      <a href="#top" class="delete"></a>
+
+      <!-- autocomplete off prevents browsers from remebering the value on page reloads -->
+      <form autocomplete="off">
+        <button id="save" class="button is-primary">
+          Save Image
+        </button>
+        <button id="share" class="button is-secondary">
+          <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
+          Share
+        </button>
 
-      <p class="menu-label">
-      Color Correction
-      </p>
+        <p class="menu-label">
+        Color Correction
+        </p>
 
-      <div class="field">
-        <label class="label">
-          <i class="fa-solid fa-sun fa-fw"></i>
-          Brightness
-        </label>
-        <div class="control">
-          <input type="range"
-                 id="brightness" 
-                 class="brightness slider is-fullwidth is-primary" 
-                 min="0" max="2" value="1" step="0.1">
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-sun fa-fw"></i>
+            Brightness
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="brightness" 
+                   class="brightness slider is-fullwidth is-primary" 
+                   min="0" max="2" value="1" step="0.1">
+          </div>
         </div>
-      </div>
-      <div class="field">
-        <label class="label">
-          <i class="fa-solid fa-leaf fa-fw"></i>
-          Saturation
-        </label>
-        <div class="control">
-          <input type="range"
-                 id="saturate" 
-                 class="saturate slider is-fullwidth is-primary" 
-                 min="0" max="2" value="1" step="0.1">
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-leaf fa-fw"></i>
+            Saturation
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="saturate" 
+                   class="saturate slider is-fullwidth is-primary" 
+                   min="0" max="2" value="1" step="0.1">
+          </div>
         </div>
-      </div>
-      <div class="field">
-        <label class="label">
-          <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
-          Contrast
-        </label>
-        <div class="control">
-          <input type="range"
-                 id="contrast" 
-                 class="contrast slider is-fullwidth is-primary" 
-                 min="0" max="2" value="1" step="0.1">
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
+            Contrast
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="contrast" 
+                   class="contrast slider is-fullwidth is-primary" 
+                   min="0" max="2" value="1" step="0.1">
+          </div>
         </div>
-      </div>
 
-      <p class="menu-label">
-      Distortion
-      </p>
-      <p class="menu-label">
-      Blur and Sharpen
-      </p>
-      <div class="field">
-        <label class="label">
-          <i class="fa-solid fa-water fa-fw"></i>
-          Blur
-        </label>
-        <div class="control">
-          <input type="range"
-                 id="blur" 
-                 class="blur slider is-fullwidth is-primary" 
-                 min="0" max="1" value="0" step="0.05">
+        <p class="menu-label">
+        Distortion
+        </p>
+        <p class="menu-label">
+        Blur and Sharpen
+        </p>
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-water fa-fw"></i>
+            Blur
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="blur" 
+                   class="blur slider is-fullwidth is-primary" 
+                   min="0" max="1" value="0" step="0.05">
+          </div>
         </div>
-      </div>
+      </form>
     </div>
   </body>
 </html>
diff --git a/main.js b/main.js
index b805275..a3617e1 100644
--- a/main.js
+++ b/main.js
@@ -1,6 +1,5 @@
 let canvas;
 let ctx;
-let imports;
 let settings = {
   brightness: {},
   saturate: {},
@@ -13,7 +12,7 @@ const img = new Image();
 document.addEventListener("DOMContentLoaded", function() {
   canvas = document.getElementById("myCanvas");
   ctx = canvas.getContext("2d");
-  imports = document.getElementById("imports");
+  document.getElementById("back").addEventListener("click", () => document.body.classList.remove("editor-enabled"));
 
   // bind listeners
   document.getElementById("take-picture").addEventListener("click", take_picture);
@@ -38,14 +37,13 @@ document.addEventListener("DOMContentLoaded", function() {
 })
 
 function take_picture() {
-  canvas.classList.remove("is-hidden");
-  imports.classList.add("is-hidden");
+  document.body.classList.add("editor-enabled");
 
 }
 
 function upload_image() {
-  canvas.classList.remove("is-hidden");
-  imports.classList.add("is-hidden");
+  document.body.classList.add("editor-enabled");
+
   console.log(this.files[0]);
 
   img.src = URL.createObjectURL(this.files[0]);
diff --git a/style.css b/style.css
index 11f3fc9..2bed156 100644
--- a/style.css
+++ b/style.css
@@ -7,3 +7,11 @@ canvas {
   max-width: 100%;
   max-height: 100%;
 }
+
+body:not(.editor-enabled) .is-visible-editor {
+  display: none !important;
+}
+
+body.editor-enabled .is-hidden-editor {
+  display: none !important;
+}
author	Orangerot <purple@orangerot.dev>	2024-12-10 03:14:49 +0100
committer	Orangerot <purple@orangerot.dev>	2024-12-10 03:14:49 +0100
commit	a4af4cc514ab80cd3bb221533d51db705248d8e9 (patch)
tree	a3924bbf59a7a87a6189d46fb2b8adb655b9d2b3
parent	bd7ae6218033b436fa39771d75d54acceb9de5ca (diff)