diff --git a/creativecloud/blocks/sidenav/sidenav.js b/creativecloud/blocks/sidenav/sidenav.js
index d4c11fa75..20077af89 100644
--- a/creativecloud/blocks/sidenav/sidenav.js
+++ b/creativecloud/blocks/sidenav/sidenav.js
@@ -1,38 +1,97 @@
import { createTag } from '../../scripts/utils.js';
-import { html, css, LitElement } from '/creativecloud/deps/lit-all.min.js';
+
+import('/creativecloud/deps/lit-all.min.js');
import('/creativecloud/deps/merch-spectrum.min.js');
-import('../../deps/sidenav.js');
+import('/creativecloud/deps/merch-sidenav.js');
-const getValueFromLabel = (label) => label
+const getValueFromLabel = (content) => content
.trim()
.toLowerCase()
- .replace(/(and|-)/g, '')
+ .replace(/( and )/g, ' ')
+ .replace(/-/g, '')
.replace(/\s+/g, '-');
-const appendSidenavItem = (parent, li) => {
- const label = li.childNodes[0]?.textContent;
- const value = getValueFromLabel(label);
- const item = createTag('sp-sidenav-item', { label, value });
- parent.append(item);
- const childList = li.querySelector('ul');
- if (childList) {
- childList.querySelectorAll('li').forEach((grandChild) => {
- appendSidenavItem(item, grandChild);
- });
+const getCategories = (arrayCategories) => {
+ const tag = createTag('merch-sidenav-list', { deeplink: 'category' });
+ 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);
+ }
+ }
+ });
+ return tag;
+};
+
+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));
+ tag.append(checkbox);
+ }
+ });
+ return tag;
+};
+
+const appendFilters = async (root, link) => {
+ const payload = link.textContent.trim();
+ const resp = await fetch(payload);
+ if (resp.ok) {
+ const json = await resp.json();
+ const arrayCategories = json.data.filter((item) => item.Type === 'Categories');
+ if (arrayCategories.length > 0) {
+ root.append(getCategories(arrayCategories));
+ }
+ const arrayTypes = json.data.filter((item) => item.Type === 'Types');
+ if (arrayTypes.length > 0) {
+ root.append(getTypes(arrayTypes));
+ }
}
- parent.append(item);
};
-export default function init(el) {
- const paragraph = el.querySelector('p');
- paragraph?.remove();
- const root = el.querySelector('ul');
- if (root) {
- const title = paragraph?.textContent;
- const rootNav = createTag('filter-sidenav', { title });
- root.querySelectorAll(':scope > li').forEach((li) => {
- appendSidenavItem(rootNav, li);
- });
- root.parentNode.replaceChild(rootNav, root);
+function appendSearch(rootNav, searchText) {
+ if (searchText) {
+ const spectrumSearch = createTag('sp-search', { placeholder: searchText });
+ const search = createTag('merch-search', { deeplink: 'search' });
+ search.append(spectrumSearch);
+ rootNav.append(search);
+ }
+}
+
+function appendResources(rootNav, resourceLink) {
+ const literals = resourceLink.textContent.split(':');
+ const title = literals[0].trim();
+ const el = createTag('merch-sidenav-list', { title });
+ const label = literals[1].trim();
+ const link = createTag('sp-sidenav-item', { href: resourceLink.href });
+ if (resourceLink.href && resourceLink.href.startsWith('http')) {
+ link.append(document.createTextNode(label));
+ const icon = createTag('sp-icon-link-out-light', { class: 'right', slot: 'icon' });
+ link.append(icon);
+ }
+ el.append(link);
+ rootNav.append(el);
+}
+
+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();
+ appendSearch(rootNav, searchText);
+ const links = el.querySelectorAll('a');
+ await appendFilters(rootNav, links[0]);
+ if (links.length > 1) {
+ appendResources(rootNav, links[1]);
}
+ el.replaceWith(rootNav);
}
diff --git a/creativecloud/deps/merch-sidenav.js b/creativecloud/deps/merch-sidenav.js
new file mode 100644
index 000000000..4ddac8f15
--- /dev/null
+++ b/creativecloud/deps/merch-sidenav.js
@@ -0,0 +1,320 @@
+// Mon, 27 Nov 2023 17:34:21 GMT
+
+// src/sidenav/merch-sidenav.js
+import { html as html4, css as css5, LitElement as LitElement4 } from "./lit-all.min.js";
+
+// src/sidenav/merch-sidenav-heading.css.js
+import { css } from "./lit-all.min.js";
+var headingStyles = css`
+ h2 {
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 500;
+ height: 32px;
+ letter-spacing: 0.06em;
+ padding: 0 12px;
+ line-height: 32px;
+ color: #747474;
+ }
+`;
+
+// src/merch-search.js
+import { html, LitElement, css as css2 } from "./lit-all.min.js";
+
+// src/deeplink.js
+function parseState(hash = window.location.hash) {
+ const result = [];
+ const keyValuePairs = hash.replace(/^#/, "").split("&");
+ for (const pair of keyValuePairs) {
+ const [key, value = ""] = pair.split("=");
+ if (key) {
+ result.push([key, decodeURIComponent(value)]);
+ }
+ }
+ return Object.fromEntries(result);
+}
+function pushStateFromComponent(component, value) {
+ if (component.deeplink) {
+ const state = {};
+ state[component.deeplink] = value;
+ pushState(state);
+ }
+}
+function pushState(state) {
+ const hash = new URLSearchParams(window.location.hash.slice(1));
+ Object.entries(state).forEach(([key, value]) => {
+ if (value) {
+ hash.set(key, value);
+ } else {
+ hash.delete(key);
+ }
+ });
+ hash.sort();
+ window.location.hash = decodeURIComponent(hash.toString());
+}
+
+// src/merch-search.js
+var MerchSearch = class extends LitElement {
+ static properties = {
+ deeplink: { type: String }
+ };
+ static styles = [
+ css2`
+ :host {
+ display: block;
+ contain: content;
+ }
+ `
+ ];
+ getSearchComponent() {
+ return this.querySelector(`sp-search`);
+ }
+ connectedCallback() {
+ super.connectedCallback();
+ this.updateComplete.then(() => {
+ this.setState();
+ this.getSearchComponent().addEventListener("change", (e) => {
+ pushStateFromComponent(this, e.target.value);
+ });
+ });
+ }
+ /*
+ * set the state of the search based on the URL
+ */
+ setState() {
+ const state = parseState();
+ const value = state[this.deeplink];
+ if (value) {
+ this.getSearchComponent().value = value;
+ }
+ }
+ render() {
+ return html`