@teipublisher/pb-components 2.6.1 → 2.7.0

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