university/Imagine
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: button to go back to edit another image

Browse source
This commit is contained in:
Orangerot 2024-12-10 03:14:49 +01:00
parent bd7ae62180
commit a4af4cc514
3 changed files with 153 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
index.html
View file

@ -11,14 +11,14 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Imagine - Image Editor</title> <title>Imagine - Image Editor</title>
</head> </head>
<body style="padding-top: 100dvh; "> <body style="padding-top: 100dvh; " class="">
<div class="navbar columns is-mobile is-fixed-top"> <div class="navbar columns is-mobile is-fixed-top">
<div class="column"> <div class="column">
<div class="hero is-fullheight" style="min-height: 100dvh;"> <div class="hero is-fullheight" style="min-height: 100dvh;">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<canvas id="myCanvas" class="is-hidden" width="300" height="300"></canvas> <canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas>
<div id="imports" class="columns is-mobile"> <div class="columns is-mobile is-hidden-editor">
<div class="column"> <div class="column">
<button id="take-picture" <button id="take-picture"
class="button is-large is-responsive is-fullwidth py-6" class="button is-large is-responsive is-fullwidth py-6"
@ -42,18 +42,24 @@
</div> </div>
</div> </div>
</div><br> </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"> bottom: 30px">
<i class="fa-solid fa-sliders mr-2"></i> Settings <i class="fa-solid fa-sliders mr-2"></i> Settings
</a> </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>
</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"> <aside class="menu" style="width: 300px">
<h1 class="title">Imagine</h1> <h1 class="title">Imagine</h1>
<h2 class="subtitle">Image Editor</h2> <h2 class="subtitle">Image Editor</h2>
<!-- autocomplete off prevents browsers from remebering the value on page reloads -->
<form autocomplete="off">
<button id="save" class="button is-primary"> <button id="save" class="button is-primary">
Save Image Save Image
</button> </button>
@ -121,10 +127,18 @@
min="0" max="1" value="0" step="0.05"> min="0" max="1" value="0" step="0.05">
</div> </div>
</div> </div>
</form>
</aside> </aside>
</div> </div>
</div> </div>
<div class="notification is-fullwidth is-hidden-desktop" style="z-index: 200"> <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"> <button id="save" class="button is-primary">
Save Image Save Image
</button> </button>
@ -192,6 +206,7 @@
min="0" max="1" value="0" step="0.05"> min="0" max="1" value="0" step="0.05">
</div> </div>
</div> </div>
</form>
</div> </div>
</body> </body>
</html> </html>

10
main.js
View file

@ -1,6 +1,5 @@
let canvas; let canvas;
let ctx; let ctx;
let imports;
let settings = { let settings = {
brightness: {}, brightness: {},
saturate: {}, saturate: {},
@ -13,7 +12,7 @@ const img = new Image();
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
canvas = document.getElementById("myCanvas"); canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
imports = document.getElementById("imports"); document.getElementById("back").addEventListener("click", () => document.body.classList.remove("editor-enabled"));
// bind listeners // bind listeners
document.getElementById("take-picture").addEventListener("click", take_picture); document.getElementById("take-picture").addEventListener("click", take_picture);
@ -38,14 +37,13 @@ document.addEventListener("DOMContentLoaded", function() {
}) })
function take_picture() { function take_picture() {
canvas.classList.remove("is-hidden"); document.body.classList.add("editor-enabled");
imports.classList.add("is-hidden");
} }
function upload_image() { function upload_image() {
canvas.classList.remove("is-hidden"); document.body.classList.add("editor-enabled");
imports.classList.add("is-hidden");
console.log(this.files[0]); console.log(this.files[0]);
img.src = URL.createObjectURL(this.files[0]); img.src = URL.createObjectURL(this.files[0]);

8
style.css
View file

@ -7,3 +7,11 @@ canvas {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
body:not(.editor-enabled) .is-visible-editor {
display: none !important;
}
body.editor-enabled .is-hidden-editor {
display: none !important;
}