@teipublisher/pb-components 1.27.0 → 1.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.27.0",
+  "version": "1.27.1",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",

package/src/authority/connectors.js

@@ -4,6 +4,7 @@ import { Airtable } from './airtable.js';
 import { GND } from './gnd.js';
 import { KBGA } from './kbga.js';
 import { GF } from './gf.js';
+import { ReconciliationService } from './reconciliation.js';
 import { Custom } from './custom.js';
 
 export function createConnectors(endpoint, root) {
@@ -27,6 +28,9 @@ export function createConnectors(endpoint, root) {
       case 'GF':
         instance = new GF(configElem);
         break;
+      case 'ReconciliationService':
+        instance = new ReconciliationService(configElem);
+        break;
       case 'Custom':
         instance = new Custom(endpoint, configElem);
         break;

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-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;