@teipublisher/pb-components 2.26.0-next-3.11 → 2.26.0-next-3.13

package/src/pb-custom-form.js

@@ -19,159 +19,161 @@ 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' || control.type === 'search'))) {
-                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' || control.type === 'search'))
+      ) {
+        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-dialog.js

@@ -1,10 +1,12 @@
 import { LitElement, css, html } from 'lit-element';
-import { pbMixin } from './pb-mixin';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { pbMixin } from './pb-mixin';
 import { themableMixin } from './theming.js';
 
 /**
- * A simple dialog component using the HTML5 <dialog> element
+ * A simple dialog component using the HTML5 <dialog> element.
+ *
+ * Any button with the attribute `rel="prev"` will close the dialog when clicked.
  *
  * @slot - Content of the dialog
  * @slot title - Title of the dialog
@@ -12,72 +14,106 @@ import { themableMixin } from './theming.js';
  * @fires pb-dialog-closed - Fired when the dialog is closed
  */
 export class PbDialog extends themableMixin(pbMixin(LitElement)) {
+  static get properties() {
+    return {
+      ...super.properties,
+      open: { type: Boolean, reflect: true },
+      modal: { type: Boolean, reflect: true },
+      title: { type: String, reflect: true },
+      message: { type: String, reflect: true },
+    };
+  }
 
-    static get properties() {
-        return {
-            ...super.properties,
-            open: { type: Boolean, reflect: true },
-            modal: { type: Boolean, reflect: true },
-            title: { type: String, reflect: true },
-            message: { type: String, reflect: true }
-        };
-    }
+  constructor() {
+    super();
+    this.open = false;
+    this.modal = true;
+    this._escListener = this._onEsc.bind(this);
+    this.title = null;
+    this.message = null;
+  }
 
-    constructor() {
-        super();
-        this.open = false;
-        this.modal = true;
-        this._escListener = this._onEsc.bind(this);
-        this.title = null;
-        this.message = null;
+  _onEsc(e) {
+    if (e.key === 'Escape' && this.open) {
+      this.closeDialog();
     }
+  }
 
-    _onEsc(e) {
-        if (e.key === 'Escape' && this.open) {
-            this.closeDialog();
-        }
+  openDialog() {
+    if (!this.open) {
+      if (this.modal) {
+        this._dialog.showModal();
+      } else {
+        this._dialog.show();
+      }
+      this.dispatchEvent(new CustomEvent('pb-dialog-opened', { bubbles: true, composed: true }));
+      this.open = true;
     }
+  }
 
-    openDialog() {
-        if (!this.open) {
-            if (this.modal) {
-                this._dialog.showModal();
-            } else {
-                this._dialog.show();
-            }
-            this.dispatchEvent(new CustomEvent('pb-dialog-opened', { bubbles: true, composed: true }));
-            this.open = true;
-        }
+  closeDialog() {
+    if (this.open) {
+      this._dialog.close();
+      this.dispatchEvent(new CustomEvent('pb-dialog-closed', { bubbles: true, composed: true }));
+      this.open = false;
     }
+  }
 
-    closeDialog() {
-        if (this.open) {
-            this._dialog.close();
-            this.dispatchEvent(new CustomEvent('pb-dialog-closed', { bubbles: true, composed: true }));
-            this.open = false;
-        }
-    }
+  render() {
+    return html`
+      <dialog @click="${e => e.target === this._dialog && this.modal && this.closeDialog()}">
+        <article>
+          <header>
+            ${this.title ? unsafeHTML(this.title) : html`<slot name="title"></slot>`}
+            <button rel="prev" aria-label="Close"></button>
+          </header>
+          ${this.message ? unsafeHTML(this.message) : html`<slot></slot>`}
+          <footer>
+            <slot name="footer"></slot>
+          </footer>
+        </article>
+      </dialog>
+    `;
+  }
 
-    render() {
-        return html`
-            <dialog @click="${(e) => e.target === this._dialog && this.modal && this.closeDialog()}">
-                <article>
-                    <header>
-                        ${this.title ? unsafeHTML(this.title) : html`<slot name="title"></slot>`}
-                        <button rel="prev" aria-label="Close" @click="${this.closeDialog}">&times;</button>
-                    </header>
-                    ${this.message ? unsafeHTML(this.message) : html`<slot></slot>`}
-                    <footer>
-                        <slot name="footer"></slot>
-                    </footer>
-                </article>
-            </dialog>
-        `;
-    }
-    
-    firstUpdated() {
-        this._dialog = this.renderRoot.querySelector('dialog');
-    }
+  firstUpdated() {
+    this._dialog = this.renderRoot.querySelector('dialog');
+    // Add click listeners to close buttons in both shadow and light DOM
+    [
+      ...this._dialog.querySelectorAll('button[rel="prev"]'),
+      ...this.querySelectorAll('button[rel="prev"]'),
+    ].forEach(button => button.addEventListener('click', this.closeDialog.bind(this)));
+  }
+
+  static get styles() {
+    return css`
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      button[rel='prev'] {
+        display: block;
+        height: 1rem;
+        width: 1rem;
+        background-image: var(
+          --pb-dialog-background-image,
+          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
+        );
+        background-position: center;
+        background-size: auto 1rem;
+        background-repeat: no-repeat;
+        background-color: transparent;
+        border: none;
+      }
+      footer {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: 16px;
+      }
+    `;
+  }
 }
 
-customElements.define('pb-dialog', PbDialog);
+customElements.define('pb-dialog', PbDialog);