MWPW-146229 | Integrating review comments and new workflows

creativecloud/blocks/interactive-metadata/interactive-metadata.css

@@ -17,16 +17,6 @@
   margin: 0;
 }
 
-.interactive-enabled.heading-top  h1,
-.interactive-enabled.heading-top  h2,
-.interactive-enabled.heading-top  h3,
-.interactive-enabled.heading-top  h4,
-.interactive-enabled.heading-top  h5,
-.interactive-enabled.heading-top  h6,
-.interactive-enabled .foreground .image .mobile-top-title {
-  display: none;
-}
-
 .interactive-enabled .foreground.container .image {
   flex-direction: column;
 }
@@ -269,7 +259,17 @@
     width: 100%;
   }
 
-  .interactive-enabled.heading-top .foreground .image .mobile-top-title {
+  .interactive-enabled.mobile-heading-top  h1,
+  .interactive-enabled.mobile-heading-top  h2,
+  .interactive-enabled.mobile-heading-top  h3,
+  .interactive-enabled.mobile-heading-top  h4,
+  .interactive-enabled.mobile-heading-top  h5,
+  .interactive-enabled.mobile-heading-top  h6,
+  .interactive-enabled .foreground .image .mobile-heading-top {
+    display: none;
+  }
+
+  .interactive-enabled.mobile-heading-top .foreground .image .mobile-heading-top {
     display: block;
     margin-bottom: 24px;
     font-size: 36px;
@@ -279,13 +279,8 @@
 }
 
 @media screen and (min-width: 600px) {
-  .interactive-enabled.heading-top  h1,
-  .interactive-enabled.heading-top  h2,
-  .interactive-enabled.heading-top  h3,
-  .interactive-enabled.heading-top  h4,
-  .interactive-enabled.heading-top  h5,
-  .interactive-enabled.heading-top  h6 {
-    display: block;
+  .interactive-enabled .foreground .image .mobile-heading-top {
+    display: none;
   }
 
   .interactive-enabled .foreground.container .image > p:first-child {

creativecloud/blocks/interactive-metadata/interactive-metadata.js

@@ -172,7 +172,7 @@ async function implementWorkflow(stepInfo) {
 
 function checkRenderStatus(targetBlock, res, rej, etime, rtime) {
   if (etime > 20000) { rej(); return; }
-  if (targetBlock.querySelector('.text') && targetBlock.querySelector('.image')) res();
+  if (targetBlock.querySelector('.text') && targetBlock.querySelector('.asset, .image')) res();
   else setTimeout(() => checkRenderStatus(targetBlock, res, rej, etime + rtime), rtime);
 }
 
@@ -196,11 +196,11 @@ function decorateEnticementArrow(aa) {
 }
 
 function decorateMobileHeading(intEnb) {
-  if (!intEnb.classList.contains('heading-top')) return;
+  if (!intEnb.classList.contains('mobile-heading-top')) return;
   const h = intEnb.querySelector('.text').querySelector('h1, h2, h3, h4, h5, h6');
   if (!h) return;
   const htxt = h.textContent;
-  const hTxtTop = createTag('div', { class: 'mobile-top-title' }, htxt);
+  const hTxtTop = createTag('div', { class: 'mobile-heading-top' }, htxt);
   intEnb.querySelector('.image').prepend(hTxtTop);
 }
 
@@ -256,6 +256,9 @@ function getWorkFlowInformation(el) {
     'workflow-generate-crop': ['generate', 'selector-tray', 'crop', 'start-over'],
     'workflow-generate-repeat-crop': ['generate', 'selector-tray', 'generate', 'selector-tray', 'crop', 'start-over'],
     'workflow-hue-sat': ['slider-tray'],
+    'workflow-generate-select-generate': ['generate', 'selector-tray', 'generate', 'crop', 'start-over'],
+    'workflow-generate-selector': ['generate', 'selector-tray', 'generate', 'start-over'],
+    'workflow-generate-triple-selector': ['generate', 'selector-tray', 'generate', 'selector-tray', 'generate', 'selector-tray', 'start-over'],
   };
   const wfNames = Object.keys(intWorkFlowConfig);
   [...el.classList].forEach((cn) => { if (cn.match('workflow-')) wfName = cn; });

creativecloud/features/interactive-components/crop/crop.js

@@ -6,11 +6,13 @@ export default async function stepInit(data) {
   const layer = createTag('div', { class: `layer layer-${data.stepIndex}` });
   const cropCTA = createTag('a', { class: 'gray-button body-m crop-button', href: '#' });
   const svg = config.querySelector('img[src*=".svg"')?.closest('picture');
+  const lastp = config.querySelector(':scope > div > p:last-child');
+  const textContent = lastp.textContent.trim();
   if (svg) {
     svg.insertAdjacentElement('afterend', svg.cloneNode(true));
     cropCTA.appendChild(createTag('div', { class: 'crop-icon-container' }, svg));
   }
-  if (config.textContent) cropCTA.appendChild(document.createTextNode(config.textContent.trim()));
+  if (textContent) cropCTA.appendChild(document.createTextNode(textContent));
   cropCTA.addEventListener('click', async (e) => {
     e.preventDefault();
     await data.openForExecution;

creativecloud/features/interactive-components/generate/generate.css

@@ -84,15 +84,15 @@
     padding: 0;
   }
 
-  .interactive-enabled.generate-right .step-generate .generate-prompt-button,
-  .interactive-enabled .step-generate .generate-right .generate-prompt-button {
+  .interactive-enabled.generate-side .step-generate .generate-prompt-button,
+  .interactive-enabled .step-generate .generate-side .generate-prompt-button {
     left: auto;
     right: -21.5%;
     bottom: calc(50% - 80px);
   }
 
-  [dir="rtl"] .interactive-enabled.generate-right .step-generate .generate-prompt-button, 
-  [dir="rtl"] .interactive-enabled .step-generate .generate-right .generate-prompt-button {
+  [dir="rtl"] .interactive-enabled.generate-side .step-generate .generate-prompt-button,
+  [dir="rtl"] .interactive-enabled .step-generate .generate-side .generate-prompt-button {
     left: auto;
     right: -21.5%;
   }
@@ -131,21 +131,21 @@
       max-width: 218px;
     }
 
-    .interactive-enabled.row-reversed.generate-right .step-generate .generate-prompt-button, 
-    .interactive-enabled.row-reversed .step-generate .generate-right .generate-prompt-button {
+    .interactive-enabled.row-reversed.generate-side .step-generate .generate-prompt-button,
+    .interactive-enabled.row-reversed .step-generate .generate-side .generate-prompt-button {
       flex-direction: row;
       left: -21.5%;
       right: auto;
     }
 
-    [dir="rtl"] .interactive-enabled.generate-right .step-generate .generate-prompt-button, 
-    [dir="rtl"] .interactive-enabled .step-generate .generate-right .generate-prompt-button {
+    [dir="rtl"] .interactive-enabled.generate-side .step-generate .generate-prompt-button,
+    [dir="rtl"] .interactive-enabled .step-generate .generate-side .generate-prompt-button {
       left: -21.5%;
       right: auto;
     }
 
-    [dir="rtl"] .interactive-enabled.row-reversed.generate-right .step-generate .generate-prompt-button, 
-    [dir="rtl"] .interactive-enabled.row-reversed .step-generate .generate-right .generate-prompt-button {
+    [dir="rtl"] .interactive-enabled.row-reversed.generate-side .step-generate .generate-prompt-button,
+    [dir="rtl"] .interactive-enabled.row-reversed .step-generate .generate-side .generate-prompt-button {
       left: auto;
       right: -21.5%;
     }

creativecloud/features/interactive-components/generate/generate.js

@@ -4,8 +4,8 @@ export default async function stepInit(data) {
   data.target.classList.add('step-generate');
   const config = data.stepConfigs[data.stepIndex];
   const layer = createTag('div', { class: `layer layer-${data.stepIndex}` });
-  const [searchText, btnText, position] = config.textContent.trim().split('|');
-  if (position) layer.classList.add(`generate-${position.toLowerCase().trim()}`);
+  const lastp = config.querySelector(':scope > div > p:last-child');
+  const [searchText, btnText] = lastp.textContent.trim().split('|');
   const genfillDiv = createTag('div', { class: 'generate-prompt-button body-m' });
   const searchBar = createTag('div', { class: 'generate-text' }, `${searchText}`);
   const searchBarContainer = createTag('div', { class: 'generate-text-container' }, searchBar);

creativecloud/features/interactive-components/selector-tray/selector-tray.js

@@ -3,17 +3,17 @@ import { handleImageTransition, getImgSrc } from '../../../blocks/interactive-me
 
 function getTrayConfig(data) {
   const dpth = data.displayPath;
-  const allUls = data.stepConfigs[data.stepIndex].querySelectorAll('ul');
-  const configUl = (dpth >= 0 && allUls.length > dpth) ? allUls[dpth] : allUls[0];
-  return configUl;
+  const allTrays = data.stepConfigs[data.stepIndex].querySelectorAll('ul, ol');
+  const configTray = (dpth >= 0 && allTrays.length > dpth) ? allTrays[dpth] : allTrays[0];
+  return configTray;
 }
 
 function getStartingPathIdx(data) {
   let pathIdx = 0;
   const dpth = data.displayPath;
-  const allUls = data.stepConfigs[data.stepIndex].querySelectorAll('ul');
-  if (allUls.length < dpth) return pathIdx;
-  for (let i = 0; i < dpth; i += 1) pathIdx += allUls[i].querySelectorAll('li').length;
+  const allTrays = data.stepConfigs[data.stepIndex].querySelectorAll('ul, ol');
+  if (allTrays.length < dpth) return pathIdx;
+  for (let i = 0; i < dpth; i += 1) pathIdx += allTrays[i].querySelectorAll('li').length;
   return pathIdx;
 }
 
@@ -47,23 +47,20 @@ function attachThumbnailEvents(a, data, layer) {
     const trObj = { src: curra.dataset.dispSrc, alt: curra.dataset.dispAlt, useCfg: true };
     await handleImageTransition(data, trObj);
     data.el.dispatchEvent(new CustomEvent(data.nextStepEvent));
-    e.target.closest('.tray-items').querySelector('a.tray-thumbnail-img').classList.add('thumbnail-selected');
   });
 }
 
 function selectorTrayWithImgs(layer, data) {
   const selectorTray = createTag('div', { class: 'body-s selector-tray' });
   const trayItems = createTag('div', { class: 'tray-items' });
-  const configUl = getTrayConfig(data);
-  const pics = configUl.querySelectorAll('picture');
+  const configTray = getTrayConfig(data);
+  const options = configTray.querySelectorAll('li');
   let pathIdx = getStartingPathIdx(data);
   let displayImg = null;
-  [...pics].forEach((pic, idx) => {
-    if (idx % 2 === 0) {
-      displayImg = [getImgSrc(pic), pic.querySelector('img').alt];
-      return;
-    }
-    const a = createSelectorThumbnail(pic, pathIdx, displayImg);
+  [...options].forEach((o) => {
+    const [thumbnailPic, displayPic] = o.querySelectorAll('picture');
+    displayImg = [getImgSrc(displayPic), displayPic.querySelector('img').alt];
+    const a = createSelectorThumbnail(thumbnailPic, pathIdx, displayImg);
     trayItems.append(a);
     pathIdx += 1;
     attachThumbnailEvents(a, data, layer);
@@ -79,10 +76,7 @@ export default async function stepInit(data) {
   const title = config.querySelector('p:first-child');
   let trayTitle = null;
   if (title) trayTitle = createTag('div', { class: 'tray-title' }, title.innerText.trim());
-  const trayConfig = config.querySelectorAll('ul > li');
-  const isGenerateTray = [...trayConfig].filter((li) => (li.querySelector('img[src*="media_"]').length >= 2));
-  let selectorTray = null;
-  if (isGenerateTray) selectorTray = selectorTrayWithImgs(layer, data);
+  const selectorTray = selectorTrayWithImgs(layer, data);
   if (title) selectorTray.prepend(trayTitle);
   layer.append(selectorTray);
   return layer;

creativecloud/features/interactive-components/slider-tray/slider-tray.js

@@ -15,7 +15,7 @@ async function createSelectorTray(data, layer) {
   const sliderTray = createTag('div', { class: 'sliderTray' });
   const menu = createTag('div', { class: 'menu' });
   const config = data.stepConfigs[data.stepIndex];
-  const options = config.querySelectorAll(':scope > div .icon');
+  const options = config.querySelectorAll(':scope > div ul .icon, :scope > div ol .icon');
   [...options].forEach((o) => { handleInput(o, sliderTray, menu, layer); });
   layer.append(sliderTray);
   observeSliderTray(sliderTray, data.target, menu);

creativecloud/features/interactive-components/start-over/start-over.css

@@ -14,7 +14,7 @@
     gap: 16px;
   }
 
-  .interactive-enabled.generate-right .step-start-over .layer .gray-button.start-over-button {
+  .interactive-enabled.generate-side .step-start-over .layer .gray-button.start-over-button {
     bottom: 32px;
   }
 }

test/blocks/interactive-metadata/interactive-metadata.test.js

@@ -1,32 +1,37 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 
-document.body.innerHTML = await readFile({ path: './mocks/interactive-metadata.html' });
 const { setLibs } = await import('../../../creativecloud/scripts/utils.js');
 const { default: init } = await import('../../../creativecloud/blocks/interactive-metadata/interactive-metadata.js');
+const { handleImageTransition } = await import('../../../creativecloud/blocks/interactive-metadata/interactive-metadata.js');
+function delay(ms) {
+  return new Promise((res) => { setTimeout(() => { res(); }, ms); });
+}
 
+document.body.innerHTML = await readFile({ path: './mocks/interactive-metadata.html' });
 describe('interactive metadata', () => {
   let im = null;
   let ib = null;
-  let genfillIm = null;
-  let genfillMarquee = null;
 
   before(async () => {
     setLibs('https://milo.adobe.com/libs');
     im = document.querySelector('.interactive-metadata');
     ib = document.querySelector('.marquee');
-    genfillIm = document.querySelector('.interactive-metadata.workflow-genfill');
-    genfillMarquee = genfillIm.closest('.section').querySelector('.marquee');
     await init(im);
-    await init(genfillIm);
-  });
-  it('interactive metadata should exist', () => {
-    expect(im).to.exist;
   });
+
   it('should make the previous block interactive-enabled', () => {
     expect(ib).to.exist;
     expect(ib.classList.contains('interactive-enabled')).to.be.true;
   });
+
+  it('should start animation', async () => {
+    const { x, y } = ib.querySelector('.gray-button').getBoundingClientRect();
+    window.scrollTo(x, y);
+    await delay(200);
+    expect(ib.querySelector('.interactive-holder .show-layer .gray-button.animated')).to.exist;
+  });
+
   it('should create a workflow', () => {
     let hasWorkflowClass = false;
     im.classList.forEach((className) => {
@@ -36,37 +41,32 @@ describe('interactive metadata', () => {
     });
     expect(hasWorkflowClass).to.be.true;
   });
-  it('should render next selector tray', async () => {
-    im.dispatchEvent(new CustomEvent('cc:interactive-switch'));
-    await new Promise((res) => { setTimeout(() => { res(); }, 200); });
-    expect(ib.querySelector('.interactive-holder.step-selector-tray')).to.exist;
-  });
-  it('should render next crop layer', async () => {
+
+  it('should render next layer', async () => {
     im.dispatchEvent(new CustomEvent('cc:interactive-switch'));
-    await new Promise((res) => { setTimeout(() => { res(); }, 200); });
-    expect(ib.querySelector('.interactive-holder.step-crop')).to.exist;
+    await delay(200);
+    expect(ib.querySelector('.interactive-holder .layer-1.show-layer')).to.exist;
   });
-  it('should render next start-over layer', async () => {
+
+  it('should render start over layer', async () => {
     im.dispatchEvent(new CustomEvent('cc:interactive-switch'));
-    await new Promise((res) => { setTimeout(() => { res(); }, 200); });
+    await delay(200);
     expect(ib.querySelector('.interactive-holder.step-start-over')).to.exist;
   });
-  it('should render next generate layer', async () => {
-    im.dispatchEvent(new CustomEvent('cc:interactive-switch'));
-    await new Promise((res) => { setTimeout(() => { res(); }, 200); });
-    expect(ib.querySelector('.interactive-holder.step-generate')).to.exist;
-  });
-  it('Genfill: should render generate layer', () => {
-    expect(genfillMarquee.querySelector('.interactive-holder.step-generate')).to.exist;
-  });
-  it('Genfill: should render generate layer', async () => {
-    genfillIm.dispatchEvent(new CustomEvent('cc:interactive-switch'));
-    await new Promise((res) => { setTimeout(() => { res(); }, 200); });
-    expect(genfillMarquee.querySelector('.interactive-holder.step-generate')).to.exist;
-  });
-  it('Genfill: should render start over layer', async () => {
-    genfillIm.dispatchEvent(new CustomEvent('cc:interactive-switch'));
-    await new Promise((res) => { setTimeout(() => { res(); }, 200); });
-    expect(genfillMarquee.querySelector('.interactive-holder.step-start-over')).to.exist;
+
+  it('Transition video', async () => {
+    const trgt = ib.querySelector('.image .interactive-holder');
+    const mockStepInfo = {
+      im,
+      stepIndex: 0,
+      stepName: 'generate',
+      stepList: ['generate', 'generate', 'start-over'],
+      stepConfigs: im.querySelectorAll(':scope > div'),
+      target: trgt,
+      displayPath: 0,
+      openForExecution: Promise.resolve(true),
+    };
+    const transitionCfg = { useCfg: true, vsrc: `${window.origin}/videoo.mp4#_autoplay` };
+    await handleImageTransition(mockStepInfo, transitionCfg);
   });
 });