@teipublisher/pb-components/src/dts-select-endpoint.js

Collection of webcomponents underlying TEI Publisher

import { LitElement, html, css } from 'lit-element';
import { pbMixin } from './pb-mixin.js';
import { translate } from './pb-i18n.js';
import { registry } from './urls.js';

import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-listbox';
import '@polymer/paper-item';

/**
 * A dropdown to select a DTS endpoint from a configured list.
 * The list may either be given as a JSON-formatted string within the
 * `endpoints` property or it can be loaded from a JSON file whose path
 * is specified via the `load` property.
 * 
 * The JSON should contain an array of objects, each having an `url` and
 * `title` property.
 * 
 * @fires dts-endpoint - Sets the endpoint
 */
export class DtsSelectEndpoint extends pbMixin(LitElement) {
    static get properties() {
        return {
            ...super.properties,
            /**
             * The currently selected endpoint. Will be set from URL parameter if present.
             */
            endpoint: {
                type: String
            },
            label: {
                type: String
            },
            /**
             * Array of endpoints to select from, each being an object with
             * properties `url` and `title`.
             */
            endpoints: {
                type: Array
            },
            /**
             * Set to true to automatically select the first endpoint
             */
            auto: {
                type: Boolean
            }
        };
    }

    constructor() {
        super();
        this.endpoints = [];
        this.label = 'dts.endpoint';
    }

    connectedCallback() {
        super.connectedCallback();
        this.endpoint = registry.state.endpoint;
    }

    updated(changedProperties) {
        super.updated();
        if (changedProperties.has('endpoints')) {
            const item = this.shadowRoot.getElementById('endpoints').selectedItem;
            if (!item && this.auto && this.endpoints.length > 0) {
                this.endpoint = this.endpoints[0].url;
            }
        }
    }

    render() {
        return html`
            <paper-dropdown-menu id="menu" label="${translate(this.label)}">
                <paper-listbox id="endpoints" slot="dropdown-content" class="dropdown-content" selected="${this.endpoint}" attr-for-selected="value"
                    @selected-item-changed="${this._selected}">
                    ${this.endpoints.map((ep) => html`<paper-item value="${ep.url ? ep.url : ''}">${ep.title}</paper-item>`)}
                </paper-listbox>
            </paper-dropdown-menu>
        `;
    }

    static get styles() {
        return css`
            :host {
                display: block;
            }
        `;
    }

    _selected() {
        const item = this.shadowRoot.getElementById('endpoints').selectedItem;
        if (!item) {
            return;
        }
        const newEndpoint = item.getAttribute('value');
        if (!newEndpoint) {
            return;
        }
        const endpoint = this.endpoints.find((endp) => endp.url === newEndpoint);
        registry.commit(this, { endpoint: endpoint.url });
        console.log('<dts-select-endpoint> Setting endpoint to %s', newEndpoint);
        this.emitTo('dts-endpoint', {
            endpoint: endpoint.url,
            collection: endpoint.collection,
            reload: !this.endpoint
        });
        this.endpoint = endpoint.url;
    }
}
customElements.define('dts-select-endpoint', DtsSelectEndpoint);