Updating authoring for interactive elements (enticement, selector tra…

…y and Prompt bar) (#139) * update authoring for interactive elements * add cursor pointer * fix interactive elem modes * fix codeql error * fix cursor for generative fill button * remove pointer cursor from enticement and keep it only for image * incorporate review comments * fix codeQL error * restrict interactive marquee css changes to firefly * genfill pointer --------- Co-authored-by: Ruchika Sinha <tek10248@Ruchikas-MacBook-Pro.local>
adobecom · Dec 8, 2023 · 9f7df68 · 9f7df68
1 parent 645498e
commit 9f7df68
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 47 deletions.
diff --git a/creativecloud/blocks/interactive-marquee/milo-marquee.css b/creativecloud/blocks/interactive-marquee/milo-marquee.css
@@ -28,7 +28,6 @@
   position: relative;
   top: 63px; /* mobile */
   margin: 0 auto;
-  cursor: pointer;
 }
 
 .interactive-marquee .text {

diff --git a/creativecloud/features/firefly/firefly-interactive.css b/creativecloud/features/firefly/firefly-interactive.css
@@ -24,12 +24,16 @@
   display: flex;
 }
 
-.interactive-marquee .media {
+.genfill-promptbar > button:hover {
+  cursor: pointer;
+}
+
+.interactive-marquee.firefly .media {
   top: 72px;
 }
 
-.interactive-marquee .media picture img,
-.interactive-marquee .media video {
+.interactive-marquee.firefly .media picture img,
+.interactive-marquee.firefly .media video {
   border-radius: 16px;
 }
 
@@ -42,11 +46,11 @@
     margin-bottom: 24px;
   }
 
-  .interactive-marquee .interactive-container {
+  .interactive-marquee.firefly .interactive-container {
     height: 430px;
   }
 
-  .interactive-marquee .media {
+  .interactive-marquee.firefly .media {
     top: 8px;
   }
 }
@@ -69,7 +73,7 @@
     width: 80%;
   }
 
-  .interactive-marquee .interactive-container {
+  .interactive-marquee.firefly .interactive-container {
     height: 813px;
   }
 }

diff --git a/creativecloud/features/firefly/firefly-interactive.js b/creativecloud/features/firefly/firefly-interactive.js
@@ -83,6 +83,8 @@ async function eventOnSelectorOption(selOption, promptDet, media, mediaP, create
 }
 
 export default async function setInteractiveFirefly(el) {
+  const enticementMode = el.classList.contains('light') ? 'light' : 'dark';
+  const interactiveElemMode = el.classList.contains('light') ? 'dark' : 'light';
   const buttons = el.querySelectorAll('.con-button');
   [...buttons].forEach((button) => { if (button.innerText.includes('Firefly')) button.setAttribute('daa-ll', 'getfirefly'); });
   const media = el.querySelector('.media');
@@ -93,34 +95,39 @@ export default async function setInteractiveFirefly(el) {
   const ttiDetail = {};
   const genfDetail = {};
   const teDetail = {};
-  const allSelections = [...media.querySelectorAll('p:not(:empty)')].filter((p) => p.innerText.trim().toLowerCase().includes('interactive-selectors'));
+  const fireflyDomain = [
+    'firefly.adobe.com',
+  ];
+  const allSelections = [...media.querySelectorAll('p:not(:empty)')].filter((p) => p.innerText.trim().toLowerCase().includes(fireflyDomain[0]));
   allSelections.forEach((s) => {
-    const optionPromptMode = s.nextElementSibling.nextElementSibling.innerText.split('(')[1]?.replaceAll(')', '');
-    const selectorValues = s.nextElementSibling.innerText.split('|');
-    const option = {
-      id: `${selectorValues[0]}`,
-      text: `${s.nextElementSibling.querySelector('a').textContent.trim()}`,
-      svg: `${s.nextElementSibling.querySelector('a').href}`,
-      analytics: `Select${selectorValues[0]}`,
-    };
-    selections.push(option);
-    if (selectorValues[0] === 'TextToImage') {
+    const optionPromptMode = interactiveElemMode;
+    const selectorValues = s.innerText.split('|');
+    let selectorOption = '';
+    if (selectorValues[0].includes('generate/images')) {
       ttiDetail.promptmode = optionPromptMode;
-      ttiDetail.promptpos = s.nextElementSibling.nextElementSibling.nextElementSibling.innerText;
-    } else if (selectorValues[0] === 'GenerativeFill') {
-      genfDetail.promptmode = optionPromptMode;
-      genfDetail.promptpos = s.nextElementSibling.nextElementSibling.nextElementSibling.innerText;
-    } else if (selectorValues[0] === 'TextEffects') {
+      ttiDetail.promptpos = s.nextElementSibling.innerText;
+      selectorOption = 'TextToImage';
+    } else if (selectorValues[0].includes('upload/inpaint')) {
+      genfDetail.promptmode = 'genfill';
+      genfDetail.promptpos = s.nextElementSibling.innerText;
+      selectorOption = 'GenerativeFill';
+    } else if (selectorValues[0].includes('generate/font-styles')) {
       teDetail.promptmode = optionPromptMode;
-      teDetail.promptpos = s.nextElementSibling.nextElementSibling.nextElementSibling.innerText;
+      teDetail.promptpos = s.nextElementSibling.innerText;
+      selectorOption = 'TextEffects';
     }
+    const option = {
+      id: `${selectorOption}`,
+      text: `${s.querySelectorAll('a')[1].textContent.trim()}`,
+      svg: `${s.querySelectorAll('a')[1].href}`,
+      analytics: `Select${selectorOption}`,
+    };
+    selections.push(option);
   });
 
   [...allP].forEach((s) => { if (!s.querySelector('picture') && !s.querySelector('video')) s.remove(); });
   const mediaP = media.querySelectorAll('p:not(:empty)');
   [...mediaP].forEach((image) => { image.classList.add('hide'); });
-  const enticementMode = allP[0].innerText.split('(')[1]?.replaceAll(')', '');
-  const selectorTrayMode = allP[3].innerText.split('(')[1]?.replaceAll(')', '');
 
   const { createSelectorTray, createEnticement, createPromptField } = await import('../interactive-elements/interactive-elements.js');
   // Set Enticement
@@ -129,7 +136,7 @@ export default async function setInteractiveFirefly(el) {
   const enticementDiv = await createEnticement(`${enticementText}|${enticementIcon}`, enticementMode);
   media.appendChild(enticementDiv, media.firstChild);
 
-  const fireflyOptions = await createSelectorTray(selections, selectorTrayMode);
+  const fireflyOptions = await createSelectorTray(selections, interactiveElemMode);
   fireflyOptions.classList.add('firefly-selectortray');
   media.append(fireflyOptions);
 
@@ -143,10 +150,8 @@ export default async function setInteractiveFirefly(el) {
   const genfillPrompt = await createGenFillPrompt(genfDetail.promptpos);
 
   // Create prompt field for first option on page load
-  let fireflyPrompt = '';
-  const firstOptionDetail = allP[6].innerText.split('|');
-  const firstOptionPromptMode = allP[5].innerText.split('(')[1]?.replaceAll(')', '');
-  fireflyPrompt = await createPromptField(`${firstOptionDetail[0]}`, `${firstOptionDetail[1]}`, firstOptionPromptMode);
+  const firstOptionDetail = allP[3].innerText.split('|');
+  const fireflyPrompt = await createPromptField(`${firstOptionDetail[0]}`, `${firstOptionDetail[1]}`, interactiveElemMode);
   if (firstOption.classList.contains('TextToImage') || firstOption.classList.contains('TextEffects')) {
     fireflyPrompt.classList.add('firefly-prompt');
     media.appendChild(fireflyPrompt);

diff --git a/creativecloud/features/genfill/genfill-interactive.css b/creativecloud/features/genfill/genfill-interactive.css
@@ -7,7 +7,6 @@
 }
 
 .genfill .enticement-detail,
-.genfill .enticement-mode,
 .genfill .timer {
   display: none;
 }
@@ -16,6 +15,10 @@
   display: none;
 }
 
+.interactive-marquee.genfill .media a {
+  cursor: pointer;
+}
+
 .enticement-arrow {
   display: none;
   width: 49px;

diff --git a/creativecloud/features/genfill/genfill-interactive.js b/creativecloud/features/genfill/genfill-interactive.js
@@ -71,15 +71,14 @@ export default async function decorateGenfill(el) {
   const interactiveContainer = el.querySelector('.interactive-container');
   const allP = interactiveContainer.querySelectorAll('.media:first-child p');
   const pMetadata = [...allP].filter((p) => !p.querySelector('picture'));
-  const [enticementMode, enticement, timer = null] = [...pMetadata];
-  enticementMode.classList.add('enticement-mode');
+  const [enticement, timer = null] = [...pMetadata];
   enticement.classList.add('enticement-detail');
   timer?.classList.add('timer');
-  const mode = enticementMode.innerText.includes('light') ? 'light' : 'dark';
+  const mode = el.classList.contains('light') ? 'light' : 'dark';
   const timerValues = timer ? timer.innerText.split('|') : null;
   const [intervalTime = 2000, delayTime = 1000] = (timerValues && timerValues.length > 1)
     ? timerValues : [2000];
-  [enticementMode, enticement, timer].forEach((i) => i?.remove());
+  [enticement, timer].forEach((i) => i?.remove());
   const viewports = ['mobile', 'tablet', 'desktop'];
   const mediaElements = interactiveContainer.querySelectorAll('.media');
   mediaElements.forEach(async (mediaEl, index) => {

diff --git a/creativecloud/features/interactive-elements/interactive-elements.css b/creativecloud/features/interactive-elements/interactive-elements.css
@@ -12,6 +12,10 @@
   width: 247px;
 }
 
+.promptbar > button:hover {
+  cursor: pointer;
+}
+
 .promptbar.light {
   background: #111111;
   border: 1px solid #323232;
@@ -122,6 +126,7 @@
 
 .options:hover {
   border: 1px solid #1473E6;
+  cursor: pointer;
 }
 
 .genfill-prompt {

diff --git a/...locks/firefly/firefly-interactive.test.js → ...tures/firefly/firefly-interactive.test.js b/...locks/firefly/firefly-interactive.test.js → ...tures/firefly/firefly-interactive.test.js
diff --git a/test/blocks/firefly/mocks/body.html → test/features/firefly/mocks/body.html b/test/blocks/firefly/mocks/body.html → test/features/firefly/mocks/body.html
@@ -11,12 +11,9 @@ <h2 id="your-imaginations-new-best-friend">Your imagination’s new best friend.
         <p><strong><a href="https://firefly.adobe.com/">Get Firefly Free</a></strong></p>
       </div>
       <div data-valign="middle">
-        <p>Enticement</p>
         <p><a href="https://main--cc--adobecom.hlx.page/drafts/ruchika/svg/enticement-arrow.svg">Try it</a></p>
         <p><strong>-----------------------------------------------------------</strong></p>
-        <p>Interactive-Selectors</p>
-        <p>TextToImage|<a href="https://main--cc--adobecom.hlx.page/drafts/ruchika/svg/text-to-image.svg">Text to Image</a></p>
-        <p>Prompt-Bar</p>
+        <p><a href=https://firefly.adobe.com/generate/images#_dnt>https://firefly.adobe.com/generate/images#_dnt</a> <a href="https://main--cc--adobecom.hlx.page/drafts/ruchika/svg/text-to-image.svg">Text to Image</a></p>
         <p>Dog in a sweater, primary colors, big smile|Generate</p>
         <p>
           <picture>
@@ -27,17 +24,13 @@ <h2 id="your-imaginations-new-best-friend">Your imagination’s new best friend.
           </picture>
         </p>
         <p><strong>-----------------------------------------------------------</strong></p>
-        <p>Interactive-Selectors</p>
-        <p>GenerativeFill|<a href="https://main--cc--adobecom.hlx.page/drafts/ruchika/svg/genfill.svg">Generative Fill</a></p>
-        <p>Prompt-Bar(genfill)</p>
+        <p><a href=https://firefly.adobe.com/upload/inpaint#_dnt>https://firefly.adobe.com/upload/inpaint#_dnt</a><a href="https://main--cc--adobecom.hlx.page/drafts/ruchika/svg/genfill.svg">Generative Fill</a></p>
         <p>Prompt Used[Turquoise water reflecting a starry sky]|Try Generative Fill</p>
         <p><video playsinline="" autoplay="" loop="" muted="">
           <source src="https://main--cc--adobecom.hlx.page/creativecloud/media_18d4118fdf2a27f38f25d20dc1a6518d4587bb7e5.mp4" type="video/mp4">
         </video></p>
         <p><strong>-----------------------------------------------------------</strong></p>
-        <p>Interactive-Selectors</p>
-        <p>TextEffects|<a href="https://main--cc--adobecom.hlx.page/drafts/ruchika/svg/text-effects.svg">Text Effects</a></p>
-        <p>Prompt-Bar</p>
+        <p><a href=https://firefly.adobe.com/generate/font-styles#_dnt>https://firefly.adobe.com/generate/font-styles#_dnt</a>|<a href="https://main--cc--adobecom.hlx.page/drafts/ruchika/svg/text-effects.svg">Text Effects</a></p>
         <p>Tiger Fur|Generate</p>
         <p>
           <picture>

diff --git a/test/features/genfill/mocks/genfill.html b/test/features/genfill/mocks/genfill.html
@@ -18,7 +18,6 @@ <h2 id="edit-photos-online-with-adobe-photoshop">Edit photos online with Adobe P
       <p><strong><a href="https://www.adobe.com/">Free Trial</a></strong> <em><a href="http://www.adobe.com/">Explore Photoshop online</a></em></p>
     </div>
     <div data-valign="middle">
-      <p><strong>Enticement</strong></p>
       <p><a href="/drafts/ruchika/svg/enticement-arrow.svg">See it in action</a></p>
       <p>2000|0</p>
       <p>