first layer of new structure to container settings menu generation

2025-06-25 22:51:51 -04:00
parent d756db4fb7
commit 32a2cb844d
1 changed files with 41 additions and 24 deletions
@@ -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 */