@teipublisher/pb-components 2.5.1 → 2.6.1

package/dist/pb-elements.json

@@ -10309,7 +10309,7 @@
     {
       "name": "pb-svg",
       "path": "./src/pb-svg.js",
-      "description": "Show an SVG image with zoom and pan functionality. The image URL may\neither be specified via the `url` property or an `pb-show-annotation` event\nsent to this component.",
+      "description": "Show an SVG image with zoom and pan functionality. The image URL may\neither be specified via the `url` property or an `pb-show-annotation` event\nsent to this component. A relative URL will be resolved against the current API context.",
       "attributes": [
         {
           "name": "url",
@@ -10396,7 +10396,7 @@
       "events": [
         {
           "name": "pb-show-annotation",
-          "description": "When received, loads the image from the URL passed from the event"
+          "description": "When received, loads the image from the URL passed in property `file`\nwithin the event"
         }
       ],
       "cssProperties": [
@@ -10706,6 +10706,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "pb-tab",
+          "description": "fired if selected tab changes. Details contain number of \nselected tab in propery `selected`."
+        }
+      ],
       "slots": [
         {
           "name": "tab",

package/package.json

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

package/pb-elements.json

@@ -10309,7 +10309,7 @@
     {
       "name": "pb-svg",
       "path": "./src/pb-svg.js",
-      "description": "Show an SVG image with zoom and pan functionality. The image URL may\neither be specified via the `url` property or an `pb-show-annotation` event\nsent to this component.",
+      "description": "Show an SVG image with zoom and pan functionality. The image URL may\neither be specified via the `url` property or an `pb-show-annotation` event\nsent to this component. A relative URL will be resolved against the current API context.",
       "attributes": [
         {
           "name": "url",
@@ -10396,7 +10396,7 @@
       "events": [
         {
           "name": "pb-show-annotation",
-          "description": "When received, loads the image from the URL passed from the event"
+          "description": "When received, loads the image from the URL passed in property `file`\nwithin the event"
         }
       ],
       "cssProperties": [
@@ -10706,6 +10706,12 @@
           "default": "false"
         }
       ],
+      "events": [
+        {
+          "name": "pb-tab",
+          "description": "fired if selected tab changes. Details contain number of \nselected tab in propery `selected`."
+        }
+      ],
       "slots": [
         {
           "name": "tab",

package/src/authority/{gf.js → anton.js}

@@ -3,19 +3,21 @@ import { Registry } from "./registry.js";
 /**
  * Connector for the corporate archive of Georgfischer AG.
  */
-export class GF extends Registry {
+export class Anton extends Registry {
     
     constructor(configElem) {
         super(configElem);
+        this._url = configElem.getAttribute('url') || `https://archives.georgfischer.com/api`;
         this._api = configElem.getAttribute('api');
         this._limit = configElem.getAttribute('limit') || 999999;
+        this._provider = configElem.getAttribute('provider') || configElem.getAttribute('connector')
     }
 
     async query(key) {
         const results = [];
      
         const register = this.getRegister();
-        const url = `https://archives.georgfischer.com/api/${register}?search=${encodeURIComponent(key)}&perPage=${this._limit}`;
+        const url = `${this._url}/${register}?search=${encodeURIComponent(key)}&perPage=${this._limit}`;
         const label = this.getLabelField();
         return new Promise((resolve) => {
             fetch(url)
@@ -38,9 +40,9 @@ export class GF extends Registry {
                       id: (this._prefix ? `${this._prefix}-${item.id}` : item.id),
                       label: item[label],
                       details: `${item.id}`,
-                      link: `https://archives.georgfischer.com/api/${register}/${item.id}`,
+                      link: `${this._url}/${register}/${item.id}`,
                       strings: [item[label]],
-                      provider: 'GF'
+                      provider: this._provider
                     };
                     results.push(result);
                 });
@@ -87,7 +89,7 @@ export class GF extends Registry {
    */
   async getRecord(key) {
     const id = key.replace(/^.*-([^-]+)$/, '$1');
-    const url = `https://archives.georgfischer.com/api/${this.getRegister()}/${id}`;
+    const url = `${this._url}/${this.getRegister()}/${id}`;
     return fetch(url)
     .then(response => response.json())
     .then(json => {

package/src/authority/connectors.js

@@ -3,7 +3,7 @@ import { GeoNames } from './geonames.js';
 import { Airtable } from './airtable.js';
 import { GND } from './gnd.js';
 import { KBGA } from './kbga.js';
-import { GF } from './gf.js';
+import { Anton } from './anton.js';
 import { ReconciliationService } from './reconciliation.js';
 import { Custom } from './custom.js';
 
@@ -25,8 +25,9 @@ export function createConnectors(endpoint, root) {
       case 'KBGA':
         instance = new KBGA(configElem);
         break;
+      case 'Anton':
       case 'GF':
-        instance = new GF(configElem);
+        instance = new Anton(configElem);
         break;
       case 'ReconciliationService':
         instance = new ReconciliationService(configElem);

package/src/pb-svg.js

@@ -6,9 +6,10 @@ import { pbMixin } from './pb-mixin.js';
 /**
  * Show an SVG image with zoom and pan functionality. The image URL may
  * either be specified via the `url` property or an `pb-show-annotation` event
- * sent to this component.
+ * sent to this component. A relative URL will be resolved against the current API context.
  *
- * @fires pb-show-annotation - When received, loads the image from the URL passed from the event
+ * @fires pb-show-annotation - When received, loads the image from the URL passed in property `file`
+ * within the event
  * @cssprop --pb-svg-height - Height of the SVG element
  * @cssprop --pb-svg-width - Width of the SVG element
  */
@@ -32,43 +33,48 @@ export class PbSvg extends pbMixin(LitElement) {
 
     connectedCallback() {
         super.connectedCallback();
-    }
 
-    firstUpdated() {
-        super.firstUpdated();
         window.ESGlobalBridge.requestAvailability();
         window.ESGlobalBridge.instance.load("svg-pan-zoom", `https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js`);
-        window.addEventListener(
-            "es-bridge-svg-pan-zoom-loaded",
-            this._onSvgPanZoomLoaded.bind(this),
-            { once: true }
-        );
-
-        this.container = this.shadowRoot.getElementById('image');
 
         this.subscribeTo('pb-show-annotation', (ev) => {
-            console.log('<pb-svg> loading %s', ev.detail.file);
+            if (this.url === ev.detail.file) {
+                return;
+            }
             this.url = ev.detail.file;
-            this.load();
         });
     }
 
-    _onSvgPanZoomLoaded() {
-        this.load();
+    firstUpdated() {
+        super.firstUpdated();
+
+        this.container = this.shadowRoot.getElementById('image');
+    }
+
+    updated(changed) {
+        if (changed.has('url') && this.url && this.url !== changed.get('url')) {
+            this.load();
+        }
     }
- 
+
     load() {
+        if (!this.url) {
+            return;
+        }
+        const uri = this.toAbsoluteURL(this.url);
+        console.log('<pb-svg> Loading %s', uri);
         if (this._pan) {
             this._pan.destroy();
             this._pan = null;
             this.container.innerHTML = '';
         }
-        if (!this.url) {
-            return;
-        }
-        fetch(this.url)
+        fetch(uri)
             .then((response) => response.text())
             .then((data) => {
+                if (!window.svgPanZoom) {
+                    console.error('<pb-svg> svgPanZoom not available');
+                    return;
+                }
                 const doc = new DOMParser().parseFromString(data, "image/svg+xml");
                 const svg = doc.documentElement;
                 this.container.appendChild(svg);

package/src/pb-tabs.js

@@ -11,6 +11,8 @@ import { registry } from "./urls.js";
  * @slot tab - tab area
  * @slot page - page area
  * @csspart pages - wrapper around the tab pages
+ * @fires pb-tab - fired if selected tab changes. Details contain number of 
+ * selected tab in propery `selected`.
  */
 export class PbTabs extends pbMixin(LitElement) {
     static get properties() {
@@ -43,11 +45,19 @@ export class PbTabs extends pbMixin(LitElement) {
         });
     }
 
+    firstUpdated() {
+        super.firstUpdated();
+        this.emitTo('pb-tab', { selected: this.selected });
+    }
+
     _switchTab(ev) {
         const current = parseInt(ev.detail.value, 10);
         if (this.selected === current) {
             return;
         }
+
+        this.emitTo('pb-tab', { selected: current });
+
         this.selected = current;
         if (this._initialized) {
             registry.commit(this, { tab: this.selected });