simon/diy-startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

got all container header options working per-container. also refactored

Browse Source 
how header is rendered / customized. just need to redo the gui for it
This commit is contained in:
Simon
2025-07-01 22:29:41 -04:00
parent 8241429a7f
commit 22d2f704a6
1 changed files with 89 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+89 -70
View File
@@ -402,10 +402,10 @@
*/ */
enableDate: true, enableDate: true,
enableClock: true, enableClock: true,
clockColor: "", headerColor: "",
clockSize: "16", headerSize: "16",
clockBold: false, headerBold: false,
clockItalic: false, headerItalic: false,
disableDivider: false, disableDivider: false,
dividerColor: "", dividerColor: "",
@@ -549,10 +549,10 @@
` `
<div class="movable container" id=${this.id}> <div class="movable container" id=${this.id}>
<div style="margin: auto"> <div style="margin: auto">
<div id=${this.id + "-clock"}> <div id=${this.id + "-header"}>
<span id=${this.id + "-date"}></span> <span id=${this.id + "-date"}></span>
<br /> <br />
<span id=${this.id + "-time"}></span> <span id=${this.id + "-clock"}></span>
</div> </div>
<hr id=${this.id + "-divider"} /> <hr id=${this.id + "-divider"} />
<div id=${this.id + "-sections"} ></div> <div id=${this.id + "-sections"} ></div>
@@ -570,11 +570,11 @@
second: "numeric", second: "numeric",
}); });
// set time immediately so it shows upon load // set time immediately so it shows upon load
document.getElementById(this.id + "-time").innerText = document.getElementById(this.id + "-clock").innerText =
timeFormat.format(new Date()); timeFormat.format(new Date());
// set time on interval to continue to update // set time on interval to continue to update
setInterval(() => { setInterval(() => {
document.getElementById(this.id + "-time").innerText = document.getElementById(this.id + "-clock").innerText =
timeFormat.format(new Date()); timeFormat.format(new Date());
}, 1000); }, 1000);
@@ -635,10 +635,10 @@
` `
<div class="movable container" id=${this.id}> <div class="movable container" id=${this.id}>
<div style="margin: auto"> <div style="margin: auto">
<div id=${this.id + "-clock"}> <div id=${this.id + "-header"}>
<span id=${this.id + "-date"}></span> <span id=${this.id + "-date"}></span>
<br /> <br />
<span id=${this.id + "-time"}></span> <span id=${this.id + "-clock"}></span>
</div> </div>
<hr id=${this.id + "-divider"} /> <hr id=${this.id + "-divider"} />
<div id=${this.id + "-sections"} ></div> <div id=${this.id + "-sections"} ></div>
@@ -656,11 +656,11 @@
second: "numeric", second: "numeric",
}); });
// set time immediately so it shows upon load // set time immediately so it shows upon load
document.getElementById(this.id + "-time").innerText = document.getElementById(this.id + "-clock").innerText =
timeFormat.format(new Date()); timeFormat.format(new Date());
// set time on interval to continue to update // set time on interval to continue to update
setInterval(() => { setInterval(() => {
document.getElementById(this.id + "-time").innerText = document.getElementById(this.id + "-clock").innerText =
timeFormat.format(new Date()); timeFormat.format(new Date());
}, 1000); }, 1000);
@@ -972,25 +972,22 @@
.slice(0, -1) .slice(0, -1)
.split(",")[3] * 100; .split(",")[3] * 100;
/** CLOCK */ /** HEADER */
// TODO EITHER SHOW THE CLOCK OR DONT // TODO EITHER SHOW THE CLOCK OR DONT
if (containerSettings.enableClock) { document.getElementById(this.id + "-date").style.display =
// get container's clock element, set display to none containerSettings.enableDate ? "inline" : "none";
} document.getElementById(this.id + "-clock").style.display =
if (containerSettings.enableDate) { containerSettings.enableClock ? "inline" : "none";
// get container's date element, set display to none
} document.getElementById(this.id + "-header").style.color =
document.getElementById(this.id + "-clock").style.color = containerSettings.headerColor;
containerSettings.clockColor; document.getElementById(this.id + "-header").style.fontSize =
document.getElementById(this.id + "-clock").style.fontSize = containerSettings.headerSize + "px";
containerSettings.clockSize + "px"; document.getElementById(this.id + "-header").style.fontWeight =
if (containerSettings.clockBold) { containerSettings.headerBold ? "bold" : "normal";
document.getElementById(this.id + "-clock").style.fontWeight = "bold"; document.getElementById(this.id + "-header").style.fontStyle =
} containerSettings.headerItalic ? "italic" : "normal";
if (containerSettings.clockItalic) {
document.getElementById(this.id + "-clock").style.fontStyle =
"italic";
}
// fill-in settings ui // fill-in settings ui
document.getElementById(this.id + "-settings-date-toggle").checked = document.getElementById(this.id + "-settings-date-toggle").checked =
containerSettings.enableDate; containerSettings.enableDate;
@@ -998,13 +995,13 @@
containerSettings.enableClock; containerSettings.enableClock;
document.getElementById(this.id + "-settings-clock-color").value = document.getElementById(this.id + "-settings-clock-color").value =
containerSettings.clockColor; containerSettings.headerColor;
document.getElementById(this.id + "-settings-clock-size").value = document.getElementById(this.id + "-settings-clock-size").value =
containerSettings.clockSize; containerSettings.headerSize;
document.getElementById(this.id + "-settings-clock-bold").checked = document.getElementById(this.id + "-settings-clock-bold").checked =
containerSettings.clockBold; containerSettings.headerBold;
document.getElementById(this.id + "-settings-clock-italic").checked = document.getElementById(this.id + "-settings-clock-italic").checked =
containerSettings.clockItalic; containerSettings.headerItalic;
/** DIVIDER */ /** DIVIDER */
let divider = document.getElementById(this.id + "-divider"); let divider = document.getElementById(this.id + "-divider");
@@ -1012,7 +1009,7 @@
document.getElementById(this.id + "-divider").hidden = true; document.getElementById(this.id + "-divider").hidden = true;
// if there are links in this container, add room under the divider // if there are links in this container, add room under the divider
if (Object.keys(this.sections).length > 0) { if (Object.keys(this.sections).length > 0) {
document.getElementById(this.id + "-clock").style.marginBottom = document.getElementById(this.id + "-header").style.marginBottom =
"18px"; "18px";
} }
} else { } else {
@@ -1106,22 +1103,24 @@
.getElementById(this.id + "-settings-link-size") .getElementById(this.id + "-settings-link-size")
.addEventListener("input", changeLinkSize, false); .addEventListener("input", changeLinkSize, false);
// clock setting listeners // clock setting listeners
document
// TODO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! .getElementById(this.id + "-settings-date-toggle")
// ADD CLOCK and DATE TOGGLE HERE .addEventListener("input", toggleDate, false);
document
.getElementById(this.id + "-settings-clock-toggle")
.addEventListener("input", toggleClock, false);
document document
.getElementById(this.id + "-settings-clock-color") .getElementById(this.id + "-settings-clock-color")
.addEventListener("input", changeClockColor, false); .addEventListener("input", changeHeaderColor, false);
document document
.getElementById(this.id + "-settings-clock-size") .getElementById(this.id + "-settings-clock-size")
.addEventListener("input", changeClockSize, false); .addEventListener("input", changeHeaderSize, false);
document document
.getElementById(this.id + "-settings-clock-bold") .getElementById(this.id + "-settings-clock-bold")
.addEventListener("change", toggleClockBold, false); .addEventListener("change", toggleHeaderBold, false);
document document
.getElementById(this.id + "-settings-clock-italic") .getElementById(this.id + "-settings-clock-italic")
.addEventListener("change", toggleClockItalic, false); .addEventListener("change", toggleHeaderItalic, false);
// container divider setting listeners // container divider setting listeners
document document
.getElementById(this.id + "-settings-divider-toggle") .getElementById(this.id + "-settings-divider-toggle")
@@ -1237,7 +1236,7 @@
// ensure smooth ux when rerendering // ensure smooth ux when rerendering
if (containerSettings.disableDivider) { 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 containerId = checkboxChanged.target.id.split("-")[0];
let container = containerDataMap.get(containerId); 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++) { for (let i = 0; i < sectionElements.length; i++) {
sectionElements[i].style.fontWeight = checkboxChanged.target.checked ? "bold" : "normal"; sectionElements[i].style.fontWeight = checkboxChanged.target.checked ? "bold" : "normal";
} }
@@ -2138,7 +2137,7 @@
let containerId = checkboxChanged.target.id.split("-")[0]; let containerId = checkboxChanged.target.id.split("-")[0];
let container = containerDataMap.get(containerId); 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++) { for (let i = 0; i < sectionElements.length; i++) {
sectionElements[i].style.fontStyle = checkboxChanged.target.checked ? "italic" : "normal"; sectionElements[i].style.fontStyle = checkboxChanged.target.checked ? "italic" : "normal";
} }
@@ -2171,34 +2170,54 @@
container.containerSettings.borderColor; container.containerSettings.borderColor;
} }
// CLOCK // CLOCK
function changeClockColor(colorChange) { function toggleDate(checkboxChanged) {
containerSettings.clockColor = colorChange.target.value; let containerId = checkboxChanged.target.id.split("-")[0];
document.getElementById("clock").style.color = let container = containerDataMap.get(containerId);
containerSettings.clockColor;
container.containerSettings.enableDate = checkboxChanged.target.checked;
document.getElementById(containerId + "-date").style.display =
checkboxChanged.target.checked ? "inline" : "none";
} }
function changeClockSize(sizeChange) { function toggleClock(checkboxChanged) {
containerSettings.clockSize = 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; sizeChange.target.value == "" ? "0" : sizeChange.target.value;
document.getElementById("clock").style.fontSize = document.getElementById(containerId + "-header").style.fontSize =
containerSettings.clockSize + "px"; container.containerSettings.headerSize + "px";
} }
function toggleClockBold(checkbox) { function toggleHeaderBold(checkboxChanged) {
containerSettings.clockBold = this.checked; let containerId = checkboxChanged.target.id.split("-")[0];
if (this.checked) { let container = containerDataMap.get(containerId);
document.getElementById("clock").style.fontWeight = "bold";
} else { container.containerSettings.headerBold = checkboxChanged.target.checked;
document.getElementById("clock").style.fontWeight = "normal"; document.getElementById(containerId + "-header").style.fontWeight =
} checkboxChanged.target.checked ? "bold" : "normal";
} }
function toggleClockBold(checkbox) { function toggleHeaderItalic(checkboxChanged) {
containerSettings.clockBold = this.checked; let containerId = checkboxChanged.target.id.split("-")[0];
let weight = this.checked ? "bold" : "normal"; let container = containerDataMap.get(containerId);
document.getElementById("clock").style.fontWeight = weight;
} container.containerSettings.headerItalic = checkboxChanged.target.checked;
function toggleClockItalic(checkbox) { document.getElementById(containerId + "-header").style.fontStyle =
containerSettings.clockItalic = this.checked; checkboxChanged.target.checked ? "italic" : "normal";
let italic = this.checked ? "italic" : "normal";
document.getElementById("clock").style.fontStyle = italic;
} }
// DIVIDER // DIVIDER