@teipublisher/pb-components 1.27.0 → 1.28.2

package/src/authority/reconciliation.js

@@ -0,0 +1,124 @@
+/* eslint-disable class-methods-use-this */
+import { Registry } from './registry.js'
+
+// Todo:
+// - strings <- types
+// - use scheme#types in @type output?
+// - test with other providers, inside custom connector
+// - documentation
+
+async function getServiceManifest (endpoint) {
+	const response = await fetch(endpoint);
+	const data = await response.json();
+  return data;
+}
+
+export class ReconciliationService extends Registry {
+  constructor(configElem) {
+    super(configElem)
+    this.endpoint = configElem.getAttribute('endpoint');
+    this.debug = configElem.getAttribute('debug');
+    getServiceManifest(this.endpoint).then((result) => {
+      this.ORConfig = result;
+      if (this.debug) {
+        console.log(
+          'OpenReconcile connector for register \'%s\' at endpoint <%s>. Using config: %o',
+          this._register, this.endpoint, this.ORConfig
+        );
+      }
+    })
+  }
+
+  /**
+   * Query the authority and return a RegistryResult.
+   *
+   * @param {String} key the search string
+   */
+  async query(key) {
+    const results = [];
+    const paramsObj = {
+                        q1: {
+                          query: key
+                        }
+                      };
+
+    return new Promise((resolve) => {
+        fetch(this.endpoint, {
+            method: 'POST',
+            headers: {
+              'Accept': 'application/json',
+              'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            body: "queries=".concat(JSON.stringify(paramsObj))
+        })
+        .then((response) => response.json())
+        .then((json) => {
+            json.q1.result.forEach((item) => {
+              if (this.ORConfig.view) {
+                this.view = this.ORConfig.view.url.replace('{{id}}', item.id);
+              } else {
+                this.view = item.id;
+              }
+              if (item.description) {
+                this.description = item.description;
+              } else if (item.type) {
+                this.description = item.type.map(t => t.name.toString() ).join(', ')
+              } else {
+                this.description = ""
+              }
+              const result = {
+                  register: this._register,
+                  id: (this._prefix ? `${this._prefix}-${item.id}` : item.id),
+                  label: item.name,
+                  link: this.view,
+                  details: this.description,
+                  provider: 'OpenReconcile'
+              };
+              results.push(result);
+            });
+            if (this.debug) {
+              console.log(
+                  'OpenReconcile results: %o',
+                  results
+              );
+            }
+            resolve({
+                totalItems: json.q1.result.length,
+                items: results,
+            });
+        })
+    })
+  }
+
+  /**
+   * Retrieve information about a registry entry and display it
+   * using the given container.
+   *
+   * @param {String} id the id to look up
+   * @param {HTMLElement} container reference to an element which should be used as container for displaying the information
+   * @returns {Promise} a promise
+   */
+  info(id, container) {
+    if (!id) {
+      return Promise.resolve({});
+    }
+    if (!this.ORConfig.preview) {
+      container.innerHTML = 'no \'preview\' information in endpoint\'s manifest';
+      return Promise.resolve();
+    }
+
+    return new Promise((resolve, reject) => {
+      const rawid = this._prefix ? id.substring(this._prefix.length + 1) : id;
+      const url = this.ORConfig.preview.url.replace('{{id}}', encodeURIComponent(rawid));
+      fetch(url)
+      .then(response => response.text())
+      .then((output) => {
+        container.innerHTML = output;
+        resolve({
+          id: this._prefix ? `${this._prefix}-${rawid}` : rawid
+        });
+      })
+      .catch(() => reject());
+    });
+  }
+}

package/src/pb-odd-editor.js

@@ -832,8 +832,9 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
             this.serializeAttribute('predicate', model.predicate),
             model.type === 'model' ? this.serializeAttribute('behaviour', model.behaviour) : '',
             this.serializeAttribute('cssClass', model.css),
-            this.serializeAttribute('useSourceRendition', model.sourcerend)
-        ].join('')
+            this.serializeAttribute('useSourceRendition', model.sourcerend),
+            this.serializeAttribute('pb:mode', model.mode)
+        ].join('');
 
         const desc = model.desc ? nestedIndent + '<desc>' + model.desc + '</desc>\n' : '';
 
@@ -854,6 +855,9 @@ export class PbOddEditor extends pbHotkeys(pbMixin(LitElement)) {
         }
         const name = this.serializeAttribute('name', parameter.name);
         const value = this.serializeAttribute('value', parameter.value);
+        if (parameter.set) {
+            return `${indent}<pb:set-param xmlns=""${name}${value}/>\n`
+        }
         return `${indent}<param${name}${value}/>\n`
     }
 

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

@@ -171,6 +171,7 @@ export class PbOddElementspecEditor extends LitElement {
                 type="${model.type}"
                 output="${model.output}"
                 css="${model.css}"
+                mode="${model.mode}"
                 .model="${model}"
                 .parameters="${model.parameters}"
                 desc="${model.desc}"
@@ -203,6 +204,7 @@ export class PbOddElementspecEditor extends LitElement {
         const newModel = {
             behaviour: 'inline',
             css: '',
+            mode: '',
             predicate: '',
             desc: '',
             type: addModel.selected,

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

@@ -271,6 +271,9 @@ export class PbOddModelEditor extends LitElement {
                     return value;
                 }
             },
+            mode: {
+                type: String
+            },
             model: {
                 type: Object
             },
@@ -331,6 +334,7 @@ export class PbOddModelEditor extends LitElement {
         this.template = '';
         this.output = '';
         this.css = '';
+        this.mode = '';
         this.model = {};
         this.model.models = [];
         this.parameters = [];
@@ -479,6 +483,11 @@ export class PbOddModelEditor extends LitElement {
                                 placeholder="${translate('odd.editor.model.css-class-placeholder')}"
                                 label="CSS Class"
                                 @change="${this._inputCss}"></paper-input>
+                            
+                            <paper-input id="mode" .value="${this.mode}"
+                                placeholder="${translate('odd.editor.model.mode-placeholder')}"
+                                label="Mode"
+                                @change="${this._inputMode}"></paper-input>
                                 
                             <pb-code-editor id="template"
                                              code="${this.template}"
@@ -501,6 +510,7 @@ export class PbOddModelEditor extends LitElement {
                                        behaviour="${this.behaviour}"
                                        name="${parameter.name}"
                                        value="${parameter.value}"
+                                       ?set="${parameter.set}"
                                        endpoint="${this.endpoint}"
                                        apiVersion="${this.apiVersion}"
                                        @parameter-remove="${(e) => this._removeParam(e, index)}"
@@ -543,6 +553,7 @@ export class PbOddModelEditor extends LitElement {
                     type="${model.type}"
                     output="${model.output}"
                     css="${model.css}"
+                    mode="${model.mode}"
                     .model="${model}"
                     .parameters="${model.parameters}"
                     desc="${model.desc}"
@@ -836,6 +847,11 @@ export class PbOddModelEditor extends LitElement {
         this._fireModelChanged('css', this.css);
     }
 
+    _inputMode(ev) {
+        this.mode = ev.composedPath()[0].value;
+        this._fireModelChanged('mode', this.mode);
+    }
+
     _updateTemplate(ev) {
         this.template = this.shadowRoot.getElementById('template').getSource();
         this._fireModelChanged('template', this.template);
@@ -854,6 +870,7 @@ export class PbOddModelEditor extends LitElement {
     _updateParam(e, index) {
         this.parameters[index].name = e.detail.name;
         this.parameters[index].value = e.detail.value;
+        this.parameters[index].set = e.detail.set;
         this._fireModelChanged('parameters', this.parameters);
     }
 

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-grid.js

@@ -60,6 +60,13 @@ export class PbTableGrid extends pbMixin(LitElement) {
             resizable: {
                 type: Boolean
             },
+            perPage: {
+                type: Number,
+                attribute: 'per-page'
+            },
+            height: {
+                type: String
+            },
             /**
              * If specified, enable server-side search.
              */
@@ -79,6 +86,9 @@ export class PbTableGrid extends pbMixin(LitElement) {
         this._params = {};
         this.resizable = false;
         this.search = false;
+        this.perPage = 10;
+        this.height = null;
+        this.fixedHeader = false;
     }
 
     connectedCallback() {
@@ -93,6 +103,15 @@ export class PbTableGrid extends pbMixin(LitElement) {
             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() {
@@ -101,11 +120,12 @@ export class PbTableGrid extends pbMixin(LitElement) {
         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: {
@@ -115,6 +135,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
                 },
                 sort: {
                     multiColumn: false,
+                    enabled: true,
                     server: {
                         url: (prev, cols) => {
                             if (!cols.length) return prev;
@@ -125,7 +146,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
                 },
                 pagination: {
                     enabled: true,
-                    limit: 10,
+                    limit: this.perPage,
                     server: {
                         url: (prev, page, limit) => {
                             const form = this.shadowRoot.getElementById('form');
@@ -133,7 +154,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
                                 Object.assign(this._params, form.serializeForm());
                             }
                             this._params.limit = limit;
-                            this._params.start = page * limit;
+                            this._params.start = page * limit + 1;
                             this.setParameters(this._params);
                             this.pushHistory('grid', this._params);
 
@@ -142,6 +163,7 @@ export class PbTableGrid extends pbMixin(LitElement) {
                     }
                 }
             };
+
             this.grid = new Grid(config);
             this.grid.on('load', () => {
                 this.emitTo('pb-results-received', {

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;

package/src/pb-view.js

@@ -496,6 +496,15 @@ export class PbView extends pbMixin(LitElement) {
 
     _refresh(ev) {
         if (ev && ev.detail) {
+            if (ev.detail.hash && !(ev.detail.id || ev.detail.path || ev.detail.odd || ev.detail.view || ev.detail.position)) {
+                // if only the scroll target has changed: scroll to the element without reloading
+                this._scrollTarget = ev.detail.hash;
+                const target = this.shadowRoot.getElementById(this._scrollTarget);
+                if (target) {
+                    setTimeout(() => target.scrollIntoView());
+                }
+                return;
+            }
             if (ev.detail.path) {
                 const doc = this.getDocument();
                 doc.path = ev.detail.path;
@@ -641,7 +650,7 @@ export class PbView extends pbMixin(LitElement) {
                 if (target) {
                     setTimeout(() => {
                         target.scrollIntoView();
-                    });
+                    }, 100);
                 }
                 this._scrollTarget = null;
             });