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

far more efficient container reorder 90% of the way there

Browse Source
This commit is contained in:
simon
2025-07-16 11:00:47 -04:00
parent 0688d903cc
commit 597e995f89
1 changed files with 103 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+101 -36
View File
@@ -948,16 +948,8 @@
</div> </div>
<div style="display: flex; flex-direction: row; justify-content: space-between;"> <div style="display: flex; flex-direction: row; justify-content: space-between;">
<div> <div id=${this.id + "--manage-container-buttons"}>
${zindex == numberTotalContainers ? `` : `
<button id="` + this.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button>
<button id="` + this.id + `--move-up-button"} onclick="reorderContainer(this, 'up')">move up</button>
`}
${zindex == 1 ? `` :`
<button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button>
<button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button>
`}
</div> </div>
<div> <div>
<button id=${this.id + "--delete-button"} onclick="deleteContainer(this)">delete</button> <button id=${this.id + "--delete-button"} onclick="deleteContainer(this)">delete</button>
@@ -1293,6 +1285,26 @@
* applies event listeners on container options inputs in settings menu * applies event listeners on container options inputs in settings menu
*/ */
addSettingsMenuEventListeners() { addSettingsMenuEventListeners() {
document.getElementById(this.id + "--manage-container-buttons").innerHTML = "";
if (this.containerSettings.zIndex != numberTotalContainers) {
document.getElementById(this.id + "--manage-container-buttons").insertAdjacentHTML(
"afterbegin",
`
<button id="` + this.id + `--move-top-button"} onclick="reorderContainer(this, 'top')">summon to top</button>
<button id="` + this.id + `--move-up-button"} onclick="reorderContainer(this, 'up')">move up</button>
`
)
}
if (this.containerSettings.zIndex != 1) {
document.getElementById(this.id + "--manage-container-buttons").insertAdjacentHTML(
"afterbegin",
`
<button id="` + this.id + `--move-down-button"} onclick="reorderContainer(this, 'down')">move down</button>
<button id="` + this.id + `--move-bottom-button"} onclick="reorderContainer(this, 'bottom')">banish to bottom</button>
`
)
}
// container border setting listeners // container border setting listeners
document document
.getElementById(this.id + "-settings-border-color") .getElementById(this.id + "-settings-border-color")
@@ -1891,19 +1903,90 @@
let currentIndex = parseInt(movingContainer.containerSettings.zIndex); let currentIndex = parseInt(movingContainer.containerSettings.zIndex);
let destinationIndex; let destinationIndex;
let clickedListingCopy = document.getElementById(containerId + "-container-listing").cloneNode(true);
// let destinationListingCopy = document.getElementById(zIndexMap.get(destinationIndex) + "-container-listing").cloneNode(true);
document.getElementById(containerId + "-container-listing").remove();
if (direction == "up") { if (direction == "up") {
destinationIndex = currentIndex + 1; destinationIndex = String(currentIndex + 1);
document.getElementById(zIndexMap.get(destinationIndex) + "-container-listing").insertAdjacentElement("beforebegin", clickedListingCopy);
} }
else if (direction == "down") { else if (direction == "down") {
destinationIndex = currentIndex - 1; destinationIndex = String(currentIndex - 1);
document.getElementById(zIndexMap.get(destinationIndex) + "-container-listing").insertAdjacentElement("afterend", clickedListingCopy);
} }
else if (direction == "top") { else if (direction == "top") {
destinationIndex = numberOfImageContainers + numberOfTextContainers; destinationIndex = String(numberTotalContainers);
document.getElementById("containers").insertAdjacentElement("afterbegin", clickedListingCopy);
} }
else if (direction == "bottom") { else if (direction == "bottom") {
destinationIndex = 1; destinationIndex = "1";
document.getElementById("containers").insertAdjacentElement("beforeend", clickedListingCopy);
} }
let destinationContainer = containerDataMap.get(zIndexMap.get(destinationIndex));
// swap container z-indexes
document.getElementById(zIndexMap.get(destinationIndex)).style.zIndex = currentIndex;
document.getElementById(containerId).style.zIndex = destinationIndex;
// save changes to map
zIndexMap.set(currentIndex, zIndexMap.get(destinationIndex));
zIndexMap.set(destinationIndex, movingContainer.id);
// save new indexes direcly to affected containers
movingContainer.containerSettings.zIndex = destinationIndex;
movingContainer.addSettingsMenuEventListeners();
destinationContainer.containerSettings.zIndex = currentIndex;
destinationContainer.addSettingsMenuEventListeners();
/** adjust container listings on settings menu *
// swap listing element in destination index with current listing
let currentIndexAtBottom = parseInt(currentIndex) == 1;
let currentIndexAtTop = parseInt(currentIndex) == numberTotalContainers;
let destinationIndexAtBottom = parseInt(destinationIndex) == 1;
let destinationIndexAtTop = parseInt(destinationIndex) == numberTotalContainers;
// MOVE DESTINATION LISTING TO CURRENT SPOT
if (currentIndexAtBottom) {
document.getElementById("containers").insertAdjacentElement("beforeend", destinationListingCopy);
}
else if (currentIndexAtTop) {
document.getElementById("containers").insertAdjacentElement("afterbegin", destinationListingCopy);
}
else {
console.log("1getting: " + zIndexMap.get(String(parseInt(currentIndex-1))) + "-container-listing");
// document.getElementById(zIndexMap.get(String(parseInt(currentIndex))) + "-container-listing").insertAdjacentElement("beforebegin", destinationListingCopy);
document.getElementById(zIndexMap.get(String(parseInt(currentIndex-1))) + "-container-listing").insertAdjacentElement("beforebegin", destinationListingCopy);
}
// MOVE CURRENT LISTING TO DESTINATION
if (destinationIndexAtBottom) {
document.getElementById("containers").insertAdjacentElement("beforeend", clickedListingCopy);
}
else if (destinationIndexAtTop) {
}
else {
console.log("2getting: " + zIndexMap.get(String(parseInt(destinationIndex)+1)) + "-container-listing");
document.getElementById(zIndexMap.get(String(parseInt(destinationIndex)+1)) + "-container-listing").insertAdjacentElement("afterend", clickedListingCopy);
}
*/
// save new indexes
/* REMOVE RELEVANT ELEMENTS
console.log('removing: ' + containerId + "-container-listing");
console.log('removing: ' + zIndexMap.get(destinationIndex) + "-container-listing");
document.getElementById(containerId + "-container-listing").remove();
document.getElementById(zIndexMap.get(destinationIndex) + "-container-listing").remove();
currentIndex = String(currentIndex); currentIndex = String(currentIndex);
destinationIndex = String(destinationIndex); destinationIndex = String(destinationIndex);
@@ -1911,31 +1994,13 @@
console.log('destinationIndex: ' + destinationIndex); console.log('destinationIndex: ' + destinationIndex);
console.log('zindexmap: ' + zIndexMap.get(destinationIndex)); console.log('zindexmap: ' + zIndexMap.get(destinationIndex));
console.log('container map: ' + containerDataMap.get(zIndexMap.get(destinationIndex))); console.log('container map: ' + containerDataMap.get(zIndexMap.get(destinationIndex)));
// actually move containers (swap with destination index)
document.getElementById(zIndexMap.get(destinationIndex)).style.zIndex = currentIndex;
document.getElementById(containerId).style.zIndex = destinationIndex;
// save new indexes
movingContainer.containerSettings.zIndex = destinationIndex;
containerDataMap.get(zIndexMap.get(destinationIndex))
.containerSettings.zIndex = currentIndex;
zIndexMap.set(currentIndex, zIndexMap.get(destinationIndex));
zIndexMap.set(destinationIndex, movingContainer.id);
/** adjust container listings on settings menu
let copy = document.getElementById(containerId + "-container-listing");
document.getElementById(containerId + "-container-listing").remove();
let destinationContainerElement = document.getElementById(zIndexMap.get(destinationIndex) + "-container-listing");
destinationContainerElement.insertAdjacentHTML("afterend", copy);
copy = destinationContainerElement;
*/ */
// redrawContainerListings();
redrawContainerListings(); // else if (currentIndex == numberTotalContainers) {
// document.getElementById(zIndexMap.get(numberTotalContainers - 1)).insertAdjacentElement("afterend", destinationListingCopy);
// }
} }
function redrawContainerListings() { function redrawContainerListings() {
@@ -1977,7 +2042,7 @@
*/ */
function findLowestAvailableId() { function findLowestAvailableId() {
let id = ""; let id = "";
for(let index = 0; index < 200; index ++) { for(let index = 1; index < 200; index ++) {
id = "container-" + index; id = "container-" + index;
if (!containerDataMap.has(id)) { if (!containerDataMap.has(id)) {
console.log(id); console.log(id);