Skip to content

Commit

Permalink
Merge pull request #254 from npeltier/143894
Browse files Browse the repository at this point in the history 
MWPW-143894, MWPW-142148 sidenav authoring enhancements
  • Loading branch information
@salonijain3
salonijain3 authored Apr 29, 2024
2 parents 89a35c8 + 7bb5ba2 commit 52ada57
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 28 deletions.
33 changes: 21 additions & 12 deletions creativecloud/blocks/sidenav/sidenav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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]);
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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');
Expand Down
12 changes: 12 additions & 0 deletions test/blocks/sidenav/mocks/blah.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 27 additions & 15 deletions test/blocks/sidenav/sidenav.test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,27 @@ <h1 id="side-nav-testing">SIDE NAV testing</h1>
<div>
<h2 id="refine-your-results">REFINE YOUR RESULTS</h2>
<p><strong>Search all your products</strong></p>
<p><a href="/some/taxonomy.json">https://www.adobe.com/some/taxonomy.json</a></p>
<p><em>TYPES</em></p>
<p><a href="https://www.adobe.com/products/special-offers.html">RESOURCES: Special Offers</a></p>
</div>
</div>
<div>
<div>
<p><a href="/some/taxonomy.json">https://www.adobe.com/some/taxonomy.json</a></p>
</div>
</div>
</div>
<div class="sidenav reordered-categories">
<div>
<div>
<h2 id="refine-your-results">REFINE YOUR RESULTS</h2>
<p><strong>Search all your products</strong></p>
<p><em>TYPES</em></p>
<p><a href="https://www.adobe.com/products/special-offers.html">RESOURCES: Special Offers</a></p>
</div>
</div>
<div>
<div>
<p><a href="/some/taxonomy.json">https://www.adobe.com/some/taxonomy.json</a></p>
<ul>
<li>all</li>
Expand All @@ -45,26 +55,28 @@ <h2 id="refine-your-results">REFINE YOUR RESULTS</h2>
<li>Commerce-conversions</li>
<li>Optimization-scale</li>
</ul>
<p><em>TYPES</em></p>
<p><a href="https://www.adobe.com/products/special-offers.html">RESOURCES: Special Offers</a></p>
</div>
</div>
</div>
<div class="sidenav plans">
<div>
<div>
<h2>REFINE YOUR RESULTS</h2>
<p><a href="/some/taxonomy.json">https://www.adobe.com//some/taxonomy.json</a></p>
<ul>
<li>All</li>
<li>Photo</li>
<li>Graphic-design</li>
<li>Video</li>
<li>Illustration</li>
<li>Acrobat-pdf</li>
<li>3d-ar</li>
<li>Social-media</li>
</ul>
<h2>CATEGORIES</h2>
</div>
</div>
<div>
<div>
<p><a href="/some/taxonomy.json">https://www.adobe.com//some/taxonomy.json</a></p>
<ul>
<li>All <picture><img loading="lazy" src="mocks/blah.svg"></picture></li>
<li>Photo</li>
<li>Graphic-design</li>
<li>Video</li>
<li>Illustration</li>
<li>Acrobat-pdf</li>
<li>3d-ar</li>
<li>Social-media</li>
</ul>
</div>
</div>
</div>
Expand Down
5 changes: 4 additions & 1 deletion test/blocks/sidenav/sidenav.test.html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,14 @@ runTests(async () => {
const sidenavEl = document.querySelector('.plans');
const newRoot = await init(sidenavEl);
expect(newRoot.tagName).to.equal('MERCH-SIDENAV');
expect(newRoot.title).to.equal('REFINE YOUR RESULTS');
expect(newRoot.title).to.equal('CATEGORIES');
const search = newRoot.querySelector('sp-search');
expect(search).to.be.null;
const nestedItems = newRoot.querySelectorAll('sp-sidenav-item > sp-sidenav-item');
expect(nestedItems.length).to.equal(0);
const iconItem = newRoot.querySelector('sp-sidenav-item[value=all] > picture');
expect(iconItem).to.not.be.null;
expect(iconItem.getAttribute('slot')).to.equal('icon');
});
});
});

0 comments on commit 52ada57

Please sign in to comment.