diff --git a/startpage.html b/startpage.html
index 3cffafc..2931c92 100644
--- a/startpage.html
+++ b/startpage.html
@@ -66,8 +66,8 @@
.youtubeEmbed {
width: 100%;
height: 100%;
- position:absolute;
- border: none;
+ position: absolute;
+ display: inline;
}
.youtubeEmbedCover {
width: 100%;
@@ -76,6 +76,7 @@
position: absolute;
}
+
.section {
margin-top: 0rem;
}
@@ -433,19 +434,19 @@
@@ -736,7 +737,7 @@
this.initializeYoutubeContainer();
}
else {
- this.initializeImageContainer();
+ this.initializeImageContainer(loadingFromSave);
}
}
else {
@@ -772,7 +773,7 @@
}
this.applySettings();
- this.addContainerEventListeners()
+ this.addContainerEventListeners();
// and save
containerDataMap.set(this.id, this);
@@ -782,23 +783,23 @@
/**
* creates image element, applySettings() will do the rest
*/
- initializeImageContainer() {
+ initializeImageContainer(loadingFromSave) {
document.body.insertAdjacentHTML(
"beforeend",
`
- ${this.imageHyperlink ?
- ``
+ ${loadingFromSave ?
+ ``
: ``}
- ${this.imageHyperlink ? `` : ``}
+ >
+ ${loadingFromSave ? `` : ``}
`
- );
+ );
}
initializeYoutubeContainer() {
@@ -1654,17 +1655,35 @@
"px " +
settings.shadowRgba;
- /** BORDER */
- document.getElementById(this.id).style.borderRadius =
- settings.borderRadius + "px";
- document.getElementById(this.id).style.borderStyle = "solid";
- document.getElementById(this.id).style.borderWidth =
- settings.borderWidth + "px";
- document.getElementById(this.id).style.borderColor =
- settings.borderColor;
-
+ /** if this is a media container, settings diverge here */
- /** if this is a media container, settings diverge */
+ /** BORDER */
+ if (this.imageUrl?.includes("youtube.com") || this.imageUrl?.includes("youtu.be")) {
+ // apply border to iframe and cover element rather than containing div
+ document.getElementById(this.id).children[0].style.borderColor =
+ settings.bordeColor;
+ document.getElementById(this.id).children[1].style.borderColor =
+ settings.bordeColor;
+ document.getElementById(this.id).children[0].style.borderWidth =
+ settings.borderWidth + "px";
+ document.getElementById(this.id).children[1].style.borderWidth =
+ settings.borderWidth + "px";
+ document.getElementById(this.id).children[0].style.borderRadius =
+ settings.borderRadius + "px";
+ document.getElementById(this.id).children[1].style.borderRadius =
+ settings.borderRadius + "px";
+ }
+ else {
+ document.getElementById(this.id).style.borderRadius =
+ settings.borderRadius + "px";
+ document.getElementById(this.id).style.borderStyle = "solid";
+ document.getElementById(this.id).style.borderWidth =
+ settings.borderWidth + "px";
+ document.getElementById(this.id).style.borderColor =
+ settings.borderColor;
+ }
+
+ /** MEDIA MIRRORING */
if (this.imageUrl != undefined) {
let invertX = settings.invertX;
let invertY = settings.invertY;
@@ -1678,11 +1697,11 @@
else if (invertY) {
document.getElementById(this.id).classList.toggle("invertedY");
}
-
return;
}
-
+
/** apply text-container-only customizations */
+
/** FONT */
if (settings.fontCode != "") {
document.head.insertAdjacentHTML(
@@ -1747,6 +1766,8 @@
addContainerEventListeners() {
let container = document.getElementById(this.id);
+ console.log("adding event listeners for " + this.id);
+
// make element movable + resizable
container.addEventListener(
"mousedown",
@@ -1991,7 +2012,8 @@
containerMapValues[i].imageUrl,
containerMapValues[i].settings,
containerMapValues[i].sections,
- containerMapValues[i].youtubeId
+ containerMapValues[i].youtubeId,
+ containerMapValues[i].imageHyperlink
));
}
@@ -2135,7 +2157,78 @@
document.getElementById("editToggle").innerHTML = "edit page";
}
}
-
+
+ /** handles the revealing/concealing of elements part of toggling edit mode */
+ function toggleEditingElements(show) {
+ const editButton = document.getElementById("editToggle");
+ const settingsContainer = document.getElementById("settingsContainer");
+
+ /** when editing-mode is enabled, */
+ if (show) {
+ editButton.innerHTML = "save + stop editing";
+
+ // reveal settings container
+ settingsContainer.classList.remove("hidden");
+
+ // change cursor on movable elements to indicate grabbable
+ let movableElements = document.getElementsByClassName("movable");
+ for (let i = 0; i < movableElements.length; i++) {
+ // mmovableElements[i].classList.add("grabbable");
+ movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab";
+ }
+
+ // take hyperlinked images out of anchor tags to enable moving/resizing
+ let hyperlinkedImages = document.getElementsByClassName("hyperlinkedImage");
+ let parent, clone;
+ for (let i = 0; i < hyperlinkedImages.length; i++) {
+ parent = hyperlinkedImages[i].parentElement;
+ clone = hyperlinkedImages[i].cloneNode();
+ hyperlinkedImages[i].remove();
+ parent.parentNode.insertBefore(clone, parent);
+ parent.remove();
+ containerDataMap.get(clone.id).addContainerEventListeners();
+ }
+
+ // cover any youtube iframes to enable moving/resizing
+ let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
+ for (let i = 0; i < embeddedVideos.length; i++) {
+ embeddedVideos[i].style.display = "block";
+ }
+
+ } else {
+ // remove grabbable cursor
+ let movableElements = document.getElementsByClassName("movable");
+ for (let i = 0; i < movableElements.length; i++) {
+ movableElements[i].style.cursor = "";
+ }
+
+ // activate links on hyperlinked images
+ let hyperlinkedImages = document.getElementsByClassName("hyperlinkedImage");
+ let link, clone;
+ for (let i = 0; i < hyperlinkedImages.length; i++) {
+ containerId = hyperlinkedImages[i].id;
+ link = containerDataMap.get(containerId).imageHyperlink;
+ clone = hyperlinkedImages[i].cloneNode();
+
+ hyperlinkedImages[i].insertAdjacentHTML("afterend",
+ ``
+ );
+
+ hyperlinkedImages[i].remove();
+ document.getElementById(containerId + "--hyperlink").appendChild(clone);
+ }
+
+ // remove any youtube iframe covers
+ let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
+ for (let i = 0; i < embeddedVideos.length; i++) {
+ embeddedVideos[i].style.display = "none";
+ }
+
+ // hide the settings container
+ settingsContainer.classList.add("hidden");
+ }
+ }
+
function toggleExpandableMenu(toggleButton) {
toggleButton.classList.toggle("active");
let menuContent = toggleButton.nextElementSibling;
@@ -2175,55 +2268,6 @@
keepImageRatio = !document.getElementById("imageRatioToggle").checked;
}
- /** handles the revealing/concealing of elements part of toggling edit mode */
- function toggleEditingElements(show) {
- const editButton = document.getElementById("editToggle");
- const settingsContainer = document.getElementById("settingsContainer");
-
- /** when editing-mode is enabled, */
- if (show) {
- editButton.innerHTML = "save + stop editing";
-
- // reveal settings container
- settingsContainer.classList.remove("hidden");
-
- // change cursor on movable elements to indicate grabbable
- let movableElements = document.getElementsByClassName("movable");
- for (let i = 0; i < movableElements.length; i++) {
- // mmovableElements[i].classList.add("grabbable");
- movableElements[i].style.cursor = cursors.grab ? 'url("' + cursors.grab + '"), grab' : "grab";
- }
-
- // disable any hyperlinks on images to enable movement
- let hyperlinkedImages = document.getElementsByClassName("imageHyperlink");
-
- // TODO todo : finish this / re-enable hyperlinks
-
-
- // cover any youtube iframes to enable moving/resizing
- let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
- for (let i = 0; i < embeddedVideos.length; i++) {
- embeddedVideos[i].style.display = "block";
- }
-
- } else {
- // remove grabbable cursor
- let movableElements = document.getElementsByClassName("movable");
- for (let i = 0; i < movableElements.length; i++) {
- movableElements[i].style.cursor = "";
- }
-
- // cover any youtube iframes to enable moving/resizing
- let embeddedVideos = document.getElementsByClassName("youtubeEmbedCover");
- for (let i = 0; i < embeddedVideos.length; i++) {
- embeddedVideos[i].style.display = "none";
- }
-
- // hide the settings container
- settingsContainer.classList.add("hidden");
- }
- }
-
function toggleWallpaperRepeat(checkbox) {
repeatWallpaper = this.checked;
if (repeatWallpaper) {
@@ -2280,6 +2324,7 @@
undefined,
undefined,
undefined,
+ undefined,
undefined
);
@@ -2500,7 +2545,8 @@
container.imageUrl,
newSettings,
container.sections,
- container.youtubeId
+ container.youtubeId,
+ container.imageHyperlink
);
zIndexMap.set(numberTotalContainers + 1, clone.id);
@@ -3011,24 +3057,51 @@
let container = containerDataMap.get(containerId);
container.settings.borderWidth = borderChange.target.value;
- document.getElementById(containerId).style.borderWidth =
- container.settings.borderWidth + "px";
+
+ if (container.imageUrl?.includes("youtube.com") || container.imageUrl?.includes("youtu.be")) {
+ document.getElementById(containerId).children[0].style.borderWidth =
+ container.settings.borderWidth + "px";
+ document.getElementById(containerId).children[0].style.borderWidth =
+ container.settings.borderWidth + "px";
+ }
+ else {
+ document.getElementById(containerId).style.borderWidth =
+ container.settings.borderWidth + "px";
+ }
}
function changeContainerBorderRadius(radiusChange) {
let containerId = radiusChange.target.id.split("-settings")[0];
let container = containerDataMap.get(containerId);
container.settings.borderRadius = radiusChange.target.value;
- document.getElementById(containerId).style.borderRadius =
- container.settings.borderRadius + "px";
+
+ if (container.imageUrl?.includes("youtube.com") || container.imageUrl?.includes("youtu.be")) {
+ document.getElementById(containerId).children[0].style.borderRadius =
+ container.settings.borderRadius + "px";
+ document.getElementById(containerId).children[1].style.borderRadius =
+ container.settings.borderRadius + "px";
+ }
+ else {
+ document.getElementById(containerId).style.borderRadius =
+ container.settings.borderRadius + "px";
+ }
}
function changeContainerBorderColor(colorChange) {
let containerId = colorChange.target.id.split("-settings")[0];
let container = containerDataMap.get(containerId);
container.settings.borderColor = colorChange.target.value;
- document.getElementById(containerId).style.borderColor =
- container.settings.borderColor;
+
+ if (container.imageUrl?.includes("youtube.com") || container.imageUrl?.includes("youtu.be")) {
+ document.getElementById(containerId).children[0].style.borderColor =
+ container.settings.borderColor;
+ document.getElementById(containerId).children[1].style.borderColor =
+ container.settings.borderColor;
+ }
+ else {
+ document.getElementById(containerId).style.borderColor =
+ container.settings.borderColor;
+ }
}
// CLOCK
function toggleDate(checkboxChanged) {