simon/diy-startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

settings do not drag when input clicked now. Now supports sliders! (huge)

Browse Source
This commit is contained in:
Simon
2025-07-26 14:04:10 -04:00
parent 9104a1db6c
commit aa15eaa034
1 changed files with 80 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+80 -80
View File
@@ -319,13 +319,13 @@
there are some keyboard shortcuts for your convenience:<br /> there are some keyboard shortcuts for your convenience:<br />
"e" = enables editing mode<br /> "e" = enables editing mode<br />
esc = disables editing mode (and saves page)<br /> esc = disables editing mode (and saves page)<br />
"1"-"4" = jump between settings box tabs<br /><br /> <!-- "1"-"4" = jump between settings box tabs<br /><br /> -->
</p> </p>
<hr /> <hr />
<p> <p>
if you've accidentally pressed down on a "delete" button and want to <u>precise adjustments:</u>
cancel, you can hit escape before releasing the mouse button to save if you click on a slider to focus it, and then keep your mouse hovered over it,
your progress and abort deletion. you can use the arrow keys to make minute adjustments.
</p> </p>
<hr /> <hr />
<p> <p>
@@ -580,7 +580,6 @@
let editing = false; let editing = false;
let moving = false; let moving = false;
let resizing = false; let resizing = false;
let removing = false;
let changingElement; let changingElement;
let lastMouseX = 0; let lastMouseX = 0;
let lastMouseY = 0; let lastMouseY = 0;
@@ -975,23 +974,27 @@
<input id=${this.id + "-settings-clock-toggle"} type="checkbox" /> <input id=${this.id + "-settings-clock-toggle"} type="checkbox" />
</div> </div>
<br />
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-clock-color"}>set header text color: </label> <label for=${this.id + "-settings-clock-color"}>set header text color: </label>
<input id=${this.id + "-settings-clock-color"} type="color" /> <input id=${this.id + "-settings-clock-color"} type="color" />
</div> </div>
<br />
<div class="containerOptionListing"> <div class="containerOptionListing">
<label>set header font size (px): </label> <label>set header font size (px): </label>
<input id=${this.id + "-settings-clock-size"} /> <input id=${this.id + "-settings-clock-size"} />
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-clock-bold"}>bold header?</label> <label for=${this.id + "-settings-clock-bold"}>bold?</label>
<input id=${this.id + "-settings-clock-bold"} type="checkbox" /> <input id=${this.id + "-settings-clock-bold"} type="checkbox" />
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-clock-italic"}>italic header?</label> <label for=${this.id + "-settings-clock-italic"}>italic?</label>
<input id=${this.id + "-settings-clock-italic"} type="checkbox" /> <input id=${this.id + "-settings-clock-italic"} type="checkbox" />
</div> </div>
@@ -1002,7 +1005,7 @@
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label>set divider color: </label> <label>divider color: </label>
<input id=${this.id + "-settings-divider-color"} type="color" /> <input id=${this.id + "-settings-divider-color"} type="color" />
</div> </div>
</div> </div>
@@ -1025,12 +1028,12 @@
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for="sectionBoldToggle">bold sections?</label> <label for="sectionBoldToggle">bold?</label>
<input id=${this.id + "-settings-section-bold"} type="checkbox" /> <input id=${this.id + "-settings-section-bold"} type="checkbox" />
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for="sectionItalicToggle">italic sections?</label> <label for="sectionItalicToggle">italic?</label>
<input id=${this.id + "-settings-section-italic"} type="checkbox" /> <input id=${this.id + "-settings-section-italic"} type="checkbox" />
</div> </div>
@@ -1098,13 +1101,13 @@
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-bg-alpha"}>set background opacity (%): </label> <label for=${this.id + "-settings-bg-alpha"}>set background opacity (%): </label>
<input id=${this.id + "-settings-bg-alpha"} /> <input id=${this.id + "-settings-bg-alpha"} type="range" min="0" max="100" />
</div> </div>
<p class="menuHeader">layer shape</p> <p class="menuHeader">layer shape</p>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-border-radius"}>roundness (0 = square, 90 = circle): </label> <label for=${this.id + "-settings-border-radius"}>roundness: </label>
<input id=${this.id + "-settings-border-radius"} placeholder="" /> <input id=${this.id + "-settings-border-radius"} type="range" max="175" />
</div> </div>
<p class="menuHeader">border</p> <p class="menuHeader">border</p>
@@ -1114,8 +1117,8 @@
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-border-width"}>set border width (0px = no border): </label> <label for=${this.id + "-settings-border-width"}>set border width: </label>
<input id=${this.id + "-settings-border-width"} placeholder="0 for none" /> <input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" />
</div> </div>
@@ -1128,22 +1131,26 @@
<div class="containerOptionListing"> <div class="containerOptionListing">
<label>shadow opacity:</label> <label>shadow opacity:</label>
<input id=${this.id + "-settings-shadow-alpha"} /> <input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" />
</div>
<br />
<div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label>
<input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" />
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-x"}>x-offset (in px): </label> <label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label>
<input id=${this.id + "-settings-shadow-x"} placeholder="all 0 for none" /> <input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" />
</div> </div>
<div class="containerOptionListing"> <br />
<label for=${this.id + "-settings-shadow-y"}>y-offset (px): </label>
<input id=${this.id + "-settings-shadow-y"} placeholder="all 0 for none" />
</div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-blur"}>blur radius / fuzziness (px): </label> <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
<input id=${this.id + "-settings-shadow-blur"} placeholder="all 0 for none" /> <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
</div> </div>
@@ -1280,51 +1287,52 @@
</div> </div>
<div class="expandableMenu" style="display: block; margin: 0;" id=${this.id + "-settings-menu"}> <div class="expandableMenu" style="display: block; margin: 0;" id=${this.id + "-settings-menu"}>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> <p class="menuHeader">image shape</p>
<p>border + shape options</p> <div class="containerOptionListing">
<p class="expandedMenuIndicator">+</p> <label for=${this.id + "-settings-border-radius"}>roundness: </label>
</div> <input id=${this.id + "-settings-border-radius"} type="range" max="175" />
<div class="expandableMenu"> </div>
<p class="menuHeader">change border + shape</p> <p class="menuHeader">border</p>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-border-color"}>set border color: </label> <label for=${this.id + "-settings-border-color"}>set border color: </label>
<input id=${this.id + "-settings-border-color"} type="color" /> <input id=${this.id + "-settings-border-color"} type="color" />
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-border-width"}>set border width (px): </label> <label for=${this.id + "-settings-border-width"}>set border width: </label>
<input id=${this.id + "-settings-border-width"} placeholder="0 for none" /> <input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" />
</div> </div>
<div class="containerOptionListing"> <p class="menuHeader">shadow / glow</p>
<label for=${this.id + "-settings-border-radius"}>set container roundedness (px): </label> <div class="containerOptionListing">
<input id=${this.id + "-settings-border-radius"} placeholder="0 for square" /> <label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
</div> <input id=${this.id + "-settings-shadow-color"} type="color" />
</div>
<p class="menuHeader">change shadow / glow</p> <div class="containerOptionListing">
<div class="containerOptionListing"> <label>shadow opacity:</label>
<label for=${this.id + "-settings-shadow-x"}>x-offset (px): </label> <input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" />
<input id=${this.id + "-settings-shadow-x"} placeholder="all 0 for none" /> </div>
</div>
<div class="containerOptionListing"> <br />
<label for=${this.id + "-settings-shadow-y"}>y-offset (px): </label>
<input id=${this.id + "-settings-shadow-y"} placeholder="all 0 for none" /> <div class="containerOptionListing">
</div> <label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label>
<br /> <input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" />
<div class="containerOptionListing"> </div>
<label for=${this.id + "-settings-shadow-blur"}>blur radius / fuzziness (px): </label>
<input id=${this.id + "-settings-shadow-blur"} placeholder="all 0 for none" /> <div class="containerOptionListing">
</div> <label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label>
<br /> <input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" />
<div class="containerOptionListing"> </div>
<label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
<input id=${this.id + "-settings-shadow-color"} type="color" /> <br />
</div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-alpha"}>shadow opacity:</label> <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
<input id=${this.id + "-settings-shadow-alpha"} /> <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
</div> </div>
</div> </div>
<div class="manageButtons"> <div class="manageButtons">
@@ -1701,6 +1709,7 @@
if (e.key == "Escape" && editing) { if (e.key == "Escape" && editing) {
toggleEditMode(); toggleEditMode();
} }
/*
if (e.key == "1" && editing) { if (e.key == "1" && editing) {
changeActiveTab({target: { id: "containerTab" }}); changeActiveTab({target: { id: "containerTab" }});
} }
@@ -1712,7 +1721,7 @@
} }
if (e.key == "4" && editing) { if (e.key == "4" && editing) {
changeActiveTab({target: { id: "ioTab" }}); changeActiveTab({target: { id: "ioTab" }});
} } */
}); });
/** set up cursors */ /** set up cursors */
@@ -2006,19 +2015,6 @@
movableElements[i].style.cursor = ""; movableElements[i].style.cursor = "";
} }
// disable image removal mode active
if (removing) {
removing = false;
document.getElementById("imageRemovalToggle").checked = false;
let images = document.getElementsByClassName("userImage");
for (let i = 0; i < images.length; i++) {
images[i].classList.remove("removable");
}
document
.getElementById("imageRemovalWarning")
.classList.add("hidden");
}
// hide the settings container // hide the settings container
settingsContainer.classList.add("hidden"); settingsContainer.classList.add("hidden");
} }
@@ -2448,7 +2444,11 @@
function mouseDownMovableElement(mouseDown) { function mouseDownMovableElement(mouseDown) {
/** MOVEMENT / RESIZING HANDLERS */ /** MOVEMENT / RESIZING HANDLERS */
if (!editing || removing) { if (!editing ||
mouseDown.target.tagName == "BUTTON" ||
mouseDown.target.tagName == "INPUT" ||
mouseDown.target.classList.contains("expandableMenuToggle")
) {
return; return;
} }