diff options
Diffstat (limited to 'startpage.html')
| -rw-r--r-- | startpage.html | 65 |
1 files changed, 41 insertions, 24 deletions
diff --git a/startpage.html b/startpage.html index 4d6cdb9..7312f0e 100644 --- a/startpage.html +++ b/startpage.html @@ -160,18 +160,6 @@ </style> </head> <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 id="imageRemovalWarning" class="hidden"> IMAGE REMOVAL MODE ACTIVE!! @@ -193,6 +181,13 @@ <span class="tab" id="resetTab">reset data</span> <span class="tab" id="instructionsTab">instructions</span> </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"> <p id="helpText"> you are now editing the page!<br /><br /> @@ -250,15 +245,18 @@ </p> </div> - <form id="addContainerForm" onsubmit="return false"> - <div class="formTitle">add new containers / layers</div> + <form id="containerForm" onsubmit="return false"> + <div id="containers"> + <p class="formTitle">layers:</p> + </div> + <div class="formTitle">add new layer</div> <input id="newContainerNameInput" - placeholder="new container name" + placeholder="new layer name" type="text" /> <button id="newContainerCreateButton" onclick="createNewContainer()"> - create new container + create new layer </button> </form> @@ -465,6 +463,7 @@ class Container { id; + name; x; y; height; @@ -483,7 +482,9 @@ containerSettings, sections ) { + this.name = name; this.id = name.replace(" ", "-"); + // if initializing saved container content, if (x !== undefined && y !== undefined) { this.x = x; @@ -510,12 +511,12 @@ // apply bookmarks this.loadBookmarks(); // then create container options UI in settings menu - this.insertContainerOptionsMenu(); + this.insertContainerSettingsListing(); this.applyContainerSettings(); // establish necessary event listeners this.addContainerEventListeners() - this.addSettingsEventListeners(); + this.addSettingsMenuEventListeners(); // and save @@ -668,10 +669,25 @@ /** * creates container options menu in page settings menu */ - insertContainerOptionsMenu() { - document.getElementById("addContainerForm").insertAdjacentHTML( + insertContainerSettingsListing() { + document.getElementById("containers").insertAdjacentHTML( "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"} > <h1 class="formTitle">add bookmarks</h1> <div> @@ -688,7 +704,6 @@ </div> <button onclick="addLink(${this.id})">add link</button> - </div> <br /> @@ -861,6 +876,8 @@ <input id=${this.id + "-settings-shadow-alpha"} /> </div> </div> + </div> + </div> ` ); } @@ -1087,7 +1104,7 @@ /** * applies event listeners on container options inputs in settings menu */ - addSettingsEventListeners() { + addSettingsMenuEventListeners() { // container color setting listeners document .getElementById(this.id + "-settings-bg-color") @@ -1373,7 +1390,7 @@ width: "", height: "", }; - setupSettingsMenu(); + setupContainerSettingsMenu(); /** load container data */ let containerMapValues = @@ -1413,7 +1430,7 @@ /************************** * INITIALIZATION HELPERS * **************************/ - function setupSettingsMenu() { + function setupContainerSettingsMenu() { let settingsContainer = document.getElementById("settingsContainer"); /* set at the last saved location */ |