@teipublisher/pb-components 2.26.1-next.3 → 3.0.0

package/src/pb-panel.js

@@ -1,10 +1,7 @@
 import { LitElement, html, css } from 'lit-element';
 import { pbMixin } from './pb-mixin.js';
 import './pb-view.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
-import '@polymer/paper-listbox';
-import '@polymer/paper-item';
-import '@polymer/app-layout';
+import { themableMixin } from './theming.js';
 
 /**
  * A container for different views. Only one view will be shown at a time.
@@ -19,194 +16,213 @@ import '@polymer/app-layout';
  * @fires pb-refresh - Fired after a new content panel is shown to allow connected components to refresh.
  * @cssprop --pb-panel-max-height - The max height of the panel content. Set to enable scrolling.
  */
-export class PbPanel extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * the index of the active view
-             */
-            active: {
-                type: Number,
-                reflect: true
-            },
-            /**
-             * the label displayed above the dropdown for selecting the view to show
-             */
-            label: {
-                type: String
-            },
-            /**
-             * a name for each available panel, to be displayed in the dropdown. If not set,
-             * each template will be checked for a title attribute, which will be taken as name.
-             */
-            panels: {
-                type: Array,
-                reflect: true
-            },
-            /**
-             * if set, the panel can be dragged to another position in the grid. A button will
-             * be added to the toolbar to allow dragging.
-             */
-            draggable: {
-                type: Boolean
-            }
-        };
+export class PbPanel extends themableMixin(pbMixin(LitElement)) {
+
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * the index of the active view
+       */
+      active: {
+        type: Number,
+        reflect: true,
+      },
+      /**
+       * the label displayed above the dropdown for selecting the view to show
+       */
+      label: {
+        type: String,
+      },
+      /**
+       * a name for each available panel, to be displayed in the dropdown. If not set,
+       * each template will be checked for a title attribute, which will be taken as name.
+       */
+      panels: {
+        type: Array,
+        reflect: true,
+      },
+      /**
+       * if set, the panel can be dragged to another position in the grid. A button will
+       * be added to the toolbar to allow dragging.
+       */
+      draggable: {
+        type: Boolean,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.active = 0;
+    this.label = 'View';
+    this.panels = null;
+    this.position = -1;
+    this.draggable = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (!this.panels) {
+      const titles = [];
+      this.querySelectorAll('template').forEach(template => titles.push(template.title));
+      this.panels = titles;
     }
-
-    constructor() {
-        super();
-        this.active = 0;
-        this.label = 'View';
-        this.panels = null;
-        this.position = -1;
-        this.draggable = false;
+    this._show();
+  }
+
+  firstUpdated() {
+    const dragHandle = this.shadowRoot.querySelector('button[draggable="true"]');
+    let initiator = null;
+
+    if (this.draggable) {
+      dragHandle.addEventListener('dragstart', ev => {
+        ev.dataTransfer.setDragImage(this, 10, 10);
+        ev.dataTransfer.setData('text', this.position);
+        initiator = this;
+      });
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-
-        if (!this.panels) {
-            const titles = [];
-            this.querySelectorAll('template').forEach(template => titles.push(template.title));
-            this.panels = titles;
+    this.addEventListener('dragover', ev => {
+      ev.preventDefault();
+    });
+    document.addEventListener('dragenter', ev => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      if (initiator === this) {
+        return;
+      }
+      if (this.contains(ev.target)) {
+        this.classList.add('dragover');
+      } else {
+        this.classList.remove('dragover');
+      }
+    });
+    this.addEventListener('drop', ev => {
+      ev.stopPropagation();
+      ev.preventDefault();
+
+      initiator = null;
+      this.dispatchEvent(
+        new CustomEvent('pb-drop', {
+          detail: {
+            panel: ev.dataTransfer.getData('text'),
+            target: this,
+          },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    });
+  }
+
+  render() {
+    return html`
+      <nav>
+        <ul>
+          <li>
+            <select name="panels" class="dropdown" @change="${this._update}">
+              ${ this.panels.map((item, index) => html`<option value="${index}" ?selected=${index === this.active}>${item}</option>`) }
+            </select>
+          </li>
+        </ul>
+        <ul>
+          ${this.draggable
+            ? html`
+                <li>
+                  <button draggable="true">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-move" viewBox="0 0 16 16">
+                      <path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"/>
+                    </svg>
+                  </button>
+                </li>`
+            : ''}
+          <slot name="toolbar"></slot>
+        </ul>
+      </nav>
+      <slot></slot>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      nav, nav ul {
+        display: flex;
+        padding: 0;
+        justify-content: space-between;
+        align-items: center;
+        column-gap: 1rem;
+      }
+
+      nav ul, nav ul li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      
+      ::slotted(._pb_panel) {
+        overflow: auto;
+        max-height: calc(var(--pb-panel-max-height) - 72px);
+      }
+
+      :host(.dragover) {
+        background-color: var(--pb-grid-highlight-color, var(--pb-highlight-color));
+        animation: highlight 1s;
+      }
+
+      @keyframes highlight {
+        from {
+          background-color: transparent;
         }
-        this._show();
-    }
-
-    firstUpdated() {
-        const dragHandle = this.shadowRoot.getElementById('drag-handle');
-        let initiator = null;
-
-        if (this.draggable) {
-            dragHandle.addEventListener('dragstart', (ev) => {
-                ev.dataTransfer.setDragImage(this, 10, 10);
-                ev.dataTransfer.setData("text", this.position);
-                initiator = this;
-            });
+        to {
+          background-color: var(--pb-grid-highlight-color, var(--pb-highlight-color));
         }
+      }
+    `;
+  }
 
-        this.addEventListener('dragover', (ev) => {
-            ev.preventDefault();
-        });
-        document.addEventListener('dragenter', (ev) => {
-            ev.stopPropagation();
-            ev.preventDefault();
-            if (initiator === this) {
-                return;
-            }
-            if (this.contains(ev.target)) {
-                this.classList.add('dragover');
-            } else {
-                this.classList.remove('dragover');
-            }
-        });
-        this.addEventListener('drop', (ev) => {
-            ev.stopPropagation();
-            ev.preventDefault();
-
-            initiator = null;
-            this.dispatchEvent(new CustomEvent('pb-drop', {
-                detail: {
-                    panel: ev.dataTransfer.getData("text"),
-                    target: this
-                },
-                bubbles: true,
-                composed: true
-            }));
-        });
-    }
-
-    render() {
-        return html`
-            <app-toolbar id="toolbar">
-                <paper-dropdown-menu id="menu" label="${this.label}">
-                    <paper-listbox id="panels" slot="dropdown-content" class="dropdown-content" 
-                    selected="${this.active}" @selected-item-changed="${this._update}">
-                    ${this.panels.map((item) => html`<paper-item>${item}</paper-item>`)}
-                </paper-listbox>
-                </paper-dropdown-menu>
-                ${this.draggable ? html`<paper-icon-button id="drag-handle" icon="icons:open-with" draggable="true"></paper-icon-button>` : ''}
-                <slot name="toolbar"></slot>
-            </app-toolbar>
-            <slot></slot>
-        `;
-    }
+  _update() {
+    const panel = this.shadowRoot.querySelector('[name="panels"]').value;
+    if (this.active !== panel) {
+      this.active = panel;
+      this._show();
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-
-            app-toolbar {
-                padding: 0;
-                justify-content: space-between;
-            }
-
-            ::slotted(._pb_panel) {
-                overflow: auto;
-                max-height: calc(var(--pb-panel-max-height) - 72px);
-            }
-
-            app-toolbar {
-                font-size: 75%;
-            }
-
-            :host(.dragover) {
-                background-color: var(--pb-grid-highlight-color, var(--pb-highlight-color));
-                animation: highlight 1s;
-            }
-
-            @keyframes highlight {
-                from {
-                    background-color: transparent;
-                }
-                to {
-                    background-color: var(--pb-grid-highlight-color, var(--pb-highlight-color));
-                }
-            }
-        `;
+      this.refresh();
     }
+  }
 
-    _update() {
-        const panel = this.shadowRoot.getElementById('panels').selected;
-        if (this.active !== panel) {
-            this.active = panel;
-            this._show();
-        }
+  _show() {
+    const templates = this.querySelectorAll('template');
+    if (this.active >= templates.length) {
+      this.active = templates.length - 1;
     }
-
-    _show() {
-        const templates = this.querySelectorAll('template');
-        if (this.active >= templates.length) {
-            this.active = templates.length - 1;
-        }
-        console.log('<pb-panel> showing panel %s', this.active);
-        this.querySelectorAll('._pb_panel').forEach(div => div.style.display = 'none');
-        const existingPanel = this.querySelector('._pb_panel' + this.active);
-        if (existingPanel) {
-            existingPanel.style.display = '';
-        } else {
-            const template = templates[this.active];
-            const clone = document.importNode(template.content, true);
-            const div = document.createElement('div');
-            div.className = '_pb_panel _pb_panel' + this.active;
-            div.appendChild(clone);
-            this.appendChild(div);
-
-            this.emitTo('pb-panel', {
-                panel: this,
-                active: this.active
-            });
-
-            // this.refresh();
-        }
-    }
-
-    refresh() {
-        this.emitTo('pb-refresh', null);
+    console.log('<pb-panel> showing panel %s', this.active);
+    // Close other panels
+    for (const panel of this.querySelectorAll('._pb_panel')) {
+      panel.remove();
     }
 
+    // Open the correct one
+    const template = templates[this.active];
+    const clone = document.importNode(template.content, true);
+    const div = document.createElement('div');
+    div.className = `_pb_panel _pb_panel${this.active}`;
+    div.appendChild(clone);
+    this.appendChild(div);
+
+    this.emitTo('pb-panel', {
+      panel: this,
+      active: this.active
+    });
+  }
+
+  refresh() {
+    this.emitTo('pb-refresh', null);
+  }
 }
-customElements.define('pb-panel', PbPanel);
+customElements.define('pb-panel', PbPanel);

package/src/pb-popover-themes.js

@@ -1,10 +1,12 @@
 import { css } from 'lit-element';
 
 export function camelize(str) {
-    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (match, index) => {
-        if (+match === 0) return "";
-        return index === 0 ? match.toLowerCase() : match.toUpperCase();
-    }).replace('-', '');
+  return str
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, (match, index) => {
+      if (+match === 0) return '';
+      return index === 0 ? match.toLowerCase() : match.toUpperCase();
+    })
+    .replace('-', '');
 }
 
 export const base = `
@@ -26,13 +28,18 @@ export const base = `
         background-color: #333;
         color: #fff;
         border-radius: 4px;
-        font-size: var(--pb-popover-font-size, var(--pb-base-font-size, 14px));
-        line-height: var(--pb-popover-line-height, var(--pb-base-line-height, 1.4));
+        font-size: clamp(
+          calc(var(--pb-popover-font-size, 1rem) * var(--pb-min-zoom, 0.5)), 
+          calc(var(--pb-popover-font-size, 1rem) * var(--pb-zoom-factor)), 
+          calc(var(--pb-popover-font-size, 1rem) * var(--pb-max-zoom, 3.0))
+        );
+        line-height: calc(var(--pb-popover-line-height, 1.5) * var(--pb-zoom-factor));
+
         text-align: left;
         font-style: normal;
         font-weight: normal;
         outline: 0;
-        transition-property: transform, visibility, opacity
+        transition-property: transform, visibility, opacity;
     }
 
     .tippy-box[data-placement^=top]>.tippy-arrow {
@@ -324,4 +331,4 @@ export const translucent = `
     .tippy-box[data-theme~=translucent]>.tippy-svg-arrow {
         fill: rgba(0, 0, 0, .7)
     }
-`;
+`;