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

swanky new indicator for expandable menu. needs CSS

Browse Source
This commit is contained in:
Simon
2025-07-22 22:10:15 -04:00
parent 6daf2c2416
commit 7cd8f35330
1 changed files with 58 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+58 -38
View File
@@ -135,6 +135,10 @@
} }
.expandableMenuToggle { .expandableMenuToggle {
display: flex;
flex-direction: row;
justify-content: space-between;
cursor: pointer; cursor: pointer;
margin: 0 0 0 0; margin: 0 0 0 0;
padding: .5rem 0 .5rem 0; padding: .5rem 0 .5rem 0;
@@ -451,6 +455,7 @@
</div> </div>
</div> </div>
</div> </div>
todo: image for labels
</body> </body>
<script> <script>
@@ -824,32 +829,33 @@
` `
<div class="containerListing" id=${this.id + "-container-listing"}> <div class="containerListing" id=${this.id + "-container-listing"}>
<div style="display: "flex"; flex-direction: row; justify-content: space-between"> <div class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)">
<p class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)" id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p> <p id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p>
<p id=${this.id + "--listing-active-indicator"}> <p class="expandedMenuIndicator">-</p>
` /**
Wait i probably can't do that because of how the toggle grabs the next element
*/ + `
</div> </div>
<div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;"> <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;">
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.name}: bookmarks</p>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>+ ${this.name}: bookmarks</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu" id=${this.id + "-bookmark-menu"} > <div class="expandableMenu" id=${this.id + "-bookmark-menu"} >
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ manage bookmarks / sections</p> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<div class="expandableMenu" > <p>manage bookmarks / sections</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu">
<div id=${this.id + "-bookmark-menu--listings"} class="bookmarkListingContainer"> <div id=${this.id + "-bookmark-menu--listings"} class="bookmarkListingContainer">
</div> </div>
</div> </div>
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ add new bookmarks / sections</p> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>add new bookmarks / sections</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu" id=${this.id + "-bookmark-menu--add-new"} > <div class="expandableMenu" id=${this.id + "-bookmark-menu--add-new"} >
<input <input
@@ -878,15 +884,20 @@
<button id=${this.id + "-add-link-button"} onclick="addLink(this)">add link</button> <button id=${this.id + "-add-link-button"} onclick="addLink(this)">add link</button>
</div> </div>
</div> </div>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.name}: customize</p> <p>${this.name}: customize</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu"> <div class="expandableMenu">
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ header options</p> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>header options</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu"> <div class="expandableMenu">
<p class="menuHeader">date + time options</p> <p class="menuHeader">date + time options</p>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label for=${this.id + "-settings-date-toggle"}>show date?</label> <label for=${this.id + "-settings-date-toggle"}>show date?</label>
@@ -930,7 +941,10 @@
</div> </div>
</div> </div>
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ text options</p> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>text options</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu"> <div class="expandableMenu">
<p class="menuHeader">section text options</p> <p class="menuHeader">section text options</p>
@@ -982,9 +996,7 @@
<button id=${this.id + "-settings-set-font-button"}>set font</button> <button id=${this.id + "-settings-set-font-button"}>set font</button>
</div> </div>
</div> </div>
<br /> <br />
<div class="containerOptionListing" > <div class="containerOptionListing" >
<p style="margin-top: 0;">align text:</p> <p style="margin-top: 0;">align text:</p>
@@ -1005,7 +1017,10 @@
</div> </div>
</div> </div>
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ color / shape options</p> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>color + shape options</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu"> <div class="expandableMenu">
<p class="menuHeader">background color</p> <p class="menuHeader">background color</p>
@@ -1184,49 +1199,55 @@
` `
<div class="containerListing" id=${this.id + "-container-listing"}> <div class="containerListing" id=${this.id + "-container-listing"}>
<p class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)" id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p> <div class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)">
<p id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p>
<p class="expandedMenuIndicator">-</p>
</div>
<div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;"> <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;">
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.name}: color + shape options</p> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>border + shape options</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu"> <div class="expandableMenu">
<p class="menuHeader">change border + shape</p> <p class="menuHeader">change border + shape</p>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label>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>set border width (px): </label> <label for=${this.id + "-settings-border-width"}>set border width (px): </label>
<input id=${this.id + "-settings-border-width"} placeholder="0 for none" /> <input id=${this.id + "-settings-border-width"} placeholder="0 for none" />
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label>set container roundedness (px): </label> <label for=${this.id + "-settings-border-radius"}>set container roundedness (px): </label>
<input id=${this.id + "-settings-border-radius"} placeholder="0 for square" /> <input id=${this.id + "-settings-border-radius"} placeholder="0 for square" />
</div> </div>
<p class="menuHeader">change shadow / glow</p> <p class="menuHeader">change shadow / glow</p>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label>x-offset (px): </label> <label for=${this.id + "-settings-shadow-x"}>x-offset (px): </label>
<input id=${this.id + "-settings-shadow-x"} placeholder="all 0 for none" /> <input id=${this.id + "-settings-shadow-x"} placeholder="all 0 for none" />
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label>y-offset (px): </label> <label for=${this.id + "-settings-shadow-y"}>y-offset (px): </label>
<input id=${this.id + "-settings-shadow-y"} placeholder="all 0 for none" /> <input id=${this.id + "-settings-shadow-y"} placeholder="all 0 for none" />
</div> </div>
<br /> <br />
<div class="containerOptionListing"> <div class="containerOptionListing">
<label>blur radius / fuzziness (px): </label> <label for=${this.id + "-settings-shadow-blur"}>blur radius / fuzziness (px): </label>
<input id=${this.id + "-settings-shadow-blur"} placeholder="all 0 for none" /> <input id=${this.id + "-settings-shadow-blur"} placeholder="all 0 for none" />
</div> </div>
<br /> <br />
<div class="containerOptionListing"> <div class="containerOptionListing">
<label>shadow color: </label> <label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
<input id=${this.id + "-settings-shadow-color"} type="color" /> <input id=${this.id + "-settings-shadow-color"} type="color" />
</div> </div>
<div class="containerOptionListing"> <div class="containerOptionListing">
<label>shadow opacity:</label> <label for=${this.id + "-settings-shadow-alpha"}>shadow opacity:</label>
<input id=${this.id + "-settings-shadow-alpha"} /> <input id=${this.id + "-settings-shadow-alpha"} />
</div> </div>
</div> </div>
@@ -1893,15 +1914,14 @@
function toggleExpandableMenu(toggleButton) { function toggleExpandableMenu(toggleButton) {
toggleButton.classList.toggle("active"); toggleButton.classList.toggle("active");
let toggleButtonLabel = toggleButton.innerText;
let menuContent = toggleButton.nextElementSibling; let menuContent = toggleButton.nextElementSibling;
if (menuContent.style.display === "block") { if (menuContent.style.display === "block") {
menuContent.style.display = "none"; menuContent.style.display = "none";
toggleButton.innerHTML = toggleButtonLabel.replace("-", "+"); toggleButton.children[1].innerHTML = "+";
} else { } else {
menuContent.style.display = "block"; menuContent.style.display = "block";
toggleButton.innerHTML = toggleButtonLabel.replace("+", "-"); toggleButton.children[1].innerHTML = "-";
} }
} }