@teipublisher/pb-components 1.44.2 → 2.1.0

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-image-strip.js

@@ -0,0 +1,97 @@
+import { LitElement, html, css } from 'lit-element';
+import { pbMixin } from './pb-mixin.js';
+
+/**
+ *
+ *
+ * @returns {CustomElementConstructor} pb-image-strip
+ * @appliesMixin pbMixin
+ */
+export class PbImageStrip extends pbMixin(LitElement) {
+    static get properties() {
+        return {
+            ...super.properties,
+            /**
+             * Array of image
+             *
+             */
+            items: {
+                type: Array
+            },
+            imageWidth: {
+                attribute: 'image-width',
+                type: Number
+            },
+            imageHeight: {
+                attribute: 'image-height',
+                type: Number
+            },
+            baseUri: {
+                attribute: 'base-uri',
+                type: String
+            }
+        };
+    }
+
+    constructor() {
+        super();
+        this.items = []
+        this.urls = new Set()
+        this.imageHeight = 80
+        this.imageWidth = 64
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.subscribeTo('pb-start-update', () => {
+            this.items = []
+            this.urls = new Set()
+            this.requestUpdate(this.items)
+        });
+        this.subscribeTo('pb-load-facsimile', e => {
+            const { element, order } = e.detail
+            const url = element.getImage()
+            if (this.urls.has(url)) { return }
+
+            this.urls.add(url)
+            const itemOrder = this.items.map(item => item.getOrder())  
+            const insertAt = itemOrder.reduce((result, next, index) => {
+                if (order < next) return result;
+                if (order === next) return index;
+                return index + 1;
+            }, 0)
+            
+            this.items.splice(insertAt, 0, element)
+            this.requestUpdate()
+        });
+    }
+
+    showIt(element) {
+        this.emitTo('pb-show-annotation', { file: element.getImage(), element })
+    }
+
+    renderItem(item) {
+        return html`
+            <figure class="strip-item" @click="${() => this.showIt(item)}">
+                <img height="${this.imageHeight}" width="${this.imageWidth}" 
+                    src="${this.baseUri}${item.getImage()}/full/${this.imageWidth},${this.imageHeight}/0/default.jpg">
+                <figcaption>${item.getLabel()}</figcaption>
+            </figure>
+        `
+    }
+
+    render() {
+        return html`${this.items.map(item => this.renderItem(item))}`;
+    }
+
+    static get styles() {
+        return css`
+            :host {
+                display: block;
+            }
+        `;
+    }
+}
+if (!customElements.get('pb-image-strip')) {
+    customElements.define('pb-image-strip', PbImageStrip);
+}

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();
                 });
             });