Update templates-listing block

Author: timwlee

blocks/templates-listing/templates-listing.css

@@ -71,7 +71,6 @@
   transform-style: preserve-3d;
   transition: transform 0.6s ease-in-out;
   border-radius: 10px;
-  /* overflow: hidden; */
 }
 
 .templates-listing .cards-card-image-flip .flip-inner.flipped {
@@ -106,7 +105,7 @@
 
 /* === Back side of the image (resources) === */
 .templates-listing .cards-card-image-flip .flip-back {
-  background-color: #333333; /* <- Dark background fix */
+  background-color: #333333;
   transform: rotateY(180deg);
   display: flex;
   justify-content: center;
@@ -123,7 +122,7 @@
   height: 100%;
   gap: 10px;
   color: #fff;
-  padding: 1rem;
+  padding: 1.5em;
 }
 
 .templates-listing .cards-card-image-flip .flip-back .resources .tags {
@@ -158,7 +157,7 @@
 .templates-listing .cards-card-image-flip .flip-back .resources img {
   width: 60px;
   height: auto;
-  filter: brightness(0) invert(1); /* makes the icon pop on dark background */
+  filter: brightness(0) invert(1);
 }
 
 /* === Hide legacy resources section === */
@@ -177,3 +176,56 @@
     height: 475px;
   }
 }
+
+/* === Modal Styles === */
+.tag-modal {
+  display: none;
+  position: fixed;
+  z-index: 9999;
+  left: 0; top: 0; right: 0; bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  justify-content: center;
+  align-items: center;
+}
+
+.tag-modal.show {
+  display: flex;
+}
+
+.tag-modal-content {
+  background: white;
+  padding: 2em;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 90%;
+  position: relative;
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.tag-modal-close {
+  position: absolute;
+  top: 0.5em;
+  right: 1em;
+  font-size: 1.5em;
+  font-weight: bold;
+  cursor: pointer;
+  color: #999;
+}
+
+.tag-modal-close:hover {
+  color: #000;
+}
+
+.tag-modal-body img {
+  margin-top: 1em;
+  max-width: 100%;
+  border-radius: 6px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.tag-modal-body a {
+  word-break: break-all;
+  font-size: 0.9rem;
+}

blocks/templates-listing/templates-listing.js

@@ -1,9 +1,29 @@
+/* eslint-disable */
 import { createOptimizedPicture } from '../../scripts/aem.js';
 
 export default async function decorate(block) {
   const spreadsheetLink = block.querySelector('a')?.href;
   block.textContent = '';
 
+  // Create and append a global modal to the body (once)
+  const tagModal = document.createElement('div');
+  tagModal.className = 'tag-modal';
+  tagModal.innerHTML = `
+    <div class="tag-modal-content">
+      <span class="tag-modal-close">&times;</span>
+      <div class="tag-modal-body">
+        <p>Loading...</p>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(tagModal);
+
+  // Close modal on clicking close button
+  tagModal.querySelector('.tag-modal-close').addEventListener('click', () => {
+    tagModal.classList.remove('show');
+    tagModal.querySelector('.tag-modal-body').innerHTML = '<p>Loading...</p>';
+  });
+
   async function fetchJson(link) {
     const response = await fetch(link);
     if (response.ok) {
@@ -19,17 +39,14 @@ export default async function decorate(block) {
       const displayAdAssets = [];
       const metaAdAssets = [];
 
-      // Email assets
       if (item.Email1Pod) emailAssets.push({ key: 'Email1Pod', value: item.Email1Pod });
       if (item.Email2Pod) emailAssets.push({ key: 'Email2Pod', value: item.Email2Pod });
       if (item.Email3Pod) emailAssets.push({ key: 'Email3Pod', value: item.Email3Pod });
 
-      // Display Ad assets
       if (item.DisplayAd300x600) displayAdAssets.push({ key: 'DisplayAd300x600', value: item.DisplayAd300x600 });
       if (item.DisplayAd300x250) displayAdAssets.push({ key: 'DisplayAd300x250', value: item.DisplayAd300x250 });
       if (item.DisplayAd970x250) displayAdAssets.push({ key: 'DisplayAd970x250', value: item.DisplayAd970x250 });
 
-      // Meta Ad assets
       if (item.MetaAd1x1) metaAdAssets.push({ key: 'MetaAd1x1', value: item.MetaAd1x1 });
       if (item.MetaAd4x5) metaAdAssets.push({ key: 'MetaAd4x5', value: item.MetaAd4x5 });
       if (item.MetaAd9x16) metaAdAssets.push({ key: 'MetaAd9x16', value: item.MetaAd9x16 });
@@ -46,8 +63,6 @@ export default async function decorate(block) {
   function createCards(data) {
     const ul = document.createElement('ul');
 
-    console.log("data: ", data);
-
     data.forEach((item) => {
       const hasDisplayAd = item.DisplayAd === 'true';
       const hasEmail = item.Email === 'true';
@@ -83,7 +98,7 @@ export default async function decorate(block) {
                   ` : ''}
 
                   ${item.displayAdAssets.length ? `
-                    <div template-type>
+                    <div class="template-type">
                       Display Ad
                       <div class="tags">
                         ${item.displayAdAssets.map((asset) => `<span class="tag tag-display" title="${asset.key}" data-src="${asset.value}">${asset.key}</span>`).join('')}
@@ -92,15 +107,14 @@ export default async function decorate(block) {
                   ` : ''}
 
                   ${item.metaAdAssets.length ? `
-                    <div template-type>
+                    <div class="template-type">
                       Meta Ad
                       <div class="tags">
                         ${item.metaAdAssets.map((asset) => `<span class="tag tag-meta" title="${asset.key}" data-src="${asset.value}">${asset.key}</span>`).join('')}
                       </div>
                     </div>
                   ` : ''}
                 </div>
-
               </div>
             </div>
           </div>
@@ -115,20 +129,45 @@ export default async function decorate(block) {
         </div>
       `;
 
+      // Flip interaction
       li.addEventListener('click', () => {
-        // Unflip any currently flipped cards
         const allFlipped = ul.querySelectorAll('.flip-inner.flipped');
         allFlipped.forEach((flipped) => {
           if (flipped !== li.querySelector('.flip-inner')) {
             flipped.classList.remove('flipped');
           }
         });
 
-        // Toggle flip on the current card
         const flipContainer = li.querySelector('.flip-inner');
         flipContainer.classList.toggle('flipped');
       });
 
+      // Modal tag interaction
+      li.querySelectorAll('.tag').forEach((tagEl) => {
+        tagEl.addEventListener('click', (e) => {
+          e.stopPropagation();
+      
+          const assetTitle = tagEl.getAttribute('title');
+          const assetSrc = tagEl.getAttribute('data-src');
+      
+          const modalBody = tagModal.querySelector('.tag-modal-body');
+          modalBody.innerHTML = `
+            <h3>${assetTitle}</h3>
+            ${
+              assetSrc.match(/\.(jpg|jpeg|png|gif|webp)$/i)
+                ? `<img src="${assetSrc}" 
+                        alt="${assetTitle}" 
+                        loading="eager"
+                        decoding="async"
+                        style="max-width: 100%; margin-top: 1em;">`
+                : `<p><em>Preview unavailable</em></p>`
+            }
+          `;
+      
+          tagModal.classList.add('show');
+        });
+      });
+
       ul.append(li);
     });