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

package/src/pb-document.js

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 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,135 @@ 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;
+    // Internal: coalesce & de-duplicate emitted update events
+    this._emitScheduled = false;
+    this._lastEventKey = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
 
-    constructor() {
-        super();
-        this.path = null;
-        this.rootPath = '';
-        this.disableHistory = false;
+    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;
     }
 
-    connectedCallback() {
-        super.connectedCallback();
+    // Initialize the event key baseline to prevent unnecessary initial events
+    this._lastEventKey = this._computeEventKey();
+  }
 
-        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);
+    // No-op if value did not change (prevents churn)
+    if (oldVal === newVal) return;
 
-    attributeChangedCallback(name, oldVal, newVal) {
-        super.attributeChangedCallback(name, oldVal, newVal);
-        if (oldVal) {
-            console.log('<pb-document> Emit update event');
-            this.emitTo('pb-document', this);
-        }
-    }
+    // Coalesce multiple rapid attribute updates into a single emit
+    if (this._emitScheduled) return;
 
-    /**
-     * Returns the name of the document without path.
-     *
-     * @returns {string} Name of the document
-     */
-    getFileName() {
-        return this.path.replace(/^.*?([^\/]+)$/, '$1');
-    }
+    this._emitScheduled = true;
+    setTimeout(() => {
+      this._emitScheduled = false;
+      const key = this._computeEventKey();
+      if (key !== this._lastEventKey) {
+        this.emitTo('pb-document', this);
+        this._lastEventKey = key;
+      }
+    }, 0);
+  }
 
-    getCollection() {
-        return this.path.replace(/^(.*?)\/[^\/]+$/, '$1');
-    }
+  _computeEventKey() {
+    // Build a stable signature of relevant state used by pb-view
+    return JSON.stringify({
+      path: this.path || '',
+      rootPath: this.rootPath || '',
+      odd: this.odd || '',
+      view: this.view || '',
+      sourceView: this.sourceView || '',
+    });
+  }
+
+  /**
+   * 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');
+  }
+
+  /**
      * 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);

package/src/pb-download.js

@@ -1,6 +1,7 @@
-import { LitElement, html, css } from 'lit-element';
-import 'js-cookie/src/js.cookie.js';
+import { LitElement, html, css } from 'lit';
+import Cookies from 'js-cookie';
 import { pbMixin, waitOnce } from './pb-mixin.js';
+import { themableMixin } from './theming.js';
 
 /**
  * Generate a link to download a resource. Optionally shows a dialog during the download.
@@ -11,212 +12,227 @@ import { pbMixin, waitOnce } from './pb-mixin.js';
  * @cssprop --pb-download-color - Color of the download title label
  * @cssprop --pb-download-text-decoration - Extra effects for the download title label
  */
-export class PbDownload extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * optional id reference to a pb-document. If `url` is not specified, 
-             * a correct download URL is constructed using the given document path and parameters.
-             * Otherwise `url` will be used as main URL.
-             */
-            src: {
-                type: String
-            },
-            /**
-             * the base URL to construct the link from. If specified, only the ODD and optional parameters
-             * will be appended to the URL.
-             */
-            url: {
-                type: String
-            },
-            /**
-             * optional suffix to append to the constructed URL. Use for getting a PDF, epub or similar.
-             */
-            type: {
-                type: String
-            },
-            /**
-             * extra odd parameter to be added. This will correspond to the ODD used by the document, if given.
-             */
-            odd: {
-                type: String
-            },
-            /**
-             * id of dialog component to show when downloading. A paper-dialog component with this id must
-             * exist.
-             */
-            dialog: {
-                type: String
-            },
-            /**
-             * title to show in the dialog while download is in progress
-             */
-            title: {
-                type: String
-            },
-            /**
-             * add a special parameter 'source=yes' if true. For PDF this will result
-             * in generated source code to be displayed
-             */
-            source: {
-                type: Boolean
-            },
-            /**
-             *  extra params to be added
-             */
-            params: {
-                type: String
-            },
-            _target: {
-                type: String,
-                reflect: true
-            },
-            _href: {
-                type: String,
-                reflect: true
-            },
-            _token: {
-                type: String
-            }
-        };
+export class PbDownload extends themableMixin(pbMixin(LitElement)) {
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * optional id reference to a pb-document. If `url` is not specified,
+       * a correct download URL is constructed using the given document path and parameters.
+       * Otherwise `url` will be used as main URL.
+       */
+      src: {
+        type: String,
+      },
+      /**
+       * the base URL to construct the link from. If specified, only the ODD and optional parameters
+       * will be appended to the URL.
+       */
+      url: {
+        type: String,
+      },
+      /**
+       * optional suffix to append to the constructed URL. Use for getting a PDF, epub or similar.
+       */
+      type: {
+        type: String,
+      },
+      /**
+       * extra odd parameter to be added. This will correspond to the ODD used by the document, if given.
+       */
+      odd: {
+        type: String,
+      },
+      /**
+       * id of dialog component to show when downloading. A `pb-dialog` component with this id must
+       * exist.
+       */
+      dialog: {
+        type: String,
+      },
+      /**
+       * title to show in the dialog while download is in progress
+       */
+      title: {
+        type: String,
+      },
+      /**
+       * add a special parameter 'source=yes' if true. For PDF this will result
+       * in generated source code to be displayed
+       */
+      source: {
+        type: Boolean,
+      },
+      /**
+       *  extra params to be added
+       */
+      params: {
+        type: String,
+      },
+      _target: {
+        type: String,
+        reflect: true,
+      },
+      _href: {
+        type: String,
+        reflect: true,
+      },
+      _token: {
+        type: String,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.source = false;
+    this._target = '_self';
+    this.type = '';
+  }
+
+  firstUpdated() {
+    if (this.src) {
+      this.subscribeTo('pb-document', ev => {
+        if (ev.detail.id === this.src) {
+          this.odd = ev.detail.odd;
+        }
+      });
     }
-
-    constructor() {
-        super();
-
-        this.source = false;
-        this._target = '_self';
-        this.type = '';
+    this.subscribeTo('pb-refresh', ev => {
+      if (ev.detail.odd) {
+        this.odd = ev.detail.odd;
+        this._href = this._computeURL();
+      }
+    });
+    waitOnce('pb-page-ready', () => {
+      this._target = this._computeTarget();
+      this._href = this._computeURL();
+    });
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+
+    if (!oldVal) {
+      return;
     }
 
-    firstUpdated() {
-        if (this.src) {
-            this.subscribeTo('pb-document', (ev) => {
-                if (ev.detail.id === this.src) {
-                    this.odd = ev.detail.odd;
-                }
-            });
-        }
-        this.subscribeTo('pb-refresh', (ev) => {
-            if (ev.detail.odd) {
-                this.odd = ev.detail.odd;
-                this._href = this._computeURL();
-            }
-        });
-        waitOnce('pb-page-ready', () => {
-            this._target = this._computeTarget();
-            this._href = this._computeURL();
-        });
+    switch (name) {
+      case 'source':
+        this._target = this._computeTarget();
+        break;
+      case 'src':
+      case 'type':
+      case 'file':
+      case 'odd':
+      case 'params':
+      case 'url':
+        this._href = this._computeURL();
+        break;
+      default:
     }
-
-    attributeChangedCallback(name, oldVal, newVal) {
-        super.attributeChangedCallback(name, oldVal, newVal);
-
-        if (!oldVal) {
-            return;
-        }
-
-        switch (name) {
-            case 'source':
-                this._target = this._computeTarget();
-                break;
-            case 'src':
-            case 'type':
-            case 'file':
-            case 'odd':
-            case 'params':
-            case 'url':
-                this._href = this._computeURL();
-                break;
-            default:
+  }
+
+  render() {
+    return html`
+      <a
+        id="button"
+        @click="${this._handleClick}"
+        title="${this.title}"
+        target="${this._target}"
+        href="${this._href}"
+        ><slot></slot
+      ></a>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+
+      a {
+        text-decoration: var(--pb-download-text-decoration, none);
+      }
+    `;
+  }
+
+  _computeTarget() {
+    return this.source ? '_blank' : '_self';
+  }
+
+  _computeURL() {
+    this._token = new Date().getTime() * 797;
+    let url;
+    const doc = this.getDocument();
+    if (doc) {
+      if (this.url) {
+        url = `${this.toAbsoluteURL(this.url)}?odd=${this.odd ? this.odd : doc.odd}.odd`;
+      } else {
+        const serverPart = `${this.getEndpoint()}/`;
+        if (this.lessThanApiVersion('1.0.0')) {
+          url = `${doc.getFileName()}${this.type ? `.${this.type}` : ''}?odd=${
+            this.odd ? this.odd : doc.odd
+          }.odd&cache=no&token=${this._token}`;
+        } else {
+          url = `${serverPart}api/document/${encodeURIComponent(doc.path)}/${
+            this.type || 'html'
+          }?odd=${this.odd ? this.odd : doc.odd}.odd&token=${this._token}`;
         }
+      }
+    } else {
+      url = /^(?:[a-z]+:)?\/\//i.test(this.url) ? this.url : `${this.getEndpoint()}/${this.url}`;
+      if (this.lessThanApiVersion('1.0.0')) {
+        url = `${url}${this.type ? `.${this.type}` : ''}?odd=${this.odd}&cache=no&token='${
+          this._token
+        }`;
+      } else {
+        url = `${url}/${this.type}?odd=${this.odd}&token='${this._token}`;
+      }
     }
 
-    render() {
-        return html`
-            <a id="button" @click="${this._handleClick}" title="${this.title}" target="${this._target}" href="${this._href}"><slot></slot></a>
-        `;
-    }
-
-    static get styles() {
-        return css`
-            :host {
-                display: inline-block;
-            }
-
-            a {
-                text-decoration: var(--pb-download-text-decoration, none);
-                color: var(--pb-download-color);
-            }
-        `;
+    if (this.params) {
+      url += `&${this.params}`;
     }
-
-    _computeTarget() {
-        return this.source ? '_blank' : '_self';
+    if (this.source) {
+      url += '&source=true';
     }
-
-    _computeURL() {
-        this._token = new Date().getTime() * 797;
-        let url;
-        const doc = this.getDocument();
-        if (doc) {
-            if (this.url) {
-                url = `${this.toAbsoluteURL(this.url)}?odd=${this.odd ? this.odd : doc.odd}.odd`;
-            } else {
-                const serverPart = `${this.getEndpoint()}/`;
-                if (this.lessThanApiVersion('1.0.0')) {
-                    url = `${doc.getFileName()}${this.type ? `.${this.type}` : ''}?odd=${this.odd ? this.odd : doc.odd}.odd&cache=no&token=${this._token}`;
-                } else {
-                    url = `${serverPart}api/document/${encodeURIComponent(doc.path)}/${this.type || 'html'}?odd=${this.odd ? this.odd : doc.odd}.odd&token=${this._token}`;
-                }
-            }
-        } else {
-            url = /^(?:[a-z]+:)?\/\//i.test(this.url) ? this.url : `${this.getEndpoint()}/${this.url}`;
-            if (this.lessThanApiVersion('1.0.0')) {
-                url = `${url}${this.type ? `.${this.type}` : ''}?odd=${this.odd}&cache=no&token='${this._token}`;
-            } else {
-                url = `${url}/${this.type}?odd=${this.odd}&token='${this._token}`;
-            }
-        }
-
-        if (this.params) {
-            url += `&${this.params}`;
-        }
-        if (this.source) {
-            url += '&source=true';
+    return url;
+  }
+
+  /**
+   *
+   * triggers a document download
+   *
+   * @param ev
+   * @private
+   */
+  _handleClick(ev) {
+    if (this.dialog) {
+      const dialog = document.getElementById(this.dialog);
+
+      if (dialog) {
+        dialog.openDialog();
+      }
+
+      const token = this._token;
+      const downloadCheck = window.setInterval(() => {
+        const cookieValue = Cookies.get('simple.token');
+        if (cookieValue === token) {
+          window.clearInterval(downloadCheck);
+          Cookies.remove('simple.token');
+          if (dialog) {
+            dialog.closeDialog();
+          }
         }
-        return url;
+      });
     }
-
-    /**
-     *
-     * triggers a document download
-     *
-     * @param ev
-     * @private
-     */
-    _handleClick(ev) {
-        if (this.dialog) {
-            const dialog = document.getElementById(this.dialog);
-
-            //todo: this will error when dialog is not found or defined on element.
-            dialog.open();
-
-            const token = this._token;
-            const downloadCheck = window.setInterval(() => {
-                const cookieValue = Cookies.get("simple.token");
-                if (cookieValue === token) {
-                    window.clearInterval(downloadCheck);
-                    Cookies.remove("simple.token");
-                    dialog.close();
-                }
-            });
-        }
-        if (this._target === '_self') {
-            ev.preventDefault();
-            window.location = this._href;
-        }
+    if (this._target === '_self') {
+      ev.preventDefault();
+      window.location = this._href;
     }
+  }
 }
-customElements.define('pb-download', PbDownload);
+customElements.define('pb-download', PbDownload);