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

first layer of new structure to container settings menu generation

Browse Source
This commit is contained in:
Simon
2025-06-25 22:51:51 -04:00
parent d756db4fb7
commit 32a2cb844d
1 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+41 -24
View File
@@ -160,18 +160,6 @@
</style> </style>
</head> </head>
<body> <body>
<div class="movable" id="mainContainer">
<div style="margin: auto">
<div id="clock">
<span id="date"></span>
<br />
<span id="time"></span>
</div>
<hr id="containerDivider" />
<div id="linkContainer"></div>
</div>
</div>
<div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: column">
<div id="imageRemovalWarning" class="hidden"> <div id="imageRemovalWarning" class="hidden">
IMAGE REMOVAL MODE ACTIVE!! IMAGE REMOVAL MODE ACTIVE!!
@@ -193,6 +181,13 @@
<span class="tab" id="resetTab">reset data</span> <span class="tab" id="resetTab">reset data</span>
<span class="tab" id="instructionsTab">instructions</span> <span class="tab" id="instructionsTab">instructions</span>
</div> </div>
<!-- note to self:
- i should rename these so they don't end in "Form",
- rather something like "Page". to do that though i need
- to change the logic for switching tabs that has the string
- modification hardcoded
-->
<div id="instructionsForm"> <div id="instructionsForm">
<p id="helpText"> <p id="helpText">
you are now editing the page!<br /><br /> you are now editing the page!<br /><br />
@@ -250,15 +245,18 @@
</p> </p>
</div> </div>
<form id="addContainerForm" onsubmit="return false"> <form id="containerForm" onsubmit="return false">
<div class="formTitle">add new containers / layers</div> <div id="containers">
<p class="formTitle">layers:</p>
</div>
<div class="formTitle">add new layer</div>
<input <input
id="newContainerNameInput" id="newContainerNameInput"
placeholder="new container name" placeholder="new layer name"
type="text" type="text"
/> />
<button id="newContainerCreateButton" onclick="createNewContainer()"> <button id="newContainerCreateButton" onclick="createNewContainer()">
create new container create new layer
</button> </button>
</form> </form>
@@ -465,6 +463,7 @@
class Container { class Container {
id; id;
name;
x; x;
y; y;
height; height;
@@ -483,7 +482,9 @@
containerSettings, containerSettings,
sections sections
) { ) {
this.name = name;
this.id = name.replace(" ", "-"); this.id = name.replace(" ", "-");
// if initializing saved container content, // if initializing saved container content,
if (x !== undefined && y !== undefined) { if (x !== undefined && y !== undefined) {
this.x = x; this.x = x;
@@ -510,12 +511,12 @@
// apply bookmarks // apply bookmarks
this.loadBookmarks(); this.loadBookmarks();
// then create container options UI in settings menu // then create container options UI in settings menu
this.insertContainerOptionsMenu(); this.insertContainerSettingsListing();
this.applyContainerSettings(); this.applyContainerSettings();
// establish necessary event listeners // establish necessary event listeners
this.addContainerEventListeners() this.addContainerEventListeners()
this.addSettingsEventListeners(); this.addSettingsMenuEventListeners();
// and save // and save
@@ -668,10 +669,25 @@
/** /**
* creates container options menu in page settings menu * creates container options menu in page settings menu
*/ */
insertContainerOptionsMenu() { insertContainerSettingsListing() {
document.getElementById("addContainerForm").insertAdjacentHTML( document.getElementById("containers").insertAdjacentHTML(
"beforeend", "beforeend",
` `
/**
* TODO:
* make the menus intially invisible
* implement a toggle visibility function
* add the classes for menu layer depths for easier distinction later
* brainstorm best approach to UI/UX for these nested menus
* --> remove "images" from wallpaper tab
* ----> furthermore, condense all global settings into one tab
* ----- including wallpaper, audio, cursor
* add toggles for each settings menu
* rename settings form div ids (see "note to self")
*/
<div class="containerListing" id=${this.id + "-container-listing"}>
<p onclick="toggleContainerSettingsMenu(this)">${this.name} [expand]</p>
<div class="settingsMenu" id=${this.id + "-settings-menu"}>
<div id=${this.id + "-bookmark-menu"} > <div id=${this.id + "-bookmark-menu"} >
<h1 class="formTitle">add bookmarks</h1> <h1 class="formTitle">add bookmarks</h1>
<div> <div>
@@ -688,7 +704,6 @@
</div> </div>
<button onclick="addLink(${this.id})">add link</button> <button onclick="addLink(${this.id})">add link</button>
</div> </div>
<br /> <br />
@@ -861,6 +876,8 @@
<input id=${this.id + "-settings-shadow-alpha"} /> <input id=${this.id + "-settings-shadow-alpha"} />
</div> </div>
</div> </div>
</div>
</div>
` `
); );
} }
@@ -1087,7 +1104,7 @@
/** /**
* applies event listeners on container options inputs in settings menu * applies event listeners on container options inputs in settings menu
*/ */
addSettingsEventListeners() { addSettingsMenuEventListeners() {
// container color setting listeners // container color setting listeners
document document
.getElementById(this.id + "-settings-bg-color") .getElementById(this.id + "-settings-bg-color")
@@ -1373,7 +1390,7 @@
width: "", width: "",
height: "", height: "",
}; };
setupSettingsMenu(); setupContainerSettingsMenu();
/** load container data */ /** load container data */
let containerMapValues = let containerMapValues =
@@ -1413,7 +1430,7 @@
/************************** /**************************
* INITIALIZATION HELPERS * * INITIALIZATION HELPERS *
**************************/ **************************/
function setupSettingsMenu() { function setupContainerSettingsMenu() {
let settingsContainer = document.getElementById("settingsContainer"); let settingsContainer = document.getElementById("settingsContainer");
/* set at the last saved location */ /* set at the last saved location */