@teipublisher/pb-components 2.6.1 → 2.8.0

package/src/pb-split-list.js

@@ -131,7 +131,10 @@ export class PbSplitList extends themableMixin(pbMixin(LitElement)) {
     }
 
     load() {
-        const formParams = this._paramsFromSubforms({ category: this.selected });
+        const formParams = this._paramsFromSubforms({});
+        if (this.selected) {
+            formParams.category = this.selected;
+        }
         if (!this._initialized) {
             registry.replace(this, formParams);    
         } else {

package/src/pb-view.js

@@ -321,6 +321,9 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
                 type: Node,
                 attribute: false
             },
+            _additionalParams: {
+                type: Object
+            },
             ...super.properties
         };
     }
@@ -341,6 +344,7 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         this.beforeUpdate = null;
         this.noScroll = false;
         this._features = {};
+        this._additionalParams = {};
         this._selector = {};
         this._chunks = [];
         this._scrollTarget = null;
@@ -436,8 +440,8 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         this.signalReady();
 
         if (this.onUpdate) {
-            this.subscribeTo('pb-update', () => {
-                this._refresh();
+            this.subscribeTo('pb-update', (ev) => {
+                this._refresh(ev);
             });
         }
     }
@@ -587,6 +591,13 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
             } else {
                 this.nodeId = ev.detail.root || this.nodeId;
             }
+
+            // check if the URL template needs any other parameters
+            // and set them on this._additionalParams
+            registry.pathParams.forEach((key) => {
+                this._additionalParams[key] = ev.detail[key];
+            });
+
             if (!this.noScroll) {
                 this._scrollTarget = ev.detail.hash;
             }
@@ -994,6 +1005,12 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
         for (const [key, value] of Object.entries(this._features)) {
             params['user.' + key] = value;
         }
+        // add parameters for user-defined parameters supplied via pb-link
+        if (this._additionalParams) {
+            for (const [key, value] of Object.entries(this._additionalParams)) {
+                params[key] = value;
+            }
+        }
         return params;
     }
 
@@ -1162,18 +1179,24 @@ export class PbView extends themableMixin(pbMixin(LitElement)) {
 
     _setState(properties) {
         for (const [key, value] of Object.entries(properties)) {
-            switch (key) {
-                case 'odd':
-                case 'view':
-                case 'columnSeparator':
-                case 'xpath':
-                case 'nodeId':
-                case 'path':
-                case 'root':
-                    break;
-                default:
-                    this._features[key] = value;
-                    break;
+            // check if URL template needs the parameter and if
+            // yes, add it to the additional parameter list
+            if (registry.pathParams.has(key)) {
+                this._additionalParams[key] = value;
+            } else {
+                switch (key) {
+                    case 'odd':
+                    case 'view':
+                    case 'columnSeparator':
+                    case 'xpath':
+                    case 'nodeId':
+                    case 'path':
+                    case 'root':
+                        break;
+                    default:
+                        this._features[key] = value;
+                        break;
+                }
             }
         }
         if (properties.odd && !this.getAttribute('odd')) {

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,58 @@ 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) {
+                // check if param should be ignored or is required by the URL template
+                // fill up missing parameters by stripping potential "user." prefix
+                const normParam = param.replace(/^(?:user\.)?(.*)$/, '$1');
+                if (!(this.pathParams.has(normParam) || this.urlIgnore.has(normParam))) {
+                    setParam(value, normParam);
                 }
+            } 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) {
+                // path parameters should not be the empty string
+                const normState = {};
+                for (const [key, value] of Object.entries(this.state)) {
+                    if (this.pathParams.has(key) && value === '') {
+                        normState[key] = null;
+                    } else {
+                        normState[key] = value;
+                    }
+                }
+                const encoded = this._encodePath(normState);
+                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}`;
         }