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

changed how bookmarks are edited

Browse Source
This commit is contained in:
simon
2025-07-11 13:49:12 -04:00
parent 58b34bb07a
commit 9f3825e863
1 changed files with 96 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+95 -63
View File
@@ -135,6 +135,41 @@
font-style: italic; font-style: italic;
} }
.bookmarkListingContainer {
display: flex;
flex-direction: column;
}
.sectionListingContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.linkListingContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bookmarkListingButtons {
}
.bookmarkButton {
}
.bookmarkButton:hover {
cursor: pointer;
background-color: rgba(173, 165, 165, 0.8);
}
.bookmarkDeleteButton {
}
.bookmarkDeleteButton:hover {
background-color: rgba(173, 165, 165, 0.8);
color: red;
cursor: pointer;
}
hr { hr {
width: 75%; width: 75%;
} }
@@ -336,6 +371,9 @@
</form> </form>
<form id="globalSettingsForm" onsubmit="return false"> <form id="globalSettingsForm" onsubmit="return false">
<p>for reference: <a href="https://www.totallyfreecursors.com/">cursors</a></p>
<label>enter source for normal cursor: </label> <label>enter source for normal cursor: </label>
<input id="pointerCursorInput" placeholder="paste link here" /> <input id="pointerCursorInput" placeholder="paste link here" />
<button onclick="setDefaultCursor()">set normal cursor</button> <button onclick="setDefaultCursor()">set normal cursor</button>
@@ -544,7 +582,7 @@
<span id=${this.id + "-clock"}></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 + "-bookmarks"} ></div>
</div> </div>
</div> </div>
` `
@@ -630,7 +668,7 @@
<span id=${this.id + "-clock"}></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 + "-bookmarks"} ></div>
</div> </div>
</div> </div>
` `
@@ -684,43 +722,43 @@
loadBookmarkListings() { loadBookmarkListings() {
if (Object.keys(this.sections).length == 0) { if (Object.keys(this.sections).length == 0) {
let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
bookmarkListings.innerHTML = "(no bookmarks)";
return; return;
} }
let sectionData = Object.values(this.sections); let sectionData = Object.values(this.sections);
let containerSettings = this.containerSettings; let containerSettings = this.containerSettings;
let bookmarkListings = document.getElementById(this.id + "-bookmark-listings"); let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
bookmarkListings.innerHTML = "";
console.log(sectionData);
// [re]render the section listings // [re]render the section listings
bookmarkListings.innerHTML = "";
for (let i = 0; i < sectionData.length; i++) { for (let i = 0; i < sectionData.length; i++) {
console.log(i);
bookmarkListings.insertAdjacentHTML( bookmarkListings.insertAdjacentHTML(
"beforeend", "beforeend",
` `
${i == 0 ? "" : `<br />`} ${i == 0 ? "" : `<br />`}
<div id="${this.id}-section-listing-${i}"> <div id="${this.id}-section-listing-${i}" class="sectionListingContainer">
<span onClick="deleteSection(this)"> <span class=${this.id + "-section"}>
[X] ${sectionData[i].label == "" ? "uncategorized links: " : "<u>section</u>: " + sectionData[i].label}
</span> </span>
<span class=${this.id + "-section-listing"}> <div class="bookmarkListingButtons">
${sectionData[i].label} ${(i > 1) ? `
</span> <span onClick="reorderSection(this, 'up')" class="bookmarkButton">
[up]
${i > 1 ? ` </span>
<span onClick="reorderSection(this, 'up')"> ` : ``
[up] }
</span> ${(i > 0) && (i < sectionData.length - 1) ? `
` : ``} <span onClick="reorderSection(this, 'down')" class="bookmarkButton">
${i > 0 ? ` [down]
<span onClick="reorderSection(this, 'down')"> </span>
[down] ` : ``
</span> }
` : ``} <span onClick="deleteSection(this)" class="bookmarkDeleteButton">[delete section]</span>
</div>
</div> </div>
` `
); );
@@ -729,24 +767,34 @@
// [re]render the link listings // [re]render the link listings
for (let s = 0; s < sectionData.length; s++) { for (let s = 0; s < sectionData.length; s++) {
for (let l = 0; l < sectionData[s].links.length; l++) { for (let l = 0; l < sectionData[s].links.length; l++) {
console.log('s: ' + s);
let targetSection = document.getElementById( let targetSection = document.getElementById(
this.id + "-section-listing-" + s this.id + "-section-listing-" + s
); );
targetSection.insertAdjacentHTML( targetSection.insertAdjacentHTML(
"beforeend", "afterend",
` `
<div id="${this.id}-section-${s}-link-${l}-listing" > <div id="${this.id}-section-${s}-link-listing-${l}" class="linkListingContainer">
<span onClick="deleteLink(this)">
[X] <span class="${this.id}-link">
</span>
<a
class="${this.id}-link"
href="${sectionData[s].links[l].url}"
>
${sectionData[s].links[l].label} ${sectionData[s].links[l].label}
</a> </span>
<div class="bookmarkListingButtons">
${l > 0 ? `
<span onClick="reorderLink(this, 'up')" class="bookmarkButton">
[up]
</span>
` : ``
}
${l < sectionData[s].links.length - 1 ? `
<span onClick="reorderLink(this, 'down')" class="bookmarkButton">
[down]
</span>
` : ``
}
<span onClick="deleteLink(this)" class="bookmarkDeleteButton">[delete link]</span>
</div>
</div> </div>
` `
); );
@@ -755,6 +803,8 @@
} }
createSettingsMenuListing() { createSettingsMenuListing() {
console.log(this.id);
console.log(Object.keys(this.sections).length == 0 );
document.getElementById("containers").insertAdjacentHTML( document.getElementById("containers").insertAdjacentHTML(
"beforeend", "beforeend",
` `
@@ -767,12 +817,13 @@
<div class="expandableMenu" id=${this.id + "-bookmark-menu"} > <div class="expandableMenu" id=${this.id + "-bookmark-menu"} >
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ manage bookmarks / sections</p> <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ manage bookmarks / sections</p>
<div class="expandableMenu" id=${this.id + "-bookmark-listings"} > <div class="expandableMenu" >
${Object.keys(this.sections).length == 0 ? `<p>(no bookmarks)</p>` : ``} <div id=${this.id + "-bookmark-menu--listings"} class="bookmarkListingContainer">
</div>
</div> </div>
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ add new bookmarks / sections</p> <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ add new bookmarks / sections</p>
<div class="expandableMenu" id=${this.id + "-add-bookmark-menu"} > <div class="expandableMenu" id=${this.id + "-bookmark-menu--add-new"} >
<label> enter url: </label> <label> enter url: </label>
<input id=${this.id + "-url-input"} type="text" name="url" /> <input id=${this.id + "-url-input"} type="text" name="url" />
@@ -1235,30 +1286,17 @@
*/ */
loadBookmarks() { loadBookmarks() {
if (Object.keys(this.sections).length == 0) { if (Object.keys(this.sections).length == 0) {
let containerBookmarks = document.getElementById(this.id + "-bookmarks");
containerBookmarks.innerHTML = "";
return; return;
} }
let sectionData = Object.values(this.sections); let sectionData = Object.values(this.sections);
let containerSettings = this.containerSettings; let containerSettings = this.containerSettings;
let containerBookmarks = document.getElementById(this.id + "-sections"); let containerBookmarks = document.getElementById(this.id + "-bookmarks");
containerBookmarks.innerHTML = ""; containerBookmarks.innerHTML = "";
/* ensure uncategorized links (if any) stay at top
let noneSectionIndex;
for (let i = 0; i < sectionData.length; i++) {
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++) { for (let i = 0; i < sectionData.length; i++) {
containerBookmarks.insertAdjacentHTML( containerBookmarks.insertAdjacentHTML(
"beforeend", "beforeend",
@@ -1907,11 +1945,9 @@
**********************/ **********************/
function addLink(containerElement) { function addLink(containerElement) {
console.log(containerElement)
let containerId = containerElement.id.split("-")[0]; let containerId = containerElement.id.split("-")[0];
let container = containerDataMap.get(containerId); let container = containerDataMap.get(containerId);
console.log(containerId);
// collect data from inputs // collect data from inputs
let url = document.getElementById(containerId + "-url-input").value; let url = document.getElementById(containerId + "-url-input").value;
let label = document.getElementById(containerId + "-label-input").value; let label = document.getElementById(containerId + "-label-input").value;
@@ -1979,7 +2015,7 @@
} }
function reorderSection(buttonPressed, direction) { function reorderSection(buttonPressed, direction) {
let temp = buttonPressed.parentElement.id.split("-"); let temp = buttonPressed.parentElement.parentElement.id.split("-");
let sectionId = parseInt(temp[temp.length - 1]); let sectionId = parseInt(temp[temp.length - 1]);
let container = containerDataMap.get(temp[0]); let container = containerDataMap.get(temp[0]);
@@ -1988,8 +2024,6 @@
container.sections[sectionId] = container.sections[sectionId - 1]; container.sections[sectionId] = container.sections[sectionId - 1];
container.sections[sectionId - 1] = copy; container.sections[sectionId - 1] = copy;
} else if (direction == "down" && (sectionId + 1) != Object.keys(container.sections).length) { } else if (direction == "down" && (sectionId + 1) != Object.keys(container.sections).length) {
console.log(sectionId);
console.log(Object.keys(container.sections).length);
container.sections[sectionId] = container.sections[sectionId + 1]; container.sections[sectionId] = container.sections[sectionId + 1];
container.sections[sectionId + 1] = copy; container.sections[sectionId + 1] = copy;
} }
@@ -1999,11 +2033,10 @@
} }
function deleteSection(buttonPressed) { function deleteSection(buttonPressed) {
let temp = buttonPressed.parentElement.id.split("-"); let temp = buttonPressed.parentElement.parentElement.id.split("-");
let sectionId = parseInt(temp[temp.length - 1]); let sectionId = parseInt(temp[temp.length - 1]);
let container = containerDataMap.get(buttonPressed.parentElement.id.split("-section")[0]); let container = containerDataMap.get(buttonPressed.parentElement.parentElement.id.split("-section")[0]);
// overwrite sections
let numSections = Object.keys(container.sections).length; let numSections = Object.keys(container.sections).length;
for (let i = sectionId; i < numSections; i++) { for (let i = sectionId; i < numSections; i++) {
container.sections[i] = container.sections[i+1]; container.sections[i] = container.sections[i+1];
@@ -2199,7 +2232,6 @@
for (let i = 0; i < sectionElements.length; i++) { for (let i = 0; i < sectionElements.length; i++) {
sectionElements[i].style.fontSize = container.containerSettings.sectionSize + "px"; sectionElements[i].style.fontSize = container.containerSettings.sectionSize + "px";
} }
console.log(container.containerSettings.sectionSize);
} }
function toggleSectionBold(checkboxChanged) { function toggleSectionBold(checkboxChanged) {
let containerId = checkboxChanged.target.id.split("-")[0]; let containerId = checkboxChanged.target.id.split("-")[0];