@teipublisher/pb-components 1.42.7 → 1.43.0

package/src/pb-split-list.js

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { pbMixin } from './pb-mixin.js';
+import { themableMixin } from "./theming.js";
 
 /**
  * Implements a list which is split into different categories 
@@ -23,7 +24,7 @@ import { pbMixin } from './pb-mixin.js';
  * @fires pb-start-update - sent before the element sends the request to the server
  * @fires pb-end-update - sent after new content has been received
  */
-export class PbSplitList extends pbMixin(LitElement) {
+export class PbSplitList extends themableMixin(pbMixin(LitElement)) {
     static get properties() {
         return {
             /**

package/src/pb-table-grid.js

@@ -1,212 +1,219 @@
-import { LitElement, html, css } from 'lit-element';
-import { Grid } from "gridjs";
-import { pbMixin } from './pb-mixin.js';
-import { resolveURL } from './utils.js';
-import '@polymer/paper-input/paper-input';
-import '@polymer/iron-icons';
-import '@polymer/iron-form';
-import '@polymer/paper-icon-button';
-import './pb-table-column.js';
-
-/**
- * A table grid based on [gridjs](https://gridjs.io/), which loads its data from a server endpoint
- * specified in `source`. If `source` is a relative URI, it will be resolved relative to the
- * TEI Publisher endpoint.
- * 
- * The JSON data returned by the endpoint should be an object with two properties:
- * 
- * * `count`: the overall number of rows available on the server
- * * `results`: an array containing each record as an object
- * 
- * The parameters send to the server are as follows:
- * 
- * 
- * Parameter | Description
- * ---------|----------
- * limit | number of records to return for each page
- * start | start offset from which to return records
- * order | the id of the column to sort by
- * dir | sort direction: either 'asc' or 'desc'
- * search | an optional search string entered by the user
- * 
- * Table columns are configured via nested `<pb-table-column>` elements:
- * 
- * ```html
- * <pb-table-column label="Name" property="name" sort width="33%"></pb-table-column>
- * <pb-table-column label="Born" property="birth"></pb-table-column>
- * <pb-table-column label="Died" property="death"></pb-table-column>
- * ```
- */
-export class PbTableGrid extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            /**
-             * URI of the server-side endpoint to retrieve data from.
-             * Relative URIs are resolved relative to the configured TEI Publisher endpoint.
-             */
-            source: {
-                type: String
-            },
-            /**
-             * Path to the gridjs theme CSS files.
-             */
-            cssPath: {
-                type: String,
-                attribute: 'css-path'
-            },
-            /**
-             * If specified, columns (without a fixed width) will be resizable.
-             */
-            resizable: {
-                type: Boolean
-            },
-            perPage: {
-                type: Number,
-                attribute: 'per-page'
-            },
-            height: {
-                type: String
-            },
-            /**
-             * If specified, enable server-side search.
-             */
-            search: {
-                type: Boolean
-            },
-            _params: {
-                type: Object
-            },
-            ...super.properties
-        };
-    }
-
-    constructor() {
-        super();
-        this.cssPath = '../css/gridjs';
-        this._params = {};
-        this.resizable = false;
-        this.search = false;
-        this.perPage = 10;
-        this.height = null;
-        this.fixedHeader = false;
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-
-        this.subscribeTo('pb-search-resubmit', (ev) => {
-            this._params = Object.assign({}, ev.detail.params);
-            this._submit();
-        });
-
-        window.addEventListener('popstate', (ev) => {
-            this._params = ev.state;
-            this._submit();
-        });
-
-        if (!this.height) {
-            const property = getComputedStyle(this).getPropertyValue('--pb-table-grid-height');
-            if (property) {
-                this.height = property;
-            } else {
-                this.height = 'auto';
-            }
-        }
-    }
-
-    firstUpdated() {
-        const table = this.shadowRoot.getElementById('table');
-
-        const pbColumns = this.querySelectorAll('pb-table-column');
-        const columns = [];
-        pbColumns.forEach((column) => columns.push(column.data()));
-        PbTableGrid.waitOnce('pb-page-ready', () => {
-            this._params = this.getParameters();
-            const url = this.toAbsoluteURL(this.source);
-            const config = {
-                height: this.height,
-                fixedHeader: true,
-                columns,
-                resizable: this.resizable,
-                server: {
-                    url,
-                    then: data => data.results,
-                    total: data => data.count
-                },
-                sort: {
-                    multiColumn: false,
-                    enabled: true,
-                    server: {
-                        url: (prev, cols) => {
-                            if (!cols.length) return prev;
-                            const col = cols[0];
-                            return `${prev}${prev.indexOf('?') > -1 ? '&' : '?'}order=${columns[col.index].id}&dir=${col.direction === 1 ? 'asc' : 'desc'}`;
-                        }
-                    }
-                },
-                pagination: {
-                    enabled: true,
-                    limit: this.perPage,
-                    server: {
-                        url: (prev, page, limit) => {
-                            const form = this.shadowRoot.getElementById('form');
-                            if (form) {
-                                Object.assign(this._params, form.serializeForm());
-                            }
-                            this._params.limit = limit;
-                            this._params.start = page * limit + 1;
-                            this.setParameters(this._params);
-                            this.pushHistory('grid', this._params);
-
-                            return `${prev}${prev.indexOf('?') > -1 ? '&' : '?'}${new URLSearchParams(this._params).toString()}`;
-                        }
-                    }
-                }
-            };
-
-            this.grid = new Grid(config);
-            this.grid.on('load', () => {
-                this.emitTo('pb-results-received', {
-                    "params": this._params
-                });
-            });
-
-            this.grid.render(table);
-        });
-    }
-
-    _submit() {
-        this.grid.forceRender();
-    }
-
-    render() {
-        const themes = resolveURL(this.cssPath);
-        return html`
-            <link href="${themes}/mermaid.min.css" rel="stylesheet">
-            ${ 
-                this.search ? html`
-                    <iron-form id="form">
-                        <form action="">
-                            <paper-input id="search" name="search" label="Search" @keyup="${(e) => e.keyCode == 13 ? this._submit() : null}">
-                                <paper-icon-button icon="search" @click="${this._submit}" slot="suffix"></paper-icon-button>
-                            </paper-input>
-                        </form>
-                    </iron-form>
-                ` : null 
-            }
-            <div id="table"></div>
-        `;
-    }
-
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-            button {
-                border: 0;
-            }
-        `;
-    }
-}
+import { LitElement, html, css } from 'lit-element';
+import { Grid } from "gridjs";
+import { pbMixin } from './pb-mixin.js';
+import { resolveURL } from './utils.js';
+import { loadStylesheet, importStyles } from "./theming.js";
+import '@polymer/paper-input/paper-input';
+import '@polymer/iron-icons';
+import '@polymer/iron-form';
+import '@polymer/paper-icon-button';
+import './pb-table-column.js';
+
+/**
+ * A table grid based on [gridjs](https://gridjs.io/), which loads its data from a server endpoint
+ * specified in `source`. If `source` is a relative URI, it will be resolved relative to the
+ * TEI Publisher endpoint.
+ * 
+ * The JSON data returned by the endpoint should be an object with two properties:
+ * 
+ * * `count`: the overall number of rows available on the server
+ * * `results`: an array containing each record as an object
+ * 
+ * The parameters send to the server are as follows:
+ * 
+ * 
+ * Parameter | Description
+ * ---------|----------
+ * limit | number of records to return for each page
+ * start | start offset from which to return records
+ * order | the id of the column to sort by
+ * dir | sort direction: either 'asc' or 'desc'
+ * search | an optional search string entered by the user
+ * 
+ * Table columns are configured via nested `<pb-table-column>` elements:
+ * 
+ * ```html
+ * <pb-table-column label="Name" property="name" sort width="33%"></pb-table-column>
+ * <pb-table-column label="Born" property="birth"></pb-table-column>
+ * <pb-table-column label="Died" property="death"></pb-table-column>
+ * ```
+ */
+export class PbTableGrid extends pbMixin(LitElement) {
+    static get properties() {
+        return {
+            /**
+             * URI of the server-side endpoint to retrieve data from.
+             * Relative URIs are resolved relative to the configured TEI Publisher endpoint.
+             */
+            source: {
+                type: String
+            },
+            /**
+             * Path to the gridjs theme CSS files.
+             */
+            cssPath: {
+                type: String,
+                attribute: 'css-path'
+            },
+            /**
+             * If specified, columns (without a fixed width) will be resizable.
+             */
+            resizable: {
+                type: Boolean
+            },
+            perPage: {
+                type: Number,
+                attribute: 'per-page'
+            },
+            height: {
+                type: String
+            },
+            /**
+             * If specified, enable server-side search.
+             */
+            search: {
+                type: Boolean
+            },
+            _params: {
+                type: Object
+            },
+            ...super.properties
+        };
+    }
+
+    constructor() {
+        super();
+        this.cssPath = '../css/gridjs';
+        this._params = {};
+        this.resizable = false;
+        this.search = false;
+        this.perPage = 10;
+        this.height = null;
+        this.fixedHeader = false;
+    }
+
+    async connectedCallback() {
+        super.connectedCallback();
+
+        this.subscribeTo('pb-search-resubmit', (ev) => {
+            this._params = Object.assign({}, ev.detail.params);
+            this._submit();
+        });
+
+        window.addEventListener('popstate', (ev) => {
+            this._params = ev.state;
+            this._submit();
+        });
+
+        if (!this.height) {
+            const property = getComputedStyle(this).getPropertyValue('--pb-table-grid-height');
+            if (property) {
+                this.height = property;
+            } else {
+                this.height = 'auto';
+            }
+        }
+
+        const gridjsTheme = await loadStylesheet(`${resolveURL(this.cssPath)}/mermaid.min.css`);
+        const theme = importStyles(this);
+        const sheets = [...this.shadowRoot.adoptedStyleSheets, gridjsTheme];
+        if (theme) {
+            sheets.push(theme);
+        }
+        this.shadowRoot.adoptedStyleSheets = sheets;
+    }
+
+    firstUpdated() {
+        const table = this.shadowRoot.getElementById('table');
+
+        const pbColumns = this.querySelectorAll('pb-table-column');
+        const columns = [];
+        pbColumns.forEach((column) => columns.push(column.data()));
+        PbTableGrid.waitOnce('pb-page-ready', () => {
+            this._params = this.getParameters();
+            const url = this.toAbsoluteURL(this.source);
+            const config = {
+                height: this.height,
+                fixedHeader: true,
+                columns,
+                resizable: this.resizable,
+                server: {
+                    url,
+                    then: data => data.results,
+                    total: data => data.count
+                },
+                sort: {
+                    multiColumn: false,
+                    enabled: true,
+                    server: {
+                        url: (prev, cols) => {
+                            if (!cols.length) return prev;
+                            const col = cols[0];
+                            return `${prev}${prev.indexOf('?') > -1 ? '&' : '?'}order=${columns[col.index].id}&dir=${col.direction === 1 ? 'asc' : 'desc'}`;
+                        }
+                    }
+                },
+                pagination: {
+                    enabled: true,
+                    limit: this.perPage,
+                    server: {
+                        url: (prev, page, limit) => {
+                            const form = this.shadowRoot.getElementById('form');
+                            if (form) {
+                                Object.assign(this._params, form.serializeForm());
+                            }
+                            this._params.limit = limit;
+                            this._params.start = page * limit + 1;
+                            this.setParameters(this._params);
+                            this.pushHistory('grid', this._params);
+
+                            return `${prev}${prev.indexOf('?') > -1 ? '&' : '?'}${new URLSearchParams(this._params).toString()}`;
+                        }
+                    }
+                }
+            };
+
+            this.grid = new Grid(config);
+            this.grid.on('load', () => {
+                this.emitTo('pb-results-received', {
+                    "params": this._params
+                });
+            });
+
+            this.grid.render(table);
+        });
+    }
+
+    _submit() {
+        this.grid.forceRender();
+    }
+
+    render() {
+        return html`
+            ${ 
+                this.search ? html`
+                    <iron-form id="form">
+                        <form action="">
+                            <paper-input id="search" name="search" label="Search" @keyup="${(e) => e.keyCode == 13 ? this._submit() : null}">
+                                <paper-icon-button icon="search" @click="${this._submit}" slot="suffix"></paper-icon-button>
+                            </paper-input>
+                        </form>
+                    </iron-form>
+                ` : null 
+            }
+            <div id="table"></div>
+        `;
+    }
+
+    static get styles() {
+        return css`
+            :host {
+                display: block;
+            }
+            button {
+                border: 0;
+            }
+        `;
+    }
+}
 customElements.define('pb-table-grid', PbTableGrid);

package/src/theming.js

@@ -0,0 +1,115 @@
+import { waitOnce } from "./pb-mixin.js";
+
+/**
+ * Maps theme selector to CSSStyleSheet or null.
+ * 
+ * @type {Map<string,(CSSStyleSheet|null)>}
+ */
+const themeMap = new Map();
+
+/**
+ * Load a CSS stylesheet from the given URL and return
+ * a CSSStyleSheet. The returned stylesheet can be assigned
+ * to `adoptedStyleSheets`.
+ * 
+ * @param {string} url absolute URL
+ * @returns {Promise<CSSStyleSheet|null>} constructed CSSStyleSheet or null
+ */
+export function loadStylesheet(url) {
+    return fetch(url)
+        .then(response => {
+            if (response.ok) {
+                return response.text();
+            }
+            console.warn('<theming> Component stylesheet not found: %s', url);
+            return null;
+        })
+        .then(text => {
+            if (text) {
+                const stylesheet = new CSSStyleSheet();
+                return stylesheet.replace(text);
+            }
+            return null;
+        })
+        .catch(error => {
+            console.error('<theming> Error loading stylesheet %s: %o', url, error);
+            return null;
+        });
+}
+
+/**
+ * From the global component theme, import all rules which would apply to the
+ * given element into a new CSSStyleSheet and return it.
+ * 
+ * @param {HTMLElement} elem a web component or HTML element
+ * @returns {CSSStyleSheet|null} a new CSSStylesheet or null
+ */
+export function importStyles(elem) {
+    const page = document.querySelector('pb-page');
+    if (!page) {
+        return null;
+    }
+    const theme = page.stylesheet;
+    if (!theme) {
+        // no component styles defined
+        return null;
+    }
+    
+    const selectors = getSelectors(elem).join('|');
+    if (themeMap.has(selectors)) {
+        return themeMap.get(selectors);
+    }
+    const prefixRegex = new RegExp(`^(${selectors})\\b`);
+    let adoptedSheet = null;
+    const rules = theme.cssRules;
+    for (let i = 0; i < rules.length; i++) {
+        const rule = rules[i];
+        if (rule instanceof CSSStyleRule) {
+            if (prefixRegex.test(rule.selectorText)) {
+                const selector = rule.cssText.replace(prefixRegex, `:host($1) `);
+                if (!adoptedSheet) {
+                    adoptedSheet = new CSSStyleSheet();
+                }
+                adoptedSheet.insertRule(selector);
+            }
+        }
+    }
+    console.log('<theming> caching stylesheet for %s', selectors);
+    themeMap.set(selectors, adoptedSheet);
+    return adoptedSheet;
+}
+
+/**
+ * Get a list of selectors, which could match the given component.
+ * This will return the local name of the component, a selector for the id
+ * and all classes assigned.
+ * 
+ * @param {HTMLElement} component the web component
+ * @returns {string[]} list of selectors
+ */
+function getSelectors(component) {
+    const prefixes = [component.localName];
+    if (component.id) {
+        prefixes.push(`#${component.id}`);
+    }
+    component.classList.forEach((cls) => prefixes.push(`.${cls}`));
+    return prefixes;
+}
+
+/**
+ * Implements support for injecting user-defined styles into a web component's shadow DOM.
+ * Styles will be copied from the global component theme CSS imported by `pb-page` 
+ * (see `theme` property on `pb-page`)
+ */
+export const themableMixin = (superclass) => class ThemableMixin extends superclass {
+
+    connectedCallback() {
+        super.connectedCallback();
+        waitOnce('pb-page-ready', (options) => {
+            const theme = importStyles(this);
+            if (theme) {
+                this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, theme];
+            }
+        });
+    }
+};