@teipublisher/pb-components 1.44.2 → 2.1.0

package/src/pb-browse-docs.js

@@ -1,7 +1,11 @@
 import { html, css } from 'lit-element';
 import { PbLoad } from './pb-load.js';
+import { waitOnce } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
 import { themableMixin } from "./theming.js";
+import { cmpVersion } from './utils.js';
+import { registry } from "./urls.js";
+
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/paper-button';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
@@ -10,7 +14,6 @@ import '@polymer/paper-dialog';
 import '@polymer/paper-dialog-scrollable';
 import '@polymer/iron-ajax';
 import '@cwmr/paper-autocomplete/paper-autocomplete-suggestions.js';
-import { cmpVersion } from './utils.js';
 
 /**
  * Component to browse through a collection of documents with sorting, filtering and facets.
@@ -135,21 +138,43 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
     connectedCallback() {
         super.connectedCallback();
 
-        const sortParam = this.getParameter('sort');
-        if (sortParam) {
-            this.sortBy = sortParam;
-        }
+        waitOnce('pb-page-ready', () => {
+            if (registry.state.sort) {
+                this.sortBy = registry.state.sort;
+            }
 
-        const filterParam = this.getParameter('filter');
-        if (filterParam) {
-            this.filter = filterParam;
-            this.filterBy = this.getParameter('filterBy', this.filterBy);
-        }
+            if (registry.state.filter) {
+                this.filter = registry.state.filter;
+                this.filterBy = registry.state.filterBy || this.filterBy;
+            }
 
-        this.facets = this.getParametersMatching(/^facet-.*$/);
+            this.facets = {};
+            // registry get state by regex
+            // this.facets = registry.getParametersMatching(this, /^facet-.*$/)
+            Object.keys(registry.state).forEach((key) => {
+                if (/^facet-.*$/.test(key)) {
+                    const param = registry.state[key];
+                    if (this.facets[key]) {
+                        this.facets[key].push(param);
+                    } else {
+                        this.facets[key] = [param];
+                    }
+                }
+            });
 
-        this.collection = this.getParameter('collection');
+            this.collection = registry.state.collection;
 
+            if (this.collection) {
+                registry.replace(this, {
+                    collection: this.collection
+                });
+            }
+            registry.subscribe(this, (state) => {
+                this.collection = state.collection;
+                this.load();
+            });
+        });
+        
         this.subscribeTo('pb-search-resubmit', this._facets.bind(this));
         this.subscribeTo('pb-login', (ev) => {
             if (ev.detail.userChanged) {
@@ -171,7 +196,7 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
     }
 
     firstUpdated() {
-        PbBrowseDocs.waitOnce('pb-page-ready', (options) => {
+        waitOnce('pb-page-ready', (options) => {
             const loader = this.shadowRoot.getElementById('autocompleteLoader');
             if (cmpVersion(options.apiVersion, '1.0.0') >= 0) {
                 loader.url = `${options.endpoint}/api/search/autocomplete`;
@@ -384,10 +409,7 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
         if (typeof filter !== 'undefined') {
             console.log('<pb-browse-docs> Filter by %s', filter);
             this.filter = filter;
-            this.setParameter('filter', filter);
-            this.setParameter('filterBy', filterBy);
-            this.pushHistory('filter docs');
-
+            registry.commit(this, { filter, filterBy })
             this.load();
         }
     }
@@ -405,8 +427,7 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
         if (sortBy && sortBy !== this.sortBy) {
             console.log('<pb-browse-docs> Sorting by %s', sortBy);
             this.sortBy = sortBy;
-            this.setParameter('sort', sortBy);
-            this.pushHistory('sort docs');
+            registry.commit(this, { sort: sortBy })
 
             this.load();
         }
@@ -414,13 +435,10 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
 
     _facets(ev) {
         if (ev.detail && ev.detail.params) {
-            this.clearParametersMatching(/^(all-|facet-).*/);
-            for (let param in ev.detail.params) {
-                this.setParameter(param, ev.detail.params[param]);
-            }
+            registry.clearParametersMatching(this, /^(all-|facet-).*/);
             this.facets = ev.detail.params;
             this.start = 1;
-            this.pushHistory('facets');
+            registry.commit(this, ev.detail.params)
         }
         this.load();
     }
@@ -442,8 +460,7 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
                 ev.preventDefault();
                 this.collection = link.getAttribute('data-collection');
                 this.start = 1;
-                this.setParameter('collection', this.collection);
-                this.pushHistory('browse collection');
+                registry.commit(this, { collection: this.collection });
                 console.log('<pb-browse-docs> loading collection %s', this.collection);
                 this.load();
             });
@@ -513,7 +530,7 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
     }
 
     _handleEnter(e) {
-        if (e.keyCode == 13) {
+        if (e.keyCode === 13) {
             this._filter();
         }
     }

package/src/pb-browse.js

@@ -1,4 +1,6 @@
 import { PbLoad } from './pb-load.js';
+import { registry } from './urls.js';
+import { waitOnce } from "./pb-mixin.js";
 
 /**
  * Extends PbLoad to support browsing collections.
@@ -37,7 +39,10 @@ export class PbBrowse extends PbLoad {
 
     connectedCallback() {
         super.connectedCallback();
-        this.collection = this.getParameter('collection');
+        waitOnce('pb-page-ready', () => {
+            this.collection = registry.state.collection;
+            registry.subscribe(this, (state) => { this.collection = state.collection; });
+        });
     }
 
     getURL(params) {
@@ -66,8 +71,9 @@ export class PbBrowse extends PbLoad {
                 ev.preventDefault();
                 this.collection = link.getAttribute('data-collection');
                 this.start = 1;
-                this.setParameter('collection', this.collection);
-                this.pushHistory('browse collection');
+                if (this.history) {
+                    registry.commit(this, { collection: this.collection });
+                }
                 console.log('<pb-browse> loading collection %s', this.collection);
                 this.emitTo('pb-search-resubmit');
             });

package/src/pb-combo-box.js

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit-element';
 import TomSelect from "tom-select";
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 
 function importTheme(theme) {
@@ -114,7 +114,7 @@ export class PbComboBox extends pbMixin(LitElement) {
         }
         input.autocomplete = false;
 
-        PbComboBox.waitOnce('pb-page-ready', () => {
+        waitOnce('pb-page-ready', () => {
             const options = {};
             if (this.source) {
                 const url = this.toAbsoluteURL(this.source);

package/src/pb-components.js

@@ -6,6 +6,7 @@ import './pb-popover.js';
 import './pb-highlight.js';
 import './pb-link.js';
 import './pb-facs-link.js';
+import './pb-image-strip.js';
 import './pb-collapse.js';
 import './pb-browse-docs.js';
 import './pb-browse.js';

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-facs-link.js

@@ -18,6 +18,12 @@ export class PbFacsLink extends pbMixin(LitElement) {
             coordinates: {
                 type: Array
             },
+            label: {
+                type: String
+            },
+            order: {
+                type: Number
+            },
             /** 
              * Type of event which should trigger the facsimile to display. 
              * Either 'click' or 'mouseover' (default). */
@@ -39,29 +45,46 @@ export class PbFacsLink extends pbMixin(LitElement) {
     constructor() {
         super();
         this.trigger = 'mouseover';
+        this.label = '';
+        this.order = Number.POSITIVE_INFINITY;
+        this.waitFor = 'pb-facsimile,pb-image-strip';
+        this.default = '';
     }
 
     connectedCallback() {
         super.connectedCallback();
+
+        this.wait(() => {
+            this.emitTo('pb-load-facsimile', {
+                url: this.getImage(),
+                order: this.getOrder(),
+                element: this
+            });
+        });
+    }
+
+    getImage() {
+        return this.facs
+    }
+
+    getLabel() {
+        return this.label
+    }
+
+    getOrder() {
+        return this.order
     }
 
     firstUpdated() {
         const link = this.shadowRoot.querySelector('a');
-        switch (this.trigger) {
-            case 'click':
-                link.addEventListener('click', this._linkListener.bind(this));
-                break;
-            default:
-                link.addEventListener('mouseover', this._linkListener.bind(this));
-                break;
-        }
+        link.addEventListener(this.trigger, this._linkListener.bind(this));
         if (this.emitOnLoad) {
             this._trigger();
         }
     }
 
     render() {
-        return html`<a href="#"><slot></slot></a>`;
+        return html`<a href="javascript:;"><slot>${this.default}</slot></a>`;
     }
 
     static get styles() {
@@ -84,6 +107,7 @@ export class PbFacsLink extends pbMixin(LitElement) {
     _trigger() {
         console.log("<facs-link> %s %o", this.facs, this.coordinates);
         this.emitTo('pb-show-annotation', {
+            element: this,
             file: this.facs,
             coordinates: this.coordinates
         });

package/src/pb-facsimile.js

@@ -173,7 +173,19 @@ export class PbFacsimile extends pbMixin(LitElement) {
     connectedCallback() {
         super.connectedCallback();
         this.subscribeTo('pb-start-update', this._clearAll.bind(this));
-        this.subscribeTo('pb-update', this._fragmentUpdateListener.bind(this));
+        this.subscribeTo('pb-load-facsimile', (e) => {
+            const { element, order } = e.detail
+            const itemOrder = this._facsimiles.map(item => item.getOrder ? item.getOrder() : Number.POSITIVE_INFINITY )  
+            const insertAt = itemOrder.reduce((result, next, index) => {
+                if (order < next) return result;
+                if (order === next) return index;
+                return index + 1;
+            }, 0)
+            
+            this._facsimiles.splice(insertAt, 0, element)
+
+            this._facsimileObserver()
+        });
         this.subscribeTo('pb-show-annotation', this._showAnnotationListener.bind(this));
     }
 
@@ -247,7 +259,7 @@ export class PbFacsimile extends pbMixin(LitElement) {
 
         this.viewer.addHandler('open', () => {
             this.resetZoom();
-            this.emitTo('pb-facsimile-status', { status: 'loaded' });
+            this.emitTo('pb-facsimile-status', { status: 'loaded', facsimiles: this._facsimiles });
         });
         this.viewer.addHandler('open-failed', (ev) => {
             console.error('<pb-facsimile> open failed: %s', ev.message);
@@ -285,17 +297,19 @@ export class PbFacsimile extends pbMixin(LitElement) {
         if (!this.viewer) {
             return;
         }
-        if (this._facsimiles.length === 0) { return this.viewer.close() }
-        const uris = this._facsimiles.map(fac => {
+        if (this._facsimiles.length === 0) {
+            return this.viewer.close()
+        }
+        const uris = this._facsimiles.map(facsLink => {
+            const url = this.baseUri + (facsLink.getImage ? facsLink.getImage() : facsLink)
             if (this.type === 'iiif') {
-                return `${this.baseUri}${fac}/info.json`;
-            } else {
-                return {
-                    tileSource: {
-                        type: 'image',
-                        url: `${this.baseUri}${fac}`,
-                        buildPyramid: false
-                    }
+                return `${url}/info.json`;
+            }
+            return {
+                tileSource: {
+                    type: 'image',
+                    url,
+                    buildPyramid: false
                 }
             }
         });
@@ -313,22 +327,6 @@ export class PbFacsimile extends pbMixin(LitElement) {
         this.facsimiles = [];
     }
 
-    _fragmentUpdateListener(event) {
-        this.facsimiles = this._getFacsimilesFromData(event.detail.root)
-        this._facsimileObserver();
-    }
-
-    _getFacsimilesFromData(elem) {
-        const facsimiles = [];
-        elem.querySelectorAll('pb-facs-link').forEach(cb => {
-            if (cb.facs) {
-                facsimiles.push(cb.facs);
-            }
-        });
-        console.log('<pb-facsimile> _getFacsimilesFromData', facsimiles);
-        return facsimiles;
-    }
-
     _showAnnotationListener(event) {
         if (!this.viewer) {
             return;
@@ -352,7 +350,7 @@ export class PbFacsimile extends pbMixin(LitElement) {
         }
 
         // find page to show
-        const page = this._pageIndexByUrl(event.detail.file)
+        const page = event.detail.element ? this._pageByElement(event.detail.element) : this._pageIndexByUrl(event.detail.file);
 
         if (page < 0) {
             return console.error('page not found', event.detail)
@@ -376,7 +374,8 @@ export class PbFacsimile extends pbMixin(LitElement) {
             }
 
             // create new overlay
-            const overlay = this.overlay = document.createElement('div');
+            const overlay = document.createElement('div');
+            this.overlay = overlay
             overlay.id = overlayId;
 
             // place marker
@@ -389,8 +388,12 @@ export class PbFacsimile extends pbMixin(LitElement) {
         }
     }
 
+    _pageByElement(element) {
+        return this._facsimiles.indexOf(element);
+    }
+
     _pageIndexByUrl(file) {
-        return this._facsimiles.indexOf(file);
+        return this._facsimiles.findIndex(element => element.getImage() === file);
     }
 
     // reset zoom