@teipublisher/pb-components 2.0.0 → 2.1.0

package/dist/pb-elements.json

@@ -3912,6 +3912,16 @@
           "type": "string",
           "default": "\"mouseover\""
         },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "order",
+          "type": "number",
+          "default": "\"POSITIVE_INFINITY\""
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -3935,7 +3945,8 @@
         {
           "name": "wait-for",
           "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
-          "type": "string"
+          "type": "string",
+          "default": "\"pb-facsimile,pb-image-strip\""
         },
         {
           "name": "disabled",
@@ -3970,6 +3981,23 @@
           "type": "string",
           "default": "\"mouseover\""
         },
+        {
+          "name": "label",
+          "attribute": "label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "order",
+          "attribute": "order",
+          "type": "number",
+          "default": "\"POSITIVE_INFINITY\""
+        },
+        {
+          "name": "default",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -3998,7 +4026,8 @@
           "name": "waitFor",
           "attribute": "wait-for",
           "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
-          "type": "string"
+          "type": "string",
+          "default": "\"pb-facsimile,pb-image-strip\""
         },
         {
           "name": "disabled",
@@ -5089,6 +5118,130 @@
         }
       ]
     },
+    {
+      "name": "pb-image-strip",
+      "path": "./src/pb-image-strip.js",
+      "attributes": [
+        {
+          "name": "base-uri",
+          "type": "string"
+        },
+        {
+          "name": "items",
+          "description": "Array of image",
+          "type": "array",
+          "default": "[]"
+        },
+        {
+          "name": "image-height",
+          "type": "number",
+          "default": "80"
+        },
+        {
+          "name": "image-width",
+          "type": "number",
+          "default": "64"
+        },
+        {
+          "name": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "baseUri",
+          "attribute": "base-uri",
+          "type": "string"
+        },
+        {
+          "name": "items",
+          "attribute": "items",
+          "description": "Array of image",
+          "type": "array",
+          "default": "[]"
+        },
+        {
+          "name": "urls",
+          "type": "Set<any>"
+        },
+        {
+          "name": "imageHeight",
+          "attribute": "image-height",
+          "type": "number",
+          "default": "80"
+        },
+        {
+          "name": "imageWidth",
+          "attribute": "image-width",
+          "type": "number",
+          "default": "64"
+        },
+        {
+          "name": "subscribe",
+          "attribute": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribeConfig",
+          "attribute": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "attribute": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emitConfig",
+          "attribute": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "waitFor",
+          "attribute": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    },
     {
       "name": "pb-lang",
       "path": "./src/pb-lang.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",

package/pb-elements.json

@@ -3912,6 +3912,16 @@
           "type": "string",
           "default": "\"mouseover\""
         },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "order",
+          "type": "number",
+          "default": "\"POSITIVE_INFINITY\""
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -3935,7 +3945,8 @@
         {
           "name": "wait-for",
           "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
-          "type": "string"
+          "type": "string",
+          "default": "\"pb-facsimile,pb-image-strip\""
         },
         {
           "name": "disabled",
@@ -3970,6 +3981,23 @@
           "type": "string",
           "default": "\"mouseover\""
         },
+        {
+          "name": "label",
+          "attribute": "label",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "order",
+          "attribute": "order",
+          "type": "number",
+          "default": "\"POSITIVE_INFINITY\""
+        },
+        {
+          "name": "default",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -3998,7 +4026,8 @@
           "name": "waitFor",
           "attribute": "wait-for",
           "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
-          "type": "string"
+          "type": "string",
+          "default": "\"pb-facsimile,pb-image-strip\""
         },
         {
           "name": "disabled",
@@ -5089,6 +5118,130 @@
         }
       ]
     },
+    {
+      "name": "pb-image-strip",
+      "path": "./src/pb-image-strip.js",
+      "attributes": [
+        {
+          "name": "base-uri",
+          "type": "string"
+        },
+        {
+          "name": "items",
+          "description": "Array of image",
+          "type": "array",
+          "default": "[]"
+        },
+        {
+          "name": "image-height",
+          "type": "number",
+          "default": "80"
+        },
+        {
+          "name": "image-width",
+          "type": "number",
+          "default": "64"
+        },
+        {
+          "name": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "baseUri",
+          "attribute": "base-uri",
+          "type": "string"
+        },
+        {
+          "name": "items",
+          "attribute": "items",
+          "description": "Array of image",
+          "type": "array",
+          "default": "[]"
+        },
+        {
+          "name": "urls",
+          "type": "Set<any>"
+        },
+        {
+          "name": "imageHeight",
+          "attribute": "image-height",
+          "type": "number",
+          "default": "80"
+        },
+        {
+          "name": "imageWidth",
+          "attribute": "image-width",
+          "type": "number",
+          "default": "64"
+        },
+        {
+          "name": "subscribe",
+          "attribute": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribeConfig",
+          "attribute": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "attribute": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emitConfig",
+          "attribute": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "waitFor",
+          "attribute": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    },
     {
       "name": "pb-lang",
       "path": "./src/pb-lang.js",

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-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

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