@teipublisher/pb-components 1.44.1 → 2.0.0

package/src/pb-document.js

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit-element';
-import { pbMixin } from './pb-mixin';
+import { pbMixin } from './pb-mixin.js';
+import { registry } from "./urls.js";
 
 /**
  * Represents a Publisher document. It has no visual presentation but holds meta-data
@@ -52,6 +53,10 @@ class PbDocument extends pbMixin(LitElement) {
                 type: String,
                 reflect: true
             },
+            disableHistory: {
+                type: Boolean,
+                attribute: 'disable-history'
+            },
             sourceView: {
                 type: String,
                 attribute: 'source-view'
@@ -63,10 +68,19 @@ class PbDocument extends pbMixin(LitElement) {
         super();
         this.path = '';
         this.rootPath = '';
+        this.disableHistory = false;
     }
 
     connectedCallback() {
         super.connectedCallback();
+
+        if (!this.disableHistory) {
+            if (registry.state.path) {
+                this.path = registry.state.path;
+            }
+            this.view = registry.state.view || this.view;
+            this.odd = registry.state.odd || this.odd;
+        }
     }
 
     attributeChangedCallback(name, oldVal, newVal) {

package/src/pb-download.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit-element';
 import 'js-cookie/src/js.cookie.js';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 
 /**
  * Generate a link to download a resource. Optionally shows a dialog during the download.
@@ -104,7 +104,7 @@ export class PbDownload extends pbMixin(LitElement) {
                 this._href = this._computeURL();
             }
         });
-        PbDownload.waitOnce('pb-page-ready', () => {
+        waitOnce('pb-page-ready', () => {
             this._target = this._computeTarget();
             this._href = this._computeURL();
         });

package/src/pb-edit-app.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 { translate } from './pb-i18n.js';
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/paper-button';
@@ -62,7 +62,7 @@ export class PbEditApp extends pbMixin(LitElement) {
             indexListbox.selected = undefined;
             indexListbox.selected = old;
         }, []);
-        PbEditApp.waitOnce('pb-page-ready', (detail) => {
+        waitOnce('pb-page-ready', (detail) => {
             let url;
             if (this.minApiVersion('1.0.0')) {
                 url = `${detail.endpoint}/api/templates`;

package/src/pb-edit-xml.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 
 
 /**
@@ -43,7 +43,7 @@ export class PbEditXml extends pbMixin(LitElement) {
 
     connectedCallback() {
         super.connectedCallback();
-        PbEditXml.waitOnce('pb-page-ready', (options) => {
+        waitOnce('pb-page-ready', (options) => {
             if (options.endpoint === '.') {
                 this._href = '/exist/apps/eXide/';
             } else {

package/src/pb-events.js

@@ -1,3 +1,5 @@
+import { defaultChannel } from "./pb-mixin.js";
+
 /**
  * Utility class to plug into TEI Publisher's event system from custom javascript.
  */
@@ -12,16 +14,10 @@ export class PbEvents {
      * Receives the event as first and the event handler as second parameter.
      */
     static subscribe(name, channels, callback, once=false) {
-        if (channels && !Array.isArray(channels)) {
-            // eslint-disable-next-line no-param-reassign
-            channels = [channels];
-        }
+        const _channels = PbEvents._getChannels(channels)
         const handler = document.addEventListener(name, (/** @type {CustomEvent} */ ev) => {
-            if ((!channels && !(ev.detail && ev.detail.key)) || 
-                (channels && ev.detail && ev.detail.key && channels.indexOf(ev.detail.key) > -1)) {
-                if (callback) {
-                    callback(ev, handler);
-                }
+            if (callback && ev.detail && ev.detail.key && _channels.includes(ev.detail.key)) {
+                callback(ev, handler);
             }
         }, {
             once
@@ -37,14 +33,10 @@ export class PbEvents {
      * @returns {Promise} resolves if event is caught, providing the event as parameter
      */
     static subscribeOnce(name, channels=null) {
-        if (channels && !Array.isArray(channels)) {
-            // eslint-disable-next-line no-param-reassign
-            channels = [channels];
-        }
+        const _channels = PbEvents._getChannels(channels);
         return new Promise((resolve) => {
             document.addEventListener(name, (/** @type {CustomEvent} */ ev) => {
-                if ((!channels && !(ev.detail && ev.detail.key)) || 
-                    (channels && ev.detail && ev.detail.key && channels.indexOf(ev.detail.key) > -1)) {
+                if (ev.detail && ev.detail.key && _channels.includes(ev.detail.key)) {
                     resolve(ev);
                 }
             }, {
@@ -53,6 +45,24 @@ export class PbEvents {
         });
     }
 
+    /**
+     * 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;
+    }
+
     /**
      * Emit an event to a particular channel
      * 
@@ -62,9 +72,7 @@ export class PbEvents {
      */
     static emit(type, channel=null, detail=null) {
         const options = detail || {};
-        if (channel) {
-            options.key = channel;
-        }
+        options.key = channel || defaultChannel;
         const ev = new CustomEvent(type, {
             detail: options
         });

package/src/pb-facsimile.js

@@ -10,13 +10,13 @@ import { resolveURL } from './utils.js';
  * @fires pb-update - Checks the contents received for pb-facs-links
  * @fires pb-show-annotation - When received, sets up the viewer to select a particular image and highlight coordinates
  * @fires pb-facsimile-status - Indicates the status of loading an image into the viewer. The status is indicated
- * by the `status` property in event.detail as follows: `loading` - image was requested; `loaded` - image is displayed; 
+ * by the `status` property in event.detail as follows: `loading` - image was requested; `loaded` - image is displayed;
  * `fail` - image could not be loaded.
- * 
+ *
  * @cssprop --pb-facsimile-height=auto - Max. height of the image viewer
  * @cssprop --pb-facsimile-border - Style for the annotation highlight border
  * @csspart image - exposes the inner div hosting the image viewer
- * 
+ *
  * @slot before - use for content which should be shown above the facsimile viewer
  * @slot after - use for content which should be shown below the facsimile viewer
  */
@@ -254,6 +254,28 @@ export class PbFacsimile extends pbMixin(LitElement) {
             this.loaded = false;
             this.emitTo('pb-facsimile-status', { status: 'fail' });
         });
+
+        /*
+        handling of full-screen view requires to hide/unhide the content of body to allow full screen viewer
+        to full-page functionality. Standard OSD completely deletes all body children disconnecting all event-handlers
+        that have been there. This solution just uses style.display to hide/show. Former display value of pb-page
+        will be preserved.
+
+        Current limitation: this solution assumes that a pb-page element exists and is an immediate child of body.
+         */
+        this.ownerPage = this.closest('pb-page');
+        if(this.ownerPage){
+            this.pbPageDisplay = window.getComputedStyle(this.ownerPage).getPropertyValue('display');
+            this.viewer.addHandler('full-screen', (ev) => {
+                if(ev.fullScreen){
+                    this.ownerPage.style.display = 'none';
+                }else{
+                    this.viewer.clearOverlays();
+                    this.emitTo('pb-refresh');
+                    this.ownerPage.style.display = this.pbPageDisplay;
+                }
+            });
+        }
         this._facsimileObserver();
 
         this.signalReady();
@@ -381,4 +403,6 @@ export class PbFacsimile extends pbMixin(LitElement) {
 
 
 }
-customElements.define('pb-facsimile', PbFacsimile);
+if (!customElements.get('pb-facsimile')) {
+    customElements.define('pb-facsimile', PbFacsimile);
+}

package/src/pb-grid.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit-element';
 import { pbMixin } from './pb-mixin.js';
+import { registry } from "./urls.js";
 import './pb-panel.js';
 
 /**
@@ -54,6 +55,7 @@ export class PbGrid extends pbMixin(LitElement) {
 
     constructor() {
         super();
+        this.panels = [];
         this.direction = 'ltr';
         this.animated = 'pb-view';
         this.animation = false;
@@ -63,34 +65,35 @@ export class PbGrid extends pbMixin(LitElement) {
         super.connectedCallback();
 
         this.subscribeTo('pb-panel', ev => {
-            const idx = Array.from(this.querySelectorAll('._grid_panel')).indexOf(ev.detail.panel);
-            if (idx > -1) {
-                console.log('<pb-grid> Updating panel %d to show %s', idx, ev.detail.active);
-                this.panels[this.direction === 'rtl' ? this.panels.length - idx - 1 : idx] = ev.detail.active;
-
-                localStorage.setItem('pb-grid.panels', this.panels.join('.'));
-                this.setParameter('panels', this.panels.join('.'));
-                this.pushHistory('added panel');
+            const idx = this._getPanelIndex(ev.detail.panel);
+            if (idx < 0) {
+                return // panel not found
             }
+            console.log('<pb-grid> Updating panel %d to show %s', idx, ev.detail.active);
+            this.panels[this.direction === 'rtl' ? this.panels.length - idx - 1 : idx] = ev.detail.active;
+
+            registry.commit(this, this._getState())
         });
-        const panelsParam = this.getParameter('panels');
+
+        const panelsParam = registry.get('panels');
         if (panelsParam) {
             this.panels = panelsParam.split('.').map(param => parseInt(param));
-            localStorage.setItem('pb-grid.panels', this.panels.join('.'));
-        } else {
-            const panelsStored = localStorage.getItem('pb-grid.panels');
-            if (panelsStored) {
-                this.panels = panelsStored.split('.').map(param => parseInt(param));
-            }
         }
 
+        registry.subscribe(this, (state) => {
+            const newState = state.panels ? state.panels.split('.') : [];
+            this.panels = newState;
+            this.innerHTML=''; // hard reset of child DOM
+            this.panels.forEach(panelNum => this._insertPanel(panelNum));
+            this._update();
+        });
         this._columns = this.panels.length;
         this.template = this.querySelector('template');
     }
 
     firstUpdated() {
         this.panels.forEach(panelNum => this._insertPanel(panelNum));
-
+        registry.commit(this, this._getState())
         this._animate();
         this._update();
     }
@@ -132,41 +135,32 @@ export class PbGrid extends pbMixin(LitElement) {
     }
 
     addPanel(initial) {
-        if (!initial) {
-            if (this.panels.length > 0) {
-                const max = this.panels.reduce(function (a, b) {
-                    return Math.max(a, b);
-                });
-                initial = max + 1;
-            } else {
-                initial = 0;
-            }
+        let value = initial
+        if (!initial && !this.panels.length) {
+            value = 0
+        }
+        if (!initial && this.panels.length) {
+            const max = this.panels.reduce((result, next) => Math.max(result, next), 0);
+            value = max + 1;
         }
-        this._columns++;
-        this.panels.push(initial);
-
-        localStorage.setItem('pb-grid.panels', this.panels.join('.'));
-        this.setParameter('panels', this.panels.join('.'));
-        this.pushHistory('added panel');
 
-        this._insertPanel(initial);
+        this._columns += 1;
+        this.panels.push(value);
 
+        this._insertPanel(value);
+        registry.commit(this, this._getState())
         this._update();
-
         this.emitTo('pb-refresh', null);
     }
 
     removePanel(panel) {
-        const idx = Array.from(this.querySelectorAll('._grid_panel')).indexOf(panel);
+        const idx = this._getPanelIndex(panel);
         console.log('<pb-grid> Removing panel %d', idx);
         this.panels.splice(this.direction === 'rtl' ? this.panels.length - idx - 1 : idx, 1);
 
-        this.setParameter('panels', this.panels.join('.'));
-        localStorage.setItem('pb-grid.panels', this.panels.join('.'));
-        this.pushHistory('removed panel');
-
         panel.parentNode.removeChild(panel);
-        this._columns--;
+        this._columns -= 1;
+        registry.commit(this, this._getState() )
         this._update();
     }
 
@@ -182,22 +176,28 @@ export class PbGrid extends pbMixin(LitElement) {
     }
 
     _update() {
-        const widths = [];
-        Array.from(this.children).forEach((child) => {
-            if (child instanceof HTMLTemplateElement) {
-                return;
-            }
-            const styles = window.getComputedStyle(child);
-            const width = styles.getPropertyValue('max-width');
-            if (width && width !== 'none') {
-                widths.push(width);
-            } else {
-                widths.push('1fr');
-            }
-        });
+        const widths = Array.from(this.children)
+            .filter(child => !(child instanceof HTMLTemplateElement))
+            .map(child => {
+                const styles = window.getComputedStyle(child);
+                const width = styles.getPropertyValue('max-width');
+                if (width && width !== 'none') {
+                    return width;
+                }
+                return '1fr';
+            });
         this.style.setProperty('--pb-computed-column-widths', widths.join(' '));
     }
 
+    _getPanelIndex(panel) {
+        const panels = Array.from(this.querySelectorAll('._grid_panel'));
+        return panels.indexOf(panel);
+    }
+
+    _getState() {
+        return { panels: this.panels.join('.') };
+    }
+
     render() {
         return html`<slot></slot>`;
     }
@@ -214,4 +214,6 @@ export class PbGrid extends pbMixin(LitElement) {
     }
 
 }
-customElements.define('pb-grid', PbGrid);
+if (!customElements.get('pb-grid')) {
+    customElements.define('pb-grid', PbGrid);
+}

package/src/pb-lang.js

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit-element';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-listbox';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
 
 /**
@@ -46,7 +46,7 @@ export class PbLang extends pbMixin(LitElement) {
         this.subscribeTo('pb-i18n-update', (ev) => {
             this.selected = ev.detail.language.replace(/^([^-]+).*$/, '$1');
         }, []);
-        PbLang.waitOnce('pb-i18n-update', (options) => {
+        waitOnce('pb-i18n-update', (options) => {
             this.selected = options.language.replace(/^([^-]+).*$/, '$1');
         });
     }

package/src/pb-link.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { pbMixin } from './pb-mixin.js';
+import { registry } from "./urls.js";
 
 /**
  * Create an internal link: clicking it will cause connected views to
@@ -88,37 +89,30 @@ export class PbLink extends pbMixin(LitElement) {
     _onClick(ev) {
         ev.preventDefault();
 
-        const params = {
-            position: null
+        const params = { 
+            id: null,
+            root: null
         };
         if (this.xmlId) {
             params.id = this.xmlId;
-            this.history && this.setParameter('id', this.xmlId);
         } else if (this.nodeId) {
-            params.position = this.nodeId;
-            this.history && this.setParameter('root', this.nodeId);
+            params.root = this.nodeId;
         }
         if (this.path) {
             params.path = this.path;
-            this.history && this.setPath(this.path);
         }
         if (this.odd) {
             params.odd = this.odd;
-            this.history && this.setParameter('odd', this.odd);
+        }
+        if (this.hash) {
+            params.hash = this.hash;
         }
         if (this.view) {
             params.view = this.view;
-            this.history && this.setParameter('view', this.view);
         }
-        if (this.hash){
-            params.hash = this.hash;
-            if (this.history) {
-                this.getUrl().hash = this.hash;
-            }
-        } else if (this.history) {
-            this.getUrl().hash = '';
+        if (this.history) {
+            registry.commit(this, params);
         }
-        this.pushHistory('link click');
 
         this.emitTo('pb-refresh', params);
     }

package/src/pb-load.js

@@ -1,7 +1,8 @@
 import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
 import { typesetMath } from "./pb-formula.js";
+import { registry } from "./urls.js";
 import '@polymer/iron-ajax';
 import '@polymer/paper-dialog';
 import '@polymer/paper-dialog-scrollable';
@@ -138,30 +139,27 @@ export class PbLoad extends pbMixin(LitElement) {
     connectedCallback() {
         super.connectedCallback();
         this.subscribeTo(this.event, (ev) => {
-            if (this.history && ev.detail && ev.detail.params) {
-                const start = ev.detail.params.start;
-                if (start) {
-                    this.setParameter('start', start);
-                    this.pushHistory('pagination', {
-                        start: start
+            waitOnce('pb-page-ready', () => {
+                if (this.history) {
+                    if (ev.detail && ev.detail.params) {
+                        const start = ev.detail.params.start;
+                        if (start) {
+                            registry.commit(this, { start });
+                        }
+                    }
+                    this.userParams = registry.state;
+                    registry.subscribe(this, (state) => {
+                        if (state.start) {
+                            this.start = state.start;
+                            this.load();
+                        }
                     });
+                    registry.replace(this, this.userParams);
                 }
-            }
-            PbLoad.waitOnce('pb-page-ready', () => {
                 this.load(ev);
             });
         });
 
-        if (this.history) {
-            window.addEventListener('popstate', (ev) => {
-                ev.preventDefault();
-                if (ev.state && ev.state.start && ev.state.start !== this.start) {
-                    this.start = ev.state.start;
-                    this.load();
-                }
-            });
-        }
-
         this.subscribeTo('pb-toggle', ev => {
             this.toggleFeature(ev);
         });
@@ -174,20 +172,28 @@ export class PbLoad extends pbMixin(LitElement) {
             }
         }, []);
 
+        if (this.history) {
+            registry.subscribe(this, (state) => {
+                this.start = state.start;
+                this.userParams = state;
+                this.load();
+            });
+        }
+
         this.signalReady();
     }
 
     firstUpdated() {
         if (this.auto) {
-            this.start = this.getParameter('start', this.start);
-            PbLoad.waitOnce('pb-page-ready', (data) => {
+            this.start = registry.state.start || 1;
+            waitOnce('pb-page-ready', (data) => {
                 if (data && data.language) {
                     this.language = data.language;
                 }
                 this.wait(() => this.load());
             });
         } else {
-            PbLoad.waitOnce('pb-page-ready', (data) => {
+            waitOnce('pb-page-ready', (data) => {
                 if (data && data.language) {
                     this.language = data.language;
                 }
@@ -203,7 +209,7 @@ export class PbLoad extends pbMixin(LitElement) {
                 case 'userParams':
                 case 'start':
                     if (this.auto && this.loader) {
-                        PbLoad.waitOnce('pb-page-ready', () => {
+                        waitOnce('pb-page-ready', () => {
                             this.wait(() => this.load());
                         });
                     }
@@ -246,9 +252,12 @@ export class PbLoad extends pbMixin(LitElement) {
     }
 
     toggleFeature(ev) {
-        this.userParams = ev.detail.properties;
+        this.userParams = registry.getState(this);
         console.log('<pb-load> toggle feature %o', this.userParams);
-        if (ev.detail.action === 'refresh') {
+        if (ev.detail.refresh) {
+            if (this.history) {
+                registry.commit(this, this.userParams);
+            }
             this.load();
         }
     }
@@ -410,6 +419,7 @@ export class PbLoad extends pbMixin(LitElement) {
         this.emitTo('pb-results-received', {
             "count": total ? parseInt(total, 10) : 0,
             "start": this.start,
+            "content": content,
             "params": this.shadowRoot.getElementById('loadContent').params
         });
     }

package/src/pb-login.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 { translate } from "./pb-i18n.js";
 import '@polymer/iron-ajax';
 import '@polymer/paper-dialog';
@@ -117,7 +117,7 @@ export class PbLogin extends pbMixin(LitElement) {
                 this._checkLogin.generateRequest();
             }
         });
-        PbLogin.waitOnce('pb-page-ready', (detail) => {
+        waitOnce('pb-page-ready', (detail) => {
             if (minVersion(detail.apiVersion, '1.0.0')) {
                 this._checkLogin.url = `${detail.endpoint}/api/login/`;
             } else {

package/src/pb-manage-odds.js

@@ -7,7 +7,7 @@ import '@polymer/paper-button';
 import '@polymer/paper-icon-button';
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/app-layout/app-toolbar/app-toolbar.js';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from './pb-i18n.js';
 import './pb-restricted.js';
 import './pb-ajax.js';
@@ -73,7 +73,7 @@ export class PbManageOdds extends pbMixin(LitElement) {
 
         this._loader = this.shadowRoot.getElementById('load');
 
-        PbManageOdds.waitOnce('pb-page-ready', (options) => {
+        waitOnce('pb-page-ready', (options) => {
             if (cmpVersion(options.apiVersion, '1.0.0') < 0) {
                 this._loader.url = `${options.endpoint}/modules/lib/components-odd.xql`;
             } else {

package/src/pb-markdown.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { pbMixin } from './pb-mixin';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import * as marked from 'marked/lib/marked.js';
 import './pb-code-highlight.js';
 
@@ -71,7 +71,7 @@ export class PbMarkdown extends pbMixin(LitElement) {
 
     set url(value) {
         this._url = value;
-        PbMarkdown.waitOnce("pb-page-ready", (options) => {
+        waitOnce("pb-page-ready", (options) => {
             this._load(options.endpoint);
         });
     }

package/src/pb-mei.js

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import "@lrnwebcomponents/es-global-bridge";
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from './pb-i18n.js';
 import '@polymer/paper-icon-button';
 import '@polymer/paper-checkbox';
@@ -145,7 +145,7 @@ export class PbMei extends pbMixin(LitElement) {
             .then(() => {
                 this._verovio = new window.verovio.toolkit();
 
-                PbMei.waitOnce('pb-page-ready', () => {
+                waitOnce('pb-page-ready', () => {
                     this.load();
                 });
             });