From ecd2450876bb31bed7a58385b986dfe2e2c87cee Mon Sep 17 00:00:00 2001 From: Simon Date: Tue, 26 Aug 2025 23:00:30 -0400 Subject: [PATCH] you can now customize/remove the "edit page" toggle button --- startpage.html | 107 ++++++++++++++++++++++++++++++++++--------------- 1 file changed, 74 insertions(+), 33 deletions(-) diff --git a/startpage.html b/startpage.html index c22bbc8..bf80b5b 100644 --- a/startpage.html +++ b/startpage.html @@ -362,7 +362,9 @@ there are some keyboard shortcuts for your convenience:
"e" = enables editing mode
esc = disables editing mode (and saves page)
- +
+ arrow keys = slight movement (must click on container first to focus)
+ backspace = delete container (must click on container first to focus)

@@ -566,13 +568,26 @@ -

+

NOTE: autoplay requires either whitelisting this site or generally enabling "allow auto-play audio" in your browser's settings.

+
+ +

edit mode toggle

+
+ + +
+ +
+ + +
+ + - todo: enable changing color of edit page toggle? reset data button? @@ -580,6 +595,9 @@ // cookie holder for coordinates + size of settings menu let settingsMenuData = {}; + // cookie holder for edit toggle mode customization + let editToggleRgba = "rbga(0,0,0,1)"; + // cookie holders for container data let containerDataMap = new Map(); let numberTotalContainers = 0; @@ -1975,33 +1993,39 @@ * page constructor / init :p * ******************************/ (() => { + console.log("========== if you're looking in here because something is broken, reset the page with the `localStorage.clear()` command. that should fix everything"); window.onbeforeunload = unloadPage; /** add keybinds */ document.body.addEventListener("keydown", (e) => { - console.log("grabbed"); if (e.key == "e" && !editing) { toggleEditMode(); } if (e.key == "Escape" && editing) { toggleEditMode(); } - /* - if (e.key == "1" && editing) { - changeActiveTab({target: { id: "containerTab" }}); - } - if (e.key == "2" && editing) { - changeActiveTab({target: { id: "globalSettingsTab" }}); - } - if (e.key == "3" && editing) { - changeActiveTab({target: { id: "helpTab" }}); - } - if (e.key == "4" && editing) { - changeActiveTab({target: { id: "ioTab" }}); - } */ }); - + /** set edit mode toggle color */ + editToggleRgba = localStorage.getItem("editToggleRgba") + || "rgba(0,0,0,1)"; + document.getElementById("editToggle").style.color = editToggleRgba; + // fill in inputs with saved value + document.getElementById("edit-toggle-color").value = + rgbToHex( + editToggleRgba.replace("rgba(", "").slice(0, -1).split(",").splice(0, 3) + ); + document.getElementById("edit-toggle-alpha").value = + parseInt( + editToggleRgba.replace("rgba(", "").slice(0, -1).split(",")[3] + ) * 100; + // set event listeners + document + .getElementById("edit-toggle-color") + .addEventListener("input", changeEditToggleColor, false); + document + .getElementById("edit-toggle-alpha") + .addEventListener("input", changeEditToggleColor, false); /** set wallpaper */ wallpaper = JSON.parse(localStorage.getItem("wallpaper")) || ""; @@ -2020,6 +2044,13 @@ document.body.style.backgroundSize = "cover"; document.body.style.backgroundPosition = "center"; } + // set wallpaper event listeners + document + .getElementById("wallpaperColorPicker") + .addEventListener("input", changeWallpaper, false); + document + .getElementById("wallpaperRepeatToggle") + .addEventListener("change", toggleWallpaperRepeat, false); /* init audio + auto-play */ audioLink = JSON.parse(localStorage.getItem("audioLink")) || ""; @@ -2037,16 +2068,11 @@ ); }); } - - - - // page wallpaper + // add event listeners document - .getElementById("wallpaperColorPicker") - .addEventListener("input", changeWallpaper, false); - document - .getElementById("wallpaperRepeatToggle") - .addEventListener("change", toggleWallpaperRepeat, false); + .getElementById("autoplayAudioToggle") + .addEventListener("change", toggleAutoplayAudio, false); + /** load container data */ let zIndexMapData = JSON.parse(localStorage.getItem("zIndexMapData")) || []; @@ -2165,9 +2191,7 @@ document .getElementById("imageRatioToggle") .addEventListener("change", toggleImageRatio, false); - document - .getElementById("autoplayAudioToggle") - .addEventListener("change", toggleAutoplayAudio, false); + // prevent context menu when resizing settingsContainer.addEventListener("contextmenu", (e) => { @@ -2242,6 +2266,9 @@ // save active settings tab for next session localStorage.setItem("activeTabId", JSON.stringify(activeTabId)); + // save edit mode toggle customization + localStorage.setItem("editToggleRgba", editToggleRgba); + // lastly, set current state as download contents for export button const exportData = new Blob([JSON.stringify(localStorage)], {type: 'text/plain'}); const url = window.URL.createObjectURL(exportData); @@ -2606,7 +2633,14 @@ } function cloneContainer(buttonPressed) { - let containerId = buttonPressed.id.split("--")[0]; + let containerId; + if (buttonPressed.id) { + containerId = buttonPressed.id.split("--")[0]; + } + else { + // if being called from keyboard shortcut + containerId = buttonPressed; + } let container = containerDataMap.get(containerId); let newSettings = JSON.parse(JSON.stringify(container.settings)); @@ -2748,6 +2782,15 @@ } } + function changeEditToggleColor(colorChange) { + editToggleRgba = hexToRgba( + document.getElementById("edit-toggle-color").value, + document.getElementById("edit-toggle-alpha").value + ); + + document.getElementById("editToggle").style.color = editToggleRgba; + } + function moveElement(mouseMove) { if (!moving) { return; @@ -2883,8 +2926,6 @@ keyDown.target.id == "settingsContainer" || keyDown.key == "Escape" ) { - console.log(keyDown.key); - console.log(keyDown.target.id); return; } keyDown.stopPropagation();