@teipublisher/pb-components/src/pb-image-strip.js

Collection of webcomponents underlying TEI Publisher

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