diff --git a/startpage.html b/startpage.html index b84d335..e49d3bb 100644 --- a/startpage.html +++ b/startpage.html @@ -634,15 +634,15 @@ "beforeend", `
-
-
- -
- +
+
+ +
+ +
+
+
-
-
-
` ); @@ -747,24 +747,28 @@

+ ${this.id}: customize layer

-

+ ${this.id}: date / clock settings

+

+ ${this.id}: header settings

+
+

- + +

- + +
- + - +
@@ -933,13 +937,22 @@ document.getElementById(this.id + "-settings-center-align").checked = containerSettings.centerAlign; - /** SECTION CUSTOMIZATION */ - // (weight, italic, colors, etc. are all set upon render in loadBookmarks()) + /** 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"; + } // fill-in settings ui - - // (FONT NEEDS WORK) - // document.getElementById(this.id + "-settings-section-font-name").value = - // containerSettings.fontName; document.getElementById(this.id + "-settings-section-color").value = containerSettings.sectionColor; document.getElementById(this.id + "-settings-section-size").value = @@ -973,12 +986,12 @@ .split(",")[3] * 100; /** HEADER */ - // TODO EITHER SHOW THE CLOCK OR DONT + // show header elements document.getElementById(this.id + "-date").style.display = containerSettings.enableDate ? "inline" : "none"; document.getElementById(this.id + "-clock").style.display = containerSettings.enableClock ? "inline" : "none"; - + // apply header customizations document.getElementById(this.id + "-header").style.color = containerSettings.headerColor; document.getElementById(this.id + "-header").style.fontSize = @@ -987,13 +1000,11 @@ 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; document.getElementById(this.id + "-settings-clock-toggle").checked = containerSettings.enableClock; - document.getElementById(this.id + "-settings-clock-color").value = containerSettings.headerColor; document.getElementById(this.id + "-settings-clock-size").value = @@ -1161,8 +1172,6 @@ let sectionData = Object.values(this.sections); // render the sections - let weight = containerSettings.sectionBold ? "bold" : "normal"; - let italic = containerSettings.sectionItalic ? "italic" : "normal"; for (let i = 0; i < sectionData.length; i++) { linkContainer.insertAdjacentHTML( "beforeend", @@ -1175,13 +1184,7 @@ > [X] - + ${sectionData[i].label} @@ -1223,8 +1226,6 @@ ${sectionData[s].links[l].label}