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

feat: buttons to reset sliders

Browse source
This commit is contained in:
Orangerot 2024-12-10 04:33:17 +01:00
parent a4af4cc514
commit 76872c7bde
2 changed files with 39 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
index.html
View file

@ -54,7 +54,7 @@
</div> </div>
</div> </div>
<div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor"> <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> <h1 class="title">Imagine</h1>
<h2 class="subtitle">Image Editor</h2> <h2 class="subtitle">Image Editor</h2>
@ -76,6 +76,9 @@
<label class="label"> <label class="label">
<i class="fa-solid fa-sun fa-fw"></i> <i class="fa-solid fa-sun fa-fw"></i>
Brightness Brightness
<span class="icon is-pulled-right brightness-reset">
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
</span>
</label> </label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
@ -88,6 +91,9 @@
<label class="label"> <label class="label">
<i class="fa-solid fa-leaf fa-fw"></i> <i class="fa-solid fa-leaf fa-fw"></i>
Saturation Saturation
<span class="icon is-pulled-right saturate-reset">
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
</span>
</label> </label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
@ -100,6 +106,9 @@
<label class="label"> <label class="label">
<i class="fa-solid fa-circle-half-stroke fa-fw"></i> <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
Contrast Contrast
<span class="icon is-pulled-right contrast-reset">
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
</span>
</label> </label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
@ -119,6 +128,9 @@
<label class="label"> <label class="label">
<i class="fa-solid fa-water fa-fw"></i> <i class="fa-solid fa-water fa-fw"></i>
Blur Blur
<span class="icon is-pulled-right blur-reset">
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
</span>
</label> </label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
@ -155,6 +167,9 @@
<label class="label"> <label class="label">
<i class="fa-solid fa-sun fa-fw"></i> <i class="fa-solid fa-sun fa-fw"></i>
Brightness Brightness
<span class="icon is-pulled-right brightness-reset">
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
</span>
</label> </label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
@ -167,6 +182,9 @@
<label class="label"> <label class="label">
<i class="fa-solid fa-leaf fa-fw"></i> <i class="fa-solid fa-leaf fa-fw"></i>
Saturation Saturation
<span class="icon is-pulled-right saturate-reset">
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
</span>
</label> </label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
@ -179,6 +197,9 @@
<label class="label"> <label class="label">
<i class="fa-solid fa-circle-half-stroke fa-fw"></i> <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
Contrast Contrast
<span class="icon is-pulled-right contrast-reset">
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
</span>
</label> </label>
<div class="control"> <div class="control">
<input type="range" <input type="range"
@ -198,6 +219,9 @@
<label class="label"> <label class="label">
<i class="fa-solid fa-water fa-fw"></i> <i class="fa-solid fa-water fa-fw"></i>
Blur Blur
<span class="icon is-pulled-right blur-reset">
<i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
</span>
</label> </label>
<div class="control"> <div class="control">
<input type="range" <input type="range"

16
main.js
View file

@ -32,9 +32,21 @@ document.addEventListener("DOMContentLoaded", function() {
for (let element of elements) { for (let element of elements) {
element.addEventListener("input", settings_apply); 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() { function take_picture() {
document.body.classList.add("editor-enabled"); document.body.classList.add("editor-enabled");