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

package/src/pb-select-odd.js

@@ -1,13 +1,8 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from './pb-i18n.js';
-import "@polymer/paper-listbox";
-import "@polymer/paper-item";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/iron-ajax";
-import "web-animations-js";
-import "@polymer/neon-animation";
-import {registry} from "./urls.js";
+import { registry } from './urls.js';
 
 /**
  * `pb-select-odd`: Switch between available ODDs.
@@ -19,127 +14,198 @@ import {registry} from "./urls.js";
  *
  */
 export class PbSelectOdd extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /** The label to show on top of the dropdown menu */
-            label: {
-                type: String
-            },
-            /** The ODDs to show. */
-            odds: {
-                type: Array
-            },
-            name: {
-                type: String
-            },
-            /** Currently selected ODD. If this property is set, the component
-             * will immediately load the list of ODDs from the server and select
-             * the given ODD.
-             */
-            odd: {
-                type: String,
-                notify: true
-            }
-        };
+  static get properties() {
+    return {
+      ...super.properties,
+      /** The label to show on top of the dropdown menu */
+      label: {
+        type: String,
+      },
+      /** The ODDs to show. */
+      odds: {
+        type: Array,
+      },
+      name: {
+        type: String,
+      },
+      /** Currently selected ODD. If this property is set, the component
+       * will immediately load the list of ODDs from the server and select
+       * the given ODD.
+       */
+      odd: {
+        type: String,
+        notify: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.label = 'document.selectODD';
+    this.odds = [];
+    PbSelectOdd.__counter = (PbSelectOdd.__counter || 0) + 1;
+    this._selectId = `pb-select-odd-${PbSelectOdd.__counter}`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.subscribeTo('pb-update', this._onTargetUpdate.bind(this));
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    waitOnce('pb-page-ready', () => {
+      this._refresh();
+    });
+  }
+
+  render() {
+    return html`
+      <label class="pb-select-odd__label" for="${this._selectId}"> ${translate(this.label)} </label>
+      <div class="pb-select-odd__control">
+        <select
+          id="${this._selectId}"
+          class="pb-select-odd__select"
+          name=${ifDefined(this.name || undefined)}
+          .value=${this.odd ?? ''}
+          @change=${this._handleChange}
+        >
+          ${this.odds.map(item => html`<option value="${item.name}">${item.label}</option>`)}
+        </select>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      .pb-select-odd__label {
+        display: block;
+        margin-bottom: 0.35rem;
+        font-size: 0.85rem;
+        font-weight: 600;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        color: rgba(0, 0, 0, 0.6);
+      }
+
+      .pb-select-odd__control {
+        position: relative;
+        display: flex;
+      }
+
+      .pb-select-odd__select {
+        width: 100%;
+        min-width: 220px;
+        padding: 0.45rem 2.25rem 0.45rem 0.75rem;
+        border-radius: 8px;
+        border: 1px solid rgba(0, 0, 0, 0.16);
+        background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.5) 50%),
+          linear-gradient(135deg, rgba(0, 0, 0, 0.5) 50%, transparent 50%),
+          linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
+        background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px),
+          calc(100% - 2.5rem) 0.5em;
+        background-size: 5px 5px, 5px 5px, 1px 2.25em;
+        background-repeat: no-repeat;
+        font: inherit;
+        color: inherit;
+        line-height: 1.2;
+      }
+
+      .pb-select-odd__select:focus {
+        outline: none;
+        border-color: #1976d2;
+        box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.16);
+      }
+    `;
+  }
+
+  updated(changed) {
+    if (changed.has('odds') && (!this.odd || !this.odds.find(item => item.name === this.odd))) {
+      const first = this.odds[0];
+      if (first) {
+        this.odd = first.name;
+      }
     }
+  }
 
-    constructor() {
-        super();
-
-        this.label = 'document.selectODD';
-        this.odds = [];
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-
-        this.subscribeTo('pb-update', this._onTargetUpdate.bind(this));
+  _handleChange(ev) {
+    const select = ev.target;
+    const newOdd = select.value;
+    if (newOdd === this.odd) {
+      return;
     }
-
-    firstUpdated() {
-        super.firstUpdated();
-        waitOnce('pb-page-ready', () => {
-            this._refresh();
-        });
+    this.odd = newOdd;
+    console.log('<pb-select-odd> Switching to ODD %s', this.odd);
+    const doc = this.getDocument();
+    if (doc) {
+      doc.odd = this.odd;
     }
-
-    render() {
-        return html`
-            <paper-dropdown-menu id="menu" label="${translate(this.label)}" name="${this.name}">
-                <paper-listbox id="odds" slot="dropdown-content" class="dropdown-content" selected="${this.odd}"
-                    attr-for-selected="value" @selected-item-changed="${this._selected}">
-                    ${this.odds.map((item) => html`<paper-item value="${item.name}">${item.label}</paper-item>`)}
-                </paper-listbox>
-            </paper-dropdown-menu>
-
-            <iron-ajax
-                id="load"
-                verbose
-                handle-as="json"
-                method="get"
-                with-credentials
-                @response="${this._update}"></iron-ajax>
-        `;
+    registry.commit(this, { odd: this.odd });
+
+    this.emitTo('pb-refresh', {
+      odd: this.odd,
+    });
+  }
+
+  _refresh() {
+    let url;
+    if (this.minApiVersion('1.0.0')) {
+      url = `${this.getEndpoint()}/api/odd`;
+    } else {
+      url = `${this.getEndpoint()}/modules/lib/components-list-odds.xql`;
     }
-
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-
-            paper-dropdown-menu {
-                --paper-listbox-background-color: white;
-                width: 100%;
-            }
-        `;
+    const absoluteUrl = this.toAbsoluteURL(url);
+    let requestUrl;
+    try {
+      requestUrl = new URL(absoluteUrl);
+    } catch (_) {
+      requestUrl = new URL(absoluteUrl, window.location.href);
     }
-
-    _selected() {
-        const newOdd = this.shadowRoot.getElementById('odds').selected;
-        if (newOdd === this.odd) {
-            return;
-        }
-        this.odd = newOdd;
-        console.log('<pb-select-odd> Switching to ODD %s', this.odd);
-        const doc = this.getDocument();
-        if (doc) {
-            doc.odd = this.odd;
-        }
-        registry.commit(this,{odd: this.odd});
-
-        this.emitTo('pb-refresh', {
-            odd: this.odd
-        });
+    if (this.odd) {
+      requestUrl.searchParams.set('odd', this.odd);
     }
-
-    _refresh() {
-        const load = this.shadowRoot.getElementById('load');
-        if (this.minApiVersion('1.0.0')) {
-            load.url = `${this.getEndpoint()}/api/odd`;
-        } else {
-            load.url = `${this.getEndpoint()}/modules/lib/components-list-odds.xql`;
+    fetch(requestUrl.href, {
+      method: 'GET',
+      credentials: 'include',
+      headers: { Accept: 'application/json' },
+    })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`Failed to load ODDs (${response.status})`);
         }
-        load.params = { odd: this.odd };
-        load.generateRequest();
+        return response.json();
+      })
+      .then(data => {
+        this._updateOdds(Array.isArray(data) ? data : []);
+      })
+      .catch(err => {
+        console.error('<pb-select-odd> request failed', err);
+        this._updateOdds([]);
+      });
+  }
+
+  _updateOdds(list) {
+    this.odds = list;
+    if (list.length && (!this.odd || !list.find(item => item.name === this.odd))) {
+      this.odd = list[0].name;
     }
+  }
 
-    _update() {
-        const load = this.shadowRoot.getElementById('load');
-        this.odds = load.lastResponse;
+  _onTargetUpdate(ev) {
+    let newOdd = ev.detail.data.odd;
+    if (newOdd) {
+      newOdd = newOdd.replace(/^(.*?)\.[^\.]+$/, '$1');
     }
-
-    _onTargetUpdate(ev) {
-        let newOdd = ev.detail.data.odd;
-        if (newOdd) {
-            newOdd = newOdd.replace(/^(.*?)\.[^\.]+$/, '$1');
-        }
-        if (newOdd !== this.odd) {
-            console.log('<pb-select-odd> Set current ODD from %s to %s', this.odd, newOdd);
-        }
-        this.odd = newOdd;
+    if (newOdd !== this.odd) {
+      console.log('<pb-select-odd> Set current ODD from %s to %s', this.odd, newOdd);
     }
-
+    this.odd = newOdd;
+  }
 }
 customElements.define('pb-select-odd', PbSelectOdd);

package/src/pb-select-template.js

@@ -1,12 +1,9 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from './pb-i18n.js';
 import { registry } from './urls.js';
 
-import "@polymer/paper-listbox";
-import "@polymer/paper-item";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
-import "@polymer/iron-ajax";
+import './pb-fetch.js';
 
 /**
  * `pb-select-template`: Switch between available page templates.
@@ -15,86 +12,124 @@ import "@polymer/iron-ajax";
  *
  */
 export class PbSelectTemplate extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /** The label to show on top of the dropdown menu */
-            label: {
-                type: String
-            },
-            /** Currently selected ODD. If this property is set, the component
-             * will immediately load the list of ODDs from the server and select
-             * the given ODD.
-             */
-            template: {
-                type: String
-            },
-            _templates: {
-                type: Array
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      /** The label to show on top of the dropdown menu */
+      label: {
+        type: String,
+      },
+      name: {
+        type: String,
+      },
+      /** Currently selected ODD. If this property is set, the component
+       * will immediately load the list of ODDs from the server and select
+       * the given ODD.
+       */
+      template: {
+        type: String,
+      },
+      _templates: {
+        type: Array,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.label = 'document.selectTemplate';
-        this._templates = [];
-    }
+  constructor() {
+    super();
+    this.label = 'document.selectTemplate';
+    this.name = '';
+    this._templates = [];
+  }
 
-    firstUpdated() {
-        waitOnce('pb-page-ready', (options) => {
-            this.template = options.template;
-            const loader = this.shadowRoot.getElementById('getTemplates');
-            if (this.minApiVersion('1.0.0')) {
-                loader.url = `${options.endpoint}/api/templates`;
-            } else {
-                loader.url = `${options.endpoint}/modules/lib/components-list-templates.xql`;
-            }
-                
-            loader.generateRequest();
-        });
-    }
+  firstUpdated() {
+    waitOnce('pb-page-ready', options => {
+      this.template = options.template;
+      const loader = this.shadowRoot.getElementById('getTemplates');
+      if (this.minApiVersion('1.0.0')) {
+        loader.url = `${options.endpoint}/api/templates`;
+      } else {
+        loader.url = `${options.endpoint}/modules/lib/components-list-templates.xql`;
+      }
 
-    render() {
-        return html`
-            <paper-dropdown-menu id="menu" label="${translate(this.label)}" name="${this.name}">
-                <paper-listbox id="templates" slot="dropdown-content" class="dropdown-content" 
-                    selected="${this.template}" attr-for-selected="value"
-                    @selected-item-changed="${this._selected}">
-                ${this._templates.map((item) => html`<paper-item value="${item.name}">${item.title}</paper-item>`)}
-                </paper-listbox>
-            </paper-dropdown-menu>
+      loader.generateRequest();
+    });
+  }
 
-            <iron-ajax id="getTemplates" with-credentials
-                handle-as="json" @response="${this._handleTemplatesResponse}"
-                method="GET"></iron-ajax>
-        `;
-    }
+  render() {
+    return html`
+      <label class="pb-select-template__label" for="template-select">
+        ${translate(this.label)}
+      </label>
+      <select
+        id="template-select"
+        class="pb-select-template__select"
+        name="${this.name || ''}"
+        @change="${this._selected}"
+        .value="${this.template || ''}"
+      >
+        ${this._templates.map(item => html`<option value="${item.name}">${item.title}</option>`)}
+      </select>
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-            paper-dropdown-menu {
-                --paper-listbox-background-color: white;
-                width: 100%;
-            }
-        `;
-    }
+      <pb-fetch
+        id="getTemplates"
+        with-credentials
+        handle-as="json"
+        @response="${this._handleTemplatesResponse}"
+        method="GET"
+      ></pb-fetch>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+      .pb-select-template__label {
+        display: block;
+        margin-bottom: 4px;
+        font-weight: 600;
+        font-size: 0.95rem;
+        color: var(--pb-label-color, #303030);
+      }
+
+      .pb-select-template__select {
+        width: 100%;
+        padding: 8px 12px;
+        border-radius: 4px;
+        border: 1px solid var(--pb-border-color, #c0c0c0);
+        font-size: 1rem;
+        background-color: #fff;
+        color: inherit;
+      }
+
+      .pb-select-template__select:focus {
+        outline: none;
+        border-color: var(--pb-primary-color, #1976d2);
+        box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
+      }
+    `;
+  }
 
-    _selected() {
-        const newTemplate = this.shadowRoot.getElementById('templates').selected;
-        if (newTemplate === this.template) {
-            return;
-        }
-        registry.replace(this, { template: newTemplate });
-        window.location.reload();
+  _selected() {
+    const select = this.shadowRoot.getElementById('template-select');
+    if (!select) return;
+    const newTemplate = select.value;
+    if (newTemplate === this.template) {
+      return;
     }
+    registry.replace(this, { template: newTemplate });
+    window.location.reload();
+  }
 
-    _handleTemplatesResponse() {
-        const loader = this.shadowRoot.getElementById('getTemplates');
-        this._templates = loader.lastResponse;
+  _handleTemplatesResponse() {
+    const loader = this.shadowRoot.getElementById('getTemplates');
+    this._templates = loader.lastResponse || [];
+    const select = this.shadowRoot.getElementById('template-select');
+    if (select && this.template) {
+      select.value = this.template;
     }
+  }
 }
-customElements.define('pb-select-template', PbSelectTemplate);
+customElements.define('pb-select-template', PbSelectTemplate);