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

wip zindex map

Browse Source
This commit is contained in:
simon
2025-07-14 21:29:18 -04:00
parent f437f2b2c6
commit 89d5a08609
1 changed files with 74 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+72 -149
View File
@@ -426,8 +426,9 @@
// cookie holder for coordinates + size of settings menu // cookie holder for coordinates + size of settings menu
let settingsMenuData = {}; let settingsMenuData = {};
// cookie holder for coordinates + size of containers // cookie holders for container data
let containerDataMap = new Map(); let containerDataMap = new Map();
let zIndexMap = new Map();
// default values for easy resetting // default values for easy resetting
let defaultTextContainerSettings = { let defaultTextContainerSettings = {
@@ -489,7 +490,6 @@
let numberOfTextContainers = 0; let numberOfTextContainers = 0;
let numberOfImageContainers = 0; let numberOfImageContainers = 0;
let occupiedIndices = new Map();
let cursors = {}; let cursors = {};
@@ -500,7 +500,6 @@
y; y;
height; height;
width; width;
zindex;
imageUrl; imageUrl;
containerSettings; containerSettings;
sections; sections;
@@ -513,151 +512,80 @@
y, y,
height, height,
width, width,
zindex,
imageUrl, imageUrl,
containerSettings, containerSettings,
sections, sections
) { ) {
// check if id is already used /* check if id is already used
if (Object.keys(containerDataMap) if (containerDataMap.has(name.replace(" ", "-").toLowerCase())) {
.indexOf(name.replace(" ", "-").toLowerCase())
!= -1
) {
alert("that name is already used, please use another"); alert("that name is already used, please use another");
return; return;
} }*/
// ensure there are no brackets in the name // ensure there are no brackets in the name
else if (name.indexOf("<") != -1 || name.indexOf(">") != -1) { if (name.indexOf("<") != -1 || name.indexOf(">") != -1) {
alert("no brackets in the name please"); alert("no brackets in the name please");
return; return;
} }
// if initializing saved bookmark container let loadingFromSave = (x != undefined) && (y != undefined);
if (x != undefined && y != undefined && imageUrl == undefined) { let isImage = (imageUrl != undefined);
numberOfTextContainers++;
this.name = name; // if constructing image container
this.id = id; if (isImage) {
this.x = x;
this.y = y;
this.height = height;
this.width = width;
this.zindex = zindex;
this.imageUrl = imageUrl;
this.containerSettings = containerSettings;
this.sections = sections;
this.initializeTextContainer();
this.createTextContainerMenuListing();
this.loadBookmarks();
this.loadBookmarkListings();
}
// if initializing saved image container
else if (x != undefined && y != undefined && imageUrl != undefined) {
numberOfImageContainers++; numberOfImageContainers++;
this.name = name; if (loadingFromSave) {
this.id = id; this.name = name;
this.x = x; this.id = id;
this.y = y; this.x = x;
this.height = height; this.y = y;
this.width = width; this.height = height;
this.zindex = zindex; this.width = width;
this.imageUrl = imageUrl; this.containerSettings = containerSettings;
this.containerSettings = containerSettings; this.imageUrl = imageUrl;
}
else {
if (name == "") this.name = "image " + numberOfImageContainers;
else this.name = name;
this.id = findLowestAvailableId();
this.imageUrl = imageUrl;
// deep copy default settings
this.containerSettings = JSON.parse(JSON.stringify(defaultImageContainerSettings));
}
this.initializeImageContainer(); this.initializeImageContainer();
this.createImageContainerMenuListing(); this.createImageContainerMenuListing();
} }
// if constructing text container
// if intializing brand new bookmark container
else if (imageUrl == undefined) {
numberOfTextContainers++;
/**
todo:
remove the zindex stuff.
get rid of the separation between text/image in terms of ID
-> the function doesn't need params and should just get the index
use the id index as the key in the data map for easier zindex manipulation
make all default ids just "container-Z" regardless of type, no need to use the name in there at all
then you can get rid of the index map too, you can just check the normal data map to see if the ID is used
do you need to save the numberOfTexContainers/ImageContainers? or honestly probably not..
*/
if (name == "") {
this.name = "bookmark layer " + numberOfTextContainers;
this.id = findLowestAvailableId("text");
}
else {
this.name = name;
this.id = name.replace(" ", "-").toLowerCase();
}
// deep copy default settings
this.containerSettings = JSON.parse(JSON.stringify(defaultTextContainerSettings));
this.sections = {};
this.zindex = numberOfTextContainers + numberOfImageContainers;
this.initializeTextContainer();
this.createTextContainerMenuListing();
this.loadBookmarks();
this.loadBookmarkListings();
}
// if initializing brand new image
else { else {
numberOfImageContainers++; numberOfTextContainers++;
if (name == "") {
this.name = "image " + numberOfImageContainers; if (loadingFromSave) {
this.id = findLowestAvailableId("image"); this.name = name;
this.id = id;
this.x = x;
this.y = y;
this.height = height;
this.width = width;
this.containerSettings = containerSettings;
this.sections = sections;
} }
else { else {
this.name = name; if (name == "") this.name = "bookmark layer " + numberOfTextContainers;
this.id = name.replace(" ", "-").toLowerCase(); else this.name = name;
this.id = findLowestAvailableId();
this.sections = {};
// deep copy default settings
this.containerSettings = JSON.parse(JSON.stringify(defaultTextContainerSettings));
} }
this.imageUrl = imageUrl; this.initializeTextContainer();
this.zindex = numberOfTextContainers + numberOfImageContainers; this.createTextContainerMenuListing();
this.initializeImageContainer(); this.loadBookmarks();
this.createImageContainerMenuListing(); this.loadBookmarkListings();
} }
this.applySettings(); this.applySettings();
@@ -667,28 +595,26 @@
// and save // and save
containerDataMap.set(this.id, this); containerDataMap.set(this.id, this);
zIndexMap.set(this.id, numberOfImageContainers + numberOfTextContainers);
} }
/** /**
* creates image element and lets * creates image element and lets
* loadBookmarks() and applySettings() do the rest * loadBookmarks() and applySettings() do the rest
*/ */
initializeImageContainer() { initializeImageContainer() {
// deep copy default settings
this.containerSettings = JSON.parse(JSON.stringify(defaultImageContainerSettings));
document.body.insertAdjacentHTML( document.body.insertAdjacentHTML(
"beforeend", "beforeend",
` `
<div style="display: inline;"> <img
<img class="movable userImage"
class="movable userImage" id="${this.id}"
id="${this.id}" style="z-index: ${numberOfImageContainers + numberOfTextContainers};"
style="z-index: ${this.zindex};" src="${this.imageUrl}"
src="${this.imageUrl}" draggable=false
draggable=false />
/>
</div>
` `
); );
@@ -1060,8 +986,9 @@
applySettings() { applySettings() {
/** set options relevant to both image and text containers */ /** set options relevant to both image and text containers */
/** POSITION */ /** POSITION */
document.getElementById(this.id).style.top = this.y; document.getElementById(this.id).style.top = this.y;
document.getElementById(this.id).style.left = this.x; document.getElementById(this.id).style.left = this.x;
document.getElementById(this.id).style.zIndex = zIndexMap.get(this.id);
/** SIZE */ /** SIZE */
let containerSettings = this.containerSettings; let containerSettings = this.containerSettings;
@@ -1517,12 +1444,12 @@
.addEventListener("input", changeWallpaper, false); .addEventListener("input", changeWallpaper, false);
document document
/** load container data */ /** load container data
let occupiedIndexMapValues = let occupiedIndexMapValues =
JSON.parse(localStorage.getItem("occupiedIndexMapValues")) || []; JSON.parse(localStorage.getItem("occupiedIndexMapValues")) || [];
for (let i = 0; i < occupiedIndexMapValues.length; i++) { for (let i = 0; i < occupiedIndexMapValues.length; i++) {
occupiedIndices.set(occupiedIndexMapValues[i], true); occupiedIndices.set(occupiedIndexMapValues[i], true);
} }*/
let containerMapValues = let containerMapValues =
JSON.parse(localStorage.getItem("containerMapValues")) || []; JSON.parse(localStorage.getItem("containerMapValues")) || [];
@@ -1539,7 +1466,6 @@
containerMapValues[i].y, containerMapValues[i].y,
containerMapValues[i].height, containerMapValues[i].height,
containerMapValues[i].width, containerMapValues[i].width,
containerMapValues[i].zindex,
containerMapValues[i].imageUrl, containerMapValues[i].imageUrl,
containerMapValues[i].containerSettings, containerMapValues[i].containerSettings,
containerMapValues[i].sections containerMapValues[i].sections
@@ -1673,12 +1599,13 @@
}); });
localStorage.setItem("containerMapValues", JSON.stringify(valueArray)); localStorage.setItem("containerMapValues", JSON.stringify(valueArray));
// save the states of occupied ID indice /* save the states of occupied ID indice
valueArray = []; valueArray = [];
occupiedIndices.keys().forEach((value) => { occupiedIndices.keys().forEach((value) => {
valueArray.push(value); valueArray.push(value);
}); });
localStorage.setItem("occupiedIndexMapValues", JSON.stringify(valueArray)); localStorage.setItem("occupiedIndexMapValues", JSON.stringify(valueArray));
*/
// save wallpaper info // save wallpaper info
localStorage.setItem("wallpaper", JSON.stringify(wallpaper)); localStorage.setItem("wallpaper", JSON.stringify(wallpaper));
@@ -1847,7 +1774,6 @@
undefined, undefined,
undefined, undefined,
undefined, undefined,
undefined,
undefined undefined
); );
} }
@@ -1869,7 +1795,6 @@
undefined, undefined,
undefined, undefined,
undefined, undefined,
undefined,
imageUrl, imageUrl,
undefined, undefined,
undefined undefined
@@ -1889,7 +1814,6 @@
} }
containerDataMap.delete(containerId); containerDataMap.delete(containerId);
occupiedIndices.delete(containerId);
document.getElementById(containerId).remove(); document.getElementById(containerId).remove();
document.getElementById(containerId + "-container-listing").remove(); document.getElementById(containerId + "-container-listing").remove();
@@ -1899,12 +1823,11 @@
* uses map to determine the lowest available ID index for given type, to * uses map to determine the lowest available ID index for given type, to
* prevent accidentally using the same ID number for unnamed containers twice * prevent accidentally using the same ID number for unnamed containers twice
*/ */
function findLowestAvailableId(containerType) { function findLowestAvailableId() {
let id = ""; let id = "";
for(let index = 0; index < 200; index ++) { for(let index = 0; index < 200; index ++) {
id = containerType + "-" + index; id = "container-" + index;
if (!occupiedIndices.has(id)) { if (!containerDataMap.has(id)) {
occupiedIndices.set(id, true);
console.log(id); console.log(id);
return id; return id;
} }