@teipublisher/pb-components 1.35.1 → 1.36.1

package/dist/pb-elements.json

@@ -10131,10 +10131,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?",
@@ -10259,6 +10265,12 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).\nThe value should point to the HTTP root path under which the static version\nwill be hosted. This is used to resolve CSS stylesheets.",
@@ -10303,10 +10315,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",
@@ -10459,6 +10478,13 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "noScroll",
+          "attribute": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "attribute": "static",
@@ -10725,6 +10751,12 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).\nThe value should point to the HTTP root path under which the static version\nwill be hosted. This is used to resolve CSS stylesheets.",
@@ -10908,6 +10940,13 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "noScroll",
+          "attribute": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "attribute": "static",

package/package.json

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

package/pb-elements.json

@@ -10131,10 +10131,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?",
@@ -10259,6 +10265,12 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).\nThe value should point to the HTTP root path under which the static version\nwill be hosted. This is used to resolve CSS stylesheets.",
@@ -10303,10 +10315,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",
@@ -10459,6 +10478,13 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "noScroll",
+          "attribute": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "attribute": "static",
@@ -10725,6 +10751,12 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "description": "If set, rewrite URLs to load pages as static HTML files,\nso no TEI Publisher instance is required. Use this in combination with\n[tei-publisher-static](https://github.com/eeditiones/tei-publisher-static).\nThe value should point to the HTTP root path under which the static version\nwill be hosted. This is used to resolve CSS stylesheets.",
@@ -10908,6 +10940,13 @@
           "description": "If set to the name of an event, the content of the pb-view will not be replaced\nimmediately upon updates. Instead, an event is emitted, which contains the new content\nin property `root`. An event handler intercepting the event can thus modify the content.\nOnce it is done, it should pass the modified content to the callback function provided\nin the event detail under the name `render`. See the demo for an example.",
           "type": "string"
         },
+        {
+          "name": "noScroll",
+          "attribute": "no-scroll",
+          "description": "If set, do not scroll the view to target node (e.g. given in URL hash) \nafter content was loaded.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "static",
           "attribute": "static",

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-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() {

package/src/pb-view.js

@@ -294,6 +294,14 @@ export class PbView extends pbMixin(LitElement) {
                 type: String,
                 attribute: 'before-update-event'
             },
+            /**
+             * If set, do not scroll the view to target node (e.g. given in URL hash) 
+             * after content was loaded.
+             */
+            noScroll: {
+                type: Boolean,
+                attribute: 'no-scroll'
+            },
             _features: {
                 type: Object
             },
@@ -335,6 +343,7 @@ export class PbView extends pbMixin(LitElement) {
         this.infiniteScrollMax = 10;
         this.disableHistory = false;
         this.beforeUpdate = null;
+        this.noScroll = false;
         this._features = {};
         this._selector = new Map();
         this._chunks = [];
@@ -520,7 +529,7 @@ 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 (ev.detail.hash && !this.noScroll && !(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);
@@ -551,7 +560,9 @@ export class PbView extends pbMixin(LitElement) {
             } else {
                 this.nodeId = ev.detail.position || this.nodeId;
             }
-            this._scrollTarget = ev.detail.hash;
+            if (!this.noScroll) {
+                this._scrollTarget = ev.detail.hash;
+            }
         }
         this._updateStyles();
         if (this.infiniteScroll) {
@@ -867,12 +878,19 @@ export class PbView extends pbMixin(LitElement) {
     }
 
     _scroll() {
+        if (this.noScroll) {
+            return;
+        }
         const { hash } = this.getUrl();
         if (hash) {
             const target = this.shadowRoot.getElementById(hash.substring(1));
             console.log('hash target: %o', target);
             if (target) {
-                target.scrollIntoView({ block: "center", inline: "nearest" });
+                window.requestAnimationFrame(() =>
+                    setTimeout(() => {
+                        target.scrollIntoView({block: 'nearest'});
+                    }, 400)
+                );
             }
         }
     }