@teipublisher/pb-components 1.36.1 → 1.37.0

package/src/pb-combo-box.js

@@ -0,0 +1,154 @@
+import { LitElement } from 'lit-element';
+import TomSelect from "tom-select";
+import { pbMixin } from './pb-mixin.js';
+import { resolveURL } from './utils.js';
+
+function importTheme(theme) {
+    if (document.getElementById('__pb-multi-select-css')) {
+        return;
+    }
+    const themes = resolveURL('../css/tom-select');
+    const link = document.createElement('link');
+    link.id = '__pb-multi-select-css';
+    link.href = `${themes}/tom-select.${theme}.min.css`;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+}
+
+const renderDefault = (data) =>
+    data ? `<div>${data.text}</div>` : '';
+
+/**
+ * Provides a combo box, i.e. a combination of an input with a dropdown.
+ * Items to select from may be obtained from a remote data source.
+ * 
+ * The form control to be used (either a select or input) should be passed 
+ * in the content of the element. If no control is provided, a simple `<input>`
+ * will be created.
+ * 
+ */
+export class PbComboBox extends pbMixin(LitElement) {
+    static get properties() {
+        return {
+            ...super.properties,
+            /**
+             * A remote data source to use. The component will pass the text entered by the user
+             * in parameter `query`. It expects a JSON array of objects with each object describing
+             * one item:
+             * 
+             * ```json
+             * {
+             *  "text": "Text to show as label",
+             *  "value": "value-to-use"
+             * }
+             * ```
+             */
+            source: {
+                type: String
+            },
+            /**
+             * Automatically close the dropdown once the user made a selection
+             */
+            closeAfterSelect: {
+                type: Boolean,
+                attribute: 'close-after-select'
+            },
+            /**
+             * Preload all items from the remote data source at startup
+             */
+            preload: {
+                type: Boolean
+            },
+            /**
+             * Name of the event to be emitted when the user leaves the form control
+             */
+            onBlur: {
+                type: String,
+                attribute: 'on-blur'
+            },
+            /**
+             * Name of the event to be emitted when the value of the form control has changed
+             */
+            onChange: {
+                type: String,
+                attribute: 'on-change'
+            }
+        };
+    }
+
+    /**
+     * Set a javascript function to be called whenever an item
+     * needs to be rendered. The function will be passed the data
+     * object of the current item as argument.
+     * 
+     * @param {Function} callbackFunction
+     */
+    set renderItem(callbackFunction) {
+        this.renderFunction = callbackFunction;
+    }
+
+    constructor() {
+        super();
+        this.theme = 'default';
+        this.source = null;
+        this.closeAfterSelect = false;
+        this.preload = false;
+        this.renderFunction = renderDefault;
+        this.onBlur = 'pb-combo-box-blur';
+        this.onChange = 'pb-combo-box-change';
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    firstUpdated() {
+        importTheme(this.theme);
+
+        let input = this.querySelector('select,input');
+
+        if (!input) {
+            // create input if none was passed
+            input = document.createElement('input');
+            this.appendChild(input);
+        }
+        input.autocomplete = false;
+
+        PbComboBox.waitOnce('pb-page-ready', () => {
+            const options = {};
+            if (this.source) {
+                const url = this.toAbsoluteURL(this.source);
+                options.labelField = 'text';
+                options.valueField = 'value';
+                options.searchField = ['text', 'value'];
+                options.preload = this.preload;
+                options.load = (query, callback) => {
+                    fetch(`${url}?query=${encodeURIComponent(query)}`, {
+                        method: 'GET',
+                        mode: 'cors',
+                        credentials: 'same-origin'
+                    })
+                    .then(response => response.json())
+                    .then(json => {
+                        callback(json);
+                    }).catch(()=>{
+                        callback();
+                    });
+                };
+                options.render = {
+                    option: this.renderFunction,
+                    item: this.renderFunction
+                };
+            }
+            options.closeAfterSelect = this.closeAfterSelect;
+            options.onBlur = () => this.emitTo(this.onBlur);
+            options.onChange = () => this.emitTo(this.onChange);
+            this._select = new TomSelect(input, options);
+        });
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+}
+customElements.define('pb-combo-box', PbComboBox);

package/src/pb-components.js

@@ -59,6 +59,7 @@ import './pb-blacklab-highlight.js';
 import './pb-table-grid.js';
 import './pb-split-list.js';
 import './pb-timeline.js';
+import './pb-combo-box.js';
 
 import '@polymer/iron-icons/editor-icons';
 import '@polymer/iron-icons/social-icons';

package/src/pb-facsimile.js

@@ -85,6 +85,21 @@ export class PbFacsimile extends pbMixin(LitElement) {
                 type: Number,
                 attribute: 'visibility-ratio'
             },
+            /**
+             * If set, thumbnails of all images are shown in a reference strip at the
+             * bottom of the viewer.
+             */
+            referenceStrip: {
+                type: Boolean,
+                attribute: 'reference-strip'
+            },
+            /**
+             * Size ratio for the reference strip thumbnails. 0.2 by default.
+             */
+            referenceStripSizeRatio: {
+                type: Number,
+                attribute: 'reference-strip-size-ratio'
+            },
             /**
              * Type of the source of the image to display: either 'iiif' or 'image'
              * (for simple image links not served via IIIF).
@@ -134,6 +149,8 @@ export class PbFacsimile extends pbMixin(LitElement) {
         this.showFullPageControl = false;
         this.showRotationControl = false;
         this.constrainDuringPan = false;
+        this.referenceStrip = false;
+        this.referenceStripSizeRatio = 0.2;
         this.src = '';
         this.prefixUrl = '../images/openseadragon/';
         this.loaded = false;
@@ -197,7 +214,7 @@ export class PbFacsimile extends pbMixin(LitElement) {
     // Init openseadragon
     _initOpenSeadragon() {
         const prefixUrl = resolveURL(this.prefixUrl + (this.prefixUrl.endsWith("/") ? "" : "/"));
-        this.viewer = OpenSeadragon({
+        const options = {
             element: this.shadowRoot.getElementById('viewer'),
             prefixUrl,
             preserveViewport: true,
@@ -213,7 +230,12 @@ export class PbFacsimile extends pbMixin(LitElement) {
             minZoomLevel: 1,
             defaultZoomLevel: this.defaultZoomLevel,
             constrainDuringPan: true
-        });
+        };
+        if (this.referenceStrip) {
+            options.showReferenceStrip = true;
+            options.referenceStripSizeRatio = this.referenceStripSizeRatio;
+        }
+        this.viewer = OpenSeadragon(options);
 
         this.viewer.addHandler('open', () => {
             this.resetZoom();

package/src/pb-page.js

@@ -229,6 +229,15 @@ class PbPage extends pbMixin(LitElement) {
             return;
         }
 
+        const slot = this.shadowRoot.querySelector('slot');
+        slot.addEventListener('slotchange', () => {
+            const ev = new CustomEvent('pb-page-loaded', {
+                bubbles: true,
+                composed: true
+            });
+            this.dispatchEvent(ev);
+        }, { once: true });
+
         const defaultLocales = resolveURL('../i18n/') + '{{ns}}/{{lng}}.json';
         console.log('<pb-page> Loading locales. common: %s; additional: %s; namespaces: %o',
             defaultLocales, this.locales, this._localeFallbacks);

package/src/pb-popover.js

@@ -74,7 +74,7 @@ export function loadTippyStyles(root, theme) {
  * unless defined otherwise; clicking anywhere on the page will close the popup.
  * @prop {"click" | "mouseenter" | "focus" | "focusin"} trigger - Defines one or more actions (space separated) which should cause
  * the popover to show. If property `persistent` is set, `trigger` will by default be set to `click`.
- * @prop {String} poupClass - Additional class names which will be added to the popup element.
+ * @prop {String} popupClass - Additional class names which will be added to the popup element.
  * Use this to apply a specific style to certain popovers, but not others.
  * @prop {String} remote - An optional URL to asynchronously load the popover's content from. Content will
  * be loaded after the popover is displayed. The downloaded HTML content will replace the text set via the alternate slot.

package/src/pb-timeline.js

@@ -282,6 +282,10 @@ export class PbTimeline extends pbMixin(LitElement) {
             scopes: {
               type: Array
             },
+            maxInterval: {
+              type: Number,
+              attribute: 'max-interval'
+            },
             /**
              * Endpoint to load timeline data from. Expects response to be an
              * object with key value pairs for (date, hits).
@@ -315,6 +319,7 @@ export class PbTimeline extends pbMixin(LitElement) {
     this.endDate = '';
     this.scope = '';
     this.scopes = ["D", "W", "M", "Y", "5Y", "10Y"];
+    this.maxInterval = 60;
     this.url = '';
     this.auto = false;
     this.resettable = false;
@@ -516,10 +521,18 @@ export class PbTimeline extends pbMixin(LitElement) {
           endDateStr: this.searchResult.getEndOfRangeDate(this.dataObj.scope, endDateStr),
           scope: this.dataObj.scope,
           categories,
-          count: itemCount
+          count: itemCount,
+          label: this.label
         });
       } else {
-        this.emitTo('pb-timeline-date-changed', { startDateStr, endDateStr: null, scope: this.dataObj.scope, categories, count: itemCount });
+        this.emitTo('pb-timeline-date-changed', { 
+          startDateStr, 
+          endDateStr: null, 
+          scope: this.dataObj.scope, 
+          categories, 
+          count: itemCount,
+          label: this.label
+        });
       }
     } else {
       this.emitTo('pb-timeline-daterange-changed', {
@@ -527,7 +540,8 @@ export class PbTimeline extends pbMixin(LitElement) {
         endDateStr,
         categories,
         scope: this.dataObj.scope,
-        count: itemCount
+        count: itemCount,
+        label: this.label
       });
     }
   }
@@ -732,15 +746,12 @@ export class PbTimeline extends pbMixin(LitElement) {
         } else {
           newJsonData = data;
         }
-        this.searchResult = new SearchResultService(newJsonData, 60, this.scopes);
+        this.searchResult = new SearchResultService(newJsonData, this.maxInterval, this.scopes);
         this.setData(this.searchResult.export(this.scope));
-        this.dispatchEvent(new CustomEvent('pb-timeline-loaded', {
-            detail: {
-                value: true
-            },
-            composed: true,
-            bubbles: true
-        }));
+        this.emitTo('pb-timeline-loaded', {
+          value: true,
+          label: this.label
+        });
     }
 
 }