@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

package/src/docs/pb-component-docs.js

@@ -1,174 +1,314 @@
-import { LitElement, html, css } from 'lit-element';
-import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
-import '@polymer/app-layout/app-drawer/app-drawer.js';
-import '@polymer/paper-checkbox';
+import { LitElement, html, css } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import './pb-components-list.js';
 import { PbComponentView } from './pb-component-view.js';
 
 /**
  * An API viewer for webcomponents based on the JSON format produced
  * by web-component-analyzer.
- * 
+ *
  * @slot logo - HTML to show as logo on top of the drawer
  * @listens pb-api-component if another webcomponent should be shown
  */
 export class PbComponentDocs extends LitElement {
-    static get properties() {
-        return {
-            /**
-             * Path to the JSON file generated by web-components-analyzer
-             */
-            file: {
-                type: String
-            },
-            /**
-             * Path to the JSON file mapping component names to available demo files
-             */
-            demo: {
-                type: String
-            },
-            _target: {
-                type: String,
-                reflect: true
-            },
-            _api: {
-                type: String,
-                reflect: true
-            },
-            _json: {
-                type: Object
-            },
-            _demosOnly: {
-                type: Boolean
-            }
-        };
+  static get properties() {
+    return {
+      /**
+       * Path to the JSON file generated by web-components-analyzer
+       */
+      file: { type: String },
+      /**
+       * Path to the JSON file mapping component names to available demo files
+       */
+      demo: { type: String },
+      _target: {
+        type: String,
+        reflect: true,
+      },
+      _api: {
+        type: String,
+        reflect: true,
+      },
+      _json: { type: Object },
+      _demosOnly: { type: Boolean },
+      _drawerOpen: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.file = null;
+    this.demo = null;
+    this._target = null;
+    this._json = null;
+    this._demosOnly = false;
+    this._drawerOpen = false;
+    /** @type {PbComponentView|null} */
+    this.view = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    const target = new URL(window.location.href).searchParams.get('_target');
+    if (target) {
+      this._target = target;
     }
 
-    constructor() {
-        super();
-        this.file = null;
-        this.demo = null;
-        this._target = null;
-        /** @type {PbComponentView} */
-        this.view = null;
+    const apiVersion = new URL(window.location.href).searchParams.get('_api');
+    if (apiVersion) {
+      this._api = apiVersion;
     }
 
-    connectedCallback() {
-        super.connectedCallback();
+    window.addEventListener('popstate', ev => {
+      if (ev.state) {
+        this.view?.show(ev.state.component, ev.state.tab);
+      } else {
+        this.view?.clear();
+      }
+    });
 
-        const target = new URL(window.location).searchParams.get('_target');
-        if (target) {
-            this._target = target;
-        }
+    document.addEventListener(
+      'pb-api-component',
+      /** @param {CustomEvent} ev */ ev => {
+        const { component, tab } = ev.detail;
+        const url = `#${component.name}.${tab}`;
+        history.pushState({ component, tab }, 'view component', url);
+        this.view?.show(component, tab);
+        this._drawerOpen = false;
+        this.requestUpdate();
+      },
+    );
+  }
 
-        const apiVersion = new URL(window.location).searchParams.get('_api');
-        if (apiVersion) {
-            this._api = apiVersion;
+  firstUpdated() {
+    super.firstUpdated();
+    this.view = /** @type {PbComponentView} */ (this.shadowRoot?.getElementById('view'));
+
+    this._load().then(() => {
+      const { hash } = window.location;
+      if (hash) {
+        const [componentName, tabIdx] = hash.substring(1).split('.');
+        if (componentName && tabIdx) {
+          const comp = this._json?.tags?.find(tag => tag.name === componentName);
+          if (comp) {
+            this.view?.show(comp, parseInt(tabIdx, 10));
+          }
         }
+      }
+    });
+  }
 
-        window.addEventListener('popstate', (ev) => {
-            if (ev.state) {
-                this.view.show(ev.state.component, ev.state.tab);
-            } else {
-                this.view.clear();
-            }
-        });
-
-        document.addEventListener('pb-api-component', (/** @type {CustomEvent} */ ev) => {
-            const { component, tab } = ev.detail;
-            const url = `#${component.name}.${tab}`;
-            history.pushState({ component, tab }, "view component", url);
-            this.view.show(component, tab);
-        });
+  async _load() {
+    if (!this.file) {
+      return null;
     }
+    const response = await fetch(this.file);
+    const json = await response.json();
+    const withDemos = await this._loadDemos(json);
+    this._json = withDemos;
+    return withDemos;
+  }
 
-    firstUpdated() {
-        super.firstUpdated();
-
-        this.view = /** @type {PbComponentView} */ (this.shadowRoot.getElementById('view'));
-
-        this._load().then(() => {
-            const { hash } = window.location;
-            if (hash) {
-                const tokens = hash.substring(1).split('.');
-                const component = tokens[0];
-                const tab = tokens[1];
-                if (component && tab) {
-                    const comp = this._json.tags.find((tag) => tag.name === component);
-                    if (comp) {
-                        this.view.show(comp, parseInt(tab));
-                    }
-                }
-            }
-        });
+  async _loadDemos(json) {
+    if (!this.demo) {
+      return json;
     }
+    const response = await fetch(this.demo);
+    const data = await response.json();
+    this._demos = data;
+    json.tags.forEach(tag => {
+      tag.demo = data[tag.name] || null;
+    });
+    return json;
+  }
 
-    _load() {
-        return new Promise((resolve) => {
-            fetch(this.file)
-                .then((response) => response.json())
-                .then((data) => {
-                    this._loadDemos(data).then((dataWithDemo) => {
-                        this._json = dataWithDemo;
-                        resolve(dataWithDemo);
-                    })
-                });
-        });
-    }
+  /**
+   * Toggle demo filter checkbox.
+   * @param {Event} event
+   */
+  _filter(event) {
+    const input = /** @type {HTMLInputElement} */ (event.currentTarget);
+    this._demosOnly = input.checked;
+  }
 
-    _loadDemos(json) {
-        return new Promise((resolve) => {
-            if (this.demo) {
-                fetch(this.demo)
-                    .then((response) => response.json())
-                    .then((data) => {
-                        this._demos = data;
-                        json.tags.forEach((tag) => {
-                            if (data[tag.name]) {
-                                tag.demo = data[tag.name];
-                            } else {
-                                tag.demo = null;
-                            }
-                        });
-                        resolve(json);
-                    });
-            } else {
-                resolve(json);
-            }
-        });
-    }
+  _toggleDrawer() {
+    this._drawerOpen = !this._drawerOpen;
+  }
 
-    _filter() {
-        this._demosOnly = this.shadowRoot.getElementById('filter').checked;
-    }
+  render() {
+    const layoutClasses = {
+      'docs-layout': true,
+      'drawer-open': this._drawerOpen,
+    };
+    return html`
+      <div class="${classMap(layoutClasses)}">
+        ${this._drawerOpen
+          ? html`<div class="backdrop" @click="${this._toggleDrawer}" aria-hidden="true"></div>`
+          : null}
+        <aside id="component-sidebar" class="sidebar" aria-label="Component navigation">
+          <div class="sidebar__logo">
+            <slot name="logo"></slot>
+          </div>
+          <label class="filter-toggle">
+            <input
+              id="filter"
+              type="checkbox"
+              ?checked="${this._demosOnly}"
+              @change="${this._filter}"
+            />
+            <span>only elements with demos</span>
+          </label>
+          <pb-components-list
+            ?with-demo="${this._demosOnly}"
+            .json="${this._json}"
+          ></pb-components-list>
+        </aside>
+        <section class="content">
+          <button
+            class="drawer-toggle"
+            type="button"
+            aria-controls="component-sidebar"
+            aria-expanded="${this._drawerOpen ? 'true' : 'false'}"
+            @click="${this._toggleDrawer}"
+          >
+            ${this._drawerOpen ? 'Hide component list' : 'Show component list'}
+          </button>
+          <pb-component-view
+            id="view"
+            ._target="${this._target}"
+            ._api="${this._api}"
+          ></pb-component-view>
+        </section>
+      </div>
+    `;
+  }
 
-    render() {
-        return html`
-            <app-drawer-layout>
-                <app-drawer id="drawer" align="left" slot="drawer" persistent>
-                    <slot name="logo"></slot>
-                    <paper-checkbox id="filter" @change="${this._filter}">only elements with demos</paper-checkbox>
-                    <pb-components-list ?with-demo="${this._demosOnly}" .json="${this._json}"></pb-components-list>
-                </app-drawer>
-                <pb-component-view id="view" ._target="${this._target}" ._api="${this._api}"></pb-component-view>
-            </app-drawer-layout>
-        `;
-    }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        min-height: 100vh;
+      }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-            pb-components-list {
-                height: calc(100vh - 64px);
-                overflow: auto;
-            }
-
-            #filter {
-                margin: 20px 10px;
-            }
-        `;
-    }
+      .docs-layout {
+        position: relative;
+        display: grid;
+        grid-template-columns: 320px 1fr;
+        min-height: 100vh;
+        background: #fafafa;
+      }
+
+      .sidebar {
+        border-right: 1px solid rgba(0, 0, 0, 0.08);
+        padding: 1rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        background: #fff;
+        z-index: 3;
+      }
+
+      .sidebar__logo ::slotted(*) {
+        display: block;
+      }
+
+      .filter-toggle {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.9rem;
+        color: #333;
+      }
+
+      .filter-toggle input {
+        width: 16px;
+        height: 16px;
+        accent-color: #2196f3;
+      }
+
+      pb-components-list {
+        flex: 1 1 auto;
+        overflow: auto;
+      }
+
+      .content {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        background: #fff;
+      }
+
+      .drawer-toggle {
+        align-self: flex-end;
+        margin: 0.75rem 1rem 0;
+        padding: 0.35rem 0.75rem;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+        border-radius: 999px;
+        background: #fff;
+        color: #444;
+        font-size: 0.85rem;
+        cursor: pointer;
+        transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+      }
+
+      .drawer-toggle:hover,
+      .drawer-toggle:focus-visible {
+        background-color: rgba(33, 150, 243, 0.12);
+        border-color: rgba(33, 150, 243, 0.4);
+        color: #1565c0;
+        outline: none;
+      }
+
+      pb-component-view {
+        flex: 1 1 auto;
+        min-height: 0;
+      }
+
+      .backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.32);
+        z-index: 2;
+      }
+
+      @media (min-width: 961px) {
+        .drawer-toggle {
+          display: none;
+        }
+
+        .backdrop {
+          display: none;
+        }
+      }
+
+      @media (max-width: 960px) {
+        .docs-layout {
+          grid-template-columns: 1fr;
+        }
+
+        .sidebar {
+          position: fixed;
+          inset: 0 auto 0 0;
+          width: min(320px, 80vw);
+          max-width: 100%;
+          transform: translateX(-100%);
+          transition: transform 160ms ease;
+          box-shadow: 4px 0 12px rgba(0, 0, 0, 0.25);
+          height: 100%;
+          overflow: hidden;
+        }
+
+        .sidebar pb-components-list {
+          height: calc(100% - 120px);
+        }
+
+        .docs-layout.drawer-open .sidebar {
+          transform: translateX(0);
+        }
+      }
+    `;
+  }
 }
-customElements.define('pb-component-docs', PbComponentDocs);
+customElements.define('pb-component-docs', PbComponentDocs);