diff --git a/creativecloud/blocks/interactive-marquee/milo-marquee.css b/creativecloud/blocks/interactive-marquee/milo-marquee.css index 31591f724..89410411f 100644 --- 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 index 765656b9e..196790f75 100644 --- 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 index 778d738f3..7d4f41049 100644 --- 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 index 13de115de..59b3eb18c 100644 --- 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 index 43ca16ddb..69dc36a8f 100644 --- 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 index d14f8f8a7..7f5ed16ca 100644 --- 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/test/blocks/firefly/firefly-interactive.test.js b/test/features/firefly/firefly-interactive.test.js similarity index 100% rename from test/blocks/firefly/firefly-interactive.test.js rename to test/features/firefly/firefly-interactive.test.js diff --git a/test/blocks/firefly/mocks/body.html b/test/features/firefly/mocks/body.html similarity index 84% rename from test/blocks/firefly/mocks/body.html rename to test/features/firefly/mocks/body.html index facdd4b0e..9a70e2233 100644 --- a/test/blocks/firefly/mocks/body.html +++ b/test/features/firefly/mocks/body.html @@ -11,12 +11,9 @@

Your imagination’s new best friend.

Get Firefly Free

-

Enticement

Try it

-----------------------------------------------------------

-

Interactive-Selectors

-

TextToImage|Text to Image

-

Prompt-Bar

+

https://firefly.adobe.com/generate/images#_dnt Text to Image

Dog in a sweater, primary colors, big smile|Generate

@@ -27,17 +24,13 @@

Your imagination’s new best friend.

-----------------------------------------------------------

-

Interactive-Selectors

-

GenerativeFill|Generative Fill

-

Prompt-Bar(genfill)

+

https://firefly.adobe.com/upload/inpaint#_dntGenerative Fill

Prompt Used[Turquoise water reflecting a starry sky]|Try Generative Fill

-----------------------------------------------------------

-

Interactive-Selectors

-

TextEffects|Text Effects

-

Prompt-Bar

+

https://firefly.adobe.com/generate/font-styles#_dnt|Text Effects

Tiger Fur|Generate

diff --git a/test/features/genfill/mocks/genfill.html b/test/features/genfill/mocks/genfill.html index a3aad1b62..60033175d 100644 --- a/test/features/genfill/mocks/genfill.html +++ b/test/features/genfill/mocks/genfill.html @@ -18,7 +18,6 @@

Edit photos online with Adobe P

Free Trial Explore Photoshop online

-

Enticement

See it in action

2000|0