@teipublisher/pb-components 1.24.19 → 1.27.0

package/src/authority/gf.js

@@ -0,0 +1,152 @@
+import { Registry } from "./registry.js";
+
+/**
+ * Connector for the corporate archive of Georgfischer AG.
+ */
+export class GF extends Registry {
+    
+    constructor(configElem) {
+        super(configElem);
+        this._api = configElem.getAttribute('api');
+    }
+
+    async query(key) {
+        const results = [];
+     
+        const register = this.getRegister();
+        const url = `https://archives.georgfischer.com/api/${register}?search=${encodeURIComponent(key)}`;
+        const label = this.getLabelField();
+        return new Promise((resolve) => {
+            fetch(url)
+              .then(response => response.json())
+              .then(json => {
+                  if (!json.data) {
+                      resolve({
+                          totalItems: 0,
+                          items: []
+                      });
+                      return;
+                  }
+                json.data.forEach(item => {
+                    if ((this._register === 'organization' && item.authority_type === 'Person') ||
+                        (this._register === 'person' && item.authority_type !== 'Person')) {
+                      return;
+                    }
+                    const result = {
+                      register: this._register,
+                      id: (this._prefix ? `${this._prefix}-${item.id}` : item.id),
+                      label: item[label],
+                      details: `${item.id}`,
+                      link: `https://archives.georgfischer.com/api/${register}/${item.id}`,
+                      strings: [item[label]],
+                      provider: 'GF'
+                    };
+                    results.push(result);
+                });
+                resolve({
+                  totalItems: json.meta.total,
+                  items: results,
+                });
+              })
+              .catch((reason) => Promise.reject(reason));
+        })
+    }
+
+    info(key, container) {
+      if (!key) {
+        return Promise.resolve({});
+      }
+      const id = this._prefix ? key.substring(this._prefix.length + 1) : key;
+      const label = this.getLabelField();
+      return new Promise((resolve) => {
+        this.getRecord(id)
+        .then(json => {
+          const died = json.data.death ? `† ${json.data.death}` : '';
+          const dates = json.data.birth ? `<p>* ${json.data.birth} ${died}</p>` : '';
+          const note = json.data.note_bio ? `<p>${json.data.note_bio}</p>` : '';
+          const output = `
+            <h3 class="label"><a href="https://${json.wikipediaURL}" target="_blank">${json.data[label]}</a></h3>
+              ${dates}
+              ${note}
+          `;
+          container.innerHTML = output;
+          resolve({
+            id: (this._prefix ? `${this._prefix}-${json.data.id}` : json.data.id),
+            strings: [json.data[label]]
+          });
+        });
+      });
+    }
+
+    /**
+   * Retrieve a raw JSON record for the given key as returned by the endpoint.
+   * 
+   * @param {string} key the key to look up
+   * @returns {Promise<any>} promise resolving to the JSON record returned by the endpoint
+   */
+  async getRecord(key) {
+    const id = key.replace(/^.*-([^-]+)$/, '$1');
+    const url = `https://archives.georgfischer.com/api/${this.getRegister()}/${id}`;
+    return fetch(url)
+    .then(response => response.json())
+    .then(json => {
+      const output = Object.assign({}, json);
+      output.name = json.data[this.getLabelField()];
+      switch (this._register) {
+        case 'place':
+          output.country = json.data.country;
+          output.location = json.data.location.coordinates;
+          output.links = json.data.links.map((link) => link.url);
+          break;
+        case 'person':
+          output.birth = json.data.birth;
+          output.death = json.data.death;
+          output.note = json.data.note_bio;
+          output.links = [`https://${json.wikipediaURL}`];
+          break;
+        default:
+          break;
+      }
+      return output;
+    })
+    .catch((reason) => Promise.reject(reason));
+  }
+
+    getLabelField() {
+      let label;
+      switch (this._register) {
+          case 'term':
+              label = 'label';
+              break;
+          default:
+              label = 'fullname';
+              break;
+      }
+      return label;
+    }
+
+    getRegister() {
+      if (this._api) {
+        return this._api;
+      }
+      let register;
+      switch(this._register) {
+        case 'person':
+        case 'organization':
+          register = 'actors';
+          break;
+        case 'place':
+          register = 'places';
+          break;
+        case 'term':
+          register = 'keywords';
+          break;
+        case 'abbreviation':
+          register = 'abbreviations';
+          break;
+        default:
+          register = this._register;
+      }
+      return register;
+    }
+}

package/src/dts-client.js

@@ -4,6 +4,7 @@ import { translate } from "./pb-i18n.js";
 import '@polymer/iron-ajax';
 import '@polymer/iron-icon';
 import '@polymer/iron-icons';
+import '@polymer/paper-button';
 
 /**
  * A client for the Distributed Text Services (DTS) protocol. This defines an API
@@ -13,6 +14,13 @@ import '@polymer/iron-icons';
  * @slot toolbar - toolbar area
  * @slot pagination - pagination area
  * 
+ * @csspart parent-link - Link to parent collection
+ * @csspart collection-title - Collection title
+ * @csspart title - Member title
+ * @csspart author - Author
+ * @csspart license - License information
+ * @csspart link - Links
+ * 
  * @fires pb-start-update - Fired before the element updates its content
  * @fires pb-results-received - Fired when results are received from the server
  * @fires pb-end-update - Fired after the element has finished updating its content
@@ -44,6 +52,12 @@ export class DtsClient extends pbMixin(LitElement) {
         };
     }
 
+    constructor() {
+        super();
+        this._parentCollections = [];
+        this.collection = 'default';
+    }
+
     connectedCallback() {
         super.connectedCallback();
 
@@ -51,7 +65,7 @@ export class DtsClient extends pbMixin(LitElement) {
         this.page = this.getParameter('page');
 
         this.subscribeTo('dts-endpoint', (ev) => {
-            this._setEndpoint(ev.detail.endpoint, ev.detail.reload);
+            this._setEndpoint(ev.detail.endpoint, ev.detail.collection, ev.detail.reload);
         });
         this.subscribeTo('pb-load', (ev) => {
             this.page = ev.detail.params.page;
@@ -68,11 +82,11 @@ export class DtsClient extends pbMixin(LitElement) {
         this.signalReady();
     }
 
-    _setEndpoint(endpoint, reload) {
+    _setEndpoint(endpoint, collection, reload) {
         if (!reload) {
             this.page = null;
-            this.collection = null;
         }
+        this.collection = collection;
         this._configureEndpoint(endpoint);
         this.baseUri = endpoint;
     }
@@ -86,14 +100,24 @@ export class DtsClient extends pbMixin(LitElement) {
         }
     }
 
-    _navigate(ev, member) {
+    _navigate(ev, member, downwards = true) {
         ev.preventDefault();
-        this.collection = member['@id'];
+        if (downwards) {
+            this._parentCollections.push(this.collection);
+        }
+        this.collection = member && typeof member === 'object' ? member['@id'] : member;
         this.page = null;
         console.log('<dts-client> navigating to collection %s', this.collection);
         this._update();
     }
 
+    _navigateUp(ev) {
+        if (this._parentCollections.length === 0) {
+            return;
+        }
+        this._navigate(ev, this._parentCollections.pop(), false);
+    }
+
     _preview(ev, member) {
         ev.preventDefault();
         this.emitTo('pb-start-update');
@@ -236,8 +260,17 @@ export class DtsClient extends pbMixin(LitElement) {
     _renderClient() {
         return html`
             <div class="uri">${this.baseUri}</div>
-            <h3>${this.data ? this.data.title : 'Loading ...'}</h3>
+            <h3 part="collection-title">${this.data ? this.data.title : 'Loading ...'}</h3>
             <slot name="pagination"></slot>
+            ${
+                this._parentCollections.length > 0 || this.collection ?
+                    html`
+                        <paper-button part="parent-link" @click="${this._navigateUp}">
+                            <iron-icon icon="icons:arrow-upward"></iron-icon>
+                            ${translate('browse.up')}
+                        </paper-button>`
+                    : null
+            }
             ${this.data ? this._renderMembers() : ''}
         `;
     }
@@ -255,9 +288,11 @@ export class DtsClient extends pbMixin(LitElement) {
             return html`
                 <iron-icon icon="icons:folder-open"></iron-icon>
                 <div class="details">
-                    <h4 class="collection">
-                        <a href="#" @click="${(ev) => this._navigate(ev, member)}">${member.title}</a>
-                    </h4>
+                    <a href="#" @click="${(ev) => this._navigate(ev, member)}" part="link">
+                        <h4 class="collection" part="collection-title">
+                            ${member.title}
+                        </h4>
+                    </a>
                 </div>
             `;
         }
@@ -266,11 +301,13 @@ export class DtsClient extends pbMixin(LitElement) {
             <iron-icon icon="icons:code"></iron-icon>
             <div class="details">
                 <div>
-                    <h4>
-                        <a href="#" @click="${(ev) => this._preview(ev, member)}">${member.title}</a>
-                    </h4>
-                    <p class="creator">${DtsClient._getCreator(member)}</p>
-                    ${license ? html`<p class="license"><a href="${license}">${translate('dts.licence')}</a></p>` : ''}
+                    <a href="#" @click="${(ev) => this._preview(ev, member)}" part="link">
+                        <h4 part="title">
+                            ${member.title}
+                        </h4>
+                    </a>
+                    <p part="creator" class="creator">${DtsClient._getCreator(member)}</p>
+                    ${license ? html`<p part="license" class="license"><a href="${license}">${translate('dts.licence')}</a></p>` : ''}
                 </div>
                 <iron-icon title="${translate('dts.import')}" icon="icons:file-download" 
                     @click="${(ev) => this._download(ev, member)}">

package/src/dts-select-endpoint.js

@@ -95,14 +95,16 @@ export class DtsSelectEndpoint extends pbMixin(LitElement) {
         if (!newEndpoint) {
             return;
         }
-        this.setParameter('endpoint', newEndpoint);
+        const endpoint = this.endpoints.find((endp) => endp.url === newEndpoint);
+        this.setParameter('endpoint', endpoint.url);
         this.pushHistory('dts-endpoint');
         console.log('<dts-select-endpoint> Setting endpoint to %s', newEndpoint);
         this.emitTo('dts-endpoint', {
-            endpoint: newEndpoint,
+            endpoint: endpoint.url,
+            collection: endpoint.collection,
             reload: !this.endpoint
         });
-        this.endpoint = newEndpoint;
+        this.endpoint = endpoint.url;
     }
 }
 customElements.define('dts-select-endpoint', DtsSelectEndpoint);

package/src/pb-components.js

@@ -56,6 +56,7 @@ import './pb-authority-lookup.js';
 import './pb-message.js';
 import './pb-blacklab-results.js';
 import './pb-blacklab-highlight.js';
+import './pb-table-grid.js';
 
 import '@polymer/iron-icons/editor-icons';
 import '@polymer/iron-icons/social-icons';

package/src/pb-load.js

@@ -160,6 +160,12 @@ export class PbLoad extends pbMixin(LitElement) {
                 }
                 this.wait(() => this.load());
             });
+        } else {
+            PbLoad.waitOnce('pb-page-ready', (data) => {
+                if (data && data.language) {
+                    this.language = data.language;
+                }
+            });
         }
     }
 

package/src/pb-table-column.js

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit-element';
+import { html } from "gridjs";
+import './pb-popover.js';
+
+/**
+ * Defines a column within `pb-table-grid`.
+ */
+export class PbTableColumn extends LitElement {
+    static get properties() {
+        return {
+            /**
+             * Column heading to display
+             */
+            label: {
+                type: String
+            },
+            /**
+             * Name of the JSON property containing the data
+             */
+            property: {
+                type: String
+            },
+            /**
+             * Should the column support sorting?
+             */
+            sort: {
+                type: Boolean
+            },
+            /**
+             * Optional fixed width of the column (e.g. '200px' or '30%')
+             */
+            width: {
+                type: String
+            },
+            ...super.properties
+        };
+    }
+
+    constructor() {
+        super();
+        this.label = 'no-label';
+        this.property = null;
+        this.sort = false;
+        this.width = null;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    data() {
+        const config = { 
+            name: this.label,
+            sort: { enabled: this.sort },
+            formatter: (cell) => html(cell)
+        };
+        if (this.property) {
+            config.id = this.property;
+        }
+        if (this.width) {
+            config.width = this.width;
+        }
+        return config;
+    }
+}
+customElements.define('pb-table-column', PbTableColumn);

package/src/pb-table-grid.js

@@ -0,0 +1,190 @@
+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
+            },
+            /**
+             * 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;
+    }
+
+    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();
+        });
+    }
+
+    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 = {
+                columns,
+                resizable: this.resizable,
+                server: {
+                    url,
+                    then: data => data.results,
+                    total: data => data.count
+                },
+                sort: {
+                    multiColumn: false,
+                    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: 10,
+                    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;
+                            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;
+            }
+        `;
+    }
+}
+customElements.define('pb-table-grid', PbTableGrid);