From a9a5f37113fc4bc2d787129baf226403715bf26c Mon Sep 17 00:00:00 2001 From: Simon Date: Sun, 24 Aug 2025 00:29:58 -0400 Subject: [PATCH] can bold/italic date and time separately now --- startpage.html | 131 ++++++++++++++++++++++++++----------------------- 1 file changed, 69 insertions(+), 62 deletions(-) diff --git a/startpage.html b/startpage.html index f30a70c..c0c4180 100644 --- a/startpage.html +++ b/startpage.html @@ -378,7 +378,7 @@ customize the layer's section text to your liking and place wherever you want.

- vertical / horizontal lines:
+ straight lines:
create a bookmark layer and set the border to your desired line width. remove the clock, date, and divider so that it's just an empty container, then shrink the container all the way left or up so that it becomes just a line! @@ -1074,28 +1074,39 @@

date + time options

-
- - + +
+ +
- +
- - + +

- - + +
-
+
+ + +
- - + + +
+ +
+ +
+ +
@@ -1293,10 +1304,14 @@ settings.headerColor; document.getElementById(this.id + "-settings-clock-size").value = settings.headerSize; + document.getElementById(this.id + "-settings-date-bold").checked = + settings.dateBold; document.getElementById(this.id + "-settings-clock-bold").checked = - settings.headerBold; + settings.clockBold; + document.getElementById(this.id + "-settings-date-italic").checked = + settings.dateItalic; document.getElementById(this.id + "-settings-clock-italic").checked = - settings.headerItalic; + settings.clockItalic; // DIVIDER document.getElementById(this.id + "-settings-divider-toggle").checked = settings.enableDivider; @@ -1679,12 +1694,18 @@ document .getElementById(this.id + "-settings-clock-size") .addEventListener("input", changeHeaderSize, false); + document + .getElementById(this.id + "-settings-date-bold") + .addEventListener("change", toggleDateBold, false); document .getElementById(this.id + "-settings-clock-bold") - .addEventListener("change", toggleHeaderBold, false); + .addEventListener("change", toggleClockBold, false); + document + .getElementById(this.id + "-settings-date-italic") + .addEventListener("change", toggleDateItalic, false); document .getElementById(this.id + "-settings-clock-italic") - .addEventListener("change", toggleHeaderItalic, false); + .addEventListener("change", toggleClockItalic, false); // container divider setting listeners document .getElementById(this.id + "-settings-divider-toggle") @@ -1698,9 +1719,6 @@ * applies saved cosmetic customizations to container upon init (both text+media containers) */ applySettings() { - // make sure old themes will still load - this.ensureBackwardsCompatibility(); - /** apply customizations relevant to both image and text containers */ /** POSITION */ document.getElementById(this.id).style.top = this.y; @@ -1801,15 +1819,19 @@ settings.enableDate ? "inline" : "none"; document.getElementById(this.id + "-clock").style.display = settings.enableClock ? "inline" : "none"; - // apply header customizations + // apply text customizations document.getElementById(this.id + "-header").style.color = settings.headerColor; document.getElementById(this.id + "-header").style.fontSize = settings.headerSize + "px"; - document.getElementById(this.id + "-header").style.fontWeight = - settings.headerBold ? "bold" : "normal"; - document.getElementById(this.id + "-header").style.fontStyle = - settings.headerItalic ? "italic" : "normal"; + document.getElementById(this.id + "-date").style.fontWeight = + settings.dateBold ? "bold" : "normal"; + document.getElementById(this.id + "-clock").style.fontWeight = + settings.clockBold ? "bold" : "normal"; + document.getElementById(this.id + "-date").style.fontStyle = + settings.dateItalic ? "italic" : "normal"; + document.getElementById(this.id + "-clock").style.fontStyle = + settings.clockItalic ? "italic" : "normal"; /** DIVIDER */ let divider = document.getElementById(this.id + "-divider"); @@ -1936,36 +1958,6 @@ sectionElements[i].style.fontStyle = settings.sectionItalic ? "italic" : "normal"; } } - - /** - * if a container is imported and missing a setting, add it and set to default - */ - ensureBackwardsCompatibility() { - let currentSettings; - if (this.mediaUrl != undefined) { - currentSettings = Object.keys(defaultImageContainerSettings); - } - else { - currentSettings = Object.keys(defaultTextContainerSettings); - } - - for (let i = 0; i < currentSettings.length; i++) { - if (this.settings[currentSettings[i]] == undefined) { - - console.log("found missing option: "); - console.log(currentSettings[i]); - - if (this.mediaUrl != undefined) { - this.settings[currentSettings[i]] = - defaultImageContainerSettings[currentSettings[i]]; - } - else { - this.settings[currentSettings[i]] = - defaultTextContainerSettings[currentSettings[i]]; - } - } - } - } } @@ -2067,8 +2059,7 @@ containerMapValues[i].y, containerMapValues[i].height, containerMapValues[i].width, - containerMapValues[i].imageUrl ? // ensure backwards compatibility after field name changed - containerMapValues[i].imageUrl : containerMapValues[i].mediaUrl, + containerMapValues[i].mediaUrl, containerMapValues[i].settings, containerMapValues[i].sections, containerMapValues[i].youtubeId, @@ -3202,20 +3193,36 @@ document.getElementById(containerId + "-header").style.fontSize = container.settings.headerSize + "px"; } - function toggleHeaderBold(checkboxChanged) { + function toggleDateBold(checkboxChanged) { let containerId = checkboxChanged.target.id.split("-settings")[0]; let container = containerDataMap.get(containerId); - container.settings.headerBold = checkboxChanged.target.checked; - document.getElementById(containerId + "-header").style.fontWeight = + container.settings.dateBold = checkboxChanged.target.checked; + document.getElementById(containerId + "-date").style.fontWeight = checkboxChanged.target.checked ? "bold" : "normal"; } - function toggleHeaderItalic(checkboxChanged) { + function toggleDateItalic(checkboxChanged) { let containerId = checkboxChanged.target.id.split("-settings")[0]; let container = containerDataMap.get(containerId); - container.settings.headerItalic = checkboxChanged.target.checked; - document.getElementById(containerId + "-header").style.fontStyle = + container.settings.dateItalic = checkboxChanged.target.checked; + document.getElementById(containerId + "-date").style.fontStyle = + checkboxChanged.target.checked ? "italic" : "normal"; + } + function toggleClockBold(checkboxChanged) { + let containerId = checkboxChanged.target.id.split("-settings")[0]; + let container = containerDataMap.get(containerId); + + container.settings.clockBold = checkboxChanged.target.checked; + document.getElementById(containerId + "-clock").style.fontWeight = + checkboxChanged.target.checked ? "bold" : "normal"; + } + function toggleClockItalic(checkboxChanged) { + let containerId = checkboxChanged.target.id.split("-settings")[0]; + let container = containerDataMap.get(containerId); + + container.settings.clockItalic = checkboxChanged.target.checked; + document.getElementById(containerId + "-clock").style.fontStyle = checkboxChanged.target.checked ? "italic" : "normal"; }