hyperlinked images work / working on youtube embed borders

1 files changed, 151 insertions, 78 deletions

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 @@
             <h2 class="menuHeader">add image to page</h2>
             <input
               id="newImageContainerNameInput"
-              placeholder="(optional) image name"
+              placeholder="(optional) layer name"
               style="width: 100%;"
               type="text"
             />
             <input
               id="newImageContainerUrlInput"
-              placeholder="direct URL to image"
+              placeholder="image / youtube URL"
               style="width: 100%;"
               type="text"
             />
             <input
               id="newImageContainerHyperlinkInput"
-              placeholder="(optional) URL to hyperlink image"
+              placeholder="(optional) hyperlink URL for image"
               style="width: 100%;"
               type="text"
             />
@@ -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 ?
-            `<a class="imageHyperlink hidden" href="` + this.imageHyperlink + `">`
+          ${loadingFromSave ?
+            `<a id="` + this.id + `--hyperlink" href="` + this.imageHyperlink + `">`
           : ``}
           <img
-            class="movable youtubeEmbed"
+            class="movable ${this.imageHyperlink ? "hyperlinkedImage" : ""}"
             id="${this.id}"
             style="z-index: ${numberOfImageContainers + numberOfTextContainers};"
             src="${this.imageUrl}"
             draggable=false
-          />
-          ${this.imageHyperlink ? `</a>` : ``}
+          ></img>
+          ${loadingFromSave ? `</a>` : ``}
         `
-        );
+        ); 
       }
 
       initializeYoutubeContainer() {
@@ -1654,17 +1655,35 @@
           "px " +
           settings.shadowRgba;
 
+        /** if this is a media container, settings diverge here */
+
         /** 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.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;
+        } 
 
-        /** if this is a media container, settings diverge */
+        /** 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,45 +2157,6 @@
         document.getElementById("editToggle").innerHTML = "edit page";
       }
     }
-  
-    function toggleExpandableMenu(toggleButton) {
-      toggleButton.classList.toggle("active");
-      let menuContent = toggleButton.nextElementSibling;
-
-      if (menuContent.style.display === "block") {
-        menuContent.style.display = "none";
-        toggleButton.children[1].innerHTML = "+";
-      } else {
-        menuContent.style.display = "block";
-        toggleButton.children[1].innerHTML = "-";
-      }
-    }
-
-    function collapseLayerListings() {
-      let listings = document.getElementsByClassName("containerListing");
-
-      for (let i = 0; i < listings.length; i++) {
-        // first child of a container listing is always the menu toggle
-        if (listings[i].children[0].classList.contains("active")) {
-          toggleExpandableMenu(listings[i].children[0]);
-        }
-      }
-    } 
-
-    function expandLayerListings() {
-      let listings = document.getElementsByClassName("containerListing");
-
-      for (let i = 0; i < listings.length; i++) {
-        // first child of a container listing is always the menu toggle
-        if (!listings[i].children[0].classList.contains("active")) {
-          toggleExpandableMenu(listings[i].children[0]);
-        }
-      }
-    }
-
-    function toggleImageRatio() {
-      keepImageRatio = !document.getElementById("imageRatioToggle").checked;
-    }
 
     /** handles the revealing/concealing of elements part of toggling edit mode */
     function toggleEditingElements(show) {
@@ -2194,11 +2177,17 @@
           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
-
+        // 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");
@@ -2213,7 +2202,23 @@
           movableElements[i].style.cursor = "";
         }
 
-         // cover any youtube iframes to enable moving/resizing
+        // 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",
+            `<a id="` + containerId + `--hyperlink" href="` + link + `"></a>`
+          );
+
+          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";
@@ -2224,6 +2229,45 @@
       }
     }
 
+    function toggleExpandableMenu(toggleButton) {
+      toggleButton.classList.toggle("active");
+      let menuContent = toggleButton.nextElementSibling;
+
+      if (menuContent.style.display === "block") {
+        menuContent.style.display = "none";
+        toggleButton.children[1].innerHTML = "+";
+      } else {
+        menuContent.style.display = "block";
+        toggleButton.children[1].innerHTML = "-";
+      }
+    }
+
+    function collapseLayerListings() {
+      let listings = document.getElementsByClassName("containerListing");
+
+      for (let i = 0; i < listings.length; i++) {
+        // first child of a container listing is always the menu toggle
+        if (listings[i].children[0].classList.contains("active")) {
+          toggleExpandableMenu(listings[i].children[0]);
+        }
+      }
+    } 
+
+    function expandLayerListings() {
+      let listings = document.getElementsByClassName("containerListing");
+
+      for (let i = 0; i < listings.length; i++) {
+        // first child of a container listing is always the menu toggle
+        if (!listings[i].children[0].classList.contains("active")) {
+          toggleExpandableMenu(listings[i].children[0]);
+        }
+      }
+    }
+
+    function toggleImageRatio() {
+      keepImageRatio = !document.getElementById("imageRatioToggle").checked;
+    }
+
     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) {