@teipublisher/pb-components 2.26.1-next.3 → 3.0.0

package/src/pb-tabs.js

@@ -2,88 +2,86 @@ import { LitElement, html, css } from 'lit-element';
 import '@polymer/paper-tabs';
 import '@polymer/iron-pages';
 import { pbMixin, waitOnce } from './pb-mixin.js';
-import { registry } from "./urls.js";
-
+import { registry } from './urls.js';
 
 /**
  * Combines a row of tabs with associated content.
- * 
+ *
  * @slot tab - tab area
  * @slot page - page area
  * @csspart pages - wrapper around the tab pages
- * @fires pb-tab - fired if selected tab changes. Details contain number of 
+ * @fires pb-tab - fired if selected tab changes. Details contain number of
  * selected tab in propery `selected`.
  */
 export class PbTabs extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            selected: {
-                type: Number,
-                reflect: true
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      selected: {
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
 
-    constructor() {
-        super();
+  constructor() {
+    super();
 
-        this.selected = 0;
-        this._initialized = false;
-    }
-    
-    connectedCallback() {
-        super.connectedCallback();
+    this.selected = 0;
+    this._initialized = false;
+  }
 
-        waitOnce('pb-page-ready', () => {
-            this.selected = registry.state.tab || 0;
+  connectedCallback() {
+    super.connectedCallback();
 
-            registry.subscribe(this, (state) => {
-                this.selected = state.tab;
-            });
+    waitOnce('pb-page-ready', () => {
+      this.selected = registry.state.tab || 0;
 
-        });
-    }
+      registry.subscribe(this, state => {
+        this.selected = state.tab;
+      });
+    });
+  }
 
-    firstUpdated() {
-        super.firstUpdated();
-        this.emitTo('pb-tab', { selected: this.selected });
-    }
+  firstUpdated() {
+    super.firstUpdated();
+    this.emitTo('pb-tab', { selected: this.selected });
+  }
 
-    _switchTab(ev) {
-        const current = parseInt(ev.detail.value, 10);
-        if (this.selected === current) {
-            return;
-        }
+  _switchTab(ev) {
+    const current = parseInt(ev.detail.value, 10);
+    if (this.selected === current) {
+      return;
+    }
 
-        this.emitTo('pb-tab', { selected: current });
+    this.emitTo('pb-tab', { selected: current });
 
-        this.selected = current;
-        if (this._initialized) {
-            registry.commit(this, { tab: this.selected });
-        } else {
-            registry.replace(this, { tab: this.selected });
-        }
-        this._initialized = true;
+    this.selected = current;
+    if (this._initialized) {
+      registry.commit(this, { tab: this.selected });
+    } else {
+      registry.replace(this, { tab: this.selected });
     }
+    this._initialized = true;
+  }
 
-    render() {
-        return html`
-            <paper-tabs id="tabs" selected="${this.selected || 0 }" @selected-changed="${this._switchTab}">
-                <slot name="tab"></slot>
-            </paper-tabs>
-            <iron-pages part="pages" selected="${this.selected}">
-                <slot name="page"></slot>
-            </iron-pages>
-        `;
-    }
+  render() {
+    return html`
+      <paper-tabs id="tabs" selected="${this.selected || 0}" @selected-changed="${this._switchTab}">
+        <slot name="tab"></slot>
+      </paper-tabs>
+      <iron-pages part="pages" selected="${this.selected}">
+        <slot name="page"></slot>
+      </iron-pages>
+    `;
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-        `;
-    }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
 }
-customElements.define('pb-tabs', PbTabs);
+customElements.define('pb-tabs', PbTabs);

package/src/pb-tify.js

@@ -1,18 +1,18 @@
 import { LitElement } from 'lit-element';
-import "tify";
+import 'tify';
 import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 
 function _injectStylesheet(path) {
-    const style = document.querySelector(`link#pb-tify`);
-    if (!style) {
-        const elem = document.createElement('link');
-        elem.type = 'text/css';
-        elem.rel = 'stylesheet';
-        elem.id = `pb-tify`;
-        elem.href = `${resolveURL(path)}/tify.css`;
-        document.head.appendChild(elem);
-    }
+  const style = document.querySelector(`link#pb-tify`);
+  if (!style) {
+    const elem = document.createElement('link');
+    elem.type = 'text/css';
+    elem.rel = 'stylesheet';
+    elem.id = `pb-tify`;
+    elem.href = `${resolveURL(path)}/tify.css`;
+    document.head.appendChild(elem);
+  }
 }
 
 /**
@@ -26,170 +26,170 @@ function _injectStylesheet(path) {
  * `order` property in the event (see `pb-facs-link`). Page counts start at 1.
  */
 export class PbTify extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            /**
-             * URL pointing to a IIIF presentation manifest. Relative paths
-             * are interpreted relative to the API endpoint.
-             */
-            manifest: {
-                type: String
-            },
-            ...super.properties
-        };
+  static get properties() {
+    return {
+      /**
+       * URL pointing to a IIIF presentation manifest. Relative paths
+       * are interpreted relative to the API endpoint.
+       */
+      manifest: {
+        type: String,
+      },
+      ...super.properties,
+    };
+  }
+
+  constructor() {
+    super();
+    this.cssPath = '../css/tify';
+    this._initialPages = null;
+    this._currentPage = null;
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+
+    if (name === 'manifest' && newVal) {
+      this.manifest = newVal;
+      this._initViewer();
     }
+  }
 
-    constructor() {
-        super();
-        this.cssPath = '../css/tify';
-        this._initialPages = null;
-        this._currentPage = null;
-    }
+  async connectedCallback() {
+    super.connectedCallback();
+
+    _injectStylesheet(this.cssPath);
 
-    attributeChangedCallback(name, oldVal, newVal) {
-        super.attributeChangedCallback(name, oldVal, newVal);
-        
-        if (name === 'manifest' && newVal) {
-            this.manifest = newVal;
-            this._initViewer();
+    this._container = document.createElement('div');
+    this._container.style.height = '100%';
+    this._container.style.width = '100%';
+    this.appendChild(this._container);
+
+    this.subscribeTo('pb-show-annotation', ev => {
+      if (ev.detail) {
+        this._initialPages = ev.detail.order ? Number(ev.detail.order) : Number.POSITIVE_INFINITY;
+        if (this._initialPages === Number.POSITIVE_INFINITY) {
+          this._initialPages = 1;
+        }
+        const url = ev.detail.file || ev.detail.url;
+        if (url && url !== this.manifest) {
+          this.manifest = ev.detail.file;
+          this._initViewer();
+          // check if tify is already initialized
+        } else if (this._setPage) {
+          this._setPage(this._initialPages);
         }
-    }
 
-    async connectedCallback() {
-        super.connectedCallback();
-
-        _injectStylesheet(this.cssPath);
-
-        this._container = document.createElement('div');
-        this._container.style.height = '100%';
-        this._container.style.width = '100%';
-        this.appendChild(this._container);
-        
-        this.subscribeTo('pb-show-annotation', (ev) => {
-            if (ev.detail) {
-                this._initialPages = ev.detail.order ? Number(ev.detail.order) : Number.POSITIVE_INFINITY;
-                if (this._initialPages === Number.POSITIVE_INFINITY) {
-                    this._initialPages = 1;
-                }
-                const url = ev.detail.file || ev.detail.url;
-                if (url && url !== this.manifest) {
-                    this.manifest = ev.detail.file;
-                    this._initViewer();
-                // check if tify is already initialized
-                } else if (this._setPage) {
-                    this._setPage(this._initialPages);
-                }
-
-                if (ev.detail.coordinates) {
-                    this._addOverlay(ev.detail.coordinates);
-                }
-            }
-        });
-
-        this.signalReady();
-    }
+        if (ev.detail.coordinates) {
+          this._addOverlay(ev.detail.coordinates);
+        }
+      }
+    });
 
-    firstUpdated() {
-        super.firstUpdated();
+    this.signalReady();
+  }
 
-        waitOnce('pb-page-ready', () => {
-            this._initViewer();
-        });
-    }
+  firstUpdated() {
+    super.firstUpdated();
 
-    _initViewer() {
-        if (!this.manifest) {
-            return;
-        }
+    waitOnce('pb-page-ready', () => {
+      this._initViewer();
+    });
+  }
 
-        if (this._tify) {
-            this._tify.destroy();
-        }
+  _initViewer() {
+    if (!this.manifest) {
+      return;
+    }
 
-        this._tify = new Tify({
-            manifestUrl: this.toAbsoluteURL(this.manifest, this.getEndpoint())
-        });
-        this._tify.ready.then(() => { 
-            // open initial page if set earlier via pb-load-facsimile event
-            if (this._initialPages) {
-                this._tify.setPage(this._initialPages);
-            }
-
-            // extend tify's setPage function to allow emitting an event
-            const {app} = this._tify;
-            const originalSetPage = app.setPage;
-
-            app.setPage = (pages) => {
-                const page = Array.isArray(pages) ? pages[0] : pages;
-                if(this._currentPage === page) {
-                    return;
-                }
-
-                const canvas = app.$root.canvases[page - 1];
-                
-                this._switchPage(canvas);
-                originalSetPage(pages);
-                this._currentPage = page;
-            };
-
-            this._setPage = app.setPage;
-        });
-
-        this._tify.mount(this._container);
+    if (this._tify) {
+      this._tify.destroy();
     }
 
-    _switchPage(canvas) {
-        const rendering = canvas.rendering;
-        if (rendering && rendering.length > 0) {
-            const url = new URL(rendering[0]['@id']);
-            const params = {};
-            url.searchParams.forEach((value, key) => {
-                params[key] = value;
-            })
-            console.log('<pb-tify> page changed, emitting refresh with params %o', params);
-            this.emitTo('pb-refresh', params);
+    this._tify = new Tify({
+      manifestUrl: this.toAbsoluteURL(this.manifest, this.getEndpoint()),
+    });
+    this._tify.ready.then(() => {
+      // open initial page if set earlier via pb-load-facsimile event
+      if (this._initialPages) {
+        this._tify.setPage(this._initialPages);
+      }
+
+      // extend tify's setPage function to allow emitting an event
+      const { app } = this._tify;
+      const originalSetPage = app.setPage;
+
+      app.setPage = pages => {
+        const page = Array.isArray(pages) ? pages[0] : pages;
+        if (this._currentPage === page) {
+          return;
         }
+
+        const canvas = app.$root.canvases[page - 1];
+
+        this._switchPage(canvas);
+        originalSetPage(pages);
+        this._currentPage = page;
+      };
+
+      this._setPage = app.setPage;
+    });
+
+    this._tify.mount(this._container);
+  }
+
+  _switchPage(canvas) {
+    const { rendering } = canvas;
+    if (rendering && rendering.length > 0) {
+      const url = new URL(rendering[0]['@id']);
+      const params = {};
+      url.searchParams.forEach((value, key) => {
+        params[key] = value;
+      });
+      console.log('<pb-tify> page changed, emitting refresh with params %o', params);
+      this.emitTo('pb-refresh', params);
     }
+  }
 
-    _addOverlay(coordinates) {
-        if (!Array.isArray(coordinates) || coordinates.length !== 4) {
-            console.error('coords incomplete or missing (array of 4 numbers expected)', coordinates);
-            return;
-        }
+  _addOverlay(coordinates) {
+    if (!Array.isArray(coordinates) || coordinates.length !== 4) {
+      console.error('coords incomplete or missing (array of 4 numbers expected)', coordinates);
+      return;
+    }
 
-        const { viewer } = this._tify;
-        const { viewport } = viewer;
-        const overlayId = 'runtime-overlay';
-        
-        if(this.overlay) {
-            viewer.removeOverlay(this.overlay);
-        }
+    const { viewer } = this._tify;
+    const { viewport } = viewer;
+    const overlayId = 'runtime-overlay';
 
-        const viewportBounds = viewport.getBounds();
+    if (this.overlay) {
+      viewer.removeOverlay(this.overlay);
+    }
 
-        const [x1, y1, w, h] = coordinates;
-        const rect = viewport.imageToViewportRectangle(x1, y1, w, h);
+    const viewportBounds = viewport.getBounds();
 
-        // Scroll into view if necessary
-        if (!viewportBounds.containsPoint(rect.getTopLeft())) {
-            viewer.viewport.panTo(rect.getCenter());
-        }
+    const [x1, y1, w, h] = coordinates;
+    const rect = viewport.imageToViewportRectangle(x1, y1, w, h);
 
-        // Add overlay to viewer
-        const overlay = document.createElement('div');
-        this.overlay = overlay
-        overlay.id = overlayId;
-        overlay.style.border = 'var(--pb-facsimile-border, none)';
-        overlay.style.outline = 'var(--pb-facsimile-outline, 4px solid rgba(0, 0, 128, 0.5))';
-        overlay.style.background = 'var(--pb-facsimile-background, rgba(0, 0, 128, 0.05))';
-        viewer.addOverlay({
-            element: overlay,
-            location: rect
-        });
+    // Scroll into view if necessary
+    if (!viewportBounds.containsPoint(rect.getTopLeft())) {
+      viewer.viewport.panTo(rect.getCenter());
     }
 
-    createRenderRoot() {
-        return this;
-    }
+    // Add overlay to viewer
+    const overlay = document.createElement('div');
+    this.overlay = overlay;
+    overlay.id = overlayId;
+    overlay.style.border = 'var(--pb-facsimile-border, none)';
+    overlay.style.outline = 'var(--pb-facsimile-outline, 4px solid rgba(0, 0, 128, 0.5))';
+    overlay.style.background = 'var(--pb-facsimile-background, rgba(0, 0, 128, 0.05))';
+    viewer.addOverlay({
+      element: overlay,
+      location: rect,
+    });
+  }
+
+  createRenderRoot() {
+    return this;
+  }
 }
-customElements.define('pb-tify', PbTify);
+customElements.define('pb-tify', PbTify);