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

package/src/pb-select-feature.js

@@ -1,32 +1,32 @@
 import { LitElement, html, css } from 'lit-element';
 import { pbMixin, waitOnce } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
+import { translate } from './pb-i18n.js';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-listbox';
 import '@polymer/paper-item';
 import { registry } from './urls.js';
-import { addSelector } from "./pb-toggle-feature.js";
+import { addSelector } from './pb-toggle-feature.js';
 
 /**
  * Similar to `pb-toggle-feature` but allows you to choose from a list of defined states instead of a simple
- * on/off toggle. Like `pb-toggle-feature` it can change state server-side as well as client-side. 
- * 
+ * on/off toggle. Like `pb-toggle-feature` it can change state server-side as well as client-side.
+ *
  * The list of states is passed as a JSON array to property `items`:
- * 
+ *
  * # Server-side
- * 
+ *
  * Properties to be passed to the server are specified as follows:
- * 
+ *
  * ```javascript
  * [
  *      {"name": "Diplomatic View", "properties": {"mode": "diplomatic", "view": "page"}},
  *      {"name": "Normalized View", "properties": {"mode": "norm", "view": "single"}}
  * ]
  * ```
- * 
+ *
  * If the `name` property references the path to a translated label, the translation will be used instead.
  * # Client-side
- * 
+ *
  * ```javascript
  * [
  *      {"name": "Diplomatic View", "selectors": [{"selector": ".choice,.choice-alternate,br", "state": false},{"selector": ".tei-foreign,pb-highlight,pb-popover", "command": "disable"}]},
@@ -34,141 +34,148 @@ import { addSelector } from "./pb-toggle-feature.js";
  *      {"name": "Plain Reading View", "selectors": [{"selector": ".choice,.choice-alternate,br", "state": true}, {"selector": ".tei-foreign,pb-highlight,pb-popover", "command": "disable", "state": true}]}
  * ]
  * ```
- * 
+ *
  * Each item in the `selectors` property above defines either a state or a command. *state* will simply add
  * a css class `.toggle` to the target element when true. If *command* is set to 'disable', it will entirely disable
  * the functionality of selected elements - provided that they are
  * publisher components implementing the corresponding `command` method of `pb-mixin`.
- * 
+ *
  * Client-side you may also pass an optional property `"global": true` to toggle the state of elements which reside
  * in the surrounding HTML context below `pb-page` (means: elements which are not inside a `pb-view` or `pb-load`).
- * 
+ *
  * @fires pb-toggle - Fired when a feature is selected from the dropdown and sends the selected properties
  */
 export class PbSelectFeature extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-            * The name of the feature (required). This will correspond to the name of the custom parameter
-            * passed to the ODD.
-            */
-            name: {
-                type: String
-            },
-            /**
-             * The label to display on top of the drop down
-             */
-            label: {
-                type: String
-            },
-            selected: {
-                type: Number
-            },
-            items: {
-                type: Array
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * The name of the feature (required). This will correspond to the name of the custom parameter
+       * passed to the ODD.
+       */
+      name: {
+        type: String,
+      },
+      /**
+       * The label to display on top of the drop down
+       */
+      label: {
+        type: String,
+      },
+      selected: {
+        type: Number,
+      },
+      items: {
+        type: Array,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.initializing = true;
-        this.items = [];
-        this.label = 'document.selectFeature';
-    }
+  constructor() {
+    super();
+    this.initializing = true;
+    this.items = [];
+    this.label = 'document.selectFeature';
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
+  connectedCallback() {
+    super.connectedCallback();
 
-            registry.subscribe(this, (state) => {
-                const param = state[this.name];
-                if (typeof param !== 'undefined') {
-                    this.selected = parseInt(param, 10);
-                } else {
-                    this.selected = 0;
-                }
-                this.shadowRoot.getElementById('list').selected = this.selected;
-            });
+    registry.subscribe(this, state => {
+      const param = state[this.name];
+      if (typeof param !== 'undefined') {
+        this.selected = parseInt(param, 10);
+      } else {
+        this.selected = 0;
+      }
+      this.shadowRoot.getElementById('list').selected = this.selected;
+    });
 
-            const param = registry.state[this.name];
-            if (typeof param !== 'undefined') {
-                this.selected = parseInt(param, 10);
-            } else if (this.items.length > 0) {
-                this.selected = 0;
-            }
+    const param = registry.state[this.name];
+    if (typeof param !== 'undefined') {
+      this.selected = parseInt(param, 10);
+    } else if (this.items.length > 0) {
+      this.selected = 0;
+    }
 
-            const newState = {};
-            newState[this.name] = this.selected;
-            registry.replace(this, newState);
+    const newState = {};
+    newState[this.name] = this.selected;
+    registry.replace(this, newState);
 
-            this.signalReady();
-    }
+    this.signalReady();
+  }
 
-    firstUpdated() {
-        super.firstUpdated();
+  firstUpdated() {
+    super.firstUpdated();
 
-        this.shadowRoot.getElementById('list').selected = this.selected;
-        this.shadowRoot.getElementById('menu').addEventListener('iron-select', this._selectionChanged.bind(this));
-    }
+    this.shadowRoot.getElementById('list').selected = this.selected;
+    this.shadowRoot
+      .getElementById('menu')
+      .addEventListener('iron-select', this._selectionChanged.bind(this));
+  }
 
-    _selectionChanged() {
-        const refresh = this._saveState();
-        if (this.initializing) {
-            this.initializing = false;
-        } else {
-            this.emitTo('pb-toggle', { refresh });
-        }
+  _selectionChanged() {
+    const refresh = this._saveState();
+    if (this.initializing) {
+      this.initializing = false;
+    } else {
+      this.emitTo('pb-toggle', { refresh });
     }
+  }
 
-    _saveState() {
-        const current = this.shadowRoot.getElementById('list').selected;
+  _saveState() {
+    const current = this.shadowRoot.getElementById('list').selected;
 
-        const state = registry.getState(this);
-        state[this.name] = current;
-        Object.assign(state, this.items[current].properties);
-        if (this.items[current].selectors) {
-            if (!state.selectors) {
-                state.selectors = [];
-            }
-            this.items[current].selectors.forEach((config) => {
-                if (config.global) {
-                    registry.commit(this, state);
-                    this.dispatchEvent(new CustomEvent('pb-global-toggle', { detail: config, bubbles: true, composed: true }));
-                } else {
-                    addSelector({
-                        selector: config.selector,
-                        state: config.state,
-                        command: config.command
-                    }, state.selectors);
-                }
-            });
+    const state = registry.getState(this);
+    state[this.name] = current;
+    Object.assign(state, this.items[current].properties);
+    if (this.items[current].selectors) {
+      if (!state.selectors) {
+        state.selectors = [];
+      }
+      this.items[current].selectors.forEach(config => {
+        if (config.global) {
+          registry.commit(this, state);
+          this.dispatchEvent(
+            new CustomEvent('pb-global-toggle', { detail: config, bubbles: true, composed: true }),
+          );
+        } else {
+          addSelector(
+            {
+              selector: config.selector,
+              state: config.state,
+              command: config.command,
+            },
+            state.selectors,
+          );
         }
-        return this.items[current].properties instanceof Object
+      });
     }
+    return this.items[current].properties instanceof Object;
+  }
 
-    render() {
-        return html`
-            <paper-dropdown-menu id="menu" label="${translate(this.label)}" .disabled="${this.disabled}">
-                <paper-listbox id="list" slot="dropdown-content" .selected="${this.selected}">
-                    ${this.items.map((item) => html`<paper-item>${translate(item.name)}</paper-item>`)}
-                </paper-listbox>
-            </paper-dropdown-menu>
-        `;
-    }
+  render() {
+    return html`
+      <paper-dropdown-menu id="menu" label="${translate(this.label)}" .disabled="${this.disabled}">
+        <paper-listbox id="list" slot="dropdown-content" .selected="${this.selected}">
+          ${this.items.map(item => html`<paper-item>${translate(item.name)}</paper-item>`)}
+        </paper-listbox>
+      </paper-dropdown-menu>
+    `;
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
 
-            #menu {
-                width: inherit;
-                min-width: inherit;
-                max-width: inherit;
-            }
-        `;
-    }
+      #menu {
+        width: inherit;
+        min-width: inherit;
+        max-width: inherit;
+      }
+    `;
+  }
 }
-customElements.define('pb-select-feature', PbSelectFeature);
+customElements.define('pb-select-feature', PbSelectFeature);

package/src/pb-select-odd.js

@@ -1,13 +1,13 @@
 import { LitElement, html, css } from 'lit-element';
 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 '@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';
 
 /**
  * `pb-select-odd`: Switch between available ODDs.
@@ -19,127 +19,135 @@ 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 = [];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.subscribeTo('pb-update', this._onTargetUpdate.bind(this));
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    waitOnce('pb-page-ready', () => {
+      this._refresh();
+    });
+  }
+
+  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>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      paper-dropdown-menu {
+        --paper-listbox-background-color: white;
+        width: 100%;
+      }
+    `;
+  }
+
+  _selected() {
+    const newOdd = this.shadowRoot.getElementById('odds').selected;
+    if (newOdd === this.odd) {
+      return;
     }
-
-    constructor() {
-        super();
-
-        this.label = 'document.selectODD';
-        this.odds = [];
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-
-        this.subscribeTo('pb-update', this._onTargetUpdate.bind(this));
-    }
-
-    firstUpdated() {
-        super.firstUpdated();
-        waitOnce('pb-page-ready', () => {
-            this._refresh();
-        });
-    }
-
-    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>
-        `;
+    this.odd = newOdd;
+    console.log('<pb-select-odd> Switching to ODD %s', this.odd);
+    const doc = this.getDocument();
+    if (doc) {
+      doc.odd = this.odd;
     }
-
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-
-            paper-dropdown-menu {
-                --paper-listbox-background-color: white;
-                width: 100%;
-            }
-        `;
-    }
-
-    _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
-        });
+    registry.commit(this, { odd: this.odd });
+
+    this.emitTo('pb-refresh', {
+      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`;
     }
-
-    _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`;
-        }
-        load.params = { odd: this.odd };
-        load.generateRequest();
+    load.params = { odd: this.odd };
+    load.generateRequest();
+  }
+
+  _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');
     }
-
-    _update() {
-        const load = this.shadowRoot.getElementById('load');
-        this.odds = load.lastResponse;
+    if (newOdd !== this.odd) {
+      console.log('<pb-select-odd> Set current ODD from %s to %s', this.odd, newOdd);
     }
-
-    _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;
-    }
-
+    this.odd = newOdd;
+  }
 }
 customElements.define('pb-select-odd', PbSelectOdd);