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

package/src/pb-edit-xml.js

@@ -1,6 +1,6 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 import { pbMixin, waitOnce } from './pb-mixin.js';
-
+import { themableMixin } from './theming.js';
 
 /**
  * Open eXide to edit a given source document.
@@ -8,110 +8,113 @@ import { pbMixin, waitOnce } from './pb-mixin.js';
  * @slot - unnamed default slot for the link text
  * @slot - unnamed slot for the link text when eXide tab is already opened
  */
-export class PbEditXml extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * expects a context-absolute path to the document to edit e.g. '/db/apps/tei-publisher/mytext.xml'
-             */
-            path: {
-                type: String
-            },
-            /**
-             * optional id reference to a pb-document
-             */
-            src: {
-                type: String
-            },
-            /**
-             * HTML title to be used
-             */
-            title: {
-                type: String
-            },
-            _href: {
-                type: String
-            }
-        };
-    }
+export class PbEditXml extends themableMixin(pbMixin(LitElement)) {
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * expects a context-absolute path to the document to edit e.g. '/db/apps/tei-publisher/mytext.xml'
+       */
+      path: {
+        type: String,
+      },
+      /**
+       * optional id reference to a pb-document
+       */
+      src: {
+        type: String,
+      },
+      /**
+       * HTML title to be used
+       */
+      title: {
+        type: String,
+      },
+      _href: {
+        type: String,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.title = '';
-    }
+  constructor() {
+    super();
+    this.title = '';
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
-        waitOnce('pb-page-ready', (options) => {
-            if (options.endpoint === '.') {
-                this._href = '/exist/apps/eXide/';
-            } else {
-                const host = /^(.*:\/+[^/]+)\/.*$/.exec(options.endpoint);
-                if (host) {
-                    this._href = `${host[1]}/exist/apps/eXide/`;
-                } else {
-                    this._href = '/exist/apps/eXide/';
-                }
-            }
-        });
-    }
-
-    render() {
-        // if the target is within the same origin as the current page, we can communicate with an 
-        // already opened eXide, if not, only option is to open a new window.
-        if (new URL(this._href, window.location.href).origin === this.getUrl().origin) {
-            return html`<a href="${this._href}" target="eXide" title="${this.title}" @click="${this.open}"><slot></slot></a>`;
+  connectedCallback() {
+    super.connectedCallback();
+    waitOnce('pb-page-ready', options => {
+      if (options.endpoint === '.') {
+        this._href = '/exist/apps/eXide/';
+      } else {
+        const host = /^(.*:\/+[^/]+)\/.*$/.exec(options.endpoint);
+        if (host) {
+          this._href = `${host[1]}/exist/apps/eXide/`;
+        } else {
+          this._href = '/exist/apps/eXide/';
         }
-        return html`<a href="${this._href}/index.html?open=${this.path}" title="${this.title}"><slot></slot></a>`;
+      }
+    });
+  }
+
+  render() {
+    // if the target is within the same origin as the current page, we can communicate with an
+    // already opened eXide, if not, only option is to open a new window.
+    if (new URL(this._href, window.location.href).origin === this.getUrl().origin) {
+      return html`<a href="${this._href}" target="eXide" title="${this.title}" @click="${this.open}"
+        ><slot></slot
+      ></a>`;
     }
+    return html`<a href="${this._href}/index.html?open=${this.path}" title="${this.title}"
+      ><slot></slot
+    ></a>`;
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: inline;
-            }
+  static get styles() {
+    return css`
+      :host {
+        display: inline;
+      }
 
-            a {
-                color: inherit;
-                text-decoration: none;
-            }
-        `;
-    }
+      a {
+        text-decoration: none;
+      }
+    `;
+  }
 
-    setPath(path) {
-        this.path = path;
-    }
+  setPath(path) {
+    this.path = path;
+  }
 
-    open(ev) {
-        ev.preventDefault();
-        let href = this._href;
-        let path = this.path;
-        if (this.src) {
-            const sourceComponent = document.getElementById(this.src);
-            path = sourceComponent.getFullPath();
-            href = sourceComponent.sourceView;
-        }
+  open(ev) {
+    ev.preventDefault();
+    let href = this._href;
+    let { path } = this;
+    if (this.src) {
+      const sourceComponent = document.getElementById(this.src);
+      path = sourceComponent.getFullPath();
+      href = sourceComponent.sourceView;
+    }
 
-        // try to retrieve existing eXide window
-        const exide = window.open("", "eXide");
-        if (exide && !exide.closed) {
-            // check if eXide is really available or it's an empty page
-            const app = exide.eXide;
-            if (app) {
-                console.log("<pb-edit-xml> using existing eXide to open %s", path);
-                // eXide is there
-                exide.eXide.app.findDocument(path);
-                exide.focus();
-            } else {
-                console.log("<pb-edit-xml> opening new eXide for %s", path);
-                window.eXide_onload = function () {
-                    exide.eXide.app.findDocument(path);
-                };
-                // empty page
-                exide.location = href;
-            }
-        }
+    // try to retrieve existing eXide window
+    const exide = window.open('', 'eXide');
+    if (exide && !exide.closed) {
+      // check if eXide is really available or it's an empty page
+      const app = exide.eXide;
+      if (app) {
+        console.log('<pb-edit-xml> using existing eXide to open %s', path);
+        // eXide is there
+        exide.eXide.app.findDocument(path);
+        exide.focus();
+      } else {
+        console.log('<pb-edit-xml> opening new eXide for %s', path);
+        window.eXide_onload = function () {
+          exide.eXide.app.findDocument(path);
+        };
+        // empty page
+        exide.location = href;
+      }
     }
+  }
 }
-customElements.define('pb-edit-xml', PbEditXml);
+customElements.define('pb-edit-xml', PbEditXml);

package/src/pb-events.js

@@ -1,123 +1,142 @@
-import { defaultChannel } from "./pb-mixin.js";
+import { defaultChannel } from './pb-mixin.js';
 
 /**
  * Utility class to plug into TEI Publisher's event system from custom javascript.
  */
 export class PbEvents {
+  /**
+   * Subscribe to an event received on particular channels.
+   *
+   * @param {string} name the name of the event to listen for
+   * @param {string|string[]|null} channels name of a channel, array of channel names or null to target the default channel
+   * @param {Function|undefined} callback function called when event is triggered.
+   * Receives the event as first and the event handler as second parameter.
+   */
+  static subscribe(name, channels, callback, once = false) {
+    const _channels = PbEvents._getChannels(channels);
+    const handler = document.addEventListener(
+      name,
+      (/** @type {CustomEvent} */ ev) => {
+        if (callback && ev.detail && ev.detail.key && _channels.includes(ev.detail.key)) {
+          callback(ev, handler);
+        }
+      },
+      {
+        once,
+      },
+    );
+  }
 
-    /**
-     * Subscribe to an event received on particular channels.
-     * 
-     * @param {string} name the name of the event to listen for
-     * @param {string|string[]|null} channels name of a channel, array of channel names or null to target the default channel
-     * @param {Function|undefined} callback function called when event is triggered. 
-     * Receives the event as first and the event handler as second parameter.
-     */
-    static subscribe(name, channels, callback, once=false) {
-        const _channels = PbEvents._getChannels(channels)
-        const handler = document.addEventListener(name, (/** @type {CustomEvent} */ ev) => {
-            if (callback && ev.detail && ev.detail.key && _channels.includes(ev.detail.key)) {
-                callback(ev, handler);
-            }
-        }, {
-            once
-        });
-    }
+  /**
+   * Subscribe to an event received on a particular channel once. Returns a promise
+   * which resolves when the event is caught.
+   *
+   * @param {string} name the name of the event to listen for
+   * @param {string|string[]|null} channels name of a channel, array of channel names or null to target the default channel
+   * @returns {Promise} resolves if event is caught, providing the event as parameter
+   */
+  static subscribeOnce(name, channels = null) {
+    const _channels = PbEvents._getChannels(channels);
+    return new Promise(resolve => {
+      document.addEventListener(
+        name,
+        (/** @type {CustomEvent} */ ev) => {
+          if (ev.detail && ev.detail.key && _channels.includes(ev.detail.key)) {
+            resolve(ev);
+          }
+        },
+        {
+          once: true,
+        },
+      );
+    });
+  }
 
-    /**
-     * Subscribe to an event received on a particular channel once. Returns a promise
-     * which resolves when the event is caught.
-     * 
-     * @param {string} name the name of the event to listen for
-     * @param {string|string[]|null} channels name of a channel, array of channel names or null to target the default channel
-     * @returns {Promise} resolves if event is caught, providing the event as parameter
-     */
-    static subscribeOnce(name, channels=null) {
-        const _channels = PbEvents._getChannels(channels);
-        return new Promise((resolve) => {
-            document.addEventListener(name, (/** @type {CustomEvent} */ ev) => {
-                if (ev.detail && ev.detail.key && _channels.includes(ev.detail.key)) {
-                    resolve(ev);
-                }
-            }, {
-                once: true
-            });
-        });
+  /**
+   * determine channels to subscribe to
+   *
+   * @param {string|string[]|null} channels name of a channel, array of channel names or null to target the default channel
+   * @returns {string[]} channels
+   */
+  static _getChannels(channels) {
+    // no channels: null or empty string or empty array
+    if (channels === null || !channels.length) {
+      return [defaultChannel];
     }
-
-    /**
-     * determine channels to subscribe to
-     * 
-     * @param {string|string[]|null} channels name of a channel, array of channel names or null to target the default channel
-     * @returns {string[]} channels
-     */
-    static _getChannels(channels) {
-        // no channels: null or empty string or empty array
-        if (channels === null || !channels.length) {
-            return [defaultChannel]
-        }
-        // single string
-        if (!Array.isArray(channels)) {
-            return [channels];
-        }
-        return channels;
+    // single string
+    if (!Array.isArray(channels)) {
+      return [channels];
     }
+    return channels;
+  }
 
-    /**
-     * Emit an event to a particular channel
-     * 
-     * @param {string} type the name of the event to emit
-     * @param {string|null} channel name of the channel or null to target the default channel
-     * @param {any|null} detail value to pass in the event details
-     */
-    static emit(type, channel=null, detail=null) {
-        const options = detail || {};
-        options.key = channel || defaultChannel;
-        const ev = new CustomEvent(type, {
-            detail: options
-        });
-        document.dispatchEvent(ev);
-    }
+  /**
+   * Emit an event to a particular channel
+   *
+   * @param {string} type the name of the event to emit
+   * @param {string|null} channel name of the channel or null to target the default channel
+   * @param {any|null} detail value to pass in the event details
+   */
+  static emit(type, channel = null, detail = null) {
+    const options = detail || {};
+    options.key = channel || defaultChannel;
+    const ev = new CustomEvent(type, {
+      detail: options,
+    });
+    document.dispatchEvent(ev);
+  }
 
-    /**
-     * Wait for one or more TEI Publisher web components to become ready (by waiting for their `pb-ready` event).
-     * 
-     * @param {HTMLElement|HTMLElement[]} targets element or array of elements to check for ready state
-     * @returns Promise which resolves when all components are ready
-     */
-    static ifReady(targets) {
-        if (!Array.isArray(targets)) {
-            targets = [targets];
+  /**
+   * Wait for one or more TEI Publisher web components to become ready (by waiting for their `pb-ready` event).
+   *
+   * @param {HTMLElement|HTMLElement[]} targets element or array of elements to check for ready state
+   * @returns Promise which resolves when all components are ready
+   */
+  static ifReady(targets) {
+    if (!Array.isArray(targets)) {
+      targets = [targets];
+    }
+    // const targets = Array.from(document.querySelectorAll(selector));
+    return new Promise(resolve => {
+      const targetCount = targets.length;
+      if (targetCount === 0) {
+        // selector did not return any targets
+        resolve();
+        return;
+      }
+      let count = targetCount;
+      targets.forEach(target => {
+        if (target._isReady) {
+          count -= 1;
+          if (count === 0) {
+            resolve();
+          }
+          return;
         }
-        // const targets = Array.from(document.querySelectorAll(selector));
-        return new Promise((resolve) => {
-            const targetCount = targets.length;
-            if (targetCount === 0) {
-                // selector did not return any targets
-                resolve();
-                return;
-            }
-            let count = targetCount;
-            targets.forEach((target) => {
-                if (target._isReady) {
-                    count -= 1;
-                    if (count === 0) {
-                        resolve();
-                    }
-                    return;
-                }
-                const handler = target.addEventListener('pb-ready', () => {
-                    count -= 1;
-                    if (count === 0) {
-                        target.removeEventListener('pb-ready', handler);
-                        resolve();
-                    }
-                });
-            });
+        const handler = target.addEventListener('pb-ready', () => {
+          count -= 1;
+          if (count === 0) {
+            target.removeEventListener('pb-ready', handler);
+            resolve();
+          }
         });
-    }
+      });
+    });
+  }
 }
 
 if (!window.pbEvents) {
-    window.pbEvents = PbEvents;
-}
+  window.pbEvents = PbEvents;
+  // Ensure a classic-script global variable binding for legacy code that references
+  // an undeclared `pbEvents` identifier (e.g., non-module scripts). Adding a
+  // small classic script creates a global var bound to window.pbEvents.
+  try {
+    const s = document.createElement('script');
+    s.type = 'text/javascript';
+    s.text =
+      'if (typeof pbEvents === "undefined") { try { pbEvents = window.pbEvents; } catch(e) {} }';
+    (document.head || document.documentElement).appendChild(s);
+  } catch (e) {
+    // ignore if DOM not ready; legacy code may still read via window.pbEvents
+  }
+}