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

refactored variable/function names away from being image containers to

Browse Source 
media containers
This commit is contained in:
Simon
2025-08-15 17:34:53 -04:00
parent 7555a66dbe
commit e92a52fbe0
1 changed files with 55 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+55 -47
View File
@@ -449,12 +449,7 @@
style="width: 100%;" style="width: 100%;"
type="text" type="text"
/> />
<input
id="newImageContainerHyperlinkInput"
placeholder="(optional) hyperlink URL for image"
style="width: 100%;"
type="text"
/>
<button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)"> <button id="newImageContainerCreateButton" onclick="createNewImageContainer(this)">
place image place image
</button> </button>
@@ -639,7 +634,7 @@
let autoplayAudio = true; let autoplayAudio = true;
let numberOfTextContainers = 0; let numberOfTextContainers = 0;
let numberOfImageContainers = 0; let numberOfMediaContainers = 0;
let cursors = {}; let cursors = {};
@@ -650,7 +645,7 @@
y; y;
height; height;
width; width;
imageUrl; mediaUrl;
settings; settings;
sections; sections;
clockIntervalId; clockIntervalId;
@@ -664,7 +659,7 @@
y, y,
height, height,
width, width,
imageUrl, mediaUrl,
settings, settings,
sections, sections,
youtubeId, youtubeId,
@@ -682,11 +677,11 @@
} }
let loadingFromSave = (id != undefined); let loadingFromSave = (id != undefined);
let isMedia = (imageUrl != undefined); let isMedia = (mediaUrl != undefined);
if (isMedia) { if (isMedia) {
numberOfImageContainers++; numberOfMediaContainers++;
if (loadingFromSave) { if (loadingFromSave) {
this.name = name; this.name = name;
@@ -696,7 +691,7 @@
this.height = height; this.height = height;
this.width = width; this.width = width;
this.settings = settings; this.settings = settings;
this.imageUrl = imageUrl; this.mediaUrl = mediaUrl;
this.youtubeId = youtubeId; this.youtubeId = youtubeId;
this.imageHyperlink = imageHyperlink; this.imageHyperlink = imageHyperlink;
} }
@@ -704,12 +699,12 @@
else { else {
numberTotalContainers++; numberTotalContainers++;
if (imageUrl.includes("youtu.be")) { if (mediaUrl.includes("youtu.be")) {
this.youtubeId = imageUrl.slice(imageUrl.indexOf(".be/")+4, imageUrl.length); this.youtubeId = mediaUrl.slice(mediaUrl.indexOf(".be/")+4, mediaUrl.length);
} }
else if (imageUrl.includes("youtube.com")) { else if (mediaUrl.includes("youtube.com")) {
// normal youtube.com link // normal youtube.com link
this.youtubeId = imageUrl.slice(imageUrl.indexOf("v=")+2, imageUrl.length); this.youtubeId = mediaUrl.slice(mediaUrl.indexOf("v=")+2, mediaUrl.length);
if (this.youtubeId.includes("&")) { if (this.youtubeId.includes("&")) {
this.youtubeId = this.youtubeId.slice(0, this.youtubeId.indexOf("&")); this.youtubeId = this.youtubeId.slice(0, this.youtubeId.indexOf("&"));
} }
@@ -717,10 +712,10 @@
if (name == "") { if (name == "") {
if (this.videoId != undefined) { if (this.videoId != undefined) {
this.name = "video " + numberOfImageContainers; this.name = "video " + numberOfMediaContainers;
} }
else { else {
this.name = "image " + numberOfImageContainers; this.name = "image " + numberOfMediaContainers;
} }
} }
else { else {
@@ -728,14 +723,14 @@
} }
this.id = findLowestAvailableId(); this.id = findLowestAvailableId();
this.imageUrl = imageUrl; this.mediaUrl = mediaUrl;
this.imageHyperlink = imageHyperlink.length == 0 ? undefined : imageHyperlink ; this.imageHyperlink = imageHyperlink.length == 0 ? undefined : imageHyperlink ;
// deep copy default settings // deep copy default settings
this.settings = JSON.parse(JSON.stringify(defaultImageContainerSettings)); this.settings = JSON.parse(JSON.stringify(defaultImageContainerSettings));
zIndexMap.set(String(numberOfImageContainers + numberOfTextContainers), this.id); zIndexMap.set(String(numberOfMediaContainers + numberOfTextContainers), this.id);
this.settings.zIndex = numberOfImageContainers + numberOfTextContainers; this.settings.zIndex = numberOfMediaContainers + numberOfTextContainers;
} }
if (this.youtubeId != undefined) { if (this.youtubeId != undefined) {
@@ -769,8 +764,8 @@
// deep copy default settings // deep copy default settings
this.settings = JSON.parse(JSON.stringify(defaultTextContainerSettings)); this.settings = JSON.parse(JSON.stringify(defaultTextContainerSettings));
zIndexMap.set(String(numberOfTextContainers + numberOfImageContainers), this.id); zIndexMap.set(String(numberOfTextContainers + numberOfMediaContainers), this.id);
this.settings.zIndex = numberOfImageContainers + numberOfTextContainers; this.settings.zIndex = numberOfMediaContainers + numberOfTextContainers;
} }
this.initializeTextContainer(); this.initializeTextContainer();
@@ -798,8 +793,8 @@
<img <img
class="movable ${this.imageHyperlink ? "hyperlinkedImage" : ""}" class="movable ${this.imageHyperlink ? "hyperlinkedImage" : ""}"
id="${this.id}" id="${this.id}"
style="z-index: ${numberOfImageContainers + numberOfTextContainers};" style="z-index: ${numberOfMediaContainers + numberOfTextContainers};"
src="${this.imageUrl}" src="${this.mediaUrl}"
draggable=false draggable=false
></img> ></img>
${loadingFromSave ? `</a>` : ``} ${loadingFromSave ? `</a>` : ``}
@@ -821,11 +816,11 @@
class="movable media" class="movable media"
style="width:640px;height:480px" style="width:640px;height:480px"
> >
<div class="youtubeEmbedCover" style="z-index: ${900 + numberOfImageContainers + numberOfTextContainers}; ${editing ? 'display: block"' : 'display:none;"'}></div> <div class="youtubeEmbedCover" style="z-index: ${900 + numberOfMediaContainers + numberOfTextContainers}; ${editing ? 'display: block"' : 'display:none;"'}></div>
<iframe <iframe
class="youtubeEmbed" class="youtubeEmbed"
id=${this.id + "--embed-frame"} id=${this.id + "--embed-frame"}
style="z-index: ${numberOfImageContainers + numberOfTextContainers}; " style="z-index: ${numberOfMediaContainers + numberOfTextContainers}; "
src="${embedLink}" src="${embedLink}"
/> />
</div> </div>
@@ -1364,7 +1359,7 @@
} }
} }
} }
createImageContainerMenuListing() { createMediaContainerMenuListing() {
let zindex = this.settings.zIndex; let zindex = this.settings.zIndex;
let upButtons = ` let upButtons = `
<div> <div>
@@ -1387,6 +1382,18 @@
</div> </div>
`; `;
// TODO set up the rest of the container option listings (an add and remove hyperlink button should be added) and then embed in the listing if it's an image container
// then, we'll need to make event listeners and functions for adding it / removing it.
// lastly/ revist constructor, as now there will never be such thing as creating a new hyperlinked image from scratch. they'd only be from save
let imageHyperlinkOptions = `
<input
id="newImageContainerHyperlinkInput"
placeholder="(optional) hyperlink URL for image"
style="width: 100%;"
type="text"
/>
`;
document.getElementById("containers").insertAdjacentHTML( document.getElementById("containers").insertAdjacentHTML(
"afterbegin", "afterbegin",
` `
@@ -1550,7 +1557,7 @@
.addEventListener("input", changeContainerShadow, false); .addEventListener("input", changeContainerShadow, false);
/** if this is an media container, settings diverge here */ /** if this is an media container, settings diverge here */
if (this.imageUrl != undefined) { if (this.mediaUrl != undefined) {
document document
.getElementById(this.id + "-settings-mirror-x") .getElementById(this.id + "-settings-mirror-x")
.addEventListener("change", toggleMirrorX, false); .addEventListener("change", toggleMirrorX, false);
@@ -1663,7 +1670,7 @@
/** if this is a media container, settings diverge here */ /** if this is a media container, settings diverge here */
/** BORDER */ /** BORDER */
if (this.imageUrl?.includes("youtube.com") || this.imageUrl?.includes("youtu.be")) { if (this.mediaUrl?.includes("youtube.com") || this.mediaUrl?.includes("youtu.be")) {
// apply border to iframe and cover element rather than containing div // apply border to iframe and cover element rather than containing div
document.getElementById(this.id).children[0].style.borderColor = document.getElementById(this.id).children[0].style.borderColor =
settings.borderColor; settings.borderColor;
@@ -1689,7 +1696,7 @@
} }
/** MEDIA MIRRORING */ /** MEDIA MIRRORING */
if (this.imageUrl != undefined) { if (this.mediaUrl != undefined) {
let invertX = settings.invertX; let invertX = settings.invertX;
let invertY = settings.invertY; let invertY = settings.invertY;
@@ -1877,7 +1884,7 @@
*/ */
ensureBackwardsCompatibility() { ensureBackwardsCompatibility() {
let currentSettings; let currentSettings;
if (this.imageUrl != undefined) { if (this.mediaUrl != undefined) {
currentSettings = Object.keys(defaultImageContainerSettings); currentSettings = Object.keys(defaultImageContainerSettings);
} }
else { else {
@@ -1890,7 +1897,7 @@
console.log("found missing option: "); console.log("found missing option: ");
console.log(currentSettings[i]); console.log(currentSettings[i]);
if (this.imageUrl != undefined) { if (this.mediaUrl != undefined) {
this.settings[currentSettings[i]] = this.settings[currentSettings[i]] =
defaultImageContainerSettings[currentSettings[i]]; defaultImageContainerSettings[currentSettings[i]];
} }
@@ -2008,7 +2015,8 @@
containerMapValues[i].y, containerMapValues[i].y,
containerMapValues[i].height, containerMapValues[i].height,
containerMapValues[i].width, containerMapValues[i].width,
containerMapValues[i].imageUrl, containerMapValues[i].imageUrl ? // ensure backwards compatibility after field name changed
containerMapValues[i].imageUrl : containerMapValues[i].mediaUrl,
containerMapValues[i].settings, containerMapValues[i].settings,
containerMapValues[i].sections, containerMapValues[i].sections,
containerMapValues[i].youtubeId, containerMapValues[i].youtubeId,
@@ -2070,12 +2078,12 @@
// render listings of existing containers in menu, in order of z-index // render listings of existing containers in menu, in order of z-index
for (let i = 1; i <= numberTotalContainers; i++) { for (let i = 1; i <= numberTotalContainers; i++) {
let currentContainer = containerDataMap.get(zIndexMap.get(String(i))); let currentContainer = containerDataMap.get(zIndexMap.get(String(i)));
if (currentContainer.imageUrl == undefined) { if (currentContainer.mediaUrl == undefined) {
currentContainer.createTextContainerMenuListing(); currentContainer.createTextContainerMenuListing();
currentContainer.loadBookmarkListings(); currentContainer.loadBookmarkListings();
} }
else { else {
currentContainer.createImageContainerMenuListing(); currentContainer.createMediaContainerMenuListing();
} }
currentContainer.addSettingsMenuEventListeners(); currentContainer.addSettingsMenuEventListeners();
} }
@@ -2354,7 +2362,7 @@
let containerName = document.getElementById( let containerName = document.getElementById(
"newImageContainerNameInput" "newImageContainerNameInput"
).value; ).value;
let imageUrl = document.getElementById( let mediaUrl = document.getElementById(
"newImageContainerUrlInput" "newImageContainerUrlInput"
).value; ).value;
let imageHyperlink = document.getElementById( let imageHyperlink = document.getElementById(
@@ -2371,14 +2379,14 @@
undefined, undefined,
undefined, undefined,
undefined, undefined,
imageUrl, mediaUrl,
undefined, undefined,
undefined, undefined,
undefined, undefined,
imageHyperlink imageHyperlink
); );
container.createImageContainerMenuListing(); container.createMediaContainerMenuListing();
container.addSettingsMenuEventListeners(); container.addSettingsMenuEventListeners();
updateContainerListingOrder(); updateContainerListingOrder();
} }
@@ -2558,7 +2566,7 @@
String(newY + "px"), String(newY + "px"),
container.height, container.height,
container.width, container.width,
container.imageUrl, container.mediaUrl,
newSettings, newSettings,
container.sections, container.sections,
container.youtubeId, container.youtubeId,
@@ -2566,11 +2574,11 @@
); );
zIndexMap.set(numberTotalContainers + 1, clone.id); zIndexMap.set(numberTotalContainers + 1, clone.id);
if (clone.imageUrl == undefined) { if (clone.mediaUrl == undefined) {
clone.createTextContainerMenuListing(); clone.createTextContainerMenuListing();
} }
else { else {
clone.createImageContainerMenuListing(); clone.createMediaContainerMenuListing();
} }
clone.addSettingsMenuEventListeners(); clone.addSettingsMenuEventListeners();
@@ -2581,12 +2589,12 @@
let containerId = buttonPressed.id.split("--")[0]; let containerId = buttonPressed.id.split("--")[0];
let container = containerDataMap.get(containerId); let container = containerDataMap.get(containerId);
if (container.imageUrl == undefined) { if (container.mediaUrl == undefined) {
numberOfTextContainers--; numberOfTextContainers--;
clearInterval(container.clockIntervalId); clearInterval(container.clockIntervalId);
} }
else { else {
numberOfImageContainers--; numberOfMediaContainers--;
} }
// delete from zindex map and ripple zIndexes down // delete from zindex map and ripple zIndexes down
@@ -3074,7 +3082,7 @@
container.settings.borderWidth = borderChange.target.value; container.settings.borderWidth = borderChange.target.value;
if (container.imageUrl?.includes("youtube.com") || container.imageUrl?.includes("youtu.be")) { if (container.mediaUrl?.includes("youtube.com") || container.mediaUrl?.includes("youtu.be")) {
document.getElementById(containerId).children[0].style.borderWidth = document.getElementById(containerId).children[0].style.borderWidth =
container.settings.borderWidth + "px"; container.settings.borderWidth + "px";
document.getElementById(containerId).children[1].style.borderWidth = document.getElementById(containerId).children[1].style.borderWidth =
@@ -3091,7 +3099,7 @@
container.settings.borderRadius = radiusChange.target.value; container.settings.borderRadius = radiusChange.target.value;
if (container.imageUrl?.includes("youtube.com") || container.imageUrl?.includes("youtu.be")) { if (container.mediaUrl?.includes("youtube.com") || container.mediaUrl?.includes("youtu.be")) {
document.getElementById(containerId).children[0].style.borderRadius = document.getElementById(containerId).children[0].style.borderRadius =
container.settings.borderRadius + "px"; container.settings.borderRadius + "px";
document.getElementById(containerId).children[1].style.borderRadius = document.getElementById(containerId).children[1].style.borderRadius =
@@ -3108,7 +3116,7 @@
container.settings.borderColor = colorChange.target.value; container.settings.borderColor = colorChange.target.value;
if (container.imageUrl?.includes("youtube.com") || container.imageUrl?.includes("youtu.be")) { if (container.mediaUrl?.includes("youtube.com") || container.mediaUrl?.includes("youtu.be")) {
document.getElementById(containerId).children[0].style.borderColor = document.getElementById(containerId).children[0].style.borderColor =
container.settings.borderColor; container.settings.borderColor;
document.getElementById(containerId).children[1].style.borderColor = document.getElementById(containerId).children[1].style.borderColor =