@teipublisher/pb-components 2.6.0 → 2.7.0

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

package/src/urls.js

@@ -1,3 +1,4 @@
+import { match, compile, pathToRegexp } from "path-to-regexp";
 import { PbEvents } from "./pb-events.js";
 import { getSubscribedChannels } from "./pb-mixin.js";
 
@@ -60,12 +61,34 @@ class Registry {
          */
         this.idHash = true;
         this._listeners = [];
+
+        /**
+         * URL pattern to use for mapping parameters into the URL path
+         */
+        this.urlPattern = null;
+
+        this.urlIgnore = new Set();
+        this._pathParams = new Set();
     }
 
-    configure(usePath = true, idHash = false, rootPath = '') {
+    configure(usePath = true, idHash = false, rootPath = '', urlPattern, ignoredParams) {
         this.rootPath = rootPath;
         this.usePath = usePath;
         this.idHash = idHash;
+        this.urlPattern = urlPattern;
+        if (ignoredParams) {
+            ignoredParams.split(/\s*,\s*/).forEach(param => this.urlIgnore.add(param));
+        }
+
+        if (this.urlPattern) {
+            // save a list of parameter names which go into the path
+            const pathParams = [];
+            pathToRegexp(this.urlPattern, pathParams);
+            pathParams.forEach((param) => this._pathParams.add(param.name));
+            // compile URL pattern into a decode and encode function
+            this._decodePath = match(this.urlPattern);
+            this._encodePath = compile(this.urlPattern);
+        }
 
         // determine initial state of the registry by parsing current URL
         const initialState = this._stateFromURL();
@@ -115,16 +138,35 @@ class Registry {
         if (this.idHash && this.hash.length > 0 && (!/^#\d+\./.test(this.hash))) {
             params.id = this.hash.substring(1);
         }
-        if (this.usePath) {
-            params.path = window.location.pathname.replace(new RegExp(`^${this.rootPath}/?`), '');
+        const relpath = window.location.pathname.replace(new RegExp(`^${this.rootPath}/?`), '');
+        if (this.urlPattern) {
+            const result = this._decodePath(relpath);
+            Object.assign(params, result.params);
+            log('decoded path %s using template %s: %o', relpath, this.urlPattern, params);
+        } else if (this.usePath) {
+            params.path = relpath;
         }
+
         const urlParams = new URLSearchParams(window.location.search);
         urlParams.forEach((value, key) => {
-            if (this.usePath && key === 'path') {
+            if (
+                (this.urlPattern && this._pathParams.has(key)) ||
+                (this.usePath && key === 'path')
+             ) {
                 console.warn("Found path parameter in query, but usePath is set to true. The path parameter will be ignored.");
                 return;
             }
-            params[key] = value;
+            // parameter already set
+            if ((key in params)) {
+                return;
+            }
+            // check for multiple entries
+            const allValues = urlParams.getAll(key);
+            if (allValues.length === 1) {
+                params[key] = value; // single entry
+            } else {
+                params[key] = allValues; // array
+            }
         });
         return params;
     }
@@ -196,7 +238,7 @@ class Registry {
     }
 
     _commit(elem, newState, overwrite, replace) {
-        this.state = overwrite ? newState : Object.assign(this.state, newState);
+        this.state = overwrite ? newState : ({ ...this.state, ...newState});
         const resolved = this.urlFromState();
 
         const chs = getSubscribedChannels(elem);
@@ -220,22 +262,46 @@ class Registry {
 
     urlFromState() {
         const newUrl = new URL(window.location.href);
+
+        function setParam(value, param) {
+            if (value === null) {
+                newUrl.searchParams.delete(param);
+            } else if (Array.isArray(value)) {
+                // copy array before mutating it
+                const _v = Array.from(value);
+                // overwrite any previous value by setting the first member
+                newUrl.searchParams.set(param, _v.pop());
+                // add additional values
+                _v.forEach(v => newUrl.searchParams.append(param, v));
+            } else {
+                newUrl.searchParams.set(param, value);
+            }
+        }
+
         for (const [param, value] of Object.entries(this.state)) {
-            if (( param !== 'path' || !this.usePath )
-                    && param !== 'id') {
-                if (value === null) {
-                    newUrl.searchParams.delete(param)
-                } else {
-                    newUrl.searchParams.set(param, value)
+            if (this.urlPattern) {
+                if (!(this._pathParams.has(param) || this.urlIgnore.has(param))) {
+                    setParam(value, param);
                 }
+            } else if (
+                    (param !== 'path' || !this.usePath) && 
+                    (param !== 'id' || !this.idHash) &&
+                    (!this.urlIgnore.has(param))
+            ) {
+                setParam(value, param);
             }
         }
 
-        if (this.usePath && this.state.path && this.state.path.length > 0) {
-            newUrl.pathname = `${this.rootPath}/${this.state.path}`;
+        if (this.state.path && this.state.path.length > 0) {
+            if (this.urlPattern) {
+                const encoded = this._encodePath(this.state);
+                newUrl.pathname = `${this.rootPath}/${encoded}`;
+            } else if (this.usePath) {
+                newUrl.pathname = `${this.rootPath}/${this.state.path}`;
+            }
         }
 
-        if (this.state.id) {
+        if (this.state.id && !this.urlPattern) {
             newUrl.hash = `#${this.state.id}`;
         }