From a4af4cc514ab80cd3bb221533d51db705248d8e9 Mon Sep 17 00:00:00 2001 From: Orangerot Date: Tue, 10 Dec 2024 03:14:49 +0100 Subject: feat: button to go back to edit another image --- index.html | 261 ++++++++++++++++++++++++++++++++----------------------------- main.js | 10 +-- style.css | 8 ++ 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 @@ Imagine - Image Editor - +
- -
+ +

- Settings +
-
+
-
- - +
+ + + + + + +
+ + -

- Color Correction -

+

+ Color Correction +

-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-
- -
- +
+ +
+ +
-
-

- Distortion -

-

- Blur and Sharpen -

-
- -
- +

+ Distortion +

+

+ Blur and Sharpen +

+
+ +
+ +
-
+
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; +} -- cgit v1.2.3