better css for expandable menu / help tab implemented

1 files changed, 265 insertions, 232 deletions

diff --git a/startpage.html b/startpage.html
index 1b335de..0bb9a43 100644
--- a/startpage.html
+++ b/startpage.html
@@ -141,16 +141,21 @@
 
         cursor: pointer;
         margin: 0 0 0 0;
-        padding: .5rem 0 .5rem 0;
+        padding: .5rem 0rem .5rem .5rem;
+
         width: 100%;
       }
       .expandableMenuToggle.active, .expandableMenuToggle:hover {
         background-color: rgba(213, 205, 205, 1);
       }
+      .expandedMenuIndicator {
+        margin: 0 1rem 0 0;
+        font-size: 2rem;
+      }
 
       .expandableMenu {
         display: none;
-        padding: 0 1rem;
+        padding: 1rem 0 0 1rem;
         margin-bottom: 1rem;
         border-left: 4px solid rgba(213, 205, 205);
       }
@@ -160,6 +165,7 @@
         width: 100%;
         font-style: italic;
         font-weight: bold;
+        padding: 1rem 0;
         margin: 0;
       }
 
@@ -195,6 +201,10 @@
         justify-content: space-between;
       }
 
+      #noContainerWarning {
+        font-style: italic;
+      }
+
       input {
         width: 4rem;
       }
@@ -244,218 +254,259 @@
       <a id="editToggle" onClick="toggleEditMode()" style="align-self: flex-end"
         >edit page
       </a>
+    </div>
 
-      <br />
+    <div id="settingsContainer" class="movable settingsContainer hidden">
+      <div id="tabList">
+        <div>
+          <a class="tab" id="containerTab">layers</a>
+          <a class="tab" id="globalSettingsTab" style="margin: 0 2rem 0 0;">global settings</a>
+        </div>
+        <div style="text-align: right;">
+          <a class="tab" id="instructionsTab" style="margin: 0;">help</a>
+          <a class="tab" id="ioTab" style="margin: 0 0 0 2rem;">import / export</a>
+        </div>
+      </div>
 
-      <div id="settingsContainer" class="movable settingsContainer hidden">
-        <div id="tabList">
-          <div>
-            <a class="tab" id="containerTab">layers</a>
-            <a class="tab" id="globalSettingsTab" style="margin: 0 2rem 0 0;">global settings</a>
+      <div style="padding: 0 .5rem;">
+      <!-- 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>
+            you are now editing the page!<br /><br />
+
+            this is the settings box - there are various tabs containing various
+            customization options for your startpage experience.<br /><br />
+
+            this box is adjustable, just like every layer you add to the page. 
+            you can drag it around the page, and dragging with right click will 
+            adjust the size of the layer.<br /><br />
+
+            on the "layers" tab, you can add two types of layers to the page:
+          </p>
+          <ol>
+            <li>
+              <b>bookmark layer:</b><br />a customizable box that can serve as a clock,
+              tell you the date, and hold bookmarks all at once. it can also just be
+              one of those things.<br /><br />to group a layer's bookmarks together, enter
+              links all with the same "section". uncategorized (no section) bookmarks
+              will stay at the top.
+            </li><br />
+            <li>
+              <b>image layer:</b><br />paste any URL that points directly at an image 
+              (right click on a picture on any website and click "copy link to image")
+              to add it to the page.<br /><br />use "free transform" in the "global 
+              settings" tab to change the image resizing mode when customizing the page.
+            </li>
+          </ol>
+          <p>
+            your changes will be saved to the page when you exit editing mode.<br /><br />
+            if you've made edits you wish to undo, refresh the page without disabling
+            editing mode.<br /><br />
+
+            that concludes the basics. there's some more advanced information below:
+          </p>
+
+          <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
+            <p>sharing / stashing your work</p>
+            <p class="expandedMenuIndicator">+</p>
           </div>
-          <div style="text-align: right;">
-            <a class="tab" id="instructionsTab" style="margin: 0;">help</a>
-            <a class="tab" id="ioTab" style="margin: 0 0 0 2rem;">import / export</a>
+          <div class="expandableMenu">
+            <p>
+              you can export your entire current page's setup to your clipboard in the 
+              "import / export" tab. open a text file and paste the contents to store 
+              your theme for later or for sharing with others.<br /><br />
+
+              to load in a theme, simply paste the output of the export button into the
+              "import" input, and refresh the page. 
+            </p>
           </div>
-        </div>
 
-        <div style="padding: 0 .5rem;">
-        <!-- 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 />
-              this is the settings box. there are various tabs containing various
-              customization options for your startpage experience. you can create
-              and categorize bookmarks, customize the bookmark box to your taste,
-              change the wallpaper, and add + maniuplate any image you want!<br /><br />
-              <b>[ <i>let it be known</i> ]</b><br />
-              <i
-                >your changes will only be saved when you stop editing the page.
-                to cancel your live edits, refresh the page without hitting
-                save.</i
-              ><br /><br />
-              <b>[ <i>bookmark tips</i> ]</b><br />
-              to group bookmarks together, just enter them with the same section.
-              bookmarks without a section will stay at the top. you can remove
-              individual bookmarks or whole sections, and sections can be
-              rearranged. there's also a button in this menu to full reset.<br /><br />
-              <b>[ <i>customization tips</i> ]</b><br />
-              everything on the screen can be dragged around and resized. left
-              click and drag to move, right click and drag to resize!<br /><br />
-              you can add as many images to the background and resize them as you
-              wish, but they can only be added via URL. i have provided a quick
-              link to a place to upload your own images if you have specific
-              things in mind, but you can also make a beautiful collage of random
-              photographs you find without using any disk space.<br /><br />
-              <b>[ <i>changing font</i> ]</b><br />
+          <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
+            <p>setting fonts</p>
+            <p class="expandedMenuIndicator">+</p>
+          </div>
+          <div class="expandableMenu">
+            <p>
               you can use any font that is available on
               <a href="https://fonts.google.com/" target="blank">google fonts</a>.
-              FYI, if you have multiple fonts selected only the first one will be
-              loaded, and it will be the regular version (if there are variants of
-              the font)<br /><br />
-              to load a font:<br />
-              1.) on google fonts, click on a font you like, press the "get font"
-              button, and then press the "get embed code" button. <br />2.) under
-              the "web" tab (you are already probably on it), copy the stuff
-              under: "embed code in the &lt;head&gt; of your html" (it should be a
-              few lines starting with &lt;link&gt;)<br />3.) paste contents into
-              the "change font" input, found on the "container" tab of this
-              floating menu.<br /><br /><b>[ <i>back-up themes!</i> ]</b><br />
-              you can export your entire current setup to import again later (save
-              ur moodboards or share with friends). this is primarily useful
-              because everything for this page is stored as a cookie. so, if you
-              reset your browser history or cache, your startpage will be lost!!
-              unless you have it backed up 8]
               <br /><br />
-              clicking 'export data' will fill your clipboard with your currently
-              saved data (make sure you've saved your changes before exporting),
-              simply paste the contents into a text file for safekeeping. to load
-              a saved configuration, just paste the exported text and hit
-              import.<br /><br />
-              if you somehow lose your bookmark box off-screen, use the "reset box
-              customization" options to get it back. you will lose your other
-              customizations tho :[<br /><br />
+
+              beware, if you have multiple font families selected (it keeps track of
+              all of the fonts you press "get font" on), only the first one will be 
+              loaded. also, only regular versions of fonts are supported.<br /><br />
+
+              to load a font:<br />
+              
+              1.) on google fonts, open a font you like, and press the "get font"
+              button. then, press the "get embed code" button.<br /><br />
+
+              2.) there will be a section on the right with various tabs ("web", 
+              "android", "ios", ..) under the "web" tab (you are already probably 
+              on it), click the "copy code" button under the option titled: 
+              "embed code in the &lt;head&gt; of your html" (it should be a
+              few lines starting with "&lt;link ...", right at the very top)<br /><br />
+
+              3.) paste copied contents into the "change font" input, found on the desired 
+              layer's "text options" 
             </p>
           </div>
 
-          <form id="containerForm" onsubmit="return false">
-              <div>
-                <h2 class="menuHeader">add bookmark layer</h2>
-                <input
-                  id="newTextContainerNameInput"
-                  placeholder="(optional) layer name"
-                  style="width: 100%"
-                  type="text"
-                />
-                <button id="newTextContainerCreateButton" onclick="createNewTextContainer(this)">
-                  create new layer
-                </button>
-              </div>
-              <div>
-                <h2 class="menuHeader">add image to page</h2>
-                <input
-                  id="newImageContainerNameInput"
-                  placeholder="(optional) image name"
-                  style="width: 100%;"
-                  type="text"
-                />
-                <input
-                  id="newImageContainerUrlInput"
-                  placeholder="direct url to image"
-                  style="width: 100%;"
-                  type="text"
-                />
-                <button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)">
-                  place image
-                </button>
-                <a href="https://imgur.com/upload" target="_blank" style="color: black">imgur upload for convenience</a>
-                <h2 class="menuHeader">layers</h2>
-                <div id="containers"></div>
+          <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
+            <p>tips and tricks</p>
+            <p class="expandedMenuIndicator">+</p>
+          </div>
+          <div class="expandableMenu">
+            <p>
+              there are some keyboard shortcuts for your convenience:<br />
+              "e" = enables editing mode<br />
+              esc = disables editing mode (and saves page)<br /> 
+              "1"-"4" = jump between settings box tabs<br />
+            </p>
+            <p>
+              floating text:<br />
+              for floating text anywhere on the page, 
+              remove the border and set the background opacity of a layer to 
+              zero. then, add new sections to the bookmark list without any links.
+              customize the layer's "section" text to your liking and place freely.
+            </p>
+          </div>
+        </div>
+
+        <form id="containerForm" onsubmit="return false">
+            <div>
+              <h2 class="menuHeader">add bookmark layer</h2>
+              <input
+                id="newTextContainerNameInput"
+                placeholder="(optional) layer name"
+                style="width: 100%"
+                type="text"
+              />
+              <button id="newTextContainerCreateButton" onclick="createNewTextContainer(this)">
+                create new layer
+              </button>
             </div>
-          </form>
+            <div>
+              <h2 class="menuHeader">add image to page</h2>
+              <input
+                id="newImageContainerNameInput"
+                placeholder="(optional) image name"
+                style="width: 100%;"
+                type="text"
+              />
+              <input
+                id="newImageContainerUrlInput"
+                placeholder="direct URL to image"
+                style="width: 100%;"
+                type="text"
+              />
+              <button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)">
+                place image
+              </button>
+              <a href="https://imgur.com/upload" target="_blank" style="color: black">imgur upload for convenience</a>
+              <h2 class="menuHeader">layers</h2>
+              <div id="containers"></div>
+          </div>
+        </form>
 
-          <form id="ioForm" onsubmit="return false">
-            <label>use the button below to copy your current configuration to your clipboard<br />(you should save this somewhere)</label>
-            <button onclick="exportData()">export data</button><br />
+        <form id="ioForm" onsubmit="return false">
+          <label>use the button below to copy your current configuration to your clipboard<br />(you should save this somewhere)</label>
+          <button onclick="exportData()">export data</button><br />
 
-            <input id="importDataInput" />
-            <button
-              onclick="importData()"
-              placeholder="paste exported data here to load"
-            >
-              import data
-            </button>
-          </form>
+          <input id="importDataInput" />
+          <button
+            onclick="importData()"
+            placeholder="paste exported data here to load"
+          >
+            import data
+          </button>
+        </form>
 
-          <form id="globalSettingsForm" onsubmit="return false">
-            <div>
-              <p class="menuHeader">image manipulation</p>
-                <div class="containerOptionListing">
-                  <label for="imageRatioToggle">image free transform mode</label>
-                  <input type="checkbox" id="imageRatioToggle" />
-                </div>
+        <form id="globalSettingsForm" onsubmit="return false">
+          <div>
+            <p class="menuHeader">image manipulation</p>
+              <div class="containerOptionListing">
+                <label for="imageRatioToggle">image free transform mode</label>
+                <input type="checkbox" id="imageRatioToggle" />
+              </div>
 
-              <p class="menuHeader">change page wallpaper</p>
-                <div class="containerOptionListing">
-                  <label for="wallpaperUrl">set image as wallpaper: </label>
-                  <div style="display: flex; flex-direction: column; align-items: end;">
-                    <input id="wallpaperUrl" placeholder="paste image URL" style="width: 10rem" />
-                    <br />
-                    <button id="submitUrl" onclick="changeWallpaper()">
-                      set image
-                    </button>
-                  </div>
-                </div>
-                <div class="containerOptionListing">
-                  <label for="wallpaperRepeatToggle"> tile wallpaper? </label>
-                  <input id="wallpaperRepeatToggle" type="checkbox" />
-                </div>
-                <div class="containerOptionListing">
-                  <label for="wallpaperColorPicker">or, set wallpaper as solid color: </label>
-                  <input type="color" id="wallpaperColorPicker" />
+            <p class="menuHeader">change page wallpaper</p>
+              <div class="containerOptionListing">
+                <label for="wallpaperUrl">set image as wallpaper: </label>
+                <div style="display: flex; flex-direction: column; align-items: end;">
+                  <input id="wallpaperUrl" placeholder="paste image URL" style="width: 10rem" />
+                  <br />
+                  <button id="submitUrl" onclick="changeWallpaper()">
+                    set image
+                  </button>
                 </div>
+              </div>
+              <div class="containerOptionListing">
+                <label for="wallpaperRepeatToggle"> tile wallpaper? </label>
+                <input id="wallpaperRepeatToggle" type="checkbox" />
+              </div>
+              <div class="containerOptionListing">
+                <label for="wallpaperColorPicker">or, set wallpaper as solid color: </label>
+                <input type="color" id="wallpaperColorPicker" />
+              </div>
 
 
-              <p class="menuHeader">change cursors</p>
-              <p>for reference: <a href="https://www.totallyfreecursors.com/">cursors</a></p>
+            <p class="menuHeader">change cursors</p>
+            <p>for reference: <a href="https://www.totallyfreecursors.com/">cursors</a></p>
 
-                <div class="containerOptionListing">
-                  <label for="pointerCursorInput">change normal cursor:</label>
-                  <div style="display: flex; flex-direction: column; align-items: end;">
-                    <input id="pointerCursorInput" placeholder="paste link to image URL" />
-                    <button onclick="setDefaultCursor()">set normal cursor</button>
-                  </div>
-                </div>
-                <div class="containerOptionListing">
-                  <label for="grabCursorInput">change grab cursor:</label>
-                  <div style="display: flex; flex-direction: column; align-items: end;">
-                    <input id="grabCursorInput" placeholder="paste link to image URL" />
-                    <button onclick="setGrabCursor()">set grabbing cursor</button>
-                  </div>
+              <div class="containerOptionListing">
+                <label for="pointerCursorInput">change normal cursor:</label>
+                <div style="display: flex; flex-direction: column; align-items: end;">
+                  <input id="pointerCursorInput" placeholder="paste link to image URL" />
+                  <button onclick="setDefaultCursor()">set normal cursor</button>
                 </div>
-                <div class="containerOptionListing">
-                  <label for="linkCursorInput">change link cursor:</label>
-                  <div style="display: flex; flex-direction: column; align-items: end;">
-                    <input id="linkCursorInput" placeholder="paste link to cursor image URL here" />
-                    <button onclick="setLinkHoverCursor()">set link hover cursor</button>
-                  </div>
+              </div>
+              <div class="containerOptionListing">
+                <label for="grabCursorInput">change grab cursor:</label>
+                <div style="display: flex; flex-direction: column; align-items: end;">
+                  <input id="grabCursorInput" placeholder="paste link to image URL" />
+                  <button onclick="setGrabCursor()">set grabbing cursor</button>
                 </div>
-
-              <p class="menuHeader">audio</p>
+              </div>
               <div class="containerOptionListing">
-                <label for=audioLinkInput">paste a direct URL to an audio file:</label>
-
+                <label for="linkCursorInput">change link cursor:</label>
                 <div style="display: flex; flex-direction: column; align-items: end;">
-                  <input id="audioLinkInput" />
-                  <button onclick="setAudioLink()">set audio</button>
+                  <input id="linkCursorInput" placeholder="paste link to cursor image URL here" />
+                  <button onclick="setLinkHoverCursor()">set link hover cursor</button>
                 </div>
               </div>
 
-              <audio id="audio" controls style="width: 100%">
-                <source id="audioSource" src="" type="audio/mp3" />
-              </audio>
+            <p class="menuHeader">audio</p>
+            <div class="containerOptionListing">
+              <label for=audioLinkInput">paste a direct URL to an audio file:</label>
 
-              <div class="containerOptionListing">
-                <label for="autoplayAudioToggle">auto-play when page loads? </label>
-                <input id="autoplayAudioToggle" type="checkbox" checked />
+              <div style="display: flex; flex-direction: column; align-items: end;">
+                <input id="audioLinkInput" />
+                <button onclick="setAudioLink()">set audio</button>
               </div>
+            </div>
 
-              <p>
-                (note: this will require white-listing this site in your browser.
-                you can whitelist local HTML files! the URL would be something like
-                "file:///C:/path/to/saved/file")
-              </p>
+            <audio id="audio" controls style="width: 100%">
+              <source id="audioSource" src="" type="audio/mp3" />
+            </audio>
+
+            <div class="containerOptionListing">
+              <label for="autoplayAudioToggle">auto-play when page loads? </label>
+              <input id="autoplayAudioToggle" type="checkbox" checked />
             </div>
-          </form>
-      </div>
-      </div>
+
+            <p>
+              (note: this will require white-listing this site in your browser.
+              you can whitelist local HTML files! the URL would be something like
+              "file:///C:/path/to/saved/file")
+            </p>
+          </div>
+        </form>
     </div>
-    todo: image for labels
   </body>
 
   <script>
@@ -734,7 +785,7 @@
       loadBookmarkListings() {
         if (Object.keys(this.sections).length == 0) {
           let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
-          bookmarkListings.innerHTML = "(you have no bookmarks)";
+          bookmarkListings.innerHTML = `<p style="padding: 0 0 .25rem 0; font-style: italic;">(there are no bookmarks to manage...)</p>`;
           return;
         }
 
@@ -835,9 +886,8 @@
           </div>
           <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;">
 
-
             <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
-              <p>+ ${this.name}: bookmarks</p>
+              <p>${this.name}: bookmarks</p>
               <p class="expandedMenuIndicator">+</p>
             </div>
             <div class="expandableMenu" id=${this.id + "-bookmark-menu"} >
@@ -862,7 +912,7 @@
                   id=${this.id + "-url-input"} 
                   type="text" name="url" 
                   placeholder="enter URL for bookmark"
-                  style="width: 20rem"
+                  style="width: 20rem;"
                 />
                 <br />
 
@@ -882,7 +932,7 @@
                 />
                 <br />
 
-                <button id=${this.id + "-add-link-button"} onclick="addLink(this)">add link</button>
+                <button id=${this.id + "-add-link-button"} onclick="addLink(this)">add it</button>
               </div>
             </div>
             
@@ -1034,32 +1084,36 @@
                     <input id=${this.id + "-settings-bg-alpha"} />
                   </div>
 
-                <p class="menuHeader">border + shape</p>
+                <p class="menuHeader">layer shape</p>
                   <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
-                    <input id=${this.id + "-settings-shadow-color"} type="color" />
+                    <label for=${this.id + "-settings-border-radius"}>roundness (0 = square, 90 = circle): </label>
+                    <input id=${this.id + "-settings-border-radius"} placeholder="" />
                   </div>
 
-                  <div class="containerOptionListing">
-                    <label>shadow opacity:</label>
-                    <input id=${this.id + "-settings-shadow-alpha"} />
-                  </div>
+                <p class="menuHeader">border</p>
                   <div class="containerOptionListing">
                     <label for=${this.id + "-settings-border-color"}>set border color: </label>
                     <input id=${this.id + "-settings-border-color"} type="color" />
                   </div>
 
                   <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-border-width"}>set border width (0 = no border): </label>
+                    <label for=${this.id + "-settings-border-width"}>set border width (0px = no border): </label>
                     <input id=${this.id + "-settings-border-width"} placeholder="0 for none" />
                   </div>
 
+                
+
+                <p class="menuHeader">shadow / glow</p>
                   <div class="containerOptionListing">
-                    <label for=${this.id + "-settings-border-radius"}>container roundedness (0 = right angles): </label>
-                    <input id=${this.id + "-settings-border-radius"} placeholder="0 for square" />
+                    <label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
+                    <input id=${this.id + "-settings-shadow-color"} type="color" />
+                  </div>
+
+                  <div class="containerOptionListing">
+                    <label>shadow opacity:</label>
+                    <input id=${this.id + "-settings-shadow-alpha"} />
                   </div>
 
-                <p class="menuHeader">shadow / glow</p>
                   <div class="containerOptionListing">
                     <label for=${this.id + "-settings-shadow-x"}>x-offset (in px): </label>
                     <input id=${this.id + "-settings-shadow-x"} placeholder="all 0 for none" />
@@ -1698,40 +1752,6 @@
         JSON.parse(localStorage.getItem("containerMapValues")) || [];
       numberTotalContainers = containerMapValues.length;
       
-
-      /** to ensure that container listings are rendered in order of zindex
-      let tempContainerMap = new Map();
-      for (let i = 0; i < numberTotalContainers; i++) {
-        tempContainerMap.set(containerMapValues[i].id, {
-          id:                 containerMapValues[i].id,
-          name:               containerMapValues[i].name,
-          x:                  containerMapValues[i].x,
-          y:                  containerMapValues[i].y,
-          height:             containerMapValues[i].height,
-          width:              containerMapValues[i].width,
-          imageUrl:           containerMapValues[i].imageUrl,
-          containerSettings:  containerMapValues[i].containerSettings,
-          sections:          containerMapValues[i].sections
-        });
-      }
-
-      for (let i = 1; i <= numberTotalContainers; i++) {
-        let tempContainerData = tempContainerMap.get(zIndexMap.get(String(i)));
-        console.log(tempContainerData);
-        containerDataMap.set(tempContainerData.id, new Container(
-          tempContainerData.id,
-          tempContainerData.name,
-          tempContainerData.x,
-          tempContainerData.y,
-          tempContainerData.height,
-          tempContainerData.width,
-          tempContainerData.imageUrl,
-          tempContainerData.containerSettings,
-          tempContainerData.sections
-        ));
-
-      }*/
-
       for (let i = 0; i < numberTotalContainers; i++) {
         containerDataMap.set(containerMapValues[i].id, new Container(
           containerMapValues[i].id,
@@ -1745,6 +1765,19 @@
           containerMapValues[i].sections
         ));
       }
+
+      /** 
+      if (numberTotalContainers == 0) {
+        new Container(
+          "container-0",
+          "setup help",
+          "15",
+          "15",
+          "150",
+          "100",
+          undefined,
+        );
+      }*/
       
      
       /** set up + load settings menu data */