@teipublisher/pb-components 1.35.2 → 1.36.2

package/dist/pb-elements.json

@@ -3487,6 +3487,18 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "reference-strip",
+          "description": "If set, thumbnails of all images are shown in a reference strip at the\nbottom of the viewer.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "reference-strip-size-ratio",
+          "description": "Size ratio for the reference strip thumbnails. 0.2 by default.",
+          "type": "number",
+          "default": "0.2"
+        },
         {
           "name": "src",
           "type": "string",
@@ -3610,6 +3622,20 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "referenceStrip",
+          "attribute": "reference-strip",
+          "description": "If set, thumbnails of all images are shown in a reference strip at the\nbottom of the viewer.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "referenceStripSizeRatio",
+          "attribute": "reference-strip-size-ratio",
+          "description": "Size ratio for the reference strip thumbnails. 0.2 by default.",
+          "type": "number",
+          "default": "0.2"
+        },
         {
           "name": "src",
           "attribute": "src",
@@ -10131,10 +10157,16 @@
       "attributes": [
         {
           "name": "key",
-          "description": "Configures the annotation property containing the key for authority entries.\nDefault: 'ref', corresponding to TEI attribute @ref. Change to 'corresp' or 'key' when\nusing those attributes instead.",
+          "description": "Configures the default annotation property containing the key for authority entries.\nDefault: 'ref', corresponding to TEI attribute @ref. Change to 'corresp' or 'key' when\nusing those attributes instead.\n\nYou can also define a custom mapping of annotation types to key properties, e.g. if you would\nlike to use @key for some elements, but @corresp for others.",
           "type": "string",
           "default": "\"ref\""
         },
+        {
+          "name": "key-map",
+          "description": "Optional mapping of annotation type names to key properties",
+          "type": "object",
+          "default": "{}"
+        },
         {
           "name": "caseSensitive",
           "description": "When searching the displayed text for other potential occurrences of an entity,\nshould the search be done in case-sensitive manner?",
@@ -10309,10 +10341,17 @@
         {
           "name": "key",
           "attribute": "key",
-          "description": "Configures the annotation property containing the key for authority entries.\nDefault: 'ref', corresponding to TEI attribute @ref. Change to 'corresp' or 'key' when\nusing those attributes instead.",
+          "description": "Configures the default annotation property containing the key for authority entries.\nDefault: 'ref', corresponding to TEI attribute @ref. Change to 'corresp' or 'key' when\nusing those attributes instead.\n\nYou can also define a custom mapping of annotation types to key properties, e.g. if you would\nlike to use @key for some elements, but @corresp for others.",
           "type": "string",
           "default": "\"ref\""
         },
+        {
+          "name": "keyMap",
+          "attribute": "key-map",
+          "description": "Optional mapping of annotation type names to key properties",
+          "type": "object",
+          "default": "{}"
+        },
         {
           "name": "caseSensitive",
           "attribute": "caseSensitive",

package/package.json

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

package/pb-elements.json

@@ -3487,6 +3487,18 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "reference-strip",
+          "description": "If set, thumbnails of all images are shown in a reference strip at the\nbottom of the viewer.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "reference-strip-size-ratio",
+          "description": "Size ratio for the reference strip thumbnails. 0.2 by default.",
+          "type": "number",
+          "default": "0.2"
+        },
         {
           "name": "src",
           "type": "string",
@@ -3610,6 +3622,20 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "referenceStrip",
+          "attribute": "reference-strip",
+          "description": "If set, thumbnails of all images are shown in a reference strip at the\nbottom of the viewer.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "referenceStripSizeRatio",
+          "attribute": "reference-strip-size-ratio",
+          "description": "Size ratio for the reference strip thumbnails. 0.2 by default.",
+          "type": "number",
+          "default": "0.2"
+        },
         {
           "name": "src",
           "attribute": "src",
@@ -10131,10 +10157,16 @@
       "attributes": [
         {
           "name": "key",
-          "description": "Configures the annotation property containing the key for authority entries.\nDefault: 'ref', corresponding to TEI attribute @ref. Change to 'corresp' or 'key' when\nusing those attributes instead.",
+          "description": "Configures the default annotation property containing the key for authority entries.\nDefault: 'ref', corresponding to TEI attribute @ref. Change to 'corresp' or 'key' when\nusing those attributes instead.\n\nYou can also define a custom mapping of annotation types to key properties, e.g. if you would\nlike to use @key for some elements, but @corresp for others.",
           "type": "string",
           "default": "\"ref\""
         },
+        {
+          "name": "key-map",
+          "description": "Optional mapping of annotation type names to key properties",
+          "type": "object",
+          "default": "{}"
+        },
         {
           "name": "caseSensitive",
           "description": "When searching the displayed text for other potential occurrences of an entity,\nshould the search be done in case-sensitive manner?",
@@ -10309,10 +10341,17 @@
         {
           "name": "key",
           "attribute": "key",
-          "description": "Configures the annotation property containing the key for authority entries.\nDefault: 'ref', corresponding to TEI attribute @ref. Change to 'corresp' or 'key' when\nusing those attributes instead.",
+          "description": "Configures the default annotation property containing the key for authority entries.\nDefault: 'ref', corresponding to TEI attribute @ref. Change to 'corresp' or 'key' when\nusing those attributes instead.\n\nYou can also define a custom mapping of annotation types to key properties, e.g. if you would\nlike to use @key for some elements, but @corresp for others.",
           "type": "string",
           "default": "\"ref\""
         },
+        {
+          "name": "keyMap",
+          "attribute": "key-map",
+          "description": "Optional mapping of annotation type names to key properties",
+          "type": "object",
+          "default": "{}"
+        },
         {
           "name": "caseSensitive",
           "attribute": "caseSensitive",

package/src/authority/kbga.js

@@ -11,7 +11,8 @@ export class KBGA extends Registry {
         const results = [];
      
         const register = this.getRegister();
-        const url = `https://meta.karl-barth.ch/api/${register}?search=${encodeURIComponent(key)}`;
+        const searchParam = register === 'bibls' ? 'biblsearch' : 'search';
+        const url = `https://meta.karl-barth.ch/api/${register}?${searchParam}=${encodeURIComponent(key)}`;
         const label = this.getLabelField();
         return new Promise((resolve) => {
             fetch(url)
@@ -26,10 +27,10 @@ export class KBGA extends Registry {
                     const result = {
                       register: this._register,
                       id: (this._prefix ? `${this._prefix}:${item['full-id']}` : item['full-id']),
-                      label: item[label],
+                      label: typeof label === "string" ? item[label] : label(item),
                       details: `${item['full-id']}`,
                       link: `https://meta.karl-barth.ch/${register}/${item.id}`,
-                      strings: [item[label]],
+                      strings: [typeof label === "string" ? item[label] : label(item)],
                       provider: 'KBGA'
                     };
                     results.push(result);
@@ -54,14 +55,14 @@ export class KBGA extends Registry {
           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>
+            <h3 class="label"><a href="https://${json.wikipediaURL}" target="_blank">${typeof label === 'string' ? json.data[label] : label(json.data)}</a></h3>
               ${dates}
               ${note}
           `;
           container.innerHTML = output;
           resolve({
             id: json.data['full-id'],
-            strings: [json.data[label]]
+            strings: [typeof label === 'string' ? json.data[label] : label(json.data)]
           });
         });
       });
@@ -112,6 +113,9 @@ export class KBGA extends Registry {
           case 'abbreviation':
               label = 'label';
               break;
+          case 'bibl':
+              label = 'asHtml';
+              break;
           default:
               label = 'persName_full';
               break;
@@ -138,6 +142,9 @@ export class KBGA extends Registry {
         case 'abbreviation':
           register = 'abbreviations';
           break;
+        case 'bibl':
+          register = 'bibls';
+          break;
         default:
           register = this._register;
       }

package/src/pb-authority-lookup.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { pbMixin } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
 import { createConnectors } from "./authority/connectors.js";
@@ -121,8 +122,9 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
         <td>
           <div>
             ${item.link
-              ? html`<a target="_blank" href="${item.link}">${item.label}</a>`
-              : item.label}
+              ? html`<a target="_blank" href="${item.link}">${unsafeHTML(item.label)}</a>`
+              : html`${unsafeHTML(item.label)}`
+            }
           </div>
           ${item.details ? html`<div class="details" part="details">${item.details}</div>` : null}
         </td>

package/src/pb-facsimile.js

@@ -85,6 +85,21 @@ export class PbFacsimile extends pbMixin(LitElement) {
                 type: Number,
                 attribute: 'visibility-ratio'
             },
+            /**
+             * If set, thumbnails of all images are shown in a reference strip at the
+             * bottom of the viewer.
+             */
+            referenceStrip: {
+                type: Boolean,
+                attribute: 'reference-strip'
+            },
+            /**
+             * Size ratio for the reference strip thumbnails. 0.2 by default.
+             */
+            referenceStripSizeRatio: {
+                type: Number,
+                attribute: 'reference-strip-size-ratio'
+            },
             /**
              * Type of the source of the image to display: either 'iiif' or 'image'
              * (for simple image links not served via IIIF).
@@ -134,6 +149,8 @@ export class PbFacsimile extends pbMixin(LitElement) {
         this.showFullPageControl = false;
         this.showRotationControl = false;
         this.constrainDuringPan = false;
+        this.referenceStrip = false;
+        this.referenceStripSizeRatio = 0.2;
         this.src = '';
         this.prefixUrl = '../images/openseadragon/';
         this.loaded = false;
@@ -197,7 +214,7 @@ export class PbFacsimile extends pbMixin(LitElement) {
     // Init openseadragon
     _initOpenSeadragon() {
         const prefixUrl = resolveURL(this.prefixUrl + (this.prefixUrl.endsWith("/") ? "" : "/"));
-        this.viewer = OpenSeadragon({
+        const options = {
             element: this.shadowRoot.getElementById('viewer'),
             prefixUrl,
             preserveViewport: true,
@@ -213,7 +230,12 @@ export class PbFacsimile extends pbMixin(LitElement) {
             minZoomLevel: 1,
             defaultZoomLevel: this.defaultZoomLevel,
             constrainDuringPan: true
-        });
+        };
+        if (this.referenceStrip) {
+            options.showReferenceStrip = true;
+            options.referenceStripSizeRatio = this.referenceStripSizeRatio;
+        }
+        this.viewer = OpenSeadragon(options);
 
         this.viewer.addHandler('open', () => {
             this.resetZoom();

package/src/pb-view-annotate.js

@@ -223,13 +223,23 @@ class PbViewAnnotate extends PbView {
   static get properties() {
     return {
       /**
-       * Configures the annotation property containing the key for authority entries.
+       * Configures the default annotation property containing the key for authority entries.
        * Default: 'ref', corresponding to TEI attribute @ref. Change to 'corresp' or 'key' when
        * using those attributes instead.
+       * 
+       * You can also define a custom mapping of annotation types to key properties, e.g. if you would
+       * like to use @key for some elements, but @corresp for others.
        */
       key: {
         type: String
       },
+      /**
+       * Optional mapping of annotation type names to key properties
+       */
+      keyMap: {
+        type: Object,
+        attribute: 'key-map'
+      },
       /**
        * When searching the displayed text for other potential occurrences of an entity,
        * should the search be done in case-sensitive manner?
@@ -244,6 +254,7 @@ class PbViewAnnotate extends PbView {
   constructor() {
     super();
     this.key = 'ref';
+    this.keyMap = {};
     this.caseSensitive = false;
     this._ranges = [];
     this._rangesMap = new Map();
@@ -373,6 +384,10 @@ class PbViewAnnotate extends PbView {
     window.requestAnimationFrame(() => this.refreshMarkers());
   }
   
+  getKey(type) {
+    return this.keyMap[type] || this.key;
+  }
+
   _resizeHandler() {
     let _pendingCallback = null;
 
@@ -406,6 +421,7 @@ class PbViewAnnotate extends PbView {
       this._initAnnotationColors();
       this._annotationStyles();
       this.updateAnnotations();
+      this._markIncompleteAnnotations();
       if (this._scrollTop) {
         this.scrollTop = this._scrollTop;
         this._scrollTop = undefined;
@@ -459,7 +475,7 @@ class PbViewAnnotate extends PbView {
 
     console.log('<pb-view-annotate> Range: %o', range);
     const span = document.createElement('span');
-    const addClass = teiRange.properties[this.key] === '' ? 'incomplete' : '';
+    const addClass = teiRange.properties[this.getKey(teiRange.type)] === '' ? 'incomplete' : '';
     span.className = `annotation annotation-${teiRange.type} ${teiRange.type} ${addClass}`;
     span.dataset.type = teiRange.type;
     span.dataset.annotation = JSON.stringify(teiRange.properties);
@@ -669,7 +685,7 @@ class PbViewAnnotate extends PbView {
     const jsonOld = JSON.parse(span.dataset.annotation);
     const json = Object.assign(jsonOld || {}, properties);
     span.dataset.annotation = JSON.stringify(json);
-    if (json[this.key] !== '') {
+    if (json[this.getKey(span.dataset.type)] !== '') {
       span.classList.remove('incomplete');
     }
   }
@@ -770,10 +786,10 @@ class PbViewAnnotate extends PbView {
         typeInd.innerHTML = type;
         typeInd.style.backgroundColor = `var(--pb-annotation-${type})`;
         typeInd.style.color = `var(${color && color.isLight ? '--pb-color-primary' : '--pb-color-inverse'})`;
-        if (data[this.key]) {
+        if (data[this.getKey(type)]) {
           this.emitTo('pb-annotation-detail', {
             type,
-            id: data[this.key],
+            id: data[this.getKey(type)],
             container: info,
             span,
           });
@@ -910,7 +926,7 @@ class PbViewAnnotate extends PbView {
         if (annoData && annoType) {
           const parsed = JSON.parse(annoData) || {};
           isAnnotated = annoType === type;
-          ref = parsed[this.key];
+          ref = parsed[this.getKey(type)];
         }
 
         const startRange = rangeToPoint(node, match.index);
@@ -925,7 +941,7 @@ class PbViewAnnotate extends PbView {
           textNode: node,
           kwic: kwicText(str, start + match.index, start + end),
         };
-        entry[this.key] = ref;
+        entry[this.getKey(type)] = ref;
         result.push(entry);
       }
     }
@@ -973,10 +989,23 @@ class PbViewAnnotate extends PbView {
     }
   }
 
+  _markIncompleteAnnotations() {
+    const elem = this.shadowRoot.getElementById('view')
+    elem.querySelectorAll('.annotation.authority').forEach((annotation) => {
+      if (annotation.dataset.type) {
+        const data = JSON.parse(annotation.dataset.annotation);
+        const key = this.getKey(annotation.dataset.type);
+        if (!data[key] || data[key].length === 0) {
+          annotation.classList.add('incomplete');
+        }
+      }
+    });
+  }
+
   _initAnnotationColors() {
     this._annotationColors = new Map();
     const types = new Set();
-    const elem = this.shadowRoot.getElementById('view')
+    const elem = this.shadowRoot.getElementById('view');
     elem.querySelectorAll('.annotation').forEach((annotation) => {
       if (annotation.dataset.type) {
         types.add(annotation.dataset.type);
@@ -1043,7 +1072,7 @@ class PbViewAnnotate extends PbView {
     styles = document.createElement('style');
     styles.className = '_annotation-styles';
     styles.innerHTML = css;
-    view.appendChild(styles);
+    view.insertBefore(styles, view.firstChild);
   }
 
   static get styles() {