@teipublisher/pb-components 1.44.1 → 2.0.0

package/src/pb-mixin.js

@@ -18,6 +18,8 @@ const readyEventsFired = new Set();
  */
 const initEventsFired = new Map();
 
+export const defaultChannel = '__default__';
+
 export function clearPageEvents() {
     initEventsFired.clear();
 }
@@ -43,6 +45,46 @@ export function waitOnce(name, callback) {
     }
 }
 
+/**
+ * Get the list of channels this element emits to.
+ *
+ * @param {HTMLElement} elem the emitting element
+ * @returns {String[]} an array of channel names
+ */
+export function getEmittedChannels(elem) {
+    const emitConfig = elem.getAttribute('emit-config');
+    if (emitConfig) {
+        const json = JSON.parse(emitConfig);
+        return Object.keys(json);
+    }
+
+    const emitAttr = elem.getAttribute('emit');
+    if (emitAttr) {
+        return [emitAttr]
+    }
+
+    return [defaultChannel];
+}
+
+/**
+ * Get the list of channels this element subscribes to.
+ *
+ * @param {HTMLElement} elem the subscribing element
+ * @returns {String[]} an array of channel names
+ */
+export function getSubscribedChannels(elem) {
+    const subscribeConfig = elem.getAttribute('subscribe-config');
+    if (subscribeConfig) {
+        const json = JSON.parse(subscribeConfig);
+        return Object.keys(json);
+    }
+    const subscribeAttr = elem.getAttribute('subscribe');
+    if (subscribeAttr) {
+        return [subscribeAttr];
+    }
+    return [defaultChannel];
+}
+
 /**
  * Implements the core channel/event mechanism used by components in TEI Publisher
  * to communicate.
@@ -168,41 +210,42 @@ export const pbMixin = (superclass) => class PbMixin extends superclass {
      * to signal that they are ready to respond to events. Only wait for elements which
      * emit to one of the channels this component subscribes to.
      *
-     * @param callback function to be called when all components are ready
+     * @param {Function} callback function to be called when all components are ready
      */
     wait(callback) {
-        if (this.waitFor) {
-            const targetNodes = Array.from(document.querySelectorAll(this.waitFor));
-            const targets = targetNodes.filter(target => this.emitsOnSameChannel(target));
-            const targetCount = targets.length;
-            if (targetCount === 0) {
-                // selector did not return any targets
-                return callback();
+        if (!this.waitFor) {
+            callback();
+            return;
+        }
+        const targetNodes = Array.from(document.querySelectorAll(this.waitFor));
+        const targets = targetNodes.filter(target => this.emitsOnSameChannel(target));
+        const targetCount = targets.length;
+        if (targetCount === 0) {
+            // selector did not return any targets
+            callback();
+            return;
+        }
+        let count = targetCount;
+        targets.forEach((target) => {
+            if (target._isReady) {
+                count -= 1;
+                if (count === 0) {
+                    callback();
+                }
+                return;
             }
-            let count = 0;
-            targets.forEach((target) => {
-                if (target._isReady) {
-                    count++;
-                    if (targetCount === count) {
-                        callback();
-                    }
-                } else {
-                    const handler = target.addEventListener('pb-ready', (ev) => {
-                        if (ev.detail.source == this) {
-                            // same source: ignore
-                            return;
-                        }
-                        count++;
-                        if (targetCount === count) {
-                            target.removeEventListener('pb-ready', handler);
-                            callback();
-                        }
-                    });
+            const handler = target.addEventListener('pb-ready', (ev) => {
+                if (ev.detail.source === this) {
+                    // same source: ignore
+                    return;
+                }
+                count -= 1;
+                if (count === 0) {
+                    target.removeEventListener('pb-ready', handler);
+                    callback();
                 }
             });
-        } else {
-            callback();
-        }
+        });
     }
 
     /**
@@ -262,23 +305,6 @@ export const pbMixin = (superclass) => class PbMixin extends superclass {
         this.emitTo(name, data);
     }
 
-    /**
-     * Get the list of channels this element subscribes to.
-     *
-     * @returns an array of channel names
-     */
-    getSubscribedChannels() {
-        const chs = [];
-        if (this.subscribeConfig) {
-            Object.keys(this.subscribeConfig).forEach((key) => {
-                chs.push(key);
-            });
-        } else if (this.subscribe) {
-            chs.push(this.subscribe);
-        }
-        return chs;
-    }
-
     /**
      * Check if the other element emits to one of the channels this
      * element subscribes to.
@@ -286,8 +312,8 @@ export const pbMixin = (superclass) => class PbMixin extends superclass {
      * @param {Element} other the other element to compare with
      */
     emitsOnSameChannel(other) {
-        const myChannels = this.getSubscribedChannels();
-        const otherChannels = PbMixin.getEmittedChannels(other);
+        const myChannels = getSubscribedChannels(this);
+        const otherChannels = getEmittedChannels(other);
         if (myChannels.length === 0 && otherChannels.length === 0) {
             // both emit to the default channel
             return true;
@@ -295,28 +321,6 @@ export const pbMixin = (superclass) => class PbMixin extends superclass {
         return myChannels.some((channel) => otherChannels.includes(channel));
     }
 
-    /**
-     * Get the list of channels this element emits to.
-     *
-     * @returns an array of channel names
-     */
-    static getEmittedChannels(elem) {
-        const chs = [];
-        const emitConfig = elem.getAttribute('emit-config');
-        if (emitConfig) {
-            const json = JSON.parse(emitConfig);
-            Object.keys(json).forEach(key => {
-                chs.push(key);
-            });
-        } else {
-            const emitAttr = elem.getAttribute('emit');
-            if (emitAttr) {
-                chs.push(emitAttr);
-            }
-        }
-        return chs;
-    }
-
     /**
      * Listen to the event defined by type. If property `subscribe` or `subscribe-config`
      * is defined, this method will trigger the listener only if the event has a key
@@ -324,33 +328,21 @@ export const pbMixin = (superclass) => class PbMixin extends superclass {
      *
      * @param {String} type Name of the event, usually starting with `pb-`
      * @param {Function} listener Callback function
-     * @param {Array} [channels] Optional: explicitely specify the channels to emit to. This overwrites
+     * @param {String[]} [channels] Optional: explicitely specify the channels to emit to. This overwrites
      *      the emit property. Pass empty array to target the default channel.
      */
-    subscribeTo(type, listener, channels) {
-        let handlers;
-        const chs = channels || this.getSubscribedChannels();
-        if (chs.length === 0) {
-            // no channel defined: listen for all events not targetted at a channel
-            const handle = (ev) => {
-                if (ev.detail && ev.detail.key) {
+    subscribeTo(type, listener, channels = []) {
+        const chs = channels && channels.length ? channels : getSubscribedChannels(this);
+        const handlers = chs.map(key => {
+            const handle = ev => {
+                if (!ev.detail || !ev.detail.key || ev.detail.key !== key) {
                     return;
                 }
                 listener(ev);
             };
             document.addEventListener(type, handle);
-            handlers = [handle];
-        } else {
-            handlers = chs.map(key => {
-                const handle = ev => {
-                    if (ev.detail && ev.detail.key && ev.detail.key === key) {
-                        listener(ev);
-                    }
-                };
-                document.addEventListener(type, handle);
-                return handle;
-            });
-        }
+            return handle;
+        });
         // add new handlers to list of active subscriptions
         this._subscriptions.set(type, handlers);
         return handlers;
@@ -362,50 +354,27 @@ export const pbMixin = (superclass) => class PbMixin extends superclass {
      *
      * @param {String} type Name of the event, usually starting with `pb-`
      * @param {Object} [options] Options to be passed in ev.detail
-     * @param {Array} [channels] Optional: explicitely specify the channels to emit to. This overwrites
+     * @param {String[]} [channels] Optional: explicitely specify the channels to emit to. This overwrites
      *      the 'emit' property setting. Pass empty array to target the default channel.
      */
-    emitTo(type, options, channels) {
-        const chs = channels || PbMixin.getEmittedChannels(this);
-        if (chs.length == 0) {
-            if (type === 'pb-ready') {
-                readyEventsFired.add('__default__');
-            }
-            if (options) {
-                options = Object.assign({ _source: this }, options);
-            } else {
-                options = { _source: this };
-            }
-            const ev = new CustomEvent(type, {
-                detail: options,
-                composed: true,
-                bubbles: true
-            });
-            this.dispatchEvent(ev);
-        } else {
-            chs.forEach(key => {
-                const detail = {
-                    key: key,
-                    _source: this
-                };
-                if (options) {
-                    for (const opt in options) {
-                        if (options.hasOwnProperty(opt)) {
-                            detail[opt] = options[opt];
-                        }
-                    }
-                }
-                if (type === 'pb-ready') {
-                    readyEventsFired.add(key);
-                }
-                const ev = new CustomEvent(type, {
-                    detail: detail,
-                    composed: true,
-                    bubbles: true
-                });
-                this.dispatchEvent(ev);
-            });
+    emitTo(type, options, channels = []) {
+        const chs = channels && channels.length ? channels : getEmittedChannels(this);
+        chs.forEach(ch => this._emit(ch, type, options));
+    }
+
+    _emit(key, type, options) {
+        if (type === 'pb-ready') {
+            readyEventsFired.add(key);
         }
+
+        // eslint-disable-next-line prefer-object-spread
+        const detail = Object.assign({ key, _source: this }, options);
+        const ev = new CustomEvent(type, {
+            detail,
+            composed: true,
+            bubbles: true
+        });
+        this.dispatchEvent(ev);
     }
 
     /**
@@ -427,38 +396,12 @@ export const pbMixin = (superclass) => class PbMixin extends superclass {
         const params = TeiPublisher.url.searchParams && TeiPublisher.url.searchParams.getAll(name);
         if (params && params.length == 1) {
             return params[0];
-        }else if (params && params.length > 1) {
+        } else if (params && params.length > 1) {
             return params
         }
         return fallback;
     }
 
-    getParameterValues(name) {
-        return TeiPublisher.url.searchParams.getAll(name);
-    }
-
-    setParameter(name, value) {
-        if (typeof value === 'undefined') {
-            TeiPublisher.url.searchParams.delete(name);
-        } else if (Array.isArray(value)) {
-            TeiPublisher.url.searchParams.delete(name);
-            value.forEach(function (val) {
-                TeiPublisher.url.searchParams.append(name, val);
-            });
-        } else {
-            TeiPublisher.url.searchParams.set(name, value);
-        }
-    }
-
-    setParameters(obj) {
-        TeiPublisher.url.search = '';
-        for (let key in obj) {
-            if (obj.hasOwnProperty(key)) {
-                this.setParameter(key, obj[key]);
-            }
-        }
-    }
-
     getParameters() {
         const params = {};
         for (let key of TeiPublisher.url.searchParams.keys()) {
@@ -467,46 +410,10 @@ export const pbMixin = (superclass) => class PbMixin extends superclass {
         return params;
     }
 
-    getParametersMatching(regex) {
-        const params = {};
-        for (let pair of TeiPublisher.url.searchParams.entries()) {
-            if (regex.test(pair[0])) {
-                const param = params[pair[0]];
-                if (param) {
-                    param.push(pair[1]);
-                } else {
-                    params[pair[0]] = [pair[1]];
-                }
-            }
-        }
-        return params;
-    }
-
-    clearParametersMatching(regex) {
-        for (let pair of TeiPublisher.url.searchParams.entries()) {
-            if (regex.test(pair[0])) {
-                TeiPublisher.url.searchParams.delete(pair[0]);
-            }
-        }
-    }
-
-    setPath(path) {
-        const page = document.querySelector('pb-page');
-        if (page) {
-            const appRoot = page.appRoot;
-
-            this.getUrl().pathname = appRoot + '/' + path;
-        }
-    }
-
     getUrl() {
         return TeiPublisher.url;
     }
 
-    pushHistory(msg, state) {
-        history.pushState(state, msg, TeiPublisher.url.toString());
-    }
-
     getEndpoint() {
         return this._endpoint;
     }
@@ -519,7 +426,7 @@ export const pbMixin = (superclass) => class PbMixin extends superclass {
         let base;
         if (endpoint === '.') {
             base = new URL(window.location.href);
-        // loaded in iframe
+            // loaded in iframe
         } else if (window.location.protocol === 'about:') {
             base = document.baseURI
         } else {

package/src/pb-odd-editor.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { LitElement, html, css } from 'lit-element'
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { pbHotkeys } from './pb-hotkeys.js';
 import { repeat } from 'lit-html/directives/repeat';
 import { ifDefined } from 'lit-html/directives/if-defined';
@@ -433,7 +433,7 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
         // it is unclear to me why root-path is not read from attribute without this explicit call
         this.rootPath = this.getAttribute('root-path');
 
-        PbOddEditor.waitOnce('pb-page-ready', () => {
+        waitOnce('pb-page-ready', () => {
             this.load();
             this.inited = true;
         });

package/src/pb-page.js

@@ -8,6 +8,7 @@ import { resolveURL } from './utils.js';
 import { loadStylesheets } from "./theming.js";
 import { initTranslation } from "./pb-i18n.js";
 import { typesetMath } from "./pb-formula.js";
+import { registry } from "./urls.js";
 
 /**
  * Make sure there's only one instance of pb-page active at any time.
@@ -38,6 +39,10 @@ export class PbPage extends pbMixin(LitElement) {
                 type: String,
                 attribute: 'app-root'
             },
+            urlPath: {
+                type: String,
+                attribute: 'url-path'
+            },
             /**
              * TEI Publisher internal: set to the current page template.
              */
@@ -142,6 +147,7 @@ export class PbPage extends pbMixin(LitElement) {
         super();
         this.unresolved = true;
         this.endpoint = ".";
+        this.urlPath = 'path';
         this.apiVersion = undefined;
         this.requireLanguage = false;
         this.theme = null;
@@ -179,6 +185,12 @@ export class PbPage extends pbMixin(LitElement) {
             return;
         }
 
+        if (!this.appRoot) {
+            this.appRoot = window.location.pathname;
+        }
+
+        registry.configure(this.urlPath === 'path', this.appRoot);
+
         this.endpoint = this.endpoint.replace(/\/+$/, '');
         
         if (this.locales && this._localeFallbacks.indexOf('app') === -1) {
@@ -186,12 +198,12 @@ export class PbPage extends pbMixin(LitElement) {
         }
         this._localeFallbacks.push('common');
 
-        const target = this.getParameter('_target');
+        const target = registry.state._target;
         if (target) {
             this.endpoint = target;
         }
 
-        const apiVersion = this.getParameter('_api');
+        const apiVersion = registry.state._api;
         if (apiVersion) {
             this.apiVersion = apiVersion;
         }
@@ -325,14 +337,14 @@ export class PbPage extends pbMixin(LitElement) {
         this.subscribeTo('pb-i18n-language', ev => {
             const { language } = ev.detail;
             this._i18nInstance.changeLanguage(language).then(t => {
-            this._updateI18n(t);
-            this.emitTo('pb-i18n-update', { t, language: this._i18nInstance.language }, []);
+                this._updateI18n(t);
+                this.emitTo('pb-i18n-update', { t, language: this._i18nInstance.language }, []);
             }, []);
         });
 
 
-        this.subscribeTo('pb-toggle', this._toggleFeatures.bind(this));
-
+        // this.subscribeTo('pb-global-toggle', this._toggleFeatures.bind(this));
+        this.addEventListener('pb-global-toggle', this._toggleFeatures.bind(this));
         this.unresolved = false;
 
         console.log('<pb-page> endpoint: %s; trigger window resize', this.endpoint);
@@ -367,21 +379,18 @@ export class PbPage extends pbMixin(LitElement) {
      * and dispatch actions to the elements on the page.
      */
     _toggleFeatures(ev) {
-        if (ev.detail.selectors) {
-            ev.detail.selectors.forEach(sc => {
-                this.querySelectorAll(sc.selector).forEach(node => {
-                    const command = sc.command || 'toggle';
-                    if (node.command) {
-                        node.command(command, sc.state);
-                    }
-                    if (sc.state) {
-                        node.classList.add(command);
-                    } else {
-                        node.classList.remove(command);
-                    }
-                });
-            });
-        }
+        const sc = ev.detail;
+        this.querySelectorAll(sc.selector).forEach(node => {
+            const command = sc.command || 'toggle';
+            if (node.command) {
+                node.command(command, sc.state);
+            }
+            if (sc.state) {
+                node.classList.add(command);
+            } else {
+                node.classList.remove(command);
+            }
+        });
     }
 
     render() {

package/src/pb-paginate.js

@@ -168,35 +168,40 @@ export class PbPaginate extends pbMixin(LitElement) {
 
     _handleClick(item, index) {
         this.start = (this.pages[index].label - 1) * this.perPage + 1;
-        this.emitTo('pb-load', {
-            "params": {
-                "start": this.start,
-                "per-page": this.perPage,
-                "page": index
-            }
+        ['pb-load', 'pb-paginate'].forEach((ev) => {
+            this.emitTo(ev, {
+                "params": {
+                    "start": this.start,
+                    "per-page": this.perPage,
+                    "page": index
+                }
+            });
         });
     }
 
     _handleFirst(ev) {
         this.start = 1;
-        this.emitTo('pb-load', {
-            "params": {
-                "start": 1,
-                "per-page": this.perPage,
-                "page": 0
-            }
+        ['pb-load', 'pb-paginate'].forEach((event) => {
+            this.emitTo(event, {
+                "params": {
+                    "start": 1,
+                    "per-page": this.perPage,
+                    "page": 0
+                }
+            });
         });
     }
 
     _handleLast(ev) {
         this.start = (this.pageCount - 1) * this.perPage + 1;
-
-        this.emitTo('pb-load', {
-            "params": {
-                "start": this.start,
-                "per-page": this.perPage,
-                "page": this.pageCount - 1
-            }
+        ['pb-load', 'pb-paginate'].forEach((event) => {
+            this.emitTo(event, {
+                "params": {
+                    "start": this.start,
+                    "per-page": this.perPage,
+                    "page": this.pageCount - 1
+                }
+            });
         });
     }
 }

package/src/pb-print-preview.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 
 /**
@@ -65,7 +65,7 @@ export class PbPrintPreview extends pbMixin(LitElement) {
             this.emitTo('pb-end-update');
         });
 
-        PbPrintPreview.waitOnce('pb-page-ready', () => {
+        waitOnce('pb-page-ready', () => {
             this.refresh();
         });
     }

package/src/pb-repeat.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit-element';
 import { pbMixin } from './pb-mixin.js';
+import { registry } from "./urls.js";
 import '@polymer/iron-icons';
 import '@polymer/paper-icon-button';
 
@@ -42,7 +43,7 @@ export class PbRepeat extends pbMixin(LitElement) {
 
         this.template = this.querySelector('template');
 
-        const params = this.getParameters();
+        const params = registry.state;
         this._computeInitial(params);
         if (this._instances.length === 0) {
             for (let i = 0; i < this.initial; i++) {