From 22d2f704a6cbad66c53e88086193bd5c5cb9a840 Mon Sep 17 00:00:00 2001 From: Simon Date: Tue, 1 Jul 2025 22:29:41 -0400 Subject: [PATCH] got all container header options working per-container. also refactored how header is rendered / customized. just need to redo the gui for it --- startpage.html | 159 +++++++++++++++++++++++++++---------------------- 1 file changed, 89 insertions(+), 70 deletions(-) diff --git a/startpage.html b/startpage.html index 7af1a87..8421638 100644 --- a/startpage.html +++ b/startpage.html @@ -402,10 +402,10 @@ */ enableDate: true, enableClock: true, - clockColor: "", - clockSize: "16", - clockBold: false, - clockItalic: false, + headerColor: "", + headerSize: "16", + headerBold: false, + headerItalic: false, disableDivider: false, dividerColor: "", @@ -549,10 +549,10 @@ `
-
+

- +
@@ -570,11 +570,11 @@ second: "numeric", }); // set time immediately so it shows upon load - document.getElementById(this.id + "-time").innerText = + document.getElementById(this.id + "-clock").innerText = timeFormat.format(new Date()); // set time on interval to continue to update setInterval(() => { - document.getElementById(this.id + "-time").innerText = + document.getElementById(this.id + "-clock").innerText = timeFormat.format(new Date()); }, 1000); @@ -635,10 +635,10 @@ `
-
+

- +
@@ -656,11 +656,11 @@ second: "numeric", }); // set time immediately so it shows upon load - document.getElementById(this.id + "-time").innerText = + document.getElementById(this.id + "-clock").innerText = timeFormat.format(new Date()); // set time on interval to continue to update setInterval(() => { - document.getElementById(this.id + "-time").innerText = + document.getElementById(this.id + "-clock").innerText = timeFormat.format(new Date()); }, 1000); @@ -972,25 +972,22 @@ .slice(0, -1) .split(",")[3] * 100; - /** CLOCK */ + /** HEADER */ // TODO EITHER SHOW THE CLOCK OR DONT - if (containerSettings.enableClock) { - // get container's clock element, set display to none - } - if (containerSettings.enableDate) { - // get container's date element, set display to none - } - document.getElementById(this.id + "-clock").style.color = - containerSettings.clockColor; - document.getElementById(this.id + "-clock").style.fontSize = - containerSettings.clockSize + "px"; - if (containerSettings.clockBold) { - document.getElementById(this.id + "-clock").style.fontWeight = "bold"; - } - if (containerSettings.clockItalic) { - document.getElementById(this.id + "-clock").style.fontStyle = - "italic"; - } + document.getElementById(this.id + "-date").style.display = + containerSettings.enableDate ? "inline" : "none"; + document.getElementById(this.id + "-clock").style.display = + containerSettings.enableClock ? "inline" : "none"; + + document.getElementById(this.id + "-header").style.color = + containerSettings.headerColor; + document.getElementById(this.id + "-header").style.fontSize = + containerSettings.headerSize + "px"; + document.getElementById(this.id + "-header").style.fontWeight = + containerSettings.headerBold ? "bold" : "normal"; + document.getElementById(this.id + "-header").style.fontStyle = + containerSettings.headerItalic ? "italic" : "normal"; + // fill-in settings ui document.getElementById(this.id + "-settings-date-toggle").checked = containerSettings.enableDate; @@ -998,13 +995,13 @@ containerSettings.enableClock; document.getElementById(this.id + "-settings-clock-color").value = - containerSettings.clockColor; + containerSettings.headerColor; document.getElementById(this.id + "-settings-clock-size").value = - containerSettings.clockSize; + containerSettings.headerSize; document.getElementById(this.id + "-settings-clock-bold").checked = - containerSettings.clockBold; + containerSettings.headerBold; document.getElementById(this.id + "-settings-clock-italic").checked = - containerSettings.clockItalic; + containerSettings.headerItalic; /** DIVIDER */ let divider = document.getElementById(this.id + "-divider"); @@ -1012,7 +1009,7 @@ 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) { - document.getElementById(this.id + "-clock").style.marginBottom = + document.getElementById(this.id + "-header").style.marginBottom = "18px"; } } else { @@ -1106,22 +1103,24 @@ .getElementById(this.id + "-settings-link-size") .addEventListener("input", changeLinkSize, false); // clock setting listeners - - // TODO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! - // ADD CLOCK and DATE TOGGLE HERE - + 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", changeClockColor, false); + .addEventListener("input", changeHeaderColor, false); document .getElementById(this.id + "-settings-clock-size") - .addEventListener("input", changeClockSize, false); + .addEventListener("input", changeHeaderSize, false); document .getElementById(this.id + "-settings-clock-bold") - .addEventListener("change", toggleClockBold, false); + .addEventListener("change", toggleHeaderBold, false); document .getElementById(this.id + "-settings-clock-italic") - .addEventListener("change", toggleClockItalic, false); + .addEventListener("change", toggleHeaderItalic, false); // container divider setting listeners document .getElementById(this.id + "-settings-divider-toggle") @@ -1237,7 +1236,7 @@ // ensure smooth ux when rerendering if (containerSettings.disableDivider) { - document.getElementById(this.id + "-clock").style.marginBottom = "18px"; + document.getElementById(this.id + "-header").style.marginBottom = "18px"; } } } @@ -2128,7 +2127,7 @@ let containerId = checkboxChanged.target.id.split("-")[0]; let container = containerDataMap.get(containerId); - let sectionElements = document.getElementsByClassName(container.id + "-section"); + let sectionElements = document.getElementsByClassName(containerId + "-section"); for (let i = 0; i < sectionElements.length; i++) { sectionElements[i].style.fontWeight = checkboxChanged.target.checked ? "bold" : "normal"; } @@ -2138,7 +2137,7 @@ let containerId = checkboxChanged.target.id.split("-")[0]; let container = containerDataMap.get(containerId); - let sectionElements = document.getElementsByClassName(container.id + "-section"); + let sectionElements = document.getElementsByClassName(containerId + "-section"); for (let i = 0; i < sectionElements.length; i++) { sectionElements[i].style.fontStyle = checkboxChanged.target.checked ? "italic" : "normal"; } @@ -2171,34 +2170,54 @@ container.containerSettings.borderColor; } // CLOCK - function changeClockColor(colorChange) { - containerSettings.clockColor = colorChange.target.value; - document.getElementById("clock").style.color = - containerSettings.clockColor; + function toggleDate(checkboxChanged) { + let containerId = checkboxChanged.target.id.split("-")[0]; + let container = containerDataMap.get(containerId); + + container.containerSettings.enableDate = checkboxChanged.target.checked; + document.getElementById(containerId + "-date").style.display = + checkboxChanged.target.checked ? "inline" : "none"; } - function changeClockSize(sizeChange) { - containerSettings.clockSize = + function toggleClock(checkboxChanged) { + let containerId = checkboxChanged.target.id.split("-")[0]; + let container = containerDataMap.get(containerId); + + container.containerSettings.enableClock = checkboxChanged.target.checked; + document.getElementById(containerId + "-clock").style.display = + checkboxChanged.target.checked ? "inline" : "none"; + } + function changeHeaderColor(colorChange) { + let containerId = colorChange.target.id.split("-")[0]; + let container = containerDataMap.get(containerId); + + container.containerSettings.headerColor = colorChange.target.value; + document.getElementById(containerId + "-header").style.color = + container.containerSettings.headerColor; + } + function changeHeaderSize(sizeChange) { + let containerId = sizeChange.target.id.split("-")[0]; + let container = containerDataMap.get(containerId); + + container.containerSettings.headerSize = sizeChange.target.value == "" ? "0" : sizeChange.target.value; - document.getElementById("clock").style.fontSize = - containerSettings.clockSize + "px"; + document.getElementById(containerId + "-header").style.fontSize = + container.containerSettings.headerSize + "px"; } - function toggleClockBold(checkbox) { - containerSettings.clockBold = this.checked; - if (this.checked) { - document.getElementById("clock").style.fontWeight = "bold"; - } else { - document.getElementById("clock").style.fontWeight = "normal"; - } + function toggleHeaderBold(checkboxChanged) { + let containerId = checkboxChanged.target.id.split("-")[0]; + let container = containerDataMap.get(containerId); + + container.containerSettings.headerBold = checkboxChanged.target.checked; + document.getElementById(containerId + "-header").style.fontWeight = + checkboxChanged.target.checked ? "bold" : "normal"; } - function toggleClockBold(checkbox) { - containerSettings.clockBold = this.checked; - let weight = this.checked ? "bold" : "normal"; - document.getElementById("clock").style.fontWeight = weight; - } - function toggleClockItalic(checkbox) { - containerSettings.clockItalic = this.checked; - let italic = this.checked ? "italic" : "normal"; - document.getElementById("clock").style.fontStyle = italic; + function toggleHeaderItalic(checkboxChanged) { + let containerId = checkboxChanged.target.id.split("-")[0]; + let container = containerDataMap.get(containerId); + + container.containerSettings.headerItalic = checkboxChanged.target.checked; + document.getElementById(containerId + "-header").style.fontStyle = + checkboxChanged.target.checked ? "italic" : "normal"; } // DIVIDER