+
+
+ ${this.name}: header options
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${this.name}: text options
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${this.name}: color + shape options
-
+
@@ -810,13 +889,6 @@
-
-
-
-
-
-
-
shadow settings:
@@ -835,13 +907,14 @@
`
);
+ this.loadBookmarkListings();
}
/*
* applies saved cosmetic customizations to container
*/
- applyContainerSettings() {
+ applySettings() {
/** set options relevant to both image and text containers */
/** POSITION */
document.getElementById(this.id).style.top = this.y;
@@ -1016,7 +1089,7 @@
/** DIVIDER */
let divider = document.getElementById(this.id + "-divider");
- if (containerSettings.disableDivider) {
+ if (!containerSettings.enableDivider) {
document.getElementById(this.id + "-divider").hidden = true;
// if there are links in this container, add room under the divider
if (Object.keys(this.sections).length > 0) {
@@ -1030,7 +1103,7 @@
}
// fill-in settings ui
document.getElementById(this.id + "-settings-divider-toggle").checked =
- containerSettings.disableDivider;
+ containerSettings.enableDivider;
document.getElementById(this.id + "-settings-divider-color").value =
containerSettings.dividerColor;
}
@@ -1135,7 +1208,7 @@
// container divider setting listeners
document
.getElementById(this.id + "-settings-divider-toggle")
- .addEventListener("change", disableDivider, false);
+ .addEventListener("change", toggleDivider, false);
document
.getElementById(this.id + "-settings-divider-color")
.addEventListener("input", changeDividerColor, false);
@@ -1158,48 +1231,45 @@
}
/**
- * [re]loads saved bookmark sections + links for container
+ * [re]renders saved bookmark sections + links for container
*/
loadBookmarks() {
- let containerSettings = this.containerSettings;
- let linkContainer = document.getElementById(this.id + "-sections");
- linkContainer.innerHTML = "";
-
if (Object.keys(this.sections).length == 0) {
return;
}
let sectionData = Object.values(this.sections);
+ let containerSettings = this.containerSettings;
- // render the sections
+ let containerBookmarks = document.getElementById(this.id + "-sections");
+
+ containerBookmarks.innerHTML = "";
+
+ /* ensure uncategorized links (if any) stay at top
+ let noneSectionIndex;
for (let i = 0; i < sectionData.length; i++) {
- linkContainer.insertAdjacentHTML(
+ if(sectionData[i].label == "") {
+ noneSectionIndex = i;
+ break;
+ }
+ }
+
+ if (noneSectionIndex != -1 && noneSectionIndex != 0) {
+ this.sections.splice(noneSectionIndex, 1);
+ this.sections.unshift("none");
+ }*/
+
+ for (let i = 0; i < sectionData.length; i++) {
+ containerBookmarks.insertAdjacentHTML(
"beforeend",
`
${i == 0 ? "" : `
`}
-
- [X]
-
+
${sectionData[i].label}
-
- [up]
-
-
- [down]
-
`
);
@@ -1216,12 +1286,6 @@
"beforeend",
`
-
- [X]
-
0 && !url.startsWith("http")) {
url = "https://" + url; // append HTTPS to link if needed
}
if (label == "" || url == "https://") {
alert("you must specify url and label to add a bookmark");
return;
}
-
+
// store new link in container
let sectionData = Object.values(container.sections);
let sectionLabels = [];
@@ -1876,31 +1933,49 @@
sectionLabels.push(sectionData[i].label);
}
- let tempIndex = sectionLabels.indexOf(section);
- // existing section
- if (tempIndex != -1) {
- let tempSectionLinks = Object.values(container.sections)[tempIndex].links;
+ let sectionIndex = sectionLabels.indexOf(section);
+ // add link to existing section
+ if (sectionIndex != -1) {
+ let tempSectionLinks = Object.values(container.sections)[sectionIndex].links;
tempSectionLinks.push({
label: label,
url: url
});
}
- // creating new section
+ // or create new section + add link
else {
- let tempSectionLinks = [];
- tempSectionLinks.push({
+ let newSectionLinks = [];
+ newSectionLinks.push({
label: label,
url: url
});
- container.sections[sectionData.length] = {}
- container.sections[sectionData.length].links = tempSectionLinks;
- container.sections[sectionData.length].label = section;
+
+ // ensure that uncategorized links stay at top of container
+ if (section == "" && sectionData.length > 0) {
+ let reorderedSections = {};
+ reorderedSections[0] = {};
+ reorderedSections[0].links = newSectionLinks;
+ reorderedSections[0].label = section;
+
+ // move existing sections down
+ for (let i = 0; i < sectionData.length; i++) {
+ reorderedSections[i+1] = sectionData[i];
+ }
+
+ container.sections = reorderedSections;
+ }
+ else {
+ container.sections[sectionData.length] = {};
+ container.sections[sectionData.length].links = newSectionLinks;
+ container.sections[sectionData.length].label = section;
+ }
}
// reset inputs + render
document.getElementById(containerId + "-url-input").value = "";
document.getElementById(containerId + "-label-input").value = "";
container.loadBookmarks();
+ container.loadBookmarkListings();
}
function reorderSection(buttonPressed, direction) {
@@ -1909,7 +1984,7 @@
let container = containerDataMap.get(temp[0]);
let copy = container.sections[sectionId];
- if (direction == "up" && sectionId != 0) {
+ if (direction == "up" && sectionId != 0) {
container.sections[sectionId] = container.sections[sectionId - 1];
container.sections[sectionId - 1] = copy;
} else if (direction == "down" && (sectionId + 1) != Object.keys(container.sections).length) {
@@ -1920,14 +1995,15 @@
}
container.loadBookmarks();
+ container.loadBookmarkListings();
}
function deleteSection(buttonPressed) {
let temp = buttonPressed.parentElement.id.split("-");
let sectionId = parseInt(temp[temp.length - 1]);
- let container = containerDataMap.get(temp[0]);
+ let container = containerDataMap.get(buttonPressed.parentElement.id.split("-section")[0]);
- // go through sections, starting with one to delete
+ // overwrite sections
let numSections = Object.keys(container.sections).length;
for (let i = sectionId; i < numSections; i++) {
container.sections[i] = container.sections[i+1];
@@ -1937,6 +2013,7 @@
// refresh screen
container.loadBookmarks();
+ container.loadBookmarkListings();
}
function deleteLink(buttonPressed) {
@@ -2233,12 +2310,13 @@
divider.style.backgroundColor = container.containerSettings.dividerColor;
divider.style.borderColor = container.containerSettings.dividerColor;
}
- function disableDivider(checkboxChanged) {
+ function toggleDivider(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;
+ container.containerSettings.enableDivider = checkboxChanged.target.checked;
+ document.getElementById(containerId + "-divider").style.display =
+ checkboxChanged.target.checked ? "block" : "none";
if (checkboxChanged.target.checked && Object.keys(container.sections).length > 0) {
document.getElementById(containerId + "-clock").style.marginBottom = "18px";
@@ -2330,7 +2408,7 @@
localStorage.setItem("links", JSON.stringify(links));
localStorage.setItem("sections", JSON.stringify(sections));
- if (containerSettings.disableDivider) {
+ if (containerSettings.enableDivider) {
document.getElementById("clock").style.marginBottom = "0px";
}
@@ -2373,7 +2451,7 @@
document.getElementById("mainContainer").style.top = "10px";
document.getElementById("mainContainer").style.left = "10px";
- applyContainerSettings();
+ applySettings();
loadSections();
}