diff options
Diffstat (limited to 'startpage.html')
| -rw-r--r-- | startpage.html | 398 |
1 files changed, 238 insertions, 160 deletions
diff --git a/startpage.html b/startpage.html index e49d3bb..da525be 100644 --- a/startpage.html +++ b/startpage.html @@ -115,7 +115,7 @@ .expandableMenuToggle { cursor: pointer; - padding: 18px; + padding: 0px 18px; width: 100%; } .expandableMenuToggle.active, .expandableMenuToggle:hover { @@ -135,6 +135,10 @@ font-style: italic; } + hr { + width: 75%; + } + #editToggle { z-index: 999; position: fixed; @@ -144,19 +148,6 @@ cursor: pointer; } - .hiddenButton { - display: inline; - visibility: visible; - font-style: italic; - } - .hiddenButton.hidden { - visibility: hidden; - display: none; - } - .hiddenButton:hover { - cursor: pointer; - } - #imageRemovalWarning { color: red; size: 3rem; @@ -407,7 +398,7 @@ headerBold: false, headerItalic: false, - disableDivider: false, + enableDivider: true, dividerColor: "", centerAlign: false, shadowX: "0", @@ -439,7 +430,7 @@ clockSize: "16", clockBold: false, clockItalic: false, - disableDivider: false, + enableDivider: false, dividerColor: "", centerAlign: false, shadowX: "0", @@ -498,7 +489,7 @@ * ensure there are no brackets in the name */ this.name = name; - this.id = name.replace(" ", "-"); + this.id = name.replace(" ", "-").toLowerCase(); // if initializing saved container content, if (x !== undefined && y !== undefined) { @@ -523,13 +514,11 @@ this.initializeNewImageContainer(); } - // apply bookmarks this.loadBookmarks(); - // then create container options UI in settings menu - this.insertContainerSettingsListing(); - this.applyContainerSettings(); - // establish necessary event listeners + this.createSettingsMenuListing(); + this.applySettings(); + this.addContainerEventListeners() this.addSettingsMenuEventListeners(); @@ -541,7 +530,7 @@ /** * creates a basic container shell and lets - * loadBookmarks() and applyContainerSettings() do the rest + * loadBookmarks() and applySettings() do the rest */ loadSavedContainer() { document.body.insertAdjacentHTML( @@ -693,107 +682,197 @@ * rename settings form div ids (see "note to self") */ + loadBookmarkListings() { + if (Object.keys(this.sections).length == 0) { + return; + } - insertContainerSettingsListing() { + let sectionData = Object.values(this.sections); + let containerSettings = this.containerSettings; + + let bookmarkListings = document.getElementById(this.id + "-bookmark-listings"); + + console.log(sectionData); + + // [re]render the section listings + bookmarkListings.innerHTML = ""; + for (let i = 0; i < sectionData.length; i++) { + console.log(i); + bookmarkListings.insertAdjacentHTML( + "beforeend", + ` + ${i == 0 ? "" : `<br />`} + <div id="${this.id}-section-listing-${i}"> + <span onClick="deleteSection(this)"> + [X] + </span> + + <span class=${this.id + "-section-listing"}> + ${sectionData[i].label} + </span> + + ${i > 1 ? ` + <span onClick="reorderSection(this, 'up')"> + [up] + </span> + ` : ``} + ${i > 0 ? ` + <span onClick="reorderSection(this, 'down')"> + [down] + </span> + ` : ``} + </div> + ` + ); + } + + // [re]render the link listings + for (let s = 0; s < sectionData.length; s++) { + for (let l = 0; l < sectionData[s].links.length; l++) { + console.log('s: ' + s); + let targetSection = document.getElementById( + this.id + "-section-listing-" + s + ); + + targetSection.insertAdjacentHTML( + "beforeend", + ` + <div id="${this.id}-section-${s}-link-${l}-listing" > + <span onClick="deleteLink(this)"> + [X] + </span> + <a + class="${this.id}-link" + href="${sectionData[s].links[l].url}" + > + ${sectionData[s].links[l].label} + </a> + </div> + ` + ); + } + } + } + + createSettingsMenuListing() { document.getElementById("containers").insertAdjacentHTML( "beforeend", ` <div class="containerListing" id=${this.id + "-container-listing"}> - <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">- ${this.name}</p> + <p class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)">- ${this.name}</p> <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;"> - <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.id}: bookmarks</h1> + <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.name}: bookmarks</p> <div class="expandableMenu" id=${this.id + "-bookmark-menu"} > - <label> enter url: </label> - <input id=${this.id + "-url-input"} type="text" name="url" /> - - <label> enter label: </label> - <input id=${this.id + "-label-input"} type="text" name="label" /> - <label> enter section (optional): </label> - <input id=${this.id + "-section-input"} type="text" name="section" /> - - <br /><br /> - - <button id=${this.id + "-add-link-button"} onclick="addLink(this)">add link</button> - </div> + <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ manage bookmarks / sections</p> + <div class="expandableMenu" id=${this.id + "-bookmark-listings"} > + ${Object.keys(this.sections).length == 0 ? `<p>(no bookmarks)</p>` : ``} + </div> + <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ add new bookmarks / sections</p> + <div class="expandableMenu" id=${this.id + "-add-bookmark-menu"} > - <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.id}: customize bookmarks</p> - <div class="expandableMenu"> - <p class="menuHeader">section text options</p> - <label>set section size (px): </label> - <input id=${this.id + "-settings-section-size"} /> + <label> enter url: </label> + <input id=${this.id + "-url-input"} type="text" name="url" /> - <label>set section color: </label> - <input id=${this.id + "-settings-section-color"} type="color" /> + <label> enter label: </label> + <input id=${this.id + "-label-input"} type="text" name="label" /> - <label for="sectionBoldToggle">bold sections?</label> - <input id=${this.id + "-settings-section-bold"} type="checkbox" /> + <label> enter section (optional): </label> + <input id=${this.id + "-section-input"} type="text" name="section" /> - <label for="sectionItalicToggle">italic sections?</label> - <input id=${this.id + "-settings-section-italic"} type="checkbox" /> + <br /><br /> - <p class="menuHeader">bookmark text options</p> - <label>set link size (px): </label> - <input id=${this.id + "-settings-link-size"} /> + <button id=${this.id + "-add-link-button"} onclick="addLink(this)">add link</button> + </div> - <label>set link color: </label> - <input id=${this.id + "-settings-link-color"} type="color" /> </div> + - - <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.id}: customize layer</p> + <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.name}: customize</p> <div class="expandableMenu"> - <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.id}: header settings</p> + <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.name}: header options</p> <div class="expandableMenu"> - <label>show date?</label> - <input id=${this.id + "-settings-date-toggle"} type="checkbox" /> - <br /> - - <label>show clock?</label> - <input id=${this.id + "-settings-clock-toggle"} type="checkbox" /> - <br /><br /> + <p class="menuHeader">date + time options</p> + <label for=${this.id + "-settings-date-toggle"}>show date?</label> + <input id=${this.id + "-settings-date-toggle"} type="checkbox" /> + <br /> + + <label>show clock?</label> + <input id=${this.id + "-settings-clock-toggle"} type="checkbox" /> - <label>set header text color: </label> - <input id=${this.id + "-settings-clock-color"} type="color" /> <br /><br /> - <label>set header font size (px): </label> - <input id=${this.id + "-settings-clock-size"} /> - <br /> - - <label for=${this.id + "-settings-clock-bold"}>bold header?</label> - <input id=${this.id + "-settings-clock-bold"} type="checkbox" /> + <p class="menuHeader">divider options</p> + <label for=${this.id + "-settings-divider-toggle"}>show divider?</label> + <input id=${this.id + "-settings-divider-toggle"} type="checkbox" /> + <br /> - <label for=${this.id + "-settings-clock-italic"}>italic header?</label> - <input id=${this.id + "-settings-clock-italic"} type="checkbox" /> + <label>set divider color: </label> + <input id=${this.id + "-settings-divider-color"} type="color" /> </div> - <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.id}: text settings</p> + <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.name}: text options</p> <div class="expandableMenu"> - <label>change font (see instructions for more info):</label> - <input id=${this.id + "-settings-font-input"} /> - <button id=${this.id + "-settings-set-font-button"}>set font</button> - - <label>current font:</label> - <span id=${this.id + "-settings-font-name"}></span> + <p class="menuHeader">header text options</p> + <label>set header text color: </label> + <input id=${this.id + "-settings-clock-color"} type="color" /> + <br /><br /> - <br /><br /> - <label>align text:</label> - <br /> - <label for=${this.id + "-settings-left-align"}>left</label> - <input id=${this.id + "-settings-left-align"} type="radio" name="align" /> - <label for=${this.id + "-settings-center-align"}>center</label> - <input id=${this.id + "-settings-center-align"} type="radio" name="align" /> + <label>set header font size (px): </label> + <input id=${this.id + "-settings-clock-size"} /> + <br /> + + <label for=${this.id + "-settings-clock-bold"}>bold header?</label> + <input id=${this.id + "-settings-clock-bold"} type="checkbox" /> + + <label for=${this.id + "-settings-clock-italic"}>italic header?</label> + <input id=${this.id + "-settings-clock-italic"} type="checkbox" /> + + <p class="menuHeader">section text options</p> + <label>set section size (px): </label> + <input id=${this.id + "-settings-section-size"} /> + + <label>set section color: </label> + <input id=${this.id + "-settings-section-color"} type="color" /> + + <label for="sectionBoldToggle">bold sections?</label> + <input id=${this.id + "-settings-section-bold"} type="checkbox" /> + + <label for="sectionItalicToggle">italic sections?</label> + <input id=${this.id + "-settings-section-italic"} type="checkbox" /> + + <p class="menuHeader">bookmark text options</p> + <label>set link size (px): </label> + <input id=${this.id + "-settings-link-size"} /> + + <label>set link color: </label> + <input id=${this.id + "-settings-link-color"} type="color" /> + + <p class="menuHeader">layer-wide options</p> + <label>change font (see instructions for more info):</label> + <input id=${this.id + "-settings-font-input"} /> + <button id=${this.id + "-settings-set-font-button"}>set font</button> + + <label>current font:</label> + <span id=${this.id + "-settings-font-name"}></span> + + <br /><br /> + <label>align text:</label> + <br /> + <label for=${this.id + "-settings-left-align"}>left</label> + <input id=${this.id + "-settings-left-align"} type="radio" name="align" /> + <label for=${this.id + "-settings-center-align"}>center</label> + <input id=${this.id + "-settings-center-align"} type="radio" name="align" /> </div> - <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.id}: color + shape settings</p> + <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.name}: color + shape options</p> <div class="expandableMenu"> - <p class="menuHeader">layer background options</p> + <p class="menuHeader">background color</p> <label>set background color: </label> <input id=${this.id + "-settings-bg-color"} type="color" /> @@ -810,13 +889,6 @@ <label>set container roundedness (px): </label> <input id=${this.id + "-settings-border-radius"} placeholder="0 for square" /> - <p class="menuHeader">change divider</p> - <label for=${this.id + "-settings-divider-toggle"}>disable divider: </label> - <input id=${this.id + "-settings-divider-toggle"} type="checkbox" /> - - <label>set divider color: </label> - <input id=${this.id + "-settings-divider-color"} type="color" /> - <p class="menuHeader">change shadow / glow</p> shadow settings:<br /> <label>x-offset (px): </label><br /> @@ -835,13 +907,14 @@ </div> ` ); + this.loadBookmarkListings(); } /* * applies saved cosmetic customizations to container */ - applyContainerSettings() { + applySettings() { /** set options relevant to both image and text containers */ /** POSITION */ document.getElementById(this.id).style.top = this.y; @@ -1016,7 +1089,7 @@ /** DIVIDER */ let divider = document.getElementById(this.id + "-divider"); - if (containerSettings.disableDivider) { + if (!containerSettings.enableDivider) { document.getElementById(this.id + "-divider").hidden = true; // if there are links in this container, add room under the divider if (Object.keys(this.sections).length > 0) { @@ -1030,7 +1103,7 @@ } // fill-in settings ui document.getElementById(this.id + "-settings-divider-toggle").checked = - containerSettings.disableDivider; + containerSettings.enableDivider; document.getElementById(this.id + "-settings-divider-color").value = containerSettings.dividerColor; } @@ -1135,7 +1208,7 @@ // container divider setting listeners document .getElementById(this.id + "-settings-divider-toggle") - .addEventListener("change", disableDivider, false); + .addEventListener("change", toggleDivider, false); document .getElementById(this.id + "-settings-divider-color") .addEventListener("input", changeDividerColor, false); @@ -1158,48 +1231,45 @@ } /** - * [re]loads saved bookmark sections + links for container + * [re]renders saved bookmark sections + links for container */ loadBookmarks() { - let containerSettings = this.containerSettings; - let linkContainer = document.getElementById(this.id + "-sections"); - linkContainer.innerHTML = ""; - if (Object.keys(this.sections).length == 0) { return; } let sectionData = Object.values(this.sections); + let containerSettings = this.containerSettings; + + let containerBookmarks = document.getElementById(this.id + "-sections"); + + containerBookmarks.innerHTML = ""; + + /* ensure uncategorized links (if any) stay at top + let noneSectionIndex; + for (let i = 0; i < sectionData.length; i++) { + if(sectionData[i].label == "") { + noneSectionIndex = i; + break; + } + } + + if (noneSectionIndex != -1 && noneSectionIndex != 0) { + this.sections.splice(noneSectionIndex, 1); + this.sections.unshift("none"); + }*/ - // render the sections for (let i = 0; i < sectionData.length; i++) { - linkContainer.insertAdjacentHTML( + containerBookmarks.insertAdjacentHTML( "beforeend", ` ${i == 0 ? "" : `<br />`} <div id="${this.id}-section-${i}"> - <span - class="hiddenButton ${editing ? "" : "hidden"}" - onClick="deleteSection(this)" - > - [X] - </span> + <span class=${this.id + "-section"}> ${sectionData[i].label} </span> - <span - class="hiddenButton ${editing ? "" : "hidden"}" - onClick="reorderSection(this, 'up')" - > - [up] - </span> - <span - class="hiddenButton ${editing ? "" : "hidden"}" - onClick="reorderSection(this, 'down')" - > - [down] - </span> </div> ` ); @@ -1216,12 +1286,6 @@ "beforeend", ` <div id="${this.id}-section-${s}-link-${l}" > - <span - class="hiddenButton bookmark ${editing ? "" : "hidden"}" - onClick="deleteLink(this)" - > - [X] - </span> <a class="${this.id}-link" @@ -1236,7 +1300,7 @@ } // ensure smooth ux when rerendering - if (containerSettings.disableDivider) { + if (!containerSettings.enableDivider) { document.getElementById(this.id + "-header").style.marginBottom = "18px"; } } @@ -1551,7 +1615,6 @@ function toggleEditingElements(show) { const editButton = document.getElementById("editToggle"); const settingsContainer = document.getElementById("settingsContainer"); - const hiddenButtons = document.getElementsByClassName("hiddenButton"); /** when editing-mode is enabled, */ if (show) { @@ -1559,9 +1622,6 @@ // reveal settings container settingsContainer.classList.remove("hidden"); - for (let i = 0; i < hiddenButtons.length; i++) { - hiddenButtons[i].classList.remove("hidden"); - } // change cursor on movable elements to indicate grabbable let movableElements = document.getElementsByClassName("movable"); @@ -1590,9 +1650,6 @@ // hide the settings container settingsContainer.classList.add("hidden"); - for (let i = 0; i < hiddenButtons.length; i++) { - hiddenButtons[i].classList.add("hidden"); - } } } @@ -1861,14 +1918,14 @@ let section = document.getElementById(containerId + "-section-input").value; // sanitize input - if (!url.startsWith("http")) { + if (url.length > 0 && !url.startsWith("http")) { url = "https://" + url; // append HTTPS to link if needed } if (label == "" || url == "https://") { alert("you must specify url and label to add a bookmark"); return; } - + // store new link in container let sectionData = Object.values(container.sections); let sectionLabels = []; @@ -1876,31 +1933,49 @@ sectionLabels.push(sectionData[i].label); } - let tempIndex = sectionLabels.indexOf(section); - // existing section - if (tempIndex != -1) { - let tempSectionLinks = Object.values(container.sections)[tempIndex].links; + let sectionIndex = sectionLabels.indexOf(section); + // add link to existing section + if (sectionIndex != -1) { + let tempSectionLinks = Object.values(container.sections)[sectionIndex].links; tempSectionLinks.push({ label: label, url: url }); } - // creating new section + // or create new section + add link else { - let tempSectionLinks = []; - tempSectionLinks.push({ + let newSectionLinks = []; + newSectionLinks.push({ label: label, url: url }); - container.sections[sectionData.length] = {} - container.sections[sectionData.length].links = tempSectionLinks; - container.sections[sectionData.length].label = section; + + // ensure that uncategorized links stay at top of container + if (section == "" && sectionData.length > 0) { + let reorderedSections = {}; + reorderedSections[0] = {}; + reorderedSections[0].links = newSectionLinks; + reorderedSections[0].label = section; + + // move existing sections down + for (let i = 0; i < sectionData.length; i++) { + reorderedSections[i+1] = sectionData[i]; + } + + container.sections = reorderedSections; + } + else { + container.sections[sectionData.length] = {}; + container.sections[sectionData.length].links = newSectionLinks; + container.sections[sectionData.length].label = section; + } } // reset inputs + render document.getElementById(containerId + "-url-input").value = ""; document.getElementById(containerId + "-label-input").value = ""; container.loadBookmarks(); + container.loadBookmarkListings(); } function reorderSection(buttonPressed, direction) { @@ -1909,7 +1984,7 @@ let container = containerDataMap.get(temp[0]); let copy = container.sections[sectionId]; - if (direction == "up" && sectionId != 0) { + if (direction == "up" && sectionId != 0) { container.sections[sectionId] = container.sections[sectionId - 1]; container.sections[sectionId - 1] = copy; } else if (direction == "down" && (sectionId + 1) != Object.keys(container.sections).length) { @@ -1920,14 +1995,15 @@ } container.loadBookmarks(); + container.loadBookmarkListings(); } function deleteSection(buttonPressed) { let temp = buttonPressed.parentElement.id.split("-"); let sectionId = parseInt(temp[temp.length - 1]); - let container = containerDataMap.get(temp[0]); + let container = containerDataMap.get(buttonPressed.parentElement.id.split("-section")[0]); - // go through sections, starting with one to delete + // overwrite sections let numSections = Object.keys(container.sections).length; for (let i = sectionId; i < numSections; i++) { container.sections[i] = container.sections[i+1]; @@ -1937,6 +2013,7 @@ // refresh screen container.loadBookmarks(); + container.loadBookmarkListings(); } function deleteLink(buttonPressed) { @@ -2233,12 +2310,13 @@ divider.style.backgroundColor = container.containerSettings.dividerColor; divider.style.borderColor = container.containerSettings.dividerColor; } - function disableDivider(checkboxChanged) { + function toggleDivider(checkboxChanged) { let containerId = checkboxChanged.target.id.split("-")[0]; let container = containerDataMap.get(containerId); - container.containerSettings.disableDivider = checkboxChanged.target.checked; - document.getElementById(containerId + "-divider").hidden = checkboxChanged.target.checked; + container.containerSettings.enableDivider = checkboxChanged.target.checked; + document.getElementById(containerId + "-divider").style.display = + checkboxChanged.target.checked ? "block" : "none"; if (checkboxChanged.target.checked && Object.keys(container.sections).length > 0) { document.getElementById(containerId + "-clock").style.marginBottom = "18px"; @@ -2330,7 +2408,7 @@ localStorage.setItem("links", JSON.stringify(links)); localStorage.setItem("sections", JSON.stringify(sections)); - if (containerSettings.disableDivider) { + if (containerSettings.enableDivider) { document.getElementById("clock").style.marginBottom = "0px"; } @@ -2373,7 +2451,7 @@ document.getElementById("mainContainer").style.top = "10px"; document.getElementById("mainContainer").style.left = "10px"; - applyContainerSettings(); + applySettings(); loadSections(); } |