@teipublisher/pb-components 2.25.5 → 2.25.6

package/src/pb-custom-form.js

@@ -19,159 +19,160 @@ import { PbLoad } from './pb-load.js';
  * @fires pb-submit - Fired when the form is submitted
  */
 export class PbCustomForm extends PbLoad {
-
-    firstUpdated() {
-        this.shadowRoot.getElementById('ironform').addEventListener('iron-form-presubmit', (ev) => {
-            ev.preventDefault();
-            this._submit();
-        });
-        this.addEventListener('click', (e) => {
-            if (e.target.slot === 'searchButtonTop'){
-                this.submit();
-            }
-            if (e.target.slot === 'searchButtonBottom'){
-                this.submit();
-            }
-            if (e.target.slot === 'resetButton'){
-                this._reset();
-            }
-        });
-
-        this._submissionHandlers();
+  firstUpdated() {
+    this.shadowRoot.getElementById('ironform').addEventListener('iron-form-presubmit', ev => {
+      ev.preventDefault();
+      this._submit();
+    });
+    this.addEventListener('click', e => {
+      if (e.target.slot === 'searchButtonTop') {
+        this.submit();
+      }
+      if (e.target.slot === 'searchButtonBottom') {
+        this.submit();
+      }
+      if (e.target.slot === 'resetButton') {
+        this._reset();
+      }
+    });
+
+    this._submissionHandlers();
+  }
+
+  render() {
+    return html`
+      <iron-form id="ironform">
+        <form action="" accept="text/html" method="GET">
+          <slot name="searchButtonTop"></slot>
+          <slot></slot>
+          <slot name="searchButtonBottom"></slot>
+          <slot name="resetButton"></slot>
+        </form>
+      </iron-form>
+
+      <iron-ajax
+        id="loadContent"
+        verbose
+        handle-as="text"
+        method="get"
+        with-credentials
+        @response="${this._handleContent}"
+        @error="${this._handleError}"
+      ></iron-ajax>
+      <paper-dialog id="errorDialog">
+        <h2>Error</h2>
+        <paper-dialog-scrollable></paper-dialog-scrollable>
+        <div class="buttons">
+          <paper-button dialog-confirm="dialog-confirm" autofocus="autofocus"> Close </paper-button>
+        </div>
+      </paper-dialog>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
+
+  submit() {
+    this.shadowRoot.getElementById('ironform').submit();
+  }
+
+  _submit() {
+    const json = this.serializeForm();
+    this.emitTo('pb-search-resubmit', { params: json });
+    this.emitTo('pb-submit', { params: json });
+  }
+
+  _reset() {
+    this.shadowRoot.getElementById('ironform').reset();
+  }
+
+  /**
+   * serialize custom form to object with name value pairs
+   * empty, unselected and undifined inputs will be returned
+   * as null while disabled elements will still be omitted
+   * this allows url parameters to be reset in the URL
+   * as IronForm.serializeform will omit names without a value
+   * @returns {Object} name value pairs
+   */
+  serializeForm() {
+    const elements = this.shadowRoot.getElementById('ironform')._getSubmittableElements();
+    const initial = {};
+    for (const element of elements) {
+      initial[element.name] = null;
     }
+    return Object.assign(initial, this.shadowRoot.getElementById('ironform').serializeForm());
+  }
 
-    render() {
-        return html`
-            <iron-form id="ironform">
-                <form action="" accept="text/html" method="GET">
-                    <slot name="searchButtonTop"></slot>
-                    <slot></slot>
-                    <slot name="searchButtonBottom"></slot>
-                    <slot name="resetButton"></slot>
-                </form>
-            </iron-form>
-
-            <iron-ajax
-                id="loadContent"
-                verbose
-                handle-as="text"
-                method="get"
-                with-credentials
-                @response="${this._handleContent}"
-                @error="${this._handleError}"></iron-ajax>
-            <paper-dialog id="errorDialog">
-                <h2>Error</h2>
-                <paper-dialog-scrollable></paper-dialog-scrollable>
-                <div class="buttons">
-                    <paper-button dialog-confirm="dialog-confirm" autofocus="autofocus">
-                        Close
-                    </paper-button>
-                </div>
-            </paper-dialog>
-        `;
-    }
+  _parseHeaders(xhr) {
+    // overwrite to avoid `pb-results-received` event being sent
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-        `;
-    }
-
-    submit() {
-        this.shadowRoot.getElementById('ironform').submit();
-    }
+  _onLoad(content) {
+    super._onLoad(content);
 
-    _submit() {
-        const json = this.serializeForm();
-        this.emitTo('pb-search-resubmit', { params: json });
-        this.emitTo('pb-submit', { params: json});
-    }
-
-    _reset(){
-        this.shadowRoot.getElementById('ironform').reset();
-    }
-    
-    /**
-     * serialize custom form to object with name value pairs
-     * empty, unselected and undifined inputs will be returned
-     * as null while disabled elements will still be omitted
-     * this allows url parameters to be reset in the URL
-     * as IronForm.serializeform will omit names without a value
-     * @returns {Object} name value pairs
-     */
-    serializeForm() {
-        const elements = this.shadowRoot.getElementById('ironform')._getSubmittableElements()
-        const initial = {}
-        for (const element of elements) {
-            initial[element.name] = null;
-        }
-        return Object.assign(
-            initial,
-            this.shadowRoot.getElementById('ironform').serializeForm()
-        );
-    }
+    this.dispatchEvent(new CustomEvent('pb-custom-form-loaded', { detail: content }));
+  }
 
-    _parseHeaders(xhr) {
-        // overwrite to avoid `pb-results-received` event being sent
+  _submissionHandlers() {
+    if (!this.autoSubmit) {
+      return;
     }
-
-    _onLoad(content) {
-        super._onLoad(content);
-
-        this.dispatchEvent(new CustomEvent('pb-custom-form-loaded', { detail: content }));
-    }
-
-    _submissionHandlers() {
-        if (!this.autoSubmit) {
-            return;
-        }
-        this.querySelectorAll(this.autoSubmit).forEach((control) => {
-            const name = control.nodeName.toLowerCase();
-            let event = 'change';
-            if (control instanceof HTMLButtonElement ||
-                name === 'paper-icon-button' || name === 'paper-button' ||
-                (name === 'input' && (control.type === 'button' || control.type === 'submit' || control.type === 'reset'))
-            ) {
-                event = 'click';
-            } else if (name === 'paper-input' || (control instanceof HTMLInputElement && control.type === 'text')) {
-                event = 'keyup';
-            } else if (name === 'paper-dropdown-menu') {
-                event = 'value-changed';
-            }
-            control.addEventListener(event, this._submit.bind(this));
-        });
-    }
-
-    static get properties() {
-        return {
-            /**
-             * Register event handlers on all descendant elements matching the given CSS selector and submit the form
-             * automatically if any of those changes. For button-like controls,
-             * a submit is triggered on click, for text input on keyUp, and for
-             * all other form components on change.
-             */
-            autoSubmit: {
-                type: String,
-                attribute: 'auto-submit'
-            },
-            ...super.properties
-        };
-    }
-
-    /**
-     * Fired before the element updates its content
-     *
-     * @event pb-custom-form-loaded
-     * @param {string} the loaded content
-     */
-
-    /**
-     * Fired when form is submitted
-     *
-     * @event pb-search-resubmit
-     * @param {object} params: serialized form parameters as json object
-     */
+    this.querySelectorAll(this.autoSubmit).forEach(control => {
+      const name = control.nodeName.toLowerCase();
+      let event = 'change';
+      if (
+        control instanceof HTMLButtonElement ||
+        name === 'paper-icon-button' ||
+        name === 'paper-button' ||
+        (name === 'input' &&
+          (control.type === 'button' || control.type === 'submit' || control.type === 'reset'))
+      ) {
+        event = 'click';
+      } else if (
+        name === 'paper-input' ||
+        (control instanceof HTMLInputElement && control.type === 'text')
+      ) {
+        event = 'keyup';
+      } else if (name === 'paper-dropdown-menu') {
+        event = 'value-changed';
+      }
+      control.addEventListener(event, this._submit.bind(this));
+    });
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Register event handlers on all descendant elements matching the given CSS selector and submit the form
+       * automatically if any of those changes. For button-like controls,
+       * a submit is triggered on click, for text input on keyUp, and for
+       * all other form components on change.
+       */
+      autoSubmit: {
+        type: String,
+        attribute: 'auto-submit',
+      },
+      ...super.properties,
+    };
+  }
+
+  /**
+   * Fired before the element updates its content
+   *
+   * @event pb-custom-form-loaded
+   * @param {string} the loaded content
+   */
+
+  /**
+   * Fired when form is submitted
+   *
+   * @event pb-search-resubmit
+   * @param {object} params: serialized form parameters as json object
+   */
 }
-customElements.define('pb-custom-form', PbCustomForm);
+customElements.define('pb-custom-form', PbCustomForm);

package/src/pb-document.js

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit-element';
 import { pbMixin } from './pb-mixin.js';
-import { registry } from "./urls.js";
+import { registry } from './urls.js';
 
 /**
  * Represents a Publisher document. It has no visual presentation but holds meta-data
@@ -11,108 +11,107 @@ import { registry } from "./urls.js";
  * @fires pb-document - Fires update event
  */
 class PbDocument extends pbMixin(LitElement) {
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * The path to the document to be loaded. Should be relative to `root`.
+       */
+      path: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * The root collection which will be used to resolve relative paths
+       * specified in `path`.
+       */
+      rootPath: {
+        type: String,
+        attribute: 'root-path',
+      },
+      /**
+       * The odd file which should be used to render this document by default. Might be
+       * overwritten in a `pb-view`. The odd should be specified by its name without path
+       * or the `.odd` suffix.
+       */
+      odd: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * The default view to be used for displaying this document. Can be either `page`, `div` or `simple`.
+       * Might be overwritten in a `pb-view`.
+       *
+       * Value | Displayed content
+       * ------|------------------
+       * `page` | content is displayed page by page as determined by tei:pb
+       * `div` | content is displayed by divisions
+       * `single` | do not paginate but display entire content at once
+       */
+      view: {
+        type: String,
+        reflect: true,
+      },
+      disableHistory: {
+        type: Boolean,
+        attribute: 'disable-history',
+      },
+      sourceView: {
+        type: String,
+        attribute: 'source-view',
+      },
+    };
+  }
 
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * The path to the document to be loaded. Should be relative to `root`.
-             */
-            path: {
-                type: String,
-                reflect: true
-            },
-            /**
-             * The root collection which will be used to resolve relative paths
-             * specified in `path`.
-             */
-            rootPath: {
-                type: String,
-                attribute: 'root-path'
-            },
-            /**
-             * The odd file which should be used to render this document by default. Might be
-             * overwritten in a `pb-view`. The odd should be specified by its name without path
-             * or the `.odd` suffix.
-             */
-            odd: {
-                type: String,
-                reflect: true
-            },
-            /**
-             * The default view to be used for displaying this document. Can be either `page`, `div` or `simple`.
-             * Might be overwritten in a `pb-view`.
-             *
-             * Value | Displayed content
-             * ------|------------------
-             * `page` | content is displayed page by page as determined by tei:pb
-             * `div` | content is displayed by divisions
-             * `single` | do not paginate but display entire content at once
-             */
-            view: {
-                type: String,
-                reflect: true
-            },
-            disableHistory: {
-                type: Boolean,
-                attribute: 'disable-history'
-            },
-            sourceView: {
-                type: String,
-                attribute: 'source-view'
-            }
-        };
-    }
-
-    constructor() {
-        super();
-        this.path = null;
-        this.rootPath = '';
-        this.disableHistory = false;
-    }
+  constructor() {
+    super();
+    this.path = null;
+    this.rootPath = '';
+    this.disableHistory = false;
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
+  connectedCallback() {
+    super.connectedCallback();
 
-        if (!this.disableHistory) {
-            // if path is unset, use path taken from the URL
-            if (registry.state.path && !this.path) {
-                this.path = registry.state.path;
-            }
-            this.view = registry.state.view || this.view;
-            this.odd = registry.state.odd || this.odd;
-        }
+    if (!this.disableHistory) {
+      // if path is unset, use path taken from the URL
+      if (registry.state.path && !this.path) {
+        this.path = registry.state.path;
+      }
+      this.view = registry.state.view || this.view;
+      this.odd = registry.state.odd || this.odd;
     }
+  }
 
-    attributeChangedCallback(name, oldVal, newVal) {
-        super.attributeChangedCallback(name, oldVal, newVal);
-        if (oldVal) {
-            console.log('<pb-document> Emit update event');
-            this.emitTo('pb-document', this);
-        }
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    if (oldVal) {
+      console.log('<pb-document> Emit update event');
+      this.emitTo('pb-document', this);
     }
+  }
 
-    /**
-     * Returns the name of the document without path.
-     *
-     * @returns {string} Name of the document
-     */
-    getFileName() {
-        return this.path.replace(/^.*?([^\/]+)$/, '$1');
-    }
+  /**
+   * Returns the name of the document without path.
+   *
+   * @returns {string} Name of the document
+   */
+  getFileName() {
+    return this.path.replace(/^.*?([^\/]+)$/, '$1');
+  }
 
-    getCollection() {
-        return this.path.replace(/^(.*?)\/[^\/]+$/, '$1');
-    }
+  getCollection() {
+    return this.path.replace(/^(.*?)\/[^\/]+$/, '$1');
+  }
 
-    /**
+  /**
      * Returns the full path to the document.
 
      * @returns {string} Full path to the document
      */
-    getFullPath() {
-        return this.rootPath + '/' + this.path;
-    }
+  getFullPath() {
+    return `${this.rootPath}/${this.path}`;
+  }
 }
 
 customElements.define('pb-document', PbDocument);