new mas folder picker wc

adobecom · Dec 6, 2024 · 167e499 · 167e499
1 parent 46ae022
commit 167e499
Show file tree

Hide file tree

Showing 7 changed files with 417 additions and 359 deletions.
diff --git a/studio/libs/swc.js b/studio/libs/swc.js
diff --git a/studio/src/aem/aem-fragments.js b/studio/src/aem/aem-fragments.js
@@ -106,9 +106,20 @@ class AemFragments extends LitElement {
         const ignore = window.localStorage.getItem('ignore_folders') || [
             'images',
         ];
-        return children
+        const topFolders = children
             .map((folder) => folder.name)
             .filter((child) => !ignore.includes(child));
+
+        // Dispatch a custom event with the top folders
+        this.dispatchEvent(
+            new CustomEvent('top-folders-loaded', {
+                detail: { topFolders },
+                bubbles: true,
+                composed: true,
+            }),
+        );
+
+        return topFolders;
     }
 
     async addToCache(fragments) {

diff --git a/studio/src/aem/content-navigation.js b/studio/src/aem/content-navigation.js
@@ -82,11 +82,19 @@ class ContentNavigation extends LitElement {
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('toggle-filter-panel', this.toggleFilterPanel);
+        document.addEventListener(
+            'folder-change',
+            this.handleFolderChange.bind(this),
+        );
         this.registerToSource();
     }
 
     disconnectedCallback() {
         super.disconnectedCallback();
+        document.removeEventListener(
+            'folder-change',
+            this.handleFolderChange.bind(this),
+        );
         this.unregisterFromSource();
     }
 
@@ -146,38 +154,20 @@ class ContentNavigation extends LitElement {
         });
     }
 
-    handleTopFolderChange(event) {
-        this.selectTopFolder(event.target.value);
-    }
-
-    get topFolderPicker() {
-        return this.shadowRoot.querySelector('sp-picker');
-    }
-
-    toggleTopFoldersDisabled(disabled) {
-        this.topFolderPicker.disabled = disabled;
+    handleFolderChange(event) {
+        const { value, label } = event.detail;
+        console.log(`Folder selected: ${label} (${value})`);
+        this.processFolderSelection(value);
     }
 
-    renderTopFolders() {
-        if (!this.topFolders) return '';
-        const initialValue =
-            this.#initialFolder && this.topFolders.includes(this.#initialFolder)
-                ? this.#initialFolder
-                : 'ccd';
-        return html`<sp-picker
-            @change=${this.handleTopFolderChange}
-            label="TopFolder"
-            class="topFolder"
-            size="m"
-            value="${initialValue}"
-        >
-            ${this.topFolders.map(
-                (folder) =>
-                    html`<sp-menu-item value="${folder}">
-                        ${folder.toUpperCase()}
-                    </sp-menu-item>`,
-            )}
-        </sp-picker>`;
+    processFolderSelection(folderValue) {
+        console.log(`Processing folder: ${folderValue}`);
+        this.selectTopFolder(folderValue);
+        this.source.path = folderValue;
+        pushState({
+            path: this.source.path,
+            query: this.source.searchText,
+        });
     }
 
     updated(changedProperties) {
@@ -186,7 +176,7 @@ class ContentNavigation extends LitElement {
             sessionStorage.setItem(MAS_RENDER_MODE, this.mode);
         }
         this.forceUpdate();
-        this.selectTopFolder(this.topFolderPicker?.value);
+        this.selectTopFolder(this.folderValue);
     }
 
     get currentRenderer() {
@@ -206,7 +196,6 @@ class ContentNavigation extends LitElement {
         if (this.#initFromFragmentId && !this.#initialFolder) return '';
         this.#initFromFragmentId = false;
         return html`<div id="toolbar">
-                ${this.renderTopFolders()}
                 <div class="divider"></div>
                 ${this.actions}
             </div>
@@ -346,3 +335,4 @@ class ContentNavigation extends LitElement {
 }
 
 customElements.define('content-navigation', ContentNavigation);
+
diff --git a/studio/src/mas-surface-picker.js → studio/src/mas-folder-picker.js b/studio/src/mas-surface-picker.js → studio/src/mas-folder-picker.js
@@ -1,6 +1,6 @@
 import { html, css, LitElement } from 'lit';
 
-export class MasSurfacePicker extends LitElement {
+export class MasFolderPicker extends LitElement {
     static properties = {
         value: { type: String },
         options: { type: Array },
@@ -10,14 +10,12 @@ export class MasSurfacePicker extends LitElement {
 
     constructor() {
         super();
-        this.options = [
-            { value: 'adobedotcom', label: 'Adobe.com' },
-            { value: 'ccd', label: 'Creative Cloud Desktop' },
-            { value: 'home', label: 'Adobe Home' },
-        ];
-        this.value = this.options[0].value;
-        this.label = this.options[0].label;
+        this.options = [];
+        this.value = '';
+        this.label = '';
         this.open = false;
+
+        this.handleTopFolders = this.handleTopFolders.bind(this);
     }
 
     static styles = css`
@@ -99,6 +97,36 @@ export class MasSurfacePicker extends LitElement {
         }
     `;
 
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('top-folders-loaded', this.handleTopFolders);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Remove the event listener
+        document.removeEventListener(
+            'top-folders-loaded',
+            this.handleTopFolders,
+        );
+    }
+
+    handleTopFolders(event) {
+        const { topFolders } = event.detail;
+
+        this.options = topFolders.map((folder) => ({
+            value: folder.toLowerCase(),
+            label: folder.toUpperCase(),
+        }));
+
+        if (this.options.length > 0) {
+            this.value = this.options[0].value;
+            this.label = this.options[0].label;
+        }
+
+        this.requestUpdate();
+    }
+
     firstUpdated() {
         const spMenu = this.shadowRoot.querySelector('sp-menu');
         if (spMenu) {
@@ -114,7 +142,7 @@ export class MasSurfacePicker extends LitElement {
             const spMenu = this.shadowRoot.querySelector('sp-menu');
             if (spMenu) {
                 spMenu.addEventListener(
-                    'change',
+                    'folder-change',
                     this.handleSelection.bind(this),
                 );
             }
@@ -129,17 +157,20 @@ export class MasSurfacePicker extends LitElement {
         this.open = false;
     }
 
+    get source() {
+        return document.querySelector('aem-fragments');
+    }
+
     handleSelection(event) {
-        const spMenu = event.target; // The sp-menu element
-        this.value = spMenu.value; // The selected value
+        const spMenu = event.target;
+        this.value = spMenu.value;
         const selectedOption = this.options.find(
             (option) => option.value === this.value,
         );
         this.label = selectedOption ? selectedOption.label : '';
         this.closeDropdown();
-        console.log('Selected value:', this.value);
         this.dispatchEvent(
-            new CustomEvent('picker-change', {
+            new CustomEvent('folder-change', {
                 detail: { value: this.value, label: this.label },
                 bubbles: true,
                 composed: true,
@@ -159,7 +190,6 @@ export class MasSurfacePicker extends LitElement {
                 @keydown=${this.handleKeyDown}
             >
                 <span class="button-content">
-                    <!-- SVG Icon -->
                     <svg
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
@@ -176,10 +206,8 @@ export class MasSurfacePicker extends LitElement {
                             d="M19 0h11v26zM11.1 0H0v26zM15 9.6L22.1 26h-4.6l-2.1-5.2h-5.2z"
                         ></path>
                     </svg>
-                    <!-- Selected Label -->
                     <span class="surface-selection">${this.label}</span>
                 </span>
-                <!-- Chevron Icon -->
                 <sp-icon-chevron-down
                     dir="ltr"
                     class="chevron"
@@ -235,4 +263,4 @@ export class MasSurfacePicker extends LitElement {
     }
 }
 
-customElements.define('mas-surface-picker', MasSurfacePicker);
+customElements.define('mas-folder-picker', MasFolderPicker);
diff --git a/studio/src/studio.js b/studio/src/studio.js
@@ -5,7 +5,7 @@ import './editors/merch-card-editor.js';
 import './rte/rte-field.js';
 import './rte/rte-link-editor.js';
 import './mas-top-nav.js';
-import './mas-surface-picker.js';
+import './mas-folder-picker.js';
 import { contentIcon } from './img/content-icon.js';
 import { promosIcon } from './img/promos-icon.js';
 import { ostIcon } from './img/ost-icon.js';
@@ -325,7 +325,11 @@ class MasStudio extends LitElement {
                 bucket="${this.bucket}"
                 variant="${this.variant}"
             ></aem-fragments>
-            <content-navigation source="aem" ?disabled=${this.fragment}>
+            <content-navigation
+                class="${this.showSplash ? 'hide' : 'show'}"
+                source="aem"
+                ?disabled=${this.fragment}
+            >
                 <table-view .customRenderItem=${this.customRenderItem}>
                     <sp-table-head-cell slot="headers"
                         >Variant</sp-table-head-cell
@@ -352,7 +356,10 @@ class MasStudio extends LitElement {
 
     renderSplashScreen() {
         return html`
-            <div id="splash-container">
+            <div
+                class="${this.showSplash ? 'show' : 'hide'}"
+                id="splash-container"
+            >
                 <h1>Welcome, Nick</h1>
                 <div class="quick-actions">
                     <h2>Quick Actions</h2>
@@ -391,17 +398,17 @@ class MasStudio extends LitElement {
             <div class="studio-content">
                 <side-nav>
                     <div class="dropdown-container">
-                        <mas-surface-picker
-                            @picker-change=${this.handleSurfaceChange}
-                        ></mas-surface-picker>
+                        <mas-folder-picker
+                            @picker-change=${this.handleFolderChange}
+                        ></mas-folder-picker>
                     </div>
                     <sp-sidenav>
                         <sp-sidenav-item label="Home" value="home" selected>
                             <sp-icon-home slot="icon"></sp-icon-home>
                         </sp-sidenav-item>
 
                         <sp-sidenav-item label="Promotions" value="promotions">
-                            <sp-icon-campaign slot="icon"></sp-icon-campaign>
+                            <sp-icon-promote slot="icon"></sp-icon-promote>
                         </sp-sidenav-item>
 
                         <sp-sidenav-item label="Reporting" value="reporting">
@@ -418,15 +425,12 @@ class MasStudio extends LitElement {
                     </sp-sidenav>
                 </side-nav>
                 <div class="content-container">
-                    ${this.showSplash
-                        ? this.renderSplashScreen()
-                        : html`
-                              <div class="content">
-                                  ${this.content} ${this.fragmentEditor}
-                                  ${this.selectFragmentDialog} ${this.toast}
-                                  ${this.loadingIndicator}
-                              </div>
-                          `}
+                    ${this.renderSplashScreen()}
+                    <div class="content">
+                        ${this.content} ${this.fragmentEditor}
+                        ${this.selectFragmentDialog} ${this.toast}
+                        ${this.loadingIndicator}
+                    </div>
                 </div>
             </div>
         `;
@@ -436,10 +440,13 @@ class MasStudio extends LitElement {
         return html`<sp-toast timeout="6000" popover></sp-toast>`;
     }
 
-    handleSurfaceChange(event) {
+    handleFolderChange(event) {
         const selectedValue = event.detail.value;
-        console.log('Selected value from surface picker:', selectedValue);
-
+        document.dispatchEvent(
+            new CustomEvent('folder-change', {
+                detail: { value: selectedValue },
+            }),
+        );
         this.bucket = selectedValue;
         this.requestUpdate();
     }

diff --git a/studio/src/swc.js b/studio/src/swc.js
@@ -35,6 +35,7 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-labels.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-link.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-money.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-promote.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-new-item.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-offer.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-open-in.js';

diff --git a/studio/style.css b/studio/style.css
@@ -22,6 +22,14 @@ mas-studio {
     flex-direction: column;
 }
 
+.show {
+    display: initial;
+}
+
+.hide {
+    display: none;
+}
+
 .studio-content {
     display: grid;
     grid-template-columns: 240px 1fr;