@teipublisher/pb-components 2.25.5 → 2.25.7

package/src/pb-image-strip.js

@@ -8,90 +8,96 @@ import { pbMixin } from './pb-mixin.js';
  * @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
-            }
-        };
-    }
+  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
-    }
+  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 }
+  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()
-        });
-    }
+      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);
 
-    showIt(element) {
-        this.emitTo('pb-show-annotation', { file: element.getImage(), element })
-    }
+      this.items.splice(insertAt, 0, element);
+      this.requestUpdate();
+    });
+  }
 
-    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>
-        `
-    }
+  showIt(element) {
+    this.emitTo('pb-show-annotation', { file: element.getImage(), element });
+  }
 
-    render() {
-        return html`${this.items.map(item => this.renderItem(item))}`;
-    }
+  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>
+    `;
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-        `;
-    }
+  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);
-}
+  customElements.define('pb-image-strip', PbImageStrip);
+}

package/src/pb-lang.js

@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit-element';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-listbox';
 import { pbMixin, waitOnce } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
+import { translate } from './pb-i18n.js';
 
 /**
  * A dropdown for switching the interface language.
@@ -14,81 +14,94 @@ import { translate } from "./pb-i18n.js";
  * @cssprop --pb-lang-label-color - Color of the language field label
  */
 export class PbLang extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * The label for a language in the dropdown
-             */
-            label: {
-                type: String
-            },
-            selected: {
-                type: String
-            },
-            /**
-             * suppresses the label
-             */
-            nolabel:{
-                type:Boolean
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * The label for a language in the dropdown
+       */
+      label: {
+        type: String,
+      },
+      selected: {
+        type: String,
+      },
+      /**
+       * suppresses the label
+       */
+      nolabel: {
+        type: Boolean,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.label = 'language';
-    }
+  constructor() {
+    super();
+    this.label = 'language';
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
+  connectedCallback() {
+    super.connectedCallback();
 
-        this.subscribeTo('pb-i18n-update', (ev) => {
-            this.selected = ev.detail.language.replace(/^([^-]+).*$/, '$1');
-        }, []);
-        waitOnce('pb-i18n-update', (options) => {
-            this.selected = options.language.replace(/^([^-]+).*$/, '$1');
-        });
-    }
+    this.subscribeTo(
+      'pb-i18n-update',
+      ev => {
+        this.selected = ev.detail.language.replace(/^([^-]+).*$/, '$1');
+      },
+      [],
+    );
+    waitOnce('pb-i18n-update', options => {
+      this.selected = options.language.replace(/^([^-]+).*$/, '$1');
+    });
+  }
 
-    render() {
-        return html`
-            ${this.nolabel?
-                html`
-                    <paper-dropdown-menu>
-                        <paper-listbox id="menu" slot="dropdown-content" class="dropdown-content" selected="${this.selected}"
-                            attr-for-selected="value" @selected-item-changed="${this._changed}">
-                            <slot></slot>
-                        </paper-listbox>
-                    </paper-dropdown-menu>`:
-                html`
-                    <paper-dropdown-menu label="${translate(this.label)}">
-                        <paper-listbox id="menu" slot="dropdown-content" class="dropdown-content" selected="${this.selected}"
-                            attr-for-selected="value" @selected-item-changed="${this._changed}">
-                            <slot></slot>
-                        </paper-listbox>
-                    </paper-dropdown-menu>`
-            }
-        `;
-    }
+  render() {
+    return html`
+      ${this.nolabel
+        ? html` <paper-dropdown-menu>
+            <paper-listbox
+              id="menu"
+              slot="dropdown-content"
+              class="dropdown-content"
+              selected="${this.selected}"
+              attr-for-selected="value"
+              @selected-item-changed="${this._changed}"
+            >
+              <slot></slot>
+            </paper-listbox>
+          </paper-dropdown-menu>`
+        : html` <paper-dropdown-menu label="${translate(this.label)}">
+            <paper-listbox
+              id="menu"
+              slot="dropdown-content"
+              class="dropdown-content"
+              selected="${this.selected}"
+              attr-for-selected="value"
+              @selected-item-changed="${this._changed}"
+            >
+              <slot></slot>
+            </paper-listbox>
+          </paper-dropdown-menu>`}
+    `;
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-                --paper-input-container-input-color: var(--pb-lang-input-color, black);
-                --paper-input-container-color: var(--pb-lang-label-color, --paper-grey-100);
-            }
-        `;
-    }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        --paper-input-container-input-color: var(--pb-lang-input-color, black);
+        --paper-input-container-color: var(--pb-lang-label-color, --paper-grey-100);
+      }
+    `;
+  }
 
-    _changed() {
-        const lang = this.shadowRoot.getElementById('menu').selected;
-        if (lang !== this.selected) {
-            console.log('<pb-lang> Language changed to %s', lang);
-            this.emitTo('pb-i18n-language', { 'language': lang });
-            this.selected = lang;
-        }
+  _changed() {
+    const lang = this.shadowRoot.getElementById('menu').selected;
+    if (lang !== this.selected) {
+      console.log('<pb-lang> Language changed to %s', lang);
+      this.emitTo('pb-i18n-language', { language: lang });
+      this.selected = lang;
     }
+  }
 }
 customElements.define('pb-lang', PbLang);