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

fixed bug where all new containers would share settings until page

Browse Source 
refresh. fixed syntax issues + added page title
This commit is contained in:
Simon
2025-07-01 21:16:06 -04:00
parent b3380dac7f
commit 8241429a7f
1 changed files with 77 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+75 -72
View File
@@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>startpage</title>
<style> <style>
/* /*
* GENERAL STATE HELPERS * GENERAL STATE HELPERS
@@ -114,7 +115,7 @@
.expandableMenuToggle { .expandableMenuToggle {
cursor: pointer; cursor: pointer;
padding 18px; padding: 18px;
width: 100%; width: 100%;
} }
.expandableMenuToggle.active, .expandableMenuToggle:hover { .expandableMenuToggle.active, .expandableMenuToggle:hover {
@@ -134,17 +135,6 @@
font-style: italic; font-style: italic;
} }
#instructionsTab {
}
#bookmarkForm {
}
#linkCustomizationForm {
}
#containerCustomizationForm {
}
#resetForm {
}
#editToggle { #editToggle {
z-index: 999; z-index: 999;
position: fixed; position: fixed;
@@ -323,10 +313,7 @@
</form> </form>
<form id="ioForm" onsubmit="return false"> <form id="ioForm" onsubmit="return false">
<label <label>use the button below to copy your current configuration to your clipboard<br />(you should save this somewhere)</label>
>use the button below to copy your current configuration to your
clipboard<br/ >(you should save this somewhere)</label
>
<button onclick="exportData()">export data</button><br /> <button onclick="exportData()">export data</button><br />
<input id="importDataInput" /> <input id="importDataInput" />
@@ -401,24 +388,25 @@
borderWidth: "5", borderWidth: "5",
borderRadius: "0", borderRadius: "0",
borderColor: "grey", borderColor: "grey",
sectionFontName: "", fontName: "",
sectionFontCode: "", fontCode: "",
sectionColor: "", sectionColor: "",
sectionSize: "16", sectionSize: "16",
sectionItalic: false, sectionItalic: false,
sectionBold: false, sectionBold: false,
linkColor: "", linkColor: "",
linkSize: "16", linkSize: "16",
enableDate: true,
enableClock: true,
/* /*
* *
* IMPLEMENT CLOCK TOGGLE LOGIC * IMPLEMENT CLOCK TOGGLE LOGIC
*/ */
enableDate: true,
enableClock: true,
clockColor: "", clockColor: "",
clockSize: "16", clockSize: "16",
clockBold: false, clockBold: false,
clockItalic: false, clockItalic: false,
disableDivider: false, disableDivider: false,
dividerColor: "", dividerColor: "",
centerAlign: false, centerAlign: false,
@@ -434,8 +422,8 @@
borderWidth: "0", borderWidth: "0",
borderRadius: "0", borderRadius: "0",
borderColor: "grey", borderColor: "grey",
sectionFontName: "", fontName: "",
sectionFontCode: "", : "",
sectionColor: "", sectionColor: "",
sectionSize: "16", sectionSize: "16",
sectionItalic: false, sectionItalic: false,
@@ -604,8 +592,8 @@
* creates a default image container (NEED TO IMPLEMENT DEFAULT IMAGE CONTAINER SETTINGS) * creates a default image container (NEED TO IMPLEMENT DEFAULT IMAGE CONTAINER SETTINGS)
*/ */
initializeNewImageContainer() { initializeNewImageContainer() {
// use default settings // deep copy default settings
this.containerSettings = defaultImageContainerSettings; this.containerSettings = JSON.parse(JSON.stringify(defaultImageContainerSettings));
// insert default container HTML // insert default container HTML
document.body.insertAdjacentHTML( document.body.insertAdjacentHTML(
@@ -636,8 +624,8 @@
* creates a default text container * creates a default text container
*/ */
initializeNewTextContainer() { initializeNewTextContainer() {
// use default settings // deep copy default settings
this.containerSettings = defaultTextContainerSettings; this.containerSettings = JSON.parse(JSON.stringify(defaultTextContainerSettings));
// set no sections // set no sections
this.sections = {}; this.sections = {};
@@ -698,9 +686,9 @@
*/ */
/** /**
* TODO: * TODO:
* --> remove "images" from wallpaper tab * -> remove "images" from wallpaper tab
* ----> furthermore, condense all global settings into one tab * -> furthermore, condense all global settings into one tab
* ----- including wallpaper, audio, cursor * - including wallpaper, audio, cursor
* add toggles for each settings menu * add toggles for each settings menu
* rename settings form div ids (see "note to self") * rename settings form div ids (see "note to self")
*/ */
@@ -762,10 +750,10 @@
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.id}: date / clock settings</p> <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.id}: date / clock settings</p>
<div class="expandableMenu"> <div class="expandableMenu">
<label>show date?</label> <label>show date?</label>
<input id=${this.id + "-settings-date-toggle"} /> <input id=${this.id + "-settings-date-toggle"} type="checkbox" />
<label>show clock?</label> <label>show clock?</label>
<input id=${this.id + "-settings-clock-toggle"} /> <input id=${this.id + "-settings-clock-toggle"} type="checkbox" />
<label>set date + time color: </label> <label>set date + time color: </label>
<input id=${this.id + "-settings-clock-color"} type="color" /> <input id=${this.id + "-settings-clock-color"} type="color" />
@@ -856,7 +844,7 @@
document.getElementById(this.id).style.left = this.x; document.getElementById(this.id).style.left = this.x;
/** SIZE */ /** SIZE */
const containerSettings = this.containerSettings; let containerSettings = this.containerSettings;
document.getElementById(this.id).style.width = this.width + "px"; document.getElementById(this.id).style.width = this.width + "px";
// this.width - 2 * parseInt(containerSettings.borderWidth); // this.width - 2 * parseInt(containerSettings.borderWidth);
document.getElementById(this.id).style.height = this.height + "px"; document.getElementById(this.id).style.height = this.height + "px";
@@ -916,21 +904,21 @@
/** otherwise, this is a text-based container and there are more options to set: */ /** otherwise, this is a text-based container and there are more options to set: */
/** FONT */ /** FONT */
if (containerSettings.sectionFontName == "") { if (containerSettings.fontName == "") {
document.getElementById(this.id + "-settings-font-name").innerHTML = document.getElementById(this.id + "-settings-font-name").innerHTML =
"system default"; "system default";
} else { } else {
document.getElementById(this.id + "-settings-font-name").innerHTML = document.getElementById(this.id + "-settings-font-name").innerHTML =
containerSettings.sectionFontName; containerSettings.fontName;
} }
if (containerSettings.sectionFontCode != "") { if (containerSettings.fontCode != "") {
document.head.insertAdjacentHTML( document.head.insertAdjacentHTML(
"beforeend", "beforeend",
containerSettings.sectionFontCode containerSettings.fontCode
); );
// fill in settings ui // fill in settings ui
document.getElementById(this.id).style.fontFamily = document.getElementById(this.id).style.fontFamily =
containerSettings.sectionFontName; containerSettings.fontName;
} }
/** TEXT ALIGNMENT */ /** TEXT ALIGNMENT */
@@ -951,7 +939,7 @@
// (FONT NEEDS WORK) // (FONT NEEDS WORK)
// document.getElementById(this.id + "-settings-section-font-name").value = // document.getElementById(this.id + "-settings-section-font-name").value =
// containerSettings.sectionFontName; // containerSettings.fontName;
document.getElementById(this.id + "-settings-section-color").value = document.getElementById(this.id + "-settings-section-color").value =
containerSettings.sectionColor; containerSettings.sectionColor;
document.getElementById(this.id + "-settings-section-size").value = document.getElementById(this.id + "-settings-section-size").value =
@@ -987,8 +975,10 @@
/** CLOCK */ /** CLOCK */
// TODO EITHER SHOW THE CLOCK OR DONT // TODO EITHER SHOW THE CLOCK OR DONT
if (containerSettings.enableClock) { if (containerSettings.enableClock) {
// get container's clock element, set display to none
} }
if (containerSettings.enableDate) { if (containerSettings.enableDate) {
// get container's date element, set display to none
} }
document.getElementById(this.id + "-clock").style.color = document.getElementById(this.id + "-clock").style.color =
containerSettings.clockColor; containerSettings.clockColor;
@@ -1247,7 +1237,7 @@
// ensure smooth ux when rerendering // ensure smooth ux when rerendering
if (containerSettings.disableDivider) { if (containerSettings.disableDivider) {
document.getElementById("clock").style.marginBottom = "18px"; document.getElementById(this.id + "-clock").style.marginBottom = "18px";
} }
} }
} }
@@ -1479,6 +1469,7 @@
let valueArray = []; let valueArray = [];
containerDataMap.values().forEach((value) => { containerDataMap.values().forEach((value) => {
valueArray.push(value); valueArray.push(value);
console.log(value);
}); });
localStorage.setItem("containerMapValues", JSON.stringify(valueArray)); localStorage.setItem("containerMapValues", JSON.stringify(valueArray));
@@ -2075,9 +2066,11 @@
let containerId = colorChange.currentTarget.id.split("-")[0]; let containerId = colorChange.currentTarget.id.split("-")[0];
let container = containerDataMap.get(containerId); let container = containerDataMap.get(containerId);
console.log(container);
container.containerSettings.backgroundRgba = hexToRgba( container.containerSettings.backgroundRgba = hexToRgba(
document.getElementById(container.id + "-settings-bg-color").value, document.getElementById(containerId + "-settings-bg-color").value,
document.getElementById(container.id + "-settings-bg-alpha").value document.getElementById(containerId + "-settings-bg-alpha").value
); );
document.getElementById(containerId).style.backgroundColor = document.getElementById(containerId).style.backgroundColor =
@@ -2210,54 +2203,64 @@
// DIVIDER // DIVIDER
function changeDividerColor(colorChange) { function changeDividerColor(colorChange) {
containerSettings.dividerColor = colorChange.target.value; let containerId = colorChange.target.id.split("-")[0];
let divider = document.getElementById("containerDivider"); let container = containerDataMap.get(containerId);
// set multiple places for compatibility
divider.style.color = containerSettings.dividerColor;
divider.style.backgroundColor = containerSettings.dividerColor;
divider.style.borderColor = containerSettings.dividerColor;
}
function disableDivider(checkbox) {
containerSettings.disableDivider = this.checked;
document.getElementById("containerDivider").hidden = this.checked;
if (this.checked && links.length > 0) { container.containerSettings.dividerColor = colorChange.target.value;
document.getElementById("clock").style.marginBottom = "18px"; let divider = document.getElementById(containerId + "-divider");
// set multiple places for compatibility
divider.style.color = container.containerSettings.dividerColor;
divider.style.backgroundColor = container.containerSettings.dividerColor;
divider.style.borderColor = container.containerSettings.dividerColor;
}
function disableDivider(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;
if (checkboxChanged.target.checked && Object.keys(container.sections).length > 0) {
document.getElementById(containerId + "-clock").style.marginBottom = "18px";
} else { } else {
document.getElementById("clock").style.marginBottom = "0px"; document.getElementById(containerId + "-clock").style.marginBottom = "0px";
} }
} }
// TEXT // TEXT
function changeContainerAlignment() { function changeContainerAlignment(alignmentChanged) {
if (document.getElementById("setLeftAlign").checked) { let containerId = alignmentChanged.target.id.split("-")[0];
containerSettings.centerAlign = false; let container = containerDataMap.get(containerId);
document.getElementById("mainContainer").style.textAlign = "left";
} else if (document.getElementById("setCenterAlign").checked) { if (document.getElementById(containerId + "-settings-left-align").checked) {
containerSettings.centerAlign = true; container.containerSettings.centerAlign = false;
document.getElementById("mainContainer").style.textAlign = "center"; document.getElementById(containerId).style.textAlign = "left";
} else if (document.getElementById(containerId + "-settings-center-align").checked) {
container.containerSettings.centerAlign = true;
document.getElementById(containerId).style.textAlign = "center";
} }
} }
function changeFont() { function changeFont(buttonClicked) {
let input = document.getElementById("fontInput").value; let containerId = buttonClicked.target.id.split("-")[0];
let container = containerDataMap.get(containerId);
let input = document.getElementById(containerId + "-settings-font-input").value;
if (input == "") { if (input == "") {
return; return;
} }
// wipe current font tags
let oldTags = document.getElementsByTagName("link");
for (let i = 0; i < oldTags.length; i++) {
oldTags[0].remove();
}
// parse input // parse input
fontCode = input; fontCode = input;
fontName = fontCode.slice(fontCode.indexOf("family=") + 7); fontName = fontCode.slice(fontCode.indexOf("family=") + 7);
if (fontName.indexOf("&") != -1) {
fontName = fontName.slice(0, fontName.indexOf("&") + 1); fontName = fontName.slice(0, fontName.indexOf("&") + 1);
fontName = fontName.slice(0, fontName.indexOf(":")).replace("+", " "); }
fontName = fontName.slice(0, fontName.indexOf(":")).replaceAll("+", " ");
// set new font // set new font
document.head.insertAdjacentHTML("beforeend", fontCode); document.head.insertAdjacentHTML("beforeend", fontCode);
document.body.style.fontFamily = fontName; document.getElementById(containerId).style.fontFamily = fontName;
document.getElementById("currentFont").innerHTML = fontName; document.getElementById(containerId + "-settings-font-name").innerHTML = fontName;
container.containerSettings.fontCode = fontCode;
container.containerSettings.fontName = fontName;
} }
// SHADOW // SHADOW