MWPW-139915: catalog load swc from Milo (#149)

creativecloud/blocks/catalog/catalog.css

@@ -1,17 +1,31 @@
+.catalog.app {
+  display: flex;
+  min-height: 400px;
+  justify-content: center;
+}
+
+
 @media screen and (min-width: 1200px) {
   .catalog.app {
-    display: flex;
+    display: grid;
     gap: 36px;
-    justify-content: center;
+    grid-template-columns: 240px auto;
+    min-height: 400px;
+  }
+
+  merch-sidenav {
+    min-width: 240px;
   }
 }
 
 .catalog > merch-sidenav {
+  grid-column: 1 / span 1;
   order: 0;
 }
 
 .catalog > merch-cards {
-  order: 1;
   align-self: baseline;
+  grid-column: 2 / span 1;
+  order: 1;
   padding: 0;
 }

creativecloud/blocks/catalog/catalog.js

@@ -1,5 +1,26 @@
+/* eslint-disable chai-friendly/no-unused-expressions */
+import { getLibs } from '../../scripts/utils.js';
+
 export default async function init(el) {
-  el.classList.add('app');
+  const miloLibs = getLibs();
+  import(`${miloLibs}/deps/lit-all.min.js`);
+  import(`${miloLibs}/blocks/merch-cards/merch-cards.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/button.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/icons/checkmark.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/icons/chevron.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/help-text.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/icon.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/icons-ui.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/icons-workflow.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/menu.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/overlay.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/popover.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/reactive-controllers.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/search.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/shared.js`);
+  import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`);
+  el.classList.add('merch', 'app');
   el.innerHTML = '';
   return el;
 }

creativecloud/blocks/sidenav/sidenav.js

@@ -1,7 +1,5 @@
-import { createTag } from '../../scripts/utils.js';
+import { createTag, localizeLink, getLibs } from '../../scripts/utils.js';
 
-import '../../deps/lit-all.min.js';
-import '../../deps/merch-spectrum.min.js';
 import '../../deps/merch-sidenav.js';
 
 const CATEGORY_ID_PREFIX = 'categories/';
@@ -63,9 +61,8 @@ const getTypes = (arrayTypes) => {
 };
 
 const appendFilters = async (root, link, explicitCategoriesElt) => {
-  const payload = link.textContent.trim();
   try {
-    const resp = await fetch(payload);
+    const resp = await fetch(link);
     if (resp.ok) {
       const json = await resp.json();
       const mapCategories = {};
@@ -130,18 +127,33 @@ function appendResources(rootNav, resourceLink) {
 }
 
 export default async function init(el) {
+  const libs = getLibs();
+  await Promise.all([
+    import(`${libs}/deps/lit-all.min.js`),
+    import(`${libs}/features/spectrum-web-components/dist/theme.js`),
+    import(`${libs}/features/spectrum-web-components/dist/sidenav.js`),
+    import(`${libs}/features/spectrum-web-components/dist/search.js`),
+    import(`${libs}/features/spectrum-web-components/dist/checkbox.js`),
+    import(`${libs}/features/spectrum-web-components/dist/dialog.js`),
+  ]);
+
   const title = el.querySelector('h2')?.textContent.trim();
   const rootNav = createTag('merch-sidenav', { title });
   const searchText = el.querySelector('p > strong')?.textContent.trim();
   appendSearch(rootNav, searchText);
-  const links = el.querySelectorAll('a');
-  const explicitCategories = el.querySelector('ul');
-  await appendFilters(rootNav, links[0], explicitCategories);
-  if (links.length > 1) {
-    appendResources(rootNav, links[1]);
+  // eslint-disable-next-line prefer-const
+  let [endpoint, resourcesLink] = el.querySelectorAll('a');
+  if (endpoint) {
+    endpoint = localizeLink(endpoint.textContent.trim(), null, true);
+    const explicitCategories = el.querySelector('ul');
+    await appendFilters(rootNav, endpoint, explicitCategories);
+  }
+  if (resourcesLink) {
+    appendResources(rootNav, resourcesLink);
   }
-  const appContainer = el.closest('main > div.section')?.firstElementChild;
-  if (appContainer?.classList.contains('app')) {
+
+  const appContainer = document.querySelector('.merch.app');
+  if (appContainer) {
     appContainer.appendChild(rootNav);
     rootNav.updateComplete.then(() => {
       el.remove();

creativecloud/deps/merch-sidenav.js

@@ -1,7 +1,7 @@
-// Fri, 01 Dec 2023 13:43:45 GMT
+// Wed, 20 Dec 2023 12:32:36 GMT
 
 // src/sidenav/merch-sidenav.js
-import { html as html4, css as css5, LitElement as LitElement4 } from "./lit-all.min.js";
+import { html as html4, css as css5, LitElement as LitElement4 } from "/libs/deps/lit-all.min.js";
 
 // ../../node_modules/@spectrum-web-components/reactive-controllers/src/MatchMedia.js
 var MatchMediaController = class {
@@ -24,7 +24,7 @@ var MatchMediaController = class {
 };
 
 // src/sidenav/merch-sidenav-heading.css.js
-import { css } from "./lit-all.min.js";
+import { css } from "/libs/deps/lit-all.min.js";
 var headingStyles = css`
     h2 {
         font-size: 11px;
@@ -39,7 +39,7 @@ var headingStyles = css`
 `;
 
 // src/merch-search.js
-import { html, LitElement, css as css2 } from "./lit-all.min.js";
+import { html, LitElement, css as css2 } from "/libs/deps/lit-all.min.js";
 
 // src/deeplink.js
 function parseState(hash = window.location.hash) {
@@ -101,23 +101,23 @@ var MerchSearch = class extends LitElement {
   }
   constructor() {
     super();
-    this.handleInput = (e) => pushStateFromComponent(this, e.target.value);
+    this.handleInput = () => pushStateFromComponent(this, this.search.value);
     this.handleInputDebounced = debounce(this.handleInput.bind(this));
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("input", this.handleInputDebounced);
-    this.addEventListener("change", this.handleInputDebounced);
+    if (!this.search)
+      return;
+    this.search.addEventListener("input", this.handleInputDebounced);
+    this.search.addEventListener("change", this.handleInputDebounced);
     this.updateComplete.then(() => {
-      if (!this.search)
-        return;
       this.setStateFromURL();
     });
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("input", this.handleInputDebounced);
-    this.removeEventListener("change", this.handleInputDebounced);
+    this.search.removeEventListener("input", this.handleInputDebounced);
+    this.search.removeEventListener("change", this.handleInputDebounced);
   }
   /*
    * set the state of the search based on the URL
@@ -136,7 +136,7 @@ var MerchSearch = class extends LitElement {
 customElements.define("merch-search", MerchSearch);
 
 // src/sidenav/merch-sidenav-list.js
-import { html as html2, LitElement as LitElement2, css as css3 } from "./lit-all.min.js";
+import { html as html2, LitElement as LitElement2, css as css3 } from "/libs/deps/lit-all.min.js";
 var MerchSidenavList = class extends LitElement2 {
   static properties = {
     title: { type: String },
@@ -192,7 +192,7 @@ var MerchSidenavList = class extends LitElement2 {
    */
   setStateFromURL() {
     const state = parseState();
-    const value = state[this.deeplink];
+    const value = state[this.deeplink] ?? "all";
     if (value) {
       const element = this.querySelector(`sp-sidenav-item[value="${value}"]`) ?? this.querySelector(`sp-sidenav-item`);
       if (!element)
@@ -256,7 +256,7 @@ var MerchSidenavList = class extends LitElement2 {
 customElements.define("merch-sidenav-list", MerchSidenavList);
 
 // src/sidenav/merch-sidenav-checkbox-group.js
-import { html as html3, LitElement as LitElement3, css as css4 } from "./lit-all.min.js";
+import { html as html3, LitElement as LitElement3, css as css4 } from "/libs/deps/lit-all.min.js";
 var MerchSidenavCheckboxGroup = class extends LitElement3 {
   static properties = {
     title: { type: String },
@@ -348,6 +348,7 @@ var SPECTRUM_MOBILE_LANDSCAPE = "(max-width: 700px)";
 var TABLET_DOWN = "(max-width: 1200px)";
 
 // src/sidenav/merch-sidenav.js
+var EVENT_OPEN_MODAL = "merch-sidenav:open-modal";
 var MerchSideNav = class extends LitElement4 {
   static properties = {
     title: { type: String },
@@ -406,6 +407,7 @@ var MerchSideNav = class extends LitElement4 {
         ></sp-theme>`;
   }
   async showModal({ target }) {
+    this.dispatchEvent(new Event(EVENT_OPEN_MODAL));
     const content = this.shadowRoot.querySelector("sp-dialog-wrapper");
     const options = {
       trigger: target,

creativecloud/scripts/utils.js

@@ -31,14 +31,15 @@ export const [setLibs, getLibs] = (() => {
         return libs;
       }
       const branch = new URLSearchParams(window.location.search).get('milolibs') || 'main';
-      if (branch === 'local') return 'http://localhost:6456/libs';
-      if (branch.indexOf('--') > -1) return `https://${branch}.hlx.page/libs`;
-      return `https://${branch}--milo--adobecom.hlx.live/libs`;
+      if (branch === 'local') { libs = 'http://localhost:6456/libs'; return libs; }
+      if (branch.indexOf('--') > -1) { libs = `https://${branch}.hlx.live/libs`; return libs; }
+      libs = `https://${branch}--milo--adobecom.hlx.live/libs`;
+      return libs;
     }, () => libs,
   ];
 })();
 
 const miloLibs = setLibs('/libs');
 
-const { createTag } = await import(`${miloLibs}/utils/utils.js`);
-export { createTag };
+const { createTag, localizeLink } = await import(`${miloLibs}/utils/utils.js`);
+export { createTag, localizeLink };

libs/deps/README

@@ -0,0 +1 @@
+this is only for loading lit only once on hlx.page and hlx.live