@teipublisher/pb-components 1.44.2 → 2.0.0

package/pb-elements.json

@@ -3172,6 +3172,11 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "disable-history",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -3236,6 +3241,12 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "disableHistory",
+          "attribute": "disable-history",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -4753,7 +4764,8 @@
         {
           "name": "panels",
           "description": "an array of panel items to display when the component is loaded. It should contain a\nnumber for each panel to show, indicating the ordinal position of the template within the `<pb-panel>`\nto initialize. For example, if you have two templates in `<pb-panel>`: \"transcription\" and \"translation\",\nsetting `panels=\"[0, 1]\"` will show two columns, one with the transcription, the other with the translation.\n\nPassing in a browser parameter `panels` with a comma-separated list will set this property as well.",
-          "type": "array"
+          "type": "array",
+          "default": "[]"
         },
         {
           "name": "direction",
@@ -4809,7 +4821,8 @@
           "name": "panels",
           "attribute": "panels",
           "description": "an array of panel items to display when the component is loaded. It should contain a\nnumber for each panel to show, indicating the ordinal position of the template within the `<pb-panel>`\nto initialize. For example, if you have two templates in `<pb-panel>`: \"transcription\" and \"translation\",\nsetting `panels=\"[0, 1]\"` will show two columns, one with the transcription, the other with the translation.\n\nPassing in a browser parameter `panels` with a comma-separated list will set this property as well.",
-          "type": "array"
+          "type": "array",
+          "default": "[]"
         },
         {
           "name": "direction",
@@ -7996,6 +8009,11 @@
           "type": "string",
           "default": "\".\""
         },
+        {
+          "name": "url-path",
+          "type": "string",
+          "default": "\"path\""
+        },
         {
           "name": "api-version",
           "type": "string",
@@ -8092,6 +8110,12 @@
           "type": "string",
           "default": "\".\""
         },
+        {
+          "name": "urlPath",
+          "attribute": "url-path",
+          "type": "string",
+          "default": "\"path\""
+        },
         {
           "name": "apiVersion",
           "attribute": "api-version",
@@ -9202,6 +9226,11 @@
           "name": "subforms",
           "type": "string"
         },
+        {
+          "name": "name",
+          "type": "string",
+          "default": "\"query\""
+        },
         {
           "name": "value",
           "type": "string",
@@ -9227,6 +9256,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "start",
+          "type": "number",
+          "default": "1"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -9275,6 +9309,12 @@
           "attribute": "subforms",
           "type": "string"
         },
+        {
+          "name": "name",
+          "attribute": "name",
+          "type": "string",
+          "default": "\"query\""
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -9305,6 +9345,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "start",
+          "attribute": "start",
+          "type": "number",
+          "default": "1"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -9385,7 +9431,7 @@
     {
       "name": "pb-select-feature",
       "path": "./src/pb-select-feature.js",
-      "description": "Similar to `pb-toggle-feature` but allows you to choose from a list of defined states instead of a simple\non/off toggle. Like `pb-toggle-feature` it can change state server-side as well as client-side. \n\nThe list of states is passed as a JSON array to property `items`:\n\n# Server-side\n\nProperties to be passed to the server are specified as follows:\n\n```javascript\n[\n      {\"name\": \"Diplomatic View\", \"properties\": {\"mode\": \"diplomatic\", \"view\": \"page\"}},\n      {\"name\": \"Normalized View\", \"properties\": {\"mode\": \"norm\", \"view\": \"single\"}}\n]\n```\n\n# Client-side\n\n```javascript\n[\n      {\"name\": \"Diplomatic View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": false},{\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\"}]},\n      {\"name\": \"Normalized View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": true},{\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\"}]},\n      {\"name\": \"Plain Reading View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": true}, {\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\", \"state\": true}]}\n]\n```\n\nEach item in the `selectors` property above defines either a state or a command. *state* will simply add\na css class `.toggled` to the target element when true. If *command* is set to 'disable', it will entirely disable\nthe functionality of selected elements - provided that they are\npublisher components implementing the corresponding `command` method of `pb-mixin`.",
+      "description": "Similar to `pb-toggle-feature` but allows you to choose from a list of defined states instead of a simple\non/off toggle. Like `pb-toggle-feature` it can change state server-side as well as client-side. \n\nThe list of states is passed as a JSON array to property `items`:\n\n# Server-side\n\nProperties to be passed to the server are specified as follows:\n\n```javascript\n[\n      {\"name\": \"Diplomatic View\", \"properties\": {\"mode\": \"diplomatic\", \"view\": \"page\"}},\n      {\"name\": \"Normalized View\", \"properties\": {\"mode\": \"norm\", \"view\": \"single\"}}\n]\n```\n\n# Client-side\n\n```javascript\n[\n      {\"name\": \"Diplomatic View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": false},{\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\"}]},\n      {\"name\": \"Normalized View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": true},{\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\"}]},\n      {\"name\": \"Plain Reading View\", \"selectors\": [{\"selector\": \".choice,.choice-alternate,br\", \"state\": true}, {\"selector\": \".tei-foreign,pb-highlight,pb-popover\", \"command\": \"disable\", \"state\": true}]}\n]\n```\n\nEach item in the `selectors` property above defines either a state or a command. *state* will simply add\na css class `.toggle` to the target element when true. If *command* is set to 'disable', it will entirely disable\nthe functionality of selected elements - provided that they are\npublisher components implementing the corresponding `command` method of `pb-mixin`.\n\nClient-side you may also pass an optional property `\"global\": true` to toggle the state of elements which reside\nin the surrounding HTML context below `pb-page` (means: elements which are not inside a `pb-view` or `pb-load`).",
       "attributes": [
         {
           "name": "name",
@@ -9511,6 +9557,9 @@
         {
           "name": "pb-toggle",
           "description": "Fired when a feature is selected from the dropdown and sends the selected properties"
+        },
+        {
+          "name": "pb-global-toggle"
         }
       ]
     },
@@ -10363,7 +10412,7 @@
         {
           "name": "selected",
           "type": "number",
-          "default": "\"_initial\""
+          "default": "0"
         },
         {
           "name": "subscribe",
@@ -10402,7 +10451,7 @@
           "name": "selected",
           "attribute": "selected",
           "type": "number",
-          "default": "\"_initial\""
+          "default": "0"
         },
         {
           "name": "subscribe",
@@ -10733,16 +10782,6 @@
           "description": "(optional) CSS selector: selects the elements to toggle client side (sets or unsets a \nCSS class `.toggled`). Setting this property will not trigger a reload as everything is\nhandled by javascript.",
           "type": "string"
         },
-        {
-          "name": "on",
-          "description": "Value to set the parameter to when the feature is enabled.",
-          "type": "string"
-        },
-        {
-          "name": "off",
-          "description": "Value to set the parameter to when the feature is disabled.",
-          "type": "string"
-        },
         {
           "name": "checked",
           "type": "boolean"
@@ -10753,6 +10792,18 @@
           "type": "string",
           "default": "\"on\""
         },
+        {
+          "name": "on",
+          "description": "Value to set the parameter to when the feature is enabled.",
+          "type": "string",
+          "default": "\"on\""
+        },
+        {
+          "name": "off",
+          "description": "Value to set the parameter to when the feature is disabled.",
+          "type": "string",
+          "default": "\"off\""
+        },
         {
           "name": "action",
           "description": "In combination with a selector specifies the action to be taken, currently one of\n`toggle` (default) or `disable`.",
@@ -10822,18 +10873,6 @@
           "description": "(optional) CSS selector: selects the elements to toggle client side (sets or unsets a \nCSS class `.toggled`). Setting this property will not trigger a reload as everything is\nhandled by javascript.",
           "type": "string"
         },
-        {
-          "name": "on",
-          "attribute": "on",
-          "description": "Value to set the parameter to when the feature is enabled.",
-          "type": "string"
-        },
-        {
-          "name": "off",
-          "attribute": "off",
-          "description": "Value to set the parameter to when the feature is disabled.",
-          "type": "string"
-        },
         {
           "name": "checked",
           "attribute": "checked",
@@ -10846,6 +10885,20 @@
           "type": "string",
           "default": "\"on\""
         },
+        {
+          "name": "on",
+          "attribute": "on",
+          "description": "Value to set the parameter to when the feature is enabled.",
+          "type": "string",
+          "default": "\"on\""
+        },
+        {
+          "name": "off",
+          "attribute": "off",
+          "description": "Value to set the parameter to when the feature is disabled.",
+          "type": "string",
+          "default": "\"off\""
+        },
         {
           "name": "action",
           "attribute": "action",
@@ -10938,6 +10991,12 @@
           "description": "a comma-separated list of file suffixes to accept for upload\n(by default: .xml,.tei,.odd,.docx)",
           "type": "string"
         },
+        {
+          "name": "event",
+          "description": "the event to emit when the upload has completed (default: 'pb-load')",
+          "type": "string",
+          "default": "\"pb-load\""
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -10983,6 +11042,13 @@
           "description": "a comma-separated list of file suffixes to accept for upload\n(by default: .xml,.tei,.odd,.docx)",
           "type": "string"
         },
+        {
+          "name": "event",
+          "attribute": "event",
+          "description": "the event to emit when the upload has completed (default: 'pb-load')",
+          "type": "string",
+          "default": "\"pb-load\""
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",

package/src/dts-client.js

@@ -1,6 +1,8 @@
 import { LitElement, html, css } from 'lit-element';
 import { pbMixin } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
+import { translate } from './pb-i18n.js';
+import { registry } from './urls.js';
+
 import '@polymer/iron-ajax';
 import '@polymer/iron-icon';
 import '@polymer/iron-icons';
@@ -61,8 +63,8 @@ export class DtsClient extends pbMixin(LitElement) {
     connectedCallback() {
         super.connectedCallback();
 
-        this.collection = this.getParameter('id');
-        this.page = this.getParameter('page');
+        this.collection = registry.state.id;
+        this.page = registry.state.page;
 
         this.subscribeTo('dts-endpoint', (ev) => {
             this._setEndpoint(ev.detail.endpoint, ev.detail.collection, ev.detail.reload);
@@ -163,19 +165,16 @@ export class DtsClient extends pbMixin(LitElement) {
 
     _update() {
         this.emitTo('pb-start-update');
-        const params = {};
+        const newState = {};
         if (this.collection) {
-            params.id = this.collection;
-
-            this.setParameter('id', this.collection);
-        };
+            newState.id = this.collection;
+        }
         if (this.page) {
-            params.page = this.page + 1;
-            this.setParameter('page', this.page);
+            newState.page = this.page + 1;
         }
-        this.pushHistory('dts-client-navigate');
+        registry.commit(this, newState);
 
-        this.queryAPI.params = params;
+        this.queryAPI.params = newState;
         this.queryAPI.url = this._collectionEndpoint;
         this.queryAPI.generateRequest();
     }
@@ -205,7 +204,8 @@ export class DtsClient extends pbMixin(LitElement) {
         const json = this.documentsAPI.lastResponse;
         this.emitTo('pb-end-update');
         const url = new URL(json.path, window.location.href);
-        window.location = url;
+        // use registry here?
+        window.location.replace(url);
     }
 
     _handleError(ev) {
@@ -284,7 +284,7 @@ export class DtsClient extends pbMixin(LitElement) {
     }
 
     _renderMember(member) {
-        if (member['@type'] == 'Collection') {
+        if (member['@type'] === 'Collection') {
             return html`
                 <iron-icon icon="icons:folder-open"></iron-icon>
                 <div class="details">

package/src/dts-select-endpoint.js

@@ -1,6 +1,8 @@
 import { LitElement, html, css } from 'lit-element';
 import { pbMixin } from './pb-mixin.js';
-import { translate } from "./pb-i18n.js";
+import { translate } from './pb-i18n.js';
+import { registry } from './urls.js';
+
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-listbox';
 import '@polymer/paper-item';
@@ -53,8 +55,7 @@ export class DtsSelectEndpoint extends pbMixin(LitElement) {
 
     connectedCallback() {
         super.connectedCallback();
-
-        this.endpoint = this.getParameter('endpoint');
+        this.endpoint = registry.state.endpoint;
     }
 
     updated(changedProperties) {
@@ -96,8 +97,7 @@ export class DtsSelectEndpoint extends pbMixin(LitElement) {
             return;
         }
         const endpoint = this.endpoints.find((endp) => endp.url === newEndpoint);
-        this.setParameter('endpoint', endpoint.url);
-        this.pushHistory('dts-endpoint');
+        registry.commit(this, { endpoint: endpoint.url });
         console.log('<dts-select-endpoint> Setting endpoint to %s', newEndpoint);
         this.emitTo('dts-endpoint', {
             endpoint: endpoint.url,

package/src/pb-ajax.js

@@ -121,8 +121,8 @@ export class PbAjax extends pbMixin(LitElement) {
         if (this.confirm) {
             const dialog = this.shadowRoot.getElementById('confirmDialog');
             dialog.confirm(this._dialogTitle, i18n(this.confirm))
-            .then(() => this.trigger())
-            .catch(() => console.log('<pb-ajax> Action cancelled'));
+                .then(() => this.trigger())
+                .catch(() => console.log('<pb-ajax> Action cancelled'));
         } else {
             this.trigger();
         }
@@ -161,8 +161,8 @@ export class PbAjax extends pbMixin(LitElement) {
         } else {
             this._message = msg;
         }
-        const dialog = this.shadowRoot.getElementById('messageDialog');
-        dialog.open();
+        const dialog = this.shadowRoot.getElementById('confirmDialog');
+        dialog.show(i18n('dialogs.error'), this._message);
         this.emitTo('pb-end-update');
     }
 

package/src/pb-authority-lookup.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
 import { createConnectors } from "./authority/connectors.js";
 import '@polymer/paper-input/paper-input';
@@ -66,7 +66,7 @@ export class PbAuthorityLookup extends pbMixin(LitElement) {
         this._query();
     });
 
-    PbAuthorityLookup.waitOnce('pb-page-ready', () => {
+    waitOnce('pb-page-ready', () => {
       const connectors = createConnectors(this.getEndpoint(), this);
       connectors.forEach(connector => { this._authorities[connector.register] = connector });
     });

package/src/pb-autocomplete.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin';
+import { pbMixin, waitOnce } from './pb-mixin';
 import { translate } from './pb-i18n';
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/iron-ajax';
@@ -140,12 +140,12 @@ export class PbAutocomplete extends pbMixin(LitElement) {
             if (this.substring) {
                 autocomplete.queryFn = _query;
             }
-            PbAutocomplete.waitOnce('pb-page-ready', () => {
+            waitOnce('pb-page-ready', () => {
                 this._sendRequest();
             });
         } else if (this.value) {
             if (this.source) {
-                PbAutocomplete.waitOnce('pb-page-ready', () => {
+                waitOnce('pb-page-ready', () => {
                     //console.log('send autocomplete request for remote source %s on value %s', this.source, this.value);
                     this._sendRequest(this.value);
                 });
@@ -233,7 +233,7 @@ export class PbAutocomplete extends pbMixin(LitElement) {
         loader.url = this.toAbsoluteURL(this.source);
 
         const params = this._getParameters();
-        params['query'] = query;
+        params.query = query;
         loader.params = params;
         //console.log('send request for %s with %o', loaderId, params);
 
@@ -286,18 +286,16 @@ export class PbAutocomplete extends pbMixin(LitElement) {
     }
 
     _autocompleteSelected(ev) {
-        this.lastSelected = ev.detail.text;
+        const { text, value } = ev.detail;
+        this.lastSelected = text;
         const input = this.shadowRoot.getElementById('search');
-        input.value = ev.detail.text;
-        this.value = ev.detail.value;
+        input.value = text;
+        this.value = value;
         if (this._hiddenInput) {
             this._hiddenInput.value = this.value;
         }
 
-        this.emitTo('pb-autocomplete-selected', {
-            text: ev.detail.text,
-            value: ev.detail.value
-        });
+        this.emitTo('pb-autocomplete-selected', { text, value });
     }
 
     _setInput(ev) {

package/src/pb-blacklab-highlight.js

@@ -1,5 +1,5 @@
-import {LitElement, html, css} from 'lit-element';
-import {pbMixin} from './pb-mixin.js';
+import { LitElement, html, css } from 'lit-element';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 
 /**
  * This component queries the blacklab API of TEI-Publisher for a list of text matches
@@ -108,7 +108,7 @@ export class PbBlacklabHighlight extends pbMixin(LitElement) {
          * waiting for the page to be ready before storing a reference to the shadowDOM of the view element this
          * component is attached to via the 'view' attribute.
          */
-        PbBlacklabHighlight.waitOnce('pb-page-ready', () => {
+        waitOnce('pb-page-ready', () => {
             this.viewElement = document.getElementById(this.view);
             if (!this.viewElement) {
                 console.error(`${this}: view element with id ${this.view} does not exist`);

package/src/pb-browse-docs.js

@@ -1,7 +1,11 @@
 import { html, css } from 'lit-element';
 import { PbLoad } from './pb-load.js';
+import { waitOnce } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
 import { themableMixin } from "./theming.js";
+import { cmpVersion } from './utils.js';
+import { registry } from "./urls.js";
+
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/paper-button';
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
@@ -10,7 +14,6 @@ import '@polymer/paper-dialog';
 import '@polymer/paper-dialog-scrollable';
 import '@polymer/iron-ajax';
 import '@cwmr/paper-autocomplete/paper-autocomplete-suggestions.js';
-import { cmpVersion } from './utils.js';
 
 /**
  * Component to browse through a collection of documents with sorting, filtering and facets.
@@ -135,21 +138,43 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
     connectedCallback() {
         super.connectedCallback();
 
-        const sortParam = this.getParameter('sort');
-        if (sortParam) {
-            this.sortBy = sortParam;
-        }
+        waitOnce('pb-page-ready', () => {
+            if (registry.state.sort) {
+                this.sortBy = registry.state.sort;
+            }
 
-        const filterParam = this.getParameter('filter');
-        if (filterParam) {
-            this.filter = filterParam;
-            this.filterBy = this.getParameter('filterBy', this.filterBy);
-        }
+            if (registry.state.filter) {
+                this.filter = registry.state.filter;
+                this.filterBy = registry.state.filterBy || this.filterBy;
+            }
 
-        this.facets = this.getParametersMatching(/^facet-.*$/);
+            this.facets = {};
+            // registry get state by regex
+            // this.facets = registry.getParametersMatching(this, /^facet-.*$/)
+            Object.keys(registry.state).forEach((key) => {
+                if (/^facet-.*$/.test(key)) {
+                    const param = registry.state[key];
+                    if (this.facets[key]) {
+                        this.facets[key].push(param);
+                    } else {
+                        this.facets[key] = [param];
+                    }
+                }
+            });
 
-        this.collection = this.getParameter('collection');
+            this.collection = registry.state.collection;
 
+            if (this.collection) {
+                registry.replace(this, {
+                    collection: this.collection
+                });
+            }
+            registry.subscribe(this, (state) => {
+                this.collection = state.collection;
+                this.load();
+            });
+        });
+        
         this.subscribeTo('pb-search-resubmit', this._facets.bind(this));
         this.subscribeTo('pb-login', (ev) => {
             if (ev.detail.userChanged) {
@@ -171,7 +196,7 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
     }
 
     firstUpdated() {
-        PbBrowseDocs.waitOnce('pb-page-ready', (options) => {
+        waitOnce('pb-page-ready', (options) => {
             const loader = this.shadowRoot.getElementById('autocompleteLoader');
             if (cmpVersion(options.apiVersion, '1.0.0') >= 0) {
                 loader.url = `${options.endpoint}/api/search/autocomplete`;
@@ -384,10 +409,7 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
         if (typeof filter !== 'undefined') {
             console.log('<pb-browse-docs> Filter by %s', filter);
             this.filter = filter;
-            this.setParameter('filter', filter);
-            this.setParameter('filterBy', filterBy);
-            this.pushHistory('filter docs');
-
+            registry.commit(this, { filter, filterBy })
             this.load();
         }
     }
@@ -405,8 +427,7 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
         if (sortBy && sortBy !== this.sortBy) {
             console.log('<pb-browse-docs> Sorting by %s', sortBy);
             this.sortBy = sortBy;
-            this.setParameter('sort', sortBy);
-            this.pushHistory('sort docs');
+            registry.commit(this, { sort: sortBy })
 
             this.load();
         }
@@ -414,13 +435,10 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
 
     _facets(ev) {
         if (ev.detail && ev.detail.params) {
-            this.clearParametersMatching(/^(all-|facet-).*/);
-            for (let param in ev.detail.params) {
-                this.setParameter(param, ev.detail.params[param]);
-            }
+            registry.clearParametersMatching(this, /^(all-|facet-).*/);
             this.facets = ev.detail.params;
             this.start = 1;
-            this.pushHistory('facets');
+            registry.commit(this, ev.detail.params)
         }
         this.load();
     }
@@ -442,8 +460,7 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
                 ev.preventDefault();
                 this.collection = link.getAttribute('data-collection');
                 this.start = 1;
-                this.setParameter('collection', this.collection);
-                this.pushHistory('browse collection');
+                registry.commit(this, { collection: this.collection });
                 console.log('<pb-browse-docs> loading collection %s', this.collection);
                 this.load();
             });
@@ -513,7 +530,7 @@ export class PbBrowseDocs extends themableMixin(PbLoad) {
     }
 
     _handleEnter(e) {
-        if (e.keyCode == 13) {
+        if (e.keyCode === 13) {
             this._filter();
         }
     }

package/src/pb-browse.js

@@ -1,4 +1,6 @@
 import { PbLoad } from './pb-load.js';
+import { registry } from './urls.js';
+import { waitOnce } from "./pb-mixin.js";
 
 /**
  * Extends PbLoad to support browsing collections.
@@ -37,7 +39,10 @@ export class PbBrowse extends PbLoad {
 
     connectedCallback() {
         super.connectedCallback();
-        this.collection = this.getParameter('collection');
+        waitOnce('pb-page-ready', () => {
+            this.collection = registry.state.collection;
+            registry.subscribe(this, (state) => { this.collection = state.collection; });
+        });
     }
 
     getURL(params) {
@@ -66,8 +71,9 @@ export class PbBrowse extends PbLoad {
                 ev.preventDefault();
                 this.collection = link.getAttribute('data-collection');
                 this.start = 1;
-                this.setParameter('collection', this.collection);
-                this.pushHistory('browse collection');
+                if (this.history) {
+                    registry.commit(this, { collection: this.collection });
+                }
                 console.log('<pb-browse> loading collection %s', this.collection);
                 this.emitTo('pb-search-resubmit');
             });

package/src/pb-combo-box.js

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit-element';
 import TomSelect from "tom-select";
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 
 function importTheme(theme) {
@@ -114,7 +114,7 @@ export class PbComboBox extends pbMixin(LitElement) {
         }
         input.autocomplete = false;
 
-        PbComboBox.waitOnce('pb-page-ready', () => {
+        waitOnce('pb-page-ready', () => {
             const options = {};
             if (this.source) {
                 const url = this.toAbsoluteURL(this.source);