-
- ${this.name}
-
+
- ${this.name}
+
-
+ ${this.name}: color + shape options
-
+
-
-
`
);
@@ -1389,6 +1388,8 @@
document.getElementById(this.id + "-header").style.marginBottom = "18px";
}
}
+
+
}
/*************************
@@ -1397,10 +1398,14 @@
(() => {
window.onbeforeunload = unloadPage;
+ /** add keybinds */
document.body.addEventListener("keydown", (e) => {
if (e.key == "e" && !editing) {
toggleEditMode();
}
+ if (e.key == "Escape" && editing) {
+ toggleEditMode();
+ }
});
/** set up cursors */
@@ -1461,47 +1466,36 @@
.getElementById("wallpaperColorPicker")
.addEventListener("input", changeWallpaper, false);
document
- .getElementById("wallpaperRepeatToggle")
- .addEventListener("change", toggleWallpaperRepeat, false);
-
- /**
- OLD INIT
-
- /** load image data cookies *
- let imageValues =
- JSON.parse(localStorage.getItem("imageMapValues")) || [];
- for (let i = 0; i < imageValues.length; i++) {
- imageMap.set(imageValues[i].id, imageValues[i]);
- }
-
-
- /** set event listeners for settings menu *
- addSettingsEventListeners();
-
-
/** load container data */
+ let occupiedIndexMapValues =
+ JSON.parse(localStorage.getItem("occupiedIndexMapValues")) || [];
+ for (let i = 0; i < occupiedIndexMapValues.length; i++) {
+ occupiedIndices.set(occupiedIndexMapValues[i], true);
+ }
+
let containerMapValues =
JSON.parse(localStorage.getItem("containerMapValues")) || [];
for (let i = 0; i < containerMapValues.length; i++) {
// containerDataMap.set(containerMapValues[i].id, containerMapValues[i]);
- if (containerMapValues[i].id != "settingsContainer") {
- containerDataMap.set(containerMapValues[i].id, new Container(
- containerMapValues[i].id,
- containerMapValues[i].name,
- containerMapValues[i].x,
- containerMapValues[i].y,
- containerMapValues[i].height,
- containerMapValues[i].width,
- containerMapValues[i].imageUrl,
- containerMapValues[i].containerSettings,
- containerMapValues[i].sections
- ));
+ if (containerMapValues[i].id == "settingsContainer") {
+ continue;
}
+
+ containerDataMap.set(containerMapValues[i].id, new Container(
+ containerMapValues[i].id,
+ containerMapValues[i].name,
+ containerMapValues[i].x,
+ containerMapValues[i].y,
+ containerMapValues[i].height,
+ containerMapValues[i].width,
+ containerMapValues[i].imageUrl,
+ containerMapValues[i].containerSettings,
+ containerMapValues[i].sections
+ ));
}
- numberOfContainers = containerMapValues.length;
- /** load settings menu data */
+ /** set up + load settings menu data */
settingsMenuData = JSON.parse(
localStorage.getItem("settingsMenuData")
) || {
@@ -1511,15 +1505,14 @@
height: "",
};
setupContainerSettingsMenu();
- /** load last active settings tab user was on */
+ // load last active settings tab user was on
activeTabId =
JSON.parse(localStorage.getItem("activeTabId")) || "instructionsTab";
document.getElementById(
activeTabId.replace("Tab", "Form")
).style.display = "flex";
document.getElementById(activeTabId).classList.add("active");
-
- /** tab-switching listeners */
+ // add tab-switching listeners
let tabs = document.getElementsByClassName("tab");
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", changeActiveTab, false);
@@ -1532,7 +1525,7 @@
function setupContainerSettingsMenu() {
let settingsContainer = document.getElementById("settingsContainer");
- if (numberOfContainers == 0) {
+ if (numberOfImageContainers == 0 && numberOfTextContainers == 0) {
document.getElementById("containers").insertAdjacentHTML(
"beforeend",
`
(you have no layers right now)
`
@@ -1626,10 +1619,16 @@
let valueArray = [];
containerDataMap.values().forEach((value) => {
valueArray.push(value);
- console.log(value);
});
localStorage.setItem("containerMapValues", JSON.stringify(valueArray));
+ // save the states of occupied ID indice
+ valueArray = [];
+ occupiedIndices.keys().forEach((value) => {
+ valueArray.push(value);
+ });
+ localStorage.setItem("occupiedIndexMapValues", JSON.stringify(valueArray));
+
// save wallpaper info
localStorage.setItem("wallpaper", JSON.stringify(wallpaper));
localStorage.setItem(
@@ -1826,8 +1825,38 @@
function deleteContainer(buttonPressed) {
let containerId = buttonPressed.id.split("--")[0];
+ let container = containerDataMap.get(containerId);
+
+ if (container.imageUrl == undefined) {
+ numberOfTextContainers--;
+ clearInterval(container.clockIntervalId);
+ }
+ else {
+ numberOfImageContainers--;
+ }
+
containerDataMap.delete(containerId);
- // remove element from DOM
+ occupiedIndices.delete(containerId);
+
+ document.getElementById(containerId).remove();
+ document.getElementById(containerId + "-container-listing").remove();
+ }
+
+ /**
+ * uses map to determine the lowest available ID index for given type, to
+ * prevent accidentally using the same ID number for unnamed containers twice
+ */
+ function findLowestAvailableId(containerType) {
+ let id = "";
+ for(let index = 0; index < 200; index ++) {
+ id = containerType + "-" + index;
+ if (!occupiedIndices.has(id)) {
+ occupiedIndices.set(id, true);
+ console.log(id);
+ return id;
+ }
+ }
+ return -1;
}
/** upon click release on movable elements, store position data for when saving to localStorage when disabling edit mode */
@@ -2151,10 +2180,8 @@
let link = container.sections[sectionIndex].links[linkIndex];
container.sections[sectionIndex].links.splice(linkIndex, 1);
if (direction == "up" && linkIndex != 0) {
- console.log("up: " + linkIndex);
links.splice(linkIndex - 1, 0, link);
} else if (direction == "down" && linkIndex != links.length) {
- console.log("down: " + linkIndex);
links.splice(linkIndex + 1, 0, link);
}
@@ -2182,7 +2209,6 @@
let numImages = 1;
for (const key of keys) {
if (key.slice(-1) > numImages) {
- console.log(key);
numImages = parseInt(key.slice(-1));
}
}
@@ -2268,8 +2294,6 @@
let containerId = colorChange.currentTarget.id.split("-settings")[0];
let container = containerDataMap.get(containerId);
- console.log(container);
-
container.containerSettings.backgroundRgba = hexToRgba(
document.getElementById(containerId + "-settings-bg-color").value,
document.getElementById(containerId + "-settings-bg-alpha").value