diff --git a/creativecloud/blocks/interactive-marquee/interactive-marquee.js b/creativecloud/blocks/interactive-marquee/interactive-marquee.js index c39ccf59e..60c939b0d 100644 --- a/creativecloud/blocks/interactive-marquee/interactive-marquee.js +++ b/creativecloud/blocks/interactive-marquee/interactive-marquee.js @@ -3,7 +3,7 @@ import { getLibs } from '../../scripts/utils.js'; // [headingSize, bodySize, detailSize, titlesize] const typeSizes = ['xxl', 'xl', 'l', 'xs']; -function decorateText(el, createTag) { +function decorateText(el, createTag, isMwebMarquee = false) { const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6'); const heading = headings[headings.length - 1]; const config = typeSizes; @@ -24,6 +24,19 @@ function decorateText(el, createTag) { iconAreaElements?.classList.add('icon-area'); iconText.innerText = (iconAreaElements.textContent.trim()); iconText.previousSibling.textContent = ''; + if (isMwebMarquee) { + const foreground = el.closest('.foreground'); + const mwebContainer = createTag('div', { class: 'mweb-container' }); + const actionItem = el.querySelector('.action-area'); + mwebContainer.append(heading.cloneNode(true), actionItem.cloneNode(true)); + heading.classList.add('mobile-cta-top'); + actionItem.classList.add('mobile-cta-top'); + if (sib) { + mwebContainer.prepend(sib.cloneNode(true)); + sib.classList.add('mobile-cta-top'); + } + foreground.prepend(mwebContainer); + } }; decorate(heading, config); } @@ -60,9 +73,10 @@ function interactiveInit(el, decorateButtons, decorateBlockBg, createTag) { const firstDivInForeground = foreground.querySelector(':scope > div'); if (firstDivInForeground?.classList.contains('asset')) el.classList.add('row-reversed'); + const isMwebMarquee = el.classList.contains('mobile-cta-top'); decorateButtons(text, 'button-xl'); - decorateText(text, createTag); + decorateText(text, createTag, isMwebMarquee); extendButtonsClass(text); } diff --git a/creativecloud/blocks/interactive-marquee/milo-marquee.css b/creativecloud/blocks/interactive-marquee/milo-marquee.css index 0a9810c31..87da525a1 100644 --- a/creativecloud/blocks/interactive-marquee/milo-marquee.css +++ b/creativecloud/blocks/interactive-marquee/milo-marquee.css @@ -46,6 +46,7 @@ } .interactive-marquee .text .detail-l, +.interactive-marquee .mweb-container .detail-l, .interactive-marquee .text .heading-xl, .interactive-marquee .text .heading-xxl { margin-bottom: var(--spacing-xs); @@ -73,6 +74,7 @@ .interactive-marquee .icon-area img { height: 40px; width: auto; + min-width: 40px; display: block; } @@ -116,6 +118,11 @@ line-height: 0; } +.interactive-marquee > .container > .body-xl { + display: none; + order:3; +} + @media screen and (min-width: 600px) { .interactive-marquee .background .mobile-only, .interactive-marquee .background .desktop-only { @@ -142,6 +149,10 @@ align-items: center; gap: var(--spacing-s); } + + .interactive-marquee .mweb-container { + display: none; + } } @media screen and (min-width: 1200px) { @@ -191,3 +202,17 @@ max-width: 500px; } } + +@media screen and (max-width: 600px) { + .mweb-container .action-area { + text-align: center; + } + + .interactive-marquee .text .detail-l.mobile-cta-top, + .interactive-marquee .text .icon-area.mobile-cta-top, + .interactive-marquee .text .action-area.mobile-cta-top, + .interactive-marquee .text h1[class^="heading"].mobile-cta-top + { + display: none; + } +} diff --git a/creativecloud/blocks/interactive-metadata/interactive-metadata.js b/creativecloud/blocks/interactive-metadata/interactive-metadata.js index 0df5d72cc..7ee73af40 100644 --- a/creativecloud/blocks/interactive-metadata/interactive-metadata.js +++ b/creativecloud/blocks/interactive-metadata/interactive-metadata.js @@ -257,6 +257,7 @@ function getWorkFlowInformation(el) { '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-select': ['generate', 'selector-tray', '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'], }; diff --git a/creativecloud/blocks/sidenav/sidenav.js b/creativecloud/blocks/sidenav/sidenav.js index 8135ab9a7..b15742c36 100644 --- a/creativecloud/blocks/sidenav/sidenav.js +++ b/creativecloud/blocks/sidenav/sidenav.js @@ -19,12 +19,16 @@ const getCategories = (items, isMultilevel, mapCategories) => { const merchTag = createTag('merch-sidenav-list', { deeplink: 'category' }); merchTag.append(tag); items.forEach((item) => { - if (item) { + if (item?.id) { let parent = tag; const value = getIdLeaf(item.id); // first token is type, second is parent category const isParent = item.id.split('/').length <= 2; const itemTag = createTag('sp-sidenav-item', { label: item.name, value }); + if (item.icon) { + item.icon.setAttribute('slot', 'icon'); + itemTag.append(item.icon); + } if (isParent) { mapParents[value] = itemTag; tag.append(itemTag); @@ -34,7 +38,7 @@ const getCategories = (items, isMultilevel, mapCategories) => { if (!mapParents[parentId]) { const parentItem = mapCategories[parentId]; if (parentItem) { - mapParents[parentId] = createTag('sp-sidenav-item', { label: parentItem.name, parentId }); + mapParents[parentId] = createTag('sp-sidenav-item', { label: parentItem.name, value: parentId }); tag.append(mapParents[parentId]); } } @@ -74,20 +78,23 @@ const appendFilters = async (root, link, explicitCategoriesElt, typeText) => { if (item.id?.startsWith(CATEGORY_ID_PREFIX)) { const value = getIdLeaf(item.id); mapCategories[value] = item; - categoryValues.push(value); + categoryValues.push({ value }); } else if (item.id?.startsWith(TYPE_ID_PREFIX)) { types.push(item); } }); if (explicitCategoriesElt) { categoryValues = Array.from(explicitCategoriesElt.querySelectorAll('li')) - .map((item) => item.textContent.trim().toLowerCase()); + .map((item) => ({ + value: item.textContent.trim().toLowerCase(), + icon: item.querySelector('picture'), + })); } let shallowCategories = true; if (categoryValues.length > 0) { await makePause(); - const items = categoryValues.map((value) => mapCategories[value]); - const parentValues = new Set(items.map((value) => value?.id.split('/')[1])); + const items = categoryValues.map(({ value, icon }) => ({ ...mapCategories[value], icon })); + const parentValues = new Set(items.map(({ id }) => id?.split('/')[1])); // all parent will always be here without children, // so shallow is considered below 2 parents shallowCategories = parentValues.size <= 2; @@ -132,6 +139,7 @@ function appendResources(rootNav, resourceLink) { export default async function init(el) { const libs = getLibs(); + const [mainRow, categoryRow] = Array.from(el.children); const merchSidenavDep = import('../../deps/merch-sidenav.js'); const deps = Promise.all([ merchSidenavDep, @@ -148,20 +156,21 @@ export default async function init(el) { import(`${libs}/features/spectrum-web-components/dist/overlay.js`), ]); - const title = el.querySelector('h2,h3')?.textContent.trim(); + const title = mainRow?.querySelector('h2,h3')?.textContent.trim(); + const searchText = mainRow?.querySelector('p > strong')?.textContent.trim(); + const typeText = mainRow?.querySelector('p > em')?.textContent.trim(); + // eslint-disable-next-line prefer-const + const resourcesLink = mainRow?.querySelector('a'); + let endpoint = categoryRow?.querySelector('a'); await merchSidenavDep; const rootNav = createTag('merch-sidenav', { title }); - const searchText = el.querySelector('p > strong')?.textContent.trim(); - const typeText = el.querySelector('p > em')?.textContent.trim(); await deps; el.replaceWith(rootNav); appendSearch(rootNav, searchText); - // eslint-disable-next-line prefer-const - let [endpoint, resourcesLink] = el.querySelectorAll('a'); if (endpoint) { await makePause(); endpoint = localizeLink(endpoint.textContent.trim(), null, true); - const explicitCategories = el.querySelector('ul'); + const explicitCategories = categoryRow?.querySelector('ul'); performance.mark('sidenav:appendFilters:start'); await appendFilters(rootNav, endpoint, explicitCategories, typeText); performance.mark('sidenav:appendFilters:end'); diff --git a/creativecloud/features/firefly/firefly-interactive.css b/creativecloud/features/firefly/firefly-interactive.css index d5686d566..655747c5a 100644 --- a/creativecloud/features/firefly/firefly-interactive.css +++ b/creativecloud/features/firefly/firefly-interactive.css @@ -96,11 +96,7 @@ } .interactive-marquee.firefly .asset { - top: 24px; - } - - .interactive-marquee.firefly .foreground { - padding-top: 0; + top: 0; } .interactive-marquee.firefly.ff-text-effects .interactive-container, diff --git a/creativecloud/features/firefly/firefly-susi.js b/creativecloud/features/firefly/firefly-susi.js index fe90ca72a..a300cf8cd 100644 --- a/creativecloud/features/firefly/firefly-susi.js +++ b/creativecloud/features/firefly/firefly-susi.js @@ -19,7 +19,7 @@ function redirectUrl(prompt, paramKey) { const effectsPath = `generate/font-styles?prompt=${encodeURI(prompt)}&${queryParam}`; windowLocation = env === 'prod' ? `${fireflyprod}/${effectsPath}` : `${fireflystage}/${effectsPath}`; } else if (paramKey === 'goToFirefly') { - const fireflyPath = `generate/images?prompt=${encodeURI(prompt)}&${queryParam}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&modelInputVersion=v2&modelConfig=v2`; + const fireflyPath = `generate/images?prompt=${encodeURI(prompt)}&${queryParam}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&modelInputVersion=v3&modelConfig=v3`; windowLocation = env === 'prod' ? `${fireflyprod}/${fireflyPath}` : `${fireflystage}/${fireflyPath}`; } return windowLocation; diff --git a/creativecloud/features/interactive-components/selector-tray/selector-tray.css b/creativecloud/features/interactive-components/selector-tray/selector-tray.css index 75f6840e6..ae56fde05 100644 --- a/creativecloud/features/interactive-components/selector-tray/selector-tray.css +++ b/creativecloud/features/interactive-components/selector-tray/selector-tray.css @@ -57,6 +57,7 @@ .interactive-enabled .step-selector-tray .selector-tray .tray-items a.tray-thumbnail-img .tray-thumbnail-outline { display: none; + box-sizing: content-box; height: calc(100% - 10px); width: calc(100% - 10px); border: 5px solid var(--prompt-highlight-color); diff --git a/test/blocks/sidenav/mocks/blah.svg b/test/blocks/sidenav/mocks/blah.svg new file mode 100644 index 000000000..86391fe9d --- /dev/null +++ b/test/blocks/sidenav/mocks/blah.svg @@ -0,0 +1,12 @@ + diff --git a/test/blocks/sidenav/sidenav.test.html b/test/blocks/sidenav/sidenav.test.html index d50e7e1a6..8822101db 100644 --- a/test/blocks/sidenav/sidenav.test.html +++ b/test/blocks/sidenav/sidenav.test.html @@ -15,17 +15,27 @@
https://www.adobe.com/some/taxonomy.json
TYPES
-https://www.adobe.com//some/taxonomy.json
-https://www.adobe.com//some/taxonomy.json
+