-
+ ${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}