@teipublisher/pb-components 1.25.0 → 1.28.0

package/src/pb-odd-parameter-editor.js

@@ -29,7 +29,7 @@ export class PbOddParameterEditor extends LitElement {
             }
             .wrapper{
                 display:grid;
-                grid-template-columns:150px auto 50px;
+                grid-template-columns:150px auto 50px 50px;
                 grid-column-gap:20px;
                 grid-row-gap:20px;
                 margin-bottom:10px;
@@ -37,8 +37,9 @@ export class PbOddParameterEditor extends LitElement {
             paper-dropdown-menu{
                 align-self:start;
             }
-            paper-icon-button{
-                align-self:center;
+            paper-icon-button, paper-checkbox {
+                align-self: center;
+                margin-top: 16px;
             }
         `;
     }
@@ -56,7 +57,7 @@ export class PbOddParameterEditor extends LitElement {
                         code="${this.value}"
                         linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') ? 'modules/editor.xql' : 'api/lint'}"
                         apiVersion="${this.apiVersion}"></pb-code-editor>
-
+            <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}">set</paper-checkbox>
             <paper-icon-button @click="${this._delete}" icon="delete" title="delete this parameter"></paper-icon-button>
         </div>
 
@@ -87,6 +88,10 @@ export class PbOddParameterEditor extends LitElement {
             parameters: {
                 type: Object
             },
+            setParam: {
+                type: Boolean,
+                attribute: 'set'
+            },
             _currentParameters: {
                 type: Array
             },
@@ -104,6 +109,7 @@ export class PbOddParameterEditor extends LitElement {
         super();
         this.name = '';
         this.value = '';
+        this.setParam = false;
         this.behaviour = '';
         this.currentParameters = [];
         this.parameters = {
@@ -189,7 +195,8 @@ export class PbOddParameterEditor extends LitElement {
         console.log('_handleCodeChange ', e);
         this.value = this.shadowRoot.getElementById('editor').getSource();
         this.name = this.shadowRoot.getElementById('combo').text;
-        this.dispatchEvent(new CustomEvent('parameter-changed', { composed: true, bubbles: true, detail: { name: this.name, value: this.value } }));
+        this.setParam = this.shadowRoot.getElementById('set').checked;
+        this.dispatchEvent(new CustomEvent('parameter-changed', { composed: true, bubbles: true, detail: { name: this.name, value: this.value, set: this.setParam } }));
     }
 
 

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,212 @@
+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;
+                            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);

package/src/pb-view-annotate.js

@@ -454,7 +454,8 @@ class PbViewAnnotate extends PbView {
 
     console.log('<pb-view-annotate> Range: %o', range);
     const span = document.createElement('span');
-    span.className = `annotation annotation-${teiRange.type} ${teiRange.type}`;
+    const addClass = teiRange.properties[this.key] === '' ? 'incomplete' : '';
+    span.className = `annotation annotation-${teiRange.type} ${teiRange.type} ${addClass}`;
     span.dataset.type = teiRange.type;
     span.dataset.annotation = JSON.stringify(teiRange.properties);
 
@@ -657,9 +658,12 @@ class PbViewAnnotate extends PbView {
       range = clearProperties(range);
       this.emitTo('pb-annotations-changed', { ranges: this._ranges });
     }
-
-    const json = Object.assign(JSON.parse(span.dataset.annotation), properties);
+    const jsonOld = JSON.parse(span.dataset.annotation);
+    const json = Object.assign(jsonOld || {}, properties);
     span.dataset.annotation = JSON.stringify(json);
+    if (json[this.key] !== '') {
+      span.classList.remove('incomplete');
+    }
   }
 
   _editAnnotation(ev) {
@@ -753,7 +757,7 @@ class PbViewAnnotate extends PbView {
         ev.preventDefault();
         ev.stopPropagation();
         const type = span.dataset.type;
-        const data = JSON.parse(span.dataset.annotation);
+        const data = JSON.parse(span.dataset.annotation) || {};
         const color = this._annotationColors.get(type);
         typeInd.innerHTML = type;
         typeInd.style.backgroundColor = `var(--pb-annotation-${type})`;
@@ -896,7 +900,7 @@ class PbViewAnnotate extends PbView {
         const annoData = node.parentNode.dataset.annotation;
         const annoType = node.parentNode.dataset.type;
         if (annoData && annoType) {
-          const parsed = JSON.parse(annoData);
+          const parsed = JSON.parse(annoData) || {};
           isAnnotated = annoType === type;
           ref = parsed[this.key];
         }
@@ -1004,6 +1008,17 @@ class PbViewAnnotate extends PbView {
       classes.push(`
         .annotation-${type}::after {
           background-color: var(--pb-annotation-${type});
+          border-color: var(--pb-annotation-${type});
+          color: var(${color.isLight ? '--pb-color-primary' : '--pb-color-inverse'});
+        }
+        .annotation-${type}.incomplete::after {
+          background: repeating-linear-gradient(
+            315deg,
+            var(--pb-annotation-${type}),
+            var(--pb-annotation-${type}) 5px,
+            var(${color.isLight ? '--pb-annotation-stripes-light' : '--pb-annotation-stripes-dark'}) 5px,
+            var(${color.isLight ? '--pb-annotation-stripes-light' : '--pb-annotation-stripes-dark'}) 10px
+          );
           color: var(${color.isLight ? '--pb-color-primary' : '--pb-color-inverse'});
         }
       `);
@@ -1064,7 +1079,7 @@ class PbViewAnnotate extends PbView {
             font-variant: normal;
             padding: 2px;
         }
-        
+
         [part=highlight] {
           border: 3px solid rgb(255, 174, 0);
           border-radius: 8px;