Merge pull request #107 from hlxsites/hotspotblock

Add hotspot block that can support text, image and video

blocks/hotspot/hotspot.css

@@ -0,0 +1,74 @@
+/* CSS: styles.css */
+.block.hotspot {
+    position: relative;
+    background: none;
+}
+
+.block.hotspot img {
+    max-width: 100%;
+    width: auto;
+    height: auto;
+}
+
+.block.hotspot > div.hotspot {
+    background: red; /* Temporary for visibility */
+    z-index: 10; /* Ensure it is above the image */
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    border: 3px solid white;
+    position: absolute;
+    cursor: pointer;
+}
+
+.block.hotspot img,
+.block.hotspot video {
+    max-width: 100%;
+    width: auto;
+    height: auto;
+}
+
+.block.hotspot > div.hotspot .hotspot-content {
+    display: none; /* Hidden by default */
+    position: absolute;
+    top: -10px; /* Adjust positioning as needed */
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px;
+    border-radius: 5px;
+    z-index: 15;
+    width: 200px; /* Adjust size as needed */
+}
+
+.block.hotspot > div.hotspot .hotspot-content.bgborder {
+    background: white;
+    border: 1px solid white;
+}
+
+.block.hotspot > div.hotspot.onclick .hotspot-content,
+.block.hotspot > div.hotspot:hover .hotspot-content {
+    display: block; /* Show on click or hover */
+}
+
+.block.hotspot > div.hotspot .hotspot-content img,
+.block.hotspot > div.hotspot .hotspot-content video {
+    width: 400px;
+    height: auto;
+    max-width: unset;
+}
+
+.block.hotspot > div.hotspot .hotspot-content video {
+    max-height: 150px; /* Adjust as needed */
+}
+
+.block.hotspot > div.hotspot:hover::after,
+.block.hotspot > div.hotspot.onclick::after {
+    opacity: 1;
+}
+
+.block.hotspot svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+}

blocks/hotspot/hotspot.js

@@ -0,0 +1,54 @@
+export default function decorate(block) {
+  [...block.children].forEach((row, r) => {
+    if (r > 0) {
+      const content = [...row.children][0].textContent.trim();
+      const variant = block.classList.value;
+      const isImageVariant = variant.includes('image') && !(variant.includes('video'));
+      const isVideoVariant = variant.includes('video') && !(variant.includes('image'));
+      const isTextVariant = !isImageVariant && !isVideoVariant;
+
+      const nexticondiv = document.createElement('div');
+      nexticondiv.classList.add('hotspot'); // Added class for CSS targeting
+      nexticondiv.style.left = [...row.children][1].textContent;
+      nexticondiv.style.top = [...row.children][2].textContent;
+      nexticondiv.setAttribute('data', content);
+
+      // Create content display element
+      const contentContainer = document.createElement('div');
+      contentContainer.classList.add('hotspot-content');
+
+      if (isImageVariant) {
+        const img = document.createElement('img');
+        img.src = content;
+        contentContainer.appendChild(img);
+      } else if (isVideoVariant) {
+        const video = document.createElement('div');
+        video.innerHTML = `<div class="embed-default">
+            <iframe src=${content} from allow="encrypted-media" loading="lazy">
+            </iframe>
+            </div>`;
+        // above code can be updated for video controls such as autoplay, loop, etc.
+        contentContainer.appendChild(video);
+      } else if (isTextVariant) {
+        contentContainer.textContent = content; // Display text
+        contentContainer.classList.add('bgborder');
+      }
+
+      // Append content container to hotspot div
+      nexticondiv.appendChild(contentContainer);
+      nexticondiv.addEventListener('click', () => {
+      // Hide content of all other hotspots
+        document.querySelectorAll('.hotspot').forEach((hotspot) => {
+          if (hotspot !== nexticondiv) {
+            hotspot.classList.remove('onclick');
+          }
+        });
+        // Toggle the current hotspot content
+        nexticondiv.classList.toggle('onclick');
+      });
+
+      row.after(nexticondiv);
+      row.remove();
+    }
+  });
+}