Skip to content

Commit

Permalink
MWPW-137257 adapt values to taxonomy (adobecom#141)
Browse files Browse the repository at this point in the history 
- possibility to explicitally set order / and item, by adding list with last token of taxonomy,
- types to be displayed if navigation is multilevel,
- search text now based on first bold text
  • Loading branch information
@npeltier @yesil
npeltier authored and yesil committed Dec 18, 2023
1 parent a74789a commit b4eecb0
Show file tree
Hide file tree
Showing 4 changed files with 193 additions and 155 deletions.
105 changes: 71 additions & 34 deletions creativecloud/blocks/sidenav/sidenav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,43 @@ import { createTag, getLibs } from '../../scripts/utils.js';

import '../../deps/merch-sidenav.js';

const CATEGORY_TYPE = 'Categories';
const TYPE_TYPE = 'Types';
const getValueFromLabel = (content) => content
.trim()
.toLowerCase()
.replace(/( and )/g, ' ')
.replace(/-/g, '')
.replace(/\s+/g, '-');
const CATEGORY_ID_PREFIX = 'categories/';
const TYPE_ID_PREFIX = 'types/';

const getCategories = (arrayCategories) => {
const tag = createTag('sp-sidenav', { variant: 'multilevel', manageTabIndex: true });
const getIdLeaf = (id) => (id?.substring(id.lastIndexOf('/') + 1) || id);

const getCategories = (items, isMultilevel, mapCategories) => {
const configuration = { manageTabIndex: true };
if (isMultilevel) {
configuration.variant = 'multilevel';
}
const mapParents = [];
const tag = createTag('sp-sidenav', configuration);
const merchTag = createTag('merch-sidenav-list', { deeplink: 'category' });
merchTag.append(tag);
const mapParents = {};
arrayCategories.forEach((item) => {
if (item.Name?.length > 0) {
const parentName = item.Name.split('|')[0].trim();
if (!mapParents[parentName]) {
mapParents[parentName] = createTag('sp-sidenav-item', { label: parentName, value: getValueFromLabel(parentName) });
tag.append(mapParents[parentName]);
}
const childName = item.Name.split('|')[1]?.trim();
if (childName) {
const childNode = createTag('sp-sidenav-item', { label: childName, value: getValueFromLabel(childName) });
mapParents[parentName].append(childNode);
items.forEach((item) => {
if (item) {
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 (isParent) {
mapParents[value] = itemTag;
tag.append(itemTag);
} else {
const parentId = getIdLeaf(item.id.substring(0, item.id.lastIndexOf('/')));
if (isMultilevel) {
if (!mapParents[parentId]) {
const parentItem = mapCategories[parentId];
if (parentItem) {
mapParents[parentId] = createTag('sp-sidenav-item', { label: parentItem.name, parentId });
tag.append(mapParents[parentId]);
}
}
parent = mapParents[parentId];
}
parent?.append(itemTag);
}
}
});
Expand All @@ -36,28 +48,52 @@ const getCategories = (arrayCategories) => {
const getTypes = (arrayTypes) => {
const tag = createTag('merch-sidenav-checkbox-group', { title: 'Types', deeplink: 'types' });
arrayTypes.forEach((item) => {
if (item.Name?.length > 0) {
const checkbox = createTag('sp-checkbox', { emphasized: '', name: getValueFromLabel(item.Name) });
checkbox.append(document.createTextNode(item.Name));
if (item.name?.length > 0) {
const checkbox = createTag('sp-checkbox', {
emphasized: '',
name: getIdLeaf(item.id),
});
checkbox.append(item.name);
tag.append(checkbox);
}
});
return tag;
};

const appendFilters = async (root, link) => {
const appendFilters = async (root, link, explicitCategoriesElt) => {
const payload = link.textContent.trim();
try {
const resp = await fetch(payload);
if (resp.ok) {
const json = await resp.json();
const arrayCategories = json.data.filter((item) => item.Type === CATEGORY_TYPE);
if (arrayCategories.length > 0) {
root.append(getCategories(arrayCategories));
const mapCategories = {};
let categoryValues = [];
const types = [];
json.data.forEach((item) => {
if (item.id?.startsWith(CATEGORY_ID_PREFIX)) {
const value = getIdLeaf(item.id);
mapCategories[value] = item;
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());
}
let shallowCategories = true;
if (categoryValues.length > 0) {
const items = categoryValues.map((value) => mapCategories[value]);
const parentValues = new Set(items.map((value) => value?.id.split('/')[1]));
// all parent will always be here without children,
// so shallow is considered below 2 parents
shallowCategories = parentValues.size <= 2;
const categoryTags = getCategories(items, !shallowCategories, mapCategories);
root.append(categoryTags);
}
const arrayTypes = json.data.filter((item) => item.Type === TYPE_TYPE);
if (arrayTypes.length > 0) {
root.append(getTypes(arrayTypes));
if (!shallowCategories && types.length > 0) {
root.append(getTypes(types));
}
}
} catch (e) {
Expand Down Expand Up @@ -104,10 +140,11 @@ export default async function init(el) {

const title = el.querySelector('h2')?.textContent.trim();
const rootNav = createTag('merch-sidenav', { title });
const searchText = el.querySelector('p')?.textContent.trim();
const searchText = el.querySelector('p > strong')?.textContent.trim();
appendSearch(rootNav, searchText);
const links = el.querySelectorAll('a');
await appendFilters(rootNav, links[0]);
const explicitCategories = el.querySelector('ul');
await appendFilters(rootNav, links[0], explicitCategories);
if (links.length > 1) {
appendResources(rootNav, links[1]);
}
Expand Down
44 changes: 41 additions & 3 deletions test/blocks/sidenav/mocks/sidenav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,55 @@ <h1 id="side-nav-testing">SIDE NAV testing</h1>
<div>
<div>
<h2 id="refine-your-results">REFINE YOUR RESULTS</h2>
<p>Search all your products</p>
<p><strong>Search all your products</strong></p>
<p><a href="/some/taxonomy.json">https://www.adobe.com/some/taxonomy.json</a></p>
<p><a href="https://www.adobe.com/products/special-offers.html">RESOURCES: Special Offers</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><a href="/some/taxonomy.json">https://www.adobe.com/some/taxonomy.json</a></p>
<ul>
<li>all</li>
<li>Graphic-design</li>
<li>Photo</li>
<li>Illustration</li>
<li>Social-media</li>
<li>Pdf</li>
<li>Esignatures</li>
<li>Coldfusion</li>
<li>Elearning</li>
<li>Print-imaging</li>
<li>Technical-communication</li>
<li>Insight-audiences</li>
<li>Content-journeys</li>
<li>Channel-engagement</li>
<li>Commerce-conversions</li>
<li>Optimization-scale</li>
</ul>
<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 id="refine-your-results-this-is-plans">REFINE YOUR RESULTS (this is plans)</h2>
<p><a href="/some/taxonomy.json">https://main--milo--adobecom.hlx.page/some/taxonomy.json/a></p>
<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>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit b4eecb0

Please sign in to comment.