diff options
Diffstat (limited to 'startpage.html')
| -rw-r--r-- | startpage.html | 571 |
1 files changed, 326 insertions, 245 deletions
diff --git a/startpage.html b/startpage.html index b9bae9e..d549d11 100644 --- a/startpage.html +++ b/startpage.html @@ -12,10 +12,13 @@ } .invertedX { - transform: scaleX(-1); + transform: scale(-1, 1); } .invertedY { - transform: scaleY(-1); + transform: scale(1, -1); + } + .doubleInverted { + transform: scale(-1, -1); } /* @@ -533,9 +536,8 @@ </p> </div> </div> - todo: recoloring links and then adding a new one resets the color, and something else. check the refreshing of containers, yo! + todo: <br />also change add image to "add media" and add youtube iframe support - <br />also mirror images x/y? </body> <script> @@ -587,7 +589,9 @@ shadowY: "0", shadowBlur: "0", shadowRgba: "rgba(255,255,255,.90)", - zIndex: "" + zIndex: "", + invertX: false, + invertY: false }; let wallpaper = ""; @@ -646,11 +650,10 @@ } let loadingFromSave = (id != undefined); - let isImage = (imageUrl != undefined); + let isMedia = (imageUrl != undefined); - // if constructing image container - if (isImage) { + if (isMedia) { numberOfImageContainers++; if (loadingFromSave) { @@ -680,7 +683,6 @@ this.initializeImageContainer(); } - // if constructing text container else { numberOfTextContainers++; @@ -722,8 +724,7 @@ /** - * creates image element and lets - * loadBookmarks() and applySettings() do the rest + * creates image element, applySettings() will do the rest */ initializeImageContainer() { document.body.insertAdjacentHTML( @@ -741,8 +742,7 @@ } /** - * creates shell HTML to hold bookmarks and lets - * loadBookmarks() and applySettings() do the rest + * creates text container element, loadBookmarks() and applySettings() do the rest */ initializeTextContainer() { // insert default container HTML @@ -799,97 +799,8 @@ } /** - * creates container options menu in page settings menu + * inserts and populates the settings inputs for the given text container */ - /** - * TODO: - * -> remove "images" from wallpaper tab - * -> furthermore, condense all global settings into one tab - * - including wallpaper, audio, cursor - * rename settings form div ids (see "note to self") - */ - - loadBookmarkListings() { - if (Object.keys(this.sections).length == 0) { - let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings"); - bookmarkListings.innerHTML = `<p style="padding: 0 0 .25rem 0; font-style: italic;">(there are no bookmarks to manage...)</p>`; - return; - } - - let sectionData = Object.values(this.sections); - let containerSettings = this.containerSettings; - - let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings"); - bookmarkListings.innerHTML = ""; - - // [in]render the section listings - for (let i = 0; i < sectionData.length; i++) { - bookmarkListings.insertAdjacentHTML( - "beforeend", - ` - ${i == 0 ? "" : `<br />`} - <div id="${this.id}-section-listing--${i}" class="sectionListingContainer"> - <span class=${this.id + "-section"}> - ${sectionData[i].label == "" ? "<u>uncategorized links</u>: " : "<u>section</u>: " + sectionData[i].label} - </span> - - <div class="bookmarkListingButtons"> - ${(i > 1) ? ` - <button onClick="reorderSection(this, 'up')" class="bookmarkButton"> - up - </button> - ` : `` } - - ${(i > 0) && (i < sectionData.length - 1) ? ` - <button onClick="reorderSection(this, 'down')" class="bookmarkButton"> - down - </button> - ` : `` } - <button onClick="deleteSection(this)" class="deleteButton">delete section</button> - </div> - </div> - ` - ); - } - - // [re]render the link listings - for (let s = sectionData.length - 1; s >= 0; s--) { - for (let l = sectionData[s].links.length - 1; l >= 0; l--) { - let targetSection = document.getElementById( - this.id + "-section-listing--" + s - ); - - targetSection.insertAdjacentHTML( - "afterend", - ` - <div id="${this.id}-section-listing--${s}--${l}" class="linkListingContainer"> - - <span class="${this.id}-link"> - ${sectionData[s].links[l].label} - </span> - - <div class="bookmarkListingButtons"> - ${l > 0 ? ` - <button onClick="reorderLink(this, 'up')" class="bookmarkButton"> - up - </button> - ` : `` - } - ${l < sectionData[s].links.length - 1 ? ` - <button onClick="reorderLink(this, 'down')" class="bookmarkButton"> - down - </button> - ` : `` - } - <button onClick="deleteLink(this)" class="deleteButton">delete link</button> - </div> - </div> - ` - ); - } - } - } - createTextContainerMenuListing() { let zindex = parseInt(this.containerSettings.zIndex); let upButtons = ` @@ -978,7 +889,7 @@ </div> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> - <p>color + shape options</p> + <p>shaping / color</p> <p class="expandedMenuIndicator">+</p> </div> <div class="expandableMenu"> @@ -1045,7 +956,7 @@ </div> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> - <p>header text options</p> + <p>date / clock / divider</p> <p class="expandedMenuIndicator">+</p> </div> <div class="expandableMenu"> @@ -1098,7 +1009,7 @@ </div> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> - <p>general text options</p> + <p>general text / font options</p> <p class="expandedMenuIndicator">+</p> </div> <div class="expandableMenu"> @@ -1277,7 +1188,90 @@ document.getElementById(this.id + "-settings-divider-color").value = containerSettings.dividerColor; } + + /** + * [re]renders bookmarks shown in the settings menu for a given text container + */ + loadBookmarkListings() { + if (Object.keys(this.sections).length == 0) { + let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings"); + bookmarkListings.innerHTML = `<p style="padding: 0 0 .25rem 0; font-style: italic;">(there are no bookmarks to manage...)</p>`; + return; + } + let sectionData = Object.values(this.sections); + let containerSettings = this.containerSettings; + + let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings"); + bookmarkListings.innerHTML = ""; + + // [in]render the section listings + for (let i = 0; i < sectionData.length; i++) { + bookmarkListings.insertAdjacentHTML( + "beforeend", + ` + ${i == 0 ? "" : `<br />`} + <div id="${this.id}-section-listing--${i}" class="sectionListingContainer"> + <span class=${this.id + "-section"}> + ${sectionData[i].label == "" ? "<u>uncategorized links</u>: " : "<u>section</u>: " + sectionData[i].label} + </span> + + <div class="bookmarkListingButtons"> + ${(i > 1) ? ` + <button onClick="reorderSection(this, 'up')" class="bookmarkButton"> + up + </button> + ` : `` } + + ${(i > 0) && (i < sectionData.length - 1) ? ` + <button onClick="reorderSection(this, 'down')" class="bookmarkButton"> + down + </button> + ` : `` } + <button onClick="deleteSection(this)" class="deleteButton">delete section</button> + </div> + </div> + ` + ); + } + + // [re]render the link listings + for (let s = sectionData.length - 1; s >= 0; s--) { + for (let l = sectionData[s].links.length - 1; l >= 0; l--) { + let targetSection = document.getElementById( + this.id + "-section-listing--" + s + ); + + targetSection.insertAdjacentHTML( + "afterend", + ` + <div id="${this.id}-section-listing--${s}--${l}" class="linkListingContainer"> + + <span class="${this.id}-link"> + ${sectionData[s].links[l].label} + </span> + + <div class="bookmarkListingButtons"> + ${l > 0 ? ` + <button onClick="reorderLink(this, 'up')" class="bookmarkButton"> + up + </button> + ` : `` + } + ${l < sectionData[s].links.length - 1 ? ` + <button onClick="reorderLink(this, 'down')" class="bookmarkButton"> + down + </button> + ` : `` + } + <button onClick="deleteLink(this)" class="deleteButton">delete link</button> + </div> + </div> + ` + ); + } + } + } createImageContainerMenuListing() { let zindex = this.containerSettings.zIndex; let upButtons = ` @@ -1360,8 +1354,16 @@ <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label> <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" /> </div> - + <p class="menuHeader">mirroring</p> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-mirror-x"}>mirror horizontally</label> + <input id=${this.id + "-settings-mirror-x"} type="checkbox" /> + </div> + <div class="containerOptionListing"> + <label for=${this.id + "-settings-mirror-y"}>mirror vertically</label> + <input id=${this.id + "-settings-mirror-y"} type="checkbox" /> + </div> </div> <div class="manageButtons"> @@ -1406,18 +1408,134 @@ containerSettings.borderWidth; document.getElementById(this.id + "-settings-border-radius").value = containerSettings.borderRadius; + // MIRRORING + document.getElementById(this.id + "-settings-mirror-x").checked = + containerSettings.invertX; + document.getElementById(this.id + "-settings-mirror-y").checked = + containerSettings.invertY; } + + /** + * applies event listeners on container options inputs in settings menu (both text+media containers) + */ + addSettingsMenuEventListeners() { + /** apply listeners for both text+media containers */ + // container border setting listeners + document + .getElementById(this.id + "-settings-border-color") + .addEventListener("input", changeContainerBorderColor, false); + document + .getElementById(this.id + "-settings-border-width") + .addEventListener("input", changeContainerBorderWidth, false); + document + .getElementById(this.id + "-settings-border-radius") + .addEventListener("input", changeContainerBorderRadius, false); // container color setting listeners + // container shadow setting listeners + document + .getElementById(this.id + "-settings-shadow-x") + .addEventListener("input", changeContainerShadow, false); + document + .getElementById(this.id + "-settings-shadow-y") + .addEventListener("input", changeContainerShadow, false); + document + .getElementById(this.id + "-settings-shadow-blur") + .addEventListener("input", changeContainerShadow, false); + document + .getElementById(this.id + "-settings-shadow-color") + .addEventListener("input", changeContainerShadow, false); + document + .getElementById(this.id + "-settings-shadow-alpha") + .addEventListener("input", changeContainerShadow, false); + /** if this is an media container, settings diverge here */ + if (this.imageUrl != undefined) { + document + .getElementById(this.id + "-settings-mirror-x") + .addEventListener("change", toggleMirrorX, false); + document + .getElementById(this.id + "-settings-mirror-y") + .addEventListener("change", toggleMirrorY, false); + return; + } + /** text-only settings */ + // container background color setting listeners + document + .getElementById(this.id + "-settings-bg-color") + .addEventListener("input", changeContainerBackground, false); + document + .getElementById(this.id + "-settings-bg-alpha") + .addEventListener("input", changeContainerBackground, false); + // container text setting listeners + document + .getElementById(this.id + "-settings-set-font-button") + .addEventListener("click", changeFont, false); + document + .getElementById(this.id + "-settings-left-align") + .addEventListener("change", changeContainerAlignment, false); + document + .getElementById(this.id + "-settings-center-align") + .addEventListener("change", changeContainerAlignment, false); + document + .getElementById(this.id + "-settings-right-align") + .addEventListener("change", changeContainerAlignment, false); + // bookmark section setting listeners + document + .getElementById(this.id + "-settings-section-color") + .addEventListener("input", changeSectionColor, false); + document + .getElementById(this.id + "-settings-section-size") + .addEventListener("input", changeSectionSize, false); + document + .getElementById(this.id + "-settings-section-bold") + .addEventListener("change", toggleSectionBold, false); + document + .getElementById(this.id + "-settings-section-italic") + .addEventListener("change", toggleSectionItalic, false); + // bookmark setting listeners + document + .getElementById(this.id + "-settings-link-color") + .addEventListener("input", changeLinkColor, false); + document + .getElementById(this.id + "-settings-link-size") + .addEventListener("input", changeLinkSize, false); + // clock setting listeners + document + .getElementById(this.id + "-settings-date-toggle") + .addEventListener("input", toggleDate, false); + document + .getElementById(this.id + "-settings-clock-toggle") + .addEventListener("input", toggleClock, false); + document + .getElementById(this.id + "-settings-clock-color") + .addEventListener("input", changeHeaderColor, false); + document + .getElementById(this.id + "-settings-clock-size") + .addEventListener("input", changeHeaderSize, false); + document + .getElementById(this.id + "-settings-clock-bold") + .addEventListener("change", toggleHeaderBold, false); + document + .getElementById(this.id + "-settings-clock-italic") + .addEventListener("change", toggleHeaderItalic, false); + // container divider setting listeners + document + .getElementById(this.id + "-settings-divider-toggle") + .addEventListener("change", toggleDivider, false); + document + .getElementById(this.id + "-settings-divider-color") + .addEventListener("input", changeDividerColor, false); + } + /* - * applies saved cosmetic customizations to container + * applies saved cosmetic customizations to container upon init (both text+media containers) */ applySettings() { - // makes sure that any old themes will still load + // make sure old themes will still load this.ensureBackwardsCompatibility(); - /** set options relevant to both image and text containers */ + /** apply customizations relevant to both image and text containers */ /** POSITION */ document.getElementById(this.id).style.top = this.y; document.getElementById(this.id).style.left = this.x; @@ -1450,11 +1568,25 @@ containerSettings.borderColor; - /** if this is an image container, all relevant settings have been applied */ + /** if this is a media container, settings diverge */ if (this.imageUrl != undefined) { + let invertX = containerSettings.invertX; + let invertY = containerSettings.invertY; + + if (invertY && invertX) { + document.getElementById(this.id).classList.add("doubleInverted"); + } + else if (invertX) { + document.getElementById(this.id).classList.add("invertedX"); + } + else if (invertY) { + document.getElementById(this.id).classList.toggle("invertedY"); + } + return; } + /** apply text-container-only customizations */ /** FONT */ if (containerSettings.fontCode != "") { document.head.insertAdjacentHTML( @@ -1474,28 +1606,13 @@ document.getElementById(this.id).style.textAlign = "right"; } - /** BOOKMARK CUSTOMIZATION */ - // apply link customization - let linkElements = document.getElementsByClassName(this.id + "-link"); - for (let i = 0; i < linkElements.length; i++) { - linkElements[i].style.color = containerSettings.linkColor; - linkElements[i].style.fontSize = containerSettings.linkSize + "px"; - } - // apply section customization - let sectionElements = document.getElementsByClassName(this.id + "-section"); - for (let i = 0; i < sectionElements.length; i++) { - sectionElements[i].style.color = containerSettings.sectionColor; - sectionElements[i].style.fontSize = containerSettings.sectionSize + "px"; - sectionElements[i].style.fontWeight = containerSettings.sectionBold ? "bold" : "normal"; - sectionElements[i].style.fontStyle = containerSettings.sectionItalic ? "italic" : "normal"; - } - + /** BOOKMARK CUSTOMIZATION HAPPENS IN loadBookmarks() FOR EASIER, + LESS INTENSE RE-RENDERING WHEN BOOKMARK CUSTOMIZATIONS CHANGE */ /** BACKGROUND COLOR */ document.getElementById(this.id).style.backgroundColor = containerSettings.backgroundRgba; - /** HEADER */ // show header elements document.getElementById(this.id + "-date").style.display = @@ -1512,7 +1629,6 @@ document.getElementById(this.id + "-header").style.fontStyle = containerSettings.headerItalic ? "italic" : "normal"; - /** DIVIDER */ let divider = document.getElementById(this.id + "-divider"); if (!containerSettings.enableDivider) { @@ -1530,7 +1646,7 @@ } /** - * applies event listeners for the container + * applies event listeners (moving/resizing) for the container */ addContainerEventListeners() { let container = document.getElementById(this.id); @@ -1556,111 +1672,7 @@ }); } - /** - * applies event listeners on container options inputs in settings menu - */ - addSettingsMenuEventListeners() { - // container border setting listeners - document - .getElementById(this.id + "-settings-border-color") - .addEventListener("input", changeContainerBorderColor, false); - document - .getElementById(this.id + "-settings-border-width") - .addEventListener("input", changeContainerBorderWidth, false); - document - .getElementById(this.id + "-settings-border-radius") - .addEventListener("input", changeContainerBorderRadius, false); // container color setting listeners - // container shadow setting listeners - document - .getElementById(this.id + "-settings-shadow-x") - .addEventListener("input", changeContainerShadow, false); - document - .getElementById(this.id + "-settings-shadow-y") - .addEventListener("input", changeContainerShadow, false); - document - .getElementById(this.id + "-settings-shadow-blur") - .addEventListener("input", changeContainerShadow, false); - document - .getElementById(this.id + "-settings-shadow-color") - .addEventListener("input", changeContainerShadow, false); - document - .getElementById(this.id + "-settings-shadow-alpha") - .addEventListener("input", changeContainerShadow, false); - - /** if this is an image container, all relevant listeners have been applied */ - if (this.imageUrl != undefined) { - return; - } - - // conatiner background color setting listeners - document - .getElementById(this.id + "-settings-bg-color") - .addEventListener("input", changeContainerBackground, false); - document - .getElementById(this.id + "-settings-bg-alpha") - .addEventListener("input", changeContainerBackground, false); - // container text setting listeners - document - .getElementById(this.id + "-settings-set-font-button") - .addEventListener("click", changeFont, false); - document - .getElementById(this.id + "-settings-left-align") - .addEventListener("change", changeContainerAlignment, false); - document - .getElementById(this.id + "-settings-center-align") - .addEventListener("change", changeContainerAlignment, false); - document - .getElementById(this.id + "-settings-right-align") - .addEventListener("change", changeContainerAlignment, false); - - // bookmark section setting listeners - document - .getElementById(this.id + "-settings-section-color") - .addEventListener("input", changeSectionColor, false); - document - .getElementById(this.id + "-settings-section-size") - .addEventListener("input", changeSectionSize, false); - document - .getElementById(this.id + "-settings-section-bold") - .addEventListener("change", toggleSectionBold, false); - document - .getElementById(this.id + "-settings-section-italic") - .addEventListener("change", toggleSectionItalic, false); - // bookmark setting listeners - document - .getElementById(this.id + "-settings-link-color") - .addEventListener("input", changeLinkColor, false); - document - .getElementById(this.id + "-settings-link-size") - .addEventListener("input", changeLinkSize, false); - // clock setting listeners - document - .getElementById(this.id + "-settings-date-toggle") - .addEventListener("input", toggleDate, false); - document - .getElementById(this.id + "-settings-clock-toggle") - .addEventListener("input", toggleClock, false); - document - .getElementById(this.id + "-settings-clock-color") - .addEventListener("input", changeHeaderColor, false); - document - .getElementById(this.id + "-settings-clock-size") - .addEventListener("input", changeHeaderSize, false); - document - .getElementById(this.id + "-settings-clock-bold") - .addEventListener("change", toggleHeaderBold, false); - document - .getElementById(this.id + "-settings-clock-italic") - .addEventListener("change", toggleHeaderItalic, false); - // container divider setting listeners - document - .getElementById(this.id + "-settings-divider-toggle") - .addEventListener("change", toggleDivider, false); - document - .getElementById(this.id + "-settings-divider-color") - .addEventListener("input", changeDividerColor, false); - } - + /** * [re]renders saved bookmark sections + links for container */ @@ -1721,31 +1733,58 @@ if (!containerSettings.enableDivider) { document.getElementById(this.id + "-header").style.marginBottom = "18px"; } + + // apply link customization + let linkElements = document.getElementsByClassName(this.id + "-link"); + for (let i = 0; i < linkElements.length; i++) { + linkElements[i].style.color = containerSettings.linkColor; + linkElements[i].style.fontSize = containerSettings.linkSize + "px"; + } + // apply section customization + let sectionElements = document.getElementsByClassName(this.id + "-section"); + for (let i = 0; i < sectionElements.length; i++) { + sectionElements[i].style.color = containerSettings.sectionColor; + sectionElements[i].style.fontSize = containerSettings.sectionSize + "px"; + sectionElements[i].style.fontWeight = containerSettings.sectionBold ? "bold" : "normal"; + sectionElements[i].style.fontStyle = containerSettings.sectionItalic ? "italic" : "normal"; + } } + /** + * if a container is imported and missing a setting, add it and set to default + */ ensureBackwardsCompatibility() { let currentSettings; - if (this.imageUrl == undefined) { - currentSettings = Object.keys(defaultTextContainerSettings); + if (this.imageUrl != undefined) { + currentSettings = Object.keys(defaultImageContainerSettings); } else { - currentSettings = Object.keys(defaultImageContainerSettings); + currentSettings = Object.keys(defaultTextContainerSettings); } for (let i = 0; i < currentSettings.length; i++) { if (this.containerSettings[currentSettings[i]] == undefined) { + console.log("found missing option: "); console.log(currentSettings[i]); - this.containerSettings[currentSettings[i]] = defaultTextContainerSettings[currentSettings[i]]; + + if (this.imageUrl != undefined) { + this.containerSettings[currentSettings[i]] = + defaultImageContainerSettings[currentSettings[i]]; + } + else { + this.containerSettings[currentSettings[i]] = + defaultTextContainerSettings[currentSettings[i]]; + } } } } } - /************************* - * constructor / init :p * - *************************/ + /****************************** + * page constructor / init :p * + ******************************/ (() => { window.onbeforeunload = unloadPage; @@ -2887,7 +2926,7 @@ let containerId = colorChange.target.id.split("-settings")[0]; let container = containerDataMap.get(containerId); - container.containerSettings.headerColor = colorChange.target.value; + container.containerSettings.headerColor = colorChange.target.value; document.getElementById(containerId + "-header").style.color = container.containerSettings.headerColor; } @@ -2922,7 +2961,7 @@ let containerId = colorChange.target.id.split("-settings")[0]; let container = containerDataMap.get(containerId); - container.containerSettings.dividerColor = colorChange.target.value; + container.containerSettings.dividerColor = colorChange.target.value; let divider = document.getElementById(containerId + "-divider"); // set multiple places for compatibility divider.style.color = container.containerSettings.dividerColor; @@ -2943,7 +2982,8 @@ document.getElementById(containerId + "-clock").style.marginBottom = "0px"; } } - // TEXT + + // GENERAL TEXT SETTINGS function changeContainerAlignment(alignmentChanged) { let containerId = alignmentChanged.target.id.split("-settings")[0]; let container = containerDataMap.get(containerId); @@ -3019,6 +3059,47 @@ document.getElementById(containerId).style.boxShadow = shadow; } + // IMAGE INVERSION + function toggleMirrorX(checkboxChanged) { + let containerId = checkboxChanged.target.id.split("-settings")[0]; + let container = containerDataMap.get(containerId); + let invertX = checkboxChanged.target.checked; + + container.containerSettings.invertX = invertX; + + if (invertX && container.containerSettings.invertY) { + document.getElementById(containerId).classList.remove("invertedY"); + document.getElementById(containerId).classList.add("doubleInverted"); + } + else if (!invertX && document.getElementById(containerId).classList.contains("doubleInverted")) { + document.getElementById(containerId).classList.remove("doubleInverted"); + document.getElementById(containerId).classList.add("invertedY"); + } + else { + document.getElementById(containerId).classList.toggle("invertedX"); + } + } + + function toggleMirrorY(checkboxChanged) { + let containerId = checkboxChanged.target.id.split("-settings")[0]; + let container = containerDataMap.get(containerId); + let invertY = checkboxChanged.target.checked; + + container.containerSettings.invertY = invertY; + + if (invertY && container.containerSettings.invertX) { + document.getElementById(containerId).classList.remove("invertedX"); + document.getElementById(containerId).classList.add("doubleInverted"); + } + else if (!invertY && document.getElementById(containerId).classList.contains("doubleInverted")) { + document.getElementById(containerId).classList.remove("doubleInverted"); + document.getElementById(containerId).classList.add("invertedX"); + } + else { + document.getElementById(containerId).classList.toggle("invertedY"); + } + } + /************************************ * RESET / IMPORT & EXPORT HANDLERS * ************************************/ |