MWPW-147905-Move image span value outside of alt value (#290)

* Update firefly-masonry.js * Update firefly-masonry.js * fix lint issues * Update firefly-masonry.js * Update firefly-masonry.js * incorporate review comments
adobecom · May 10, 2024 · c20c861 · c20c861
1 parent 2418e60
commit c20c861
Showing 1 changed file with 16 additions and 8 deletions.
diff --git a/creativecloud/features/firefly/firefly-masonry.js b/creativecloud/features/firefly/firefly-masonry.js
@@ -41,7 +41,7 @@ function getImgSrc(pic, viewport = '') {
 }
 
 async function createEmbellishment(allP, media, mediaMobile, ic, mode, interactiveMode) {
-  const [promptText, buttonText] = allP[4].innerText.split('|');
+  const [promptText, buttonText] = allP[3].innerText.split('|');
   const fireflyPrompt = await createPromptField(`${promptText}`, `${buttonText}`, `ff-masonry, ${interactiveMode}`);
   fireflyPrompt.classList.add('ff-masonry-prompt');
   const enticementText = allP[0].textContent.trim();
@@ -87,7 +87,8 @@ function processMasonryMedia(gridDiv, allP, mediaDetail) {
   handleTouchDevice(mediaContainer, 2000);
 
   const spanWidth = mediaDetail.spans[lastIndex];
-  mediaContainer.classList.add(`ff-grid-${spanWidth.trim().replace(' ', '-')}`);
+  const spanClass = spanWidth ? `${spanWidth?.trim().replace(' ', '-')}` : 'span-4';
+  mediaContainer.classList.add(`ff-grid-${spanClass}`);
   gridDiv.appendChild(mediaContainer);
 }
 
@@ -170,30 +171,37 @@ export default async function setMultiImageMarquee(el) {
   const ic = el.querySelector('.interactive-container');
   const mediaElements = el.querySelector('.asset');
   const allP = mediaElements.querySelectorAll('p:not(:empty)');
+  const allLi = mediaElements.querySelectorAll('li');
+  const spanElements = [];
+  [...allLi].forEach((li) => {
+    const allSpans = li.querySelectorAll('span');
+    [...allSpans].forEach((span) => {
+      const spanClass = span?.classList[1]?.split('icon-');
+      if (spanClass?.length > 1) spanElements.push(spanClass[1]);
+    });
+  });
   ic.innerHTML = '';
   const mediaDetail = {
     imgSrc: [], prompt: [], href: [], index: 0, spans: [], alt: [],
   };
   const media = createTag('div', { class: 'asset grid-layout' });
   const mediaMobile = createTag('div', { class: 'asset mobile-only' });
   const gridDiv = createTag('div', { class: 'grid-container' });
+  let spanCount = 0;
   [...allP].forEach((s) => {
     if (s.querySelector('picture')) {
       const src = getImgSrc(s);
       const prompt = allP[[...allP].indexOf(s) + 1].innerText;
       const { href } = allP[[...allP].indexOf(s) + 1].querySelector('a');
-      let [, alt, span] = s.querySelector('img').getAttribute('alt').split('|');
-      if (!alt && !span) {
-        alt = '';
-        span = s.querySelector('img').getAttribute('alt');
-      }
+      const alt = s.querySelector('img').getAttribute('alt');
       mediaDetail.imgSrc.push(src);
       mediaDetail.prompt.push(prompt);
       mediaDetail.href.push(href);
-      mediaDetail.spans.push(span);
+      mediaDetail.spans.push(spanElements[spanCount]);
       mediaDetail.alt.push(alt);
       // Desktop and Tablet
       processMasonryMedia(gridDiv, allP, mediaDetail);
+      spanCount += 1;
     }
   });
   // For grid view