From c20c861b60491f41ca81e3614b61786ce96ac69d Mon Sep 17 00:00:00 2001
From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com>
Date: Fri, 10 May 2024 07:00:26 -0700
Subject: [PATCH] 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
---
 .../features/firefly/firefly-masonry.js       | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/creativecloud/features/firefly/firefly-masonry.js b/creativecloud/features/firefly/firefly-masonry.js
index 18cdb3ed5..0a158b227 100644
--- 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,6 +171,15 @@ 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: [],
@@ -177,23 +187,21 @@ export default async function setMultiImageMarquee(el) {
   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