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

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

@@ -1,73 +1,158 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html, css } from 'lit-element';
 import { pbMixin, waitOnce } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
-import { pbLightDom } from './pb-light-dom.js';
+import { translate } from './pb-i18n.js';
+import { themableMixin } from './theming.js';
 
 /**
  * A dropdown for switching the interface language.
  *
- * @slot - unnamed default slot for dropdown menu options given as <option> elements
+ * @slot select - Optional select element to use for language selection. If not provided, a default one will be created.
+ * @slot - unnamed default slot for dropdown menu options
  * @fires pb-i18n-language - Sends selected language
  * @fires pb-i18n-update - When received, sets the selected language to the one received from the event
+ * @cssprop --pb-lang-input-color - Color of the text in the language field
  */
-export class PbLang extends pbLightDom(pbMixin(LitElement)) {
-    
-    static get properties() {
-        return {
-            ...super.properties,
-            /**
-             * The label for a language in the dropdown
-             */
-            label: {
-                type: String
-            },
-            selected: {
-                type: String
-            }
-        };
-    }
+export class PbLang extends themableMixin(pbMixin(LitElement)) {
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      ::slotted(*) {
+        display: none;
+      }
+      details {
+        position: relative;
+        display: inline-block;
+      }
+      summary {
+        color: var(--pb-lang-input-color, inherit);
+        cursor: pointer;
+        list-style: none;
+        padding: 0.5em;
+      }
+      summary::-webkit-details-marker {
+        display: none;
+      }
+      ul {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        max-height: 80vh;
+        overflow-y: auto;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        background: white;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+      }
+      li {
+        list-style: none;
+        padding: 0.5em 1em;
+        cursor: pointer;
+      }
+      li:hover {
+        background: #f0f0f0;
+      }
+    `;
+  }
 
-    constructor() {
-        super();
-        this.label = 'language';
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      /**
+       * The label for a language in the dropdown
+       */
+      label: {
+        type: String,
+      },
+      selected: {
+        type: String,
+      },
+      /**
+       * How should the selected value be displayed?
+       *
+       * - `text` - Display the text content of the selected option
+       * - other - Attribute name to use
+       */
+      display: {
+        type: String,
+        default: 'value',
+      },
+    };
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
+  constructor() {
+    super();
+    this.label = 'language';
+    this.display = 'value';
+  }
 
-        this.subscribeTo('pb-i18n-update', (ev) => {
-            this.selected = ev.detail.language.replace(/^([^-]+).*$/, '$1');
-        }, []);
-        waitOnce('pb-i18n-update', (options) => {
-            this.selected = options.language.replace(/^([^-]+).*$/, '$1');
-        });
-    }
+  connectedCallback() {
+    super.connectedCallback();
 
-    render() {
-        const slotted = this.fillSlot();
-        return html`
-            <select name="select" @change="${this._changed}" aria-label="${translate(this.label)}" title="${translate(this.label)}">
-            ${
-                slotted.map(option => {
-                    if (option instanceof HTMLElement) {
-                        return html`
-                            <option value="${option.getAttribute('value')}" ?selected=${option.getAttribute('value') === this.selected}>${option.textContent}</option>
-                        `;
-                    }
-                    return '';
-                })
-            }
-            </select>
-        `;
-    }
+    this.subscribeTo(
+      'pb-i18n-update',
+      ev => {
+        this.selected = ev.detail.language.replace(/^([^-]+).*$/, '$1');
+        this._syncOptions();
+      },
+      [],
+    );
+    waitOnce('pb-i18n-update', options => {
+      this.selected = options.language.replace(/^([^-]+).*$/, '$1');
+      this._syncOptions();
+    });
+  }
+
+  render() {
+    return html`
+      <details>
+        <summary aria-label="${translate(this.label)}" title="${translate(this.label)}"></summary>
+        <ul></ul>
+      </details>
+      <slot @slotchange="${this._syncOptions}"></slot>
+    `;
+  }
+
+  _syncOptions() {
+    const ul = this.shadowRoot.querySelector('ul');
+    const summary = this.shadowRoot.querySelector('summary');
+    if (!ul || !summary) return;
+
+    // Clear existing options
+    ul.innerHTML = '';
+
+    // Get all option elements from the light DOM
+    const options = Array.from(this.querySelectorAll('option, paper-item'));
+    options.forEach(option => {
+      const li = document.createElement('li');
+      li.textContent = option.textContent;
+      li.dataset.value = option.value || option.getAttribute('value');
+
+      if (li.dataset.value === this.selected) {
+        summary.textContent = this.display === 'text' ? option.textContent : option[this.display];
+      }
+
+      li.addEventListener('click', () => {
+        this._changed({ target: { value: li.dataset.value } });
+        this.shadowRoot.querySelector('details').removeAttribute('open');
+      });
+
+      ul.appendChild(li);
+    });
+  }
 
-    _changed(e) {
-        const lang = e.target.value;
-        if (lang !== this.selected) {
-            console.log('<pb-lang> Language changed to %s', lang);
-            this.emitTo('pb-i18n-language', { 'language': lang });
-            this.selected = lang;
-        }
+  _changed(e) {
+    const lang = e.target.value;
+    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);