@teipublisher/pb-components 1.44.1 → 2.0.0

package/src/pb-search.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
+import { registry } from "./urls.js";
 import { translate } from "./pb-i18n.js";
 import '@polymer/paper-input/paper-input.js';
 import '@polymer/paper-checkbox';
@@ -31,9 +32,15 @@ export class PbSearch extends pbMixin(LitElement) {
             action: {
                 type: String
             },
+            name: {
+                type: String
+            },
             value: {
                 type: String
             },
+            start: {
+                type: Number
+            },
             placeHolder: {
                 type: String,
                 attribute: 'place-holder'
@@ -61,17 +68,34 @@ export class PbSearch extends pbMixin(LitElement) {
 
     constructor() {
         super();
+        this.name = 'query';
         this.value = '';
         this.redirect = false;
         this.submitOnLoad = false;
         this.placeHolder = 'search.placeholder';
         this.disableAutocomplete = false;
+        this.start = 1;
     }
 
     connectedCallback() {
         super.connectedCallback();
 
         this.subscribeTo('pb-search-resubmit', this._doSearch.bind(this));
+        this.subscribeTo('pb-paginate', (ev) => {
+            this.start = ev.detail.params.start;
+            this._doSearch(true);
+        });
+
+        registry.subscribe(this, (state) => {
+            this.value = state.query || '';
+            this.start = state.start || 1;
+            if (this.submitOnLoad) {
+                this.emitTo('pb-load', {
+                    "url": this.action,
+                    "params": state
+                });
+            }
+        });
     }
 
     firstUpdated() {
@@ -83,7 +107,7 @@ export class PbSearch extends pbMixin(LitElement) {
         ironform.addEventListener('iron-form-response', (event) =>
             event.detail.completes.then((r) => this.emitTo('pb-search', r.parseResponse()))
         );
-        PbSearch.waitOnce('pb-page-ready', (options) => {
+        waitOnce('pb-page-ready', (options) => {
             const loader = this.shadowRoot.getElementById('autocompleteLoader');
             if (this.minApiVersion('1.0.0')) {
                 loader.url = `${options.endpoint}/api/search/autocomplete`;
@@ -93,7 +117,8 @@ export class PbSearch extends pbMixin(LitElement) {
         });
 
         if (this.submitOnLoad) {
-            const params = this.getParameters();
+            const params = registry.state;
+            registry.replace(this, params);
             this.emitTo('pb-load', {
                 "url": this.action,
                 "params": params
@@ -170,16 +195,17 @@ export class PbSearch extends pbMixin(LitElement) {
         `;
     }
 
-    _doSearch() {
+    _doSearch(pagination = false) {
         let json = this.shadowRoot.getElementById('ironform').serializeForm();
         json = this._paramsFromSubforms(json);
+        // remove unnecessary param added by autocomplete
+        delete json['autocomplete-custom-template'];
+        // always start on first result after submitting new search
+        json.start = pagination ? this.start : 1;
         if (this.redirect) {
             window.location.href = `${this.action}?${new URLSearchParams(json)}`;
         } else {
-            this.setParameters(json);
-            this.pushHistory('search');
-            // always start on first result after submitting new search
-            json.start = 1;
+            registry.commit(this, json);
             this.emitTo('pb-load', {
                 "url": this.action,
                 "params": json

package/src/pb-select-feature.js

@@ -1,9 +1,11 @@
 import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from "./pb-i18n.js";
 import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-listbox';
 import '@polymer/paper-item';
+import { registry } from './urls.js';
+import { addSelector } from "./pb-toggle-feature.js";
 
 /**
  * Similar to `pb-toggle-feature` but allows you to choose from a list of defined states instead of a simple
@@ -33,10 +35,13 @@ import '@polymer/paper-item';
  * ```
  * 
  * Each item in the `selectors` property above defines either a state or a command. *state* will simply add
- * a css class `.toggled` to the target element when true. If *command* is set to 'disable', it will entirely disable
+ * a css class `.toggle` to the target element when true. If *command* is set to 'disable', it will entirely disable
  * the functionality of selected elements - provided that they are
  * publisher components implementing the corresponding `command` method of `pb-mixin`.
  * 
+ * Client-side you may also pass an optional property `"global": true` to toggle the state of elements which reside
+ * in the surrounding HTML context below `pb-page` (means: elements which are not inside a `pb-view` or `pb-load`).
+ * 
  * @fires pb-toggle - Fired when a feature is selected from the dropdown and sends the selected properties
  */
 export class PbSelectFeature extends pbMixin(LitElement) {
@@ -74,17 +79,31 @@ export class PbSelectFeature extends pbMixin(LitElement) {
 
     connectedCallback() {
         super.connectedCallback();
-        const param = this.getParameter(this.name);
-        if (typeof param !== 'undefined') {
-            this.selected = parseInt(param, 10);
-        } else if (this.items.length > 0) {
-            this.selected = 0;
-        }
-        this.waitForChannel(() => {
-            if (this.selected && this.selected < this.items.length) {
-                this._emit('init', this.selected);
+
+        waitOnce('pb-page-ready', () => {
+            registry.subscribe(this, (state) => {
+                const param = state[this.name];
+                if (typeof param !== 'undefined') {
+                    this.selected = parseInt(param, 10);
+                } else {
+                    this.selected = 0;
+                }
+                this.shadowRoot.getElementById('list').selected = this.selected;
+            });
+
+            const param = registry.state[this.name];
+            if (typeof param !== 'undefined') {
+                this.selected = parseInt(param, 10);
+            } else if (this.items.length > 0) {
+                this.selected = 0;
             }
-            this.initializing = false;
+
+            this.shadowRoot.getElementById('list').selected = this.selected;
+
+            const newState = {};
+            newState[this.name] = this.selected;
+            registry.replace(this, newState);
+
             this.signalReady();
         });
     }
@@ -92,43 +111,47 @@ export class PbSelectFeature extends pbMixin(LitElement) {
     firstUpdated() {
         super.firstUpdated();
 
-        this.shadowRoot.getElementById('menu').addEventListener('selected-item-changed', this._selectionChanged.bind(this));
+        this.shadowRoot.getElementById('menu').addEventListener('iron-select', this._selectionChanged.bind(this));
     }
 
-    // updated(changedProperties) {
-    //     super.updated();
-    //     if (changedProperties.has('items')) {
-    //         const current = this.shadowRoot.getElementById('list').selectedItem;
-    //         if (!current && this.items.length > 0) {
-    //             this.selected = 0;
-    //             this._emit('refresh');
-    //         }
-    //         console.log('selected: %o', this.selected);
-    //     }
-    // }
-
     _selectionChanged() {
-        const current = this.shadowRoot.getElementById('list').selected;
-        this.setParameter(this.name, current);
-        this.pushHistory('toggle feature ' + this.name);
-        console.log('<pb-select-feature> Setting features: %o', this.items[current]);
-        this._emit('refresh', current);
+        const refresh = this._saveState();
+        if (this.initializing) {
+            this.initializing = false;
+        } else {
+            this.emitTo('pb-toggle', { refresh });
+        }
     }
 
-    _emit(action, index) {
-        const item = this.items[index];
-        const params = {
-            properties: item.properties || {},
-            selectors: item.selectors,
-            action
-        };
-        this.emitTo('pb-toggle', params);
+    _saveState() {
+        const current = this.shadowRoot.getElementById('list').selected;
+
+        const state = registry.getState(this);
+        state[this.name] = current;
+        Object.assign(state, this.items[current].properties);
+        if (this.items[current].selectors) {
+            if (!state.selectors) {
+                state.selectors = [];
+            }
+            this.items[current].selectors.forEach((config) => {
+                if (config.global) {
+                    this.dispatchEvent(new CustomEvent('pb-global-toggle', { detail: config, bubbles: true, composed: true }));
+                } else {
+                    addSelector({
+                        selector: config.selector,
+                        state: config.state,
+                        command: config.command
+                    }, state.selectors);
+                }
+            });
+        }
+        return this.items[current].properties instanceof Object
     }
 
     render() {
         return html`
             <paper-dropdown-menu id="menu" label="${translate(this.label)}" .disabled="${this.disabled}">
-                <paper-listbox id="list" slot="dropdown-content" selected="${this.selected}">
+                <paper-listbox id="list" slot="dropdown-content" .selected="${this.selected}">
                     ${this.items.map((item) => html`<paper-item>${item.name}</paper-item>`)}
                 </paper-listbox>
             </paper-dropdown-menu>

package/src/pb-select-odd.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from './pb-i18n.js';
 import "@polymer/paper-listbox";
 import "@polymer/paper-item";
@@ -7,6 +7,7 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
 import "@polymer/iron-ajax";
 import "web-animations-js";
 import "@polymer/neon-animation";
+import {registry} from "./urls.js";
 
 /**
  * `pb-select-odd`: Switch between available ODDs.
@@ -15,7 +16,7 @@ import "@polymer/neon-animation";
  *
  * @fires pb-refresh - Fires a refresh event to subscribed views after a different ODD has been selected for display.
  * @fires pb-update - When received, resets the ODD selected to the one passed in the event
- * 
+ *
  */
 export class PbSelectOdd extends pbMixin(LitElement) {
     static get properties() {
@@ -58,7 +59,7 @@ export class PbSelectOdd extends pbMixin(LitElement) {
 
     firstUpdated() {
         super.firstUpdated();
-        PbSelectOdd.waitOnce('pb-page-ready', () => {
+        waitOnce('pb-page-ready', () => {
             this._refresh();
         });
     }
@@ -66,7 +67,7 @@ export class PbSelectOdd extends pbMixin(LitElement) {
     render() {
         return html`
             <paper-dropdown-menu id="menu" label="${translate(this.label)}" name="${this.name}">
-                <paper-listbox id="odds" slot="dropdown-content" class="dropdown-content" selected="${this.odd}" 
+                <paper-listbox id="odds" slot="dropdown-content" class="dropdown-content" selected="${this.odd}"
                     attr-for-selected="value" @selected-item-changed="${this._selected}">
                     ${this.odds.map((item) => html`<paper-item value="${item.name}">${item.label}</paper-item>`)}
                 </paper-listbox>
@@ -106,8 +107,8 @@ export class PbSelectOdd extends pbMixin(LitElement) {
         if (doc) {
             doc.odd = this.odd;
         }
-        this.setParameter('odd', this.odd + '.odd');
-        this.pushHistory('changed odd', { odd: this.odd });
+        registry.commit(this,{odd: this.odd});
+
         this.emitTo('pb-refresh', {
             odd: this.odd
         });
@@ -141,4 +142,4 @@ export class PbSelectOdd extends pbMixin(LitElement) {
     }
 
 }
-customElements.define('pb-select-odd', PbSelectOdd);
+customElements.define('pb-select-odd', PbSelectOdd);

package/src/pb-select-template.js

@@ -1,6 +1,8 @@
 import { LitElement, html, css } from 'lit-element';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { translate } from './pb-i18n.js';
+import { registry } from './urls.js';
+
 import "@polymer/paper-listbox";
 import "@polymer/paper-item";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu.js";
@@ -40,7 +42,7 @@ export class PbSelectTemplate extends pbMixin(LitElement) {
     }
 
     firstUpdated() {
-        PbSelectTemplate.waitOnce('pb-page-ready', (options) => {
+        waitOnce('pb-page-ready', (options) => {
             this.template = options.template;
             const loader = this.shadowRoot.getElementById('getTemplates');
             if (this.minApiVersion('1.0.0')) {
@@ -86,8 +88,7 @@ export class PbSelectTemplate extends pbMixin(LitElement) {
         if (newTemplate === this.template) {
             return;
         }
-        this.setParameter('template', newTemplate);
-        window.location = this.getUrl().toString();
+        registry.commit(this, { template: newTemplate });
     }
 
     _handleTemplatesResponse() {

package/src/pb-select.js

@@ -4,7 +4,7 @@ import "@polymer/paper-listbox";
 import "@polymer/paper-item";
 import "@polymer/iron-label/iron-label.js";
 import { translate } from "./pb-i18n.js";
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 
 
 /**
@@ -108,7 +108,7 @@ export class PbSelect extends pbMixin(LitElement) {
                 });
             });
         }
-        PbSelect.waitOnce('pb-page-ready', () => {
+        waitOnce('pb-page-ready', () => {
             this._loadRemote();
         });
     }
@@ -134,33 +134,36 @@ export class PbSelect extends pbMixin(LitElement) {
     }
 
     _loadRemote() {
-        if (this.source) {
-            let url = this.toAbsoluteURL(this.source);
-            if (url.indexOf('?') > -1) {
-                url = `${url}&${this._getParameters()}`;
-            } else {
-                url = `${url}?${this._getParameters()}`;
-            }
-            console.log('<pb-select> loading items from %s', url);
-            fetch(url, {
-                method: 'GET',
-                mode: 'cors',
-                credentials: 'same-origin'
-            })
-                .then((response) => response.json())
-                .then((json) => {
-                    this._clear('slot:not([name])');
-                    const items = [];
-                    json.forEach((item) => {
-                        items.push({label: item.text, value: item.value});
-                    });
-                    console.log('<pb-select> loaded %d items', items.length);
-                    this._items = items;
-                })
-                .catch(() => {
-                    console.error('<pb-select> request to %s failed', url);
-                });
+        if (!this.source) {
+            return // nothing to do
         }
+
+        let url = this.toAbsoluteURL(this.source);
+        url += url.includes('?') ? '&' : '?';
+        url += this._getParameters();
+
+        console.log('<pb-select> loading items from %s', url);
+
+        fetch(url, {
+            method: 'GET',
+            mode: 'cors',
+            credentials: 'same-origin'
+        })
+            .then((response) => response.json())
+            .then((json) => {
+                this._clear('slot:not([name])');
+                const items = json.map(PbSelect.jsonEntry2item);
+                console.log('<pb-select> loaded %d items', items.length);
+                this._items = items;
+            })
+            .catch(() => console.error('<pb-select> request to %s failed', url));
+    }
+
+    static jsonEntry2item (item) {
+        return {
+            label: item.text,
+            value: item.value
+        };
     }
 
     _getParameters() {

package/src/pb-split-list.js

@@ -1,7 +1,7 @@
 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 { themableMixin } from "./theming.js";
+import { registry } from "./urls.js";
 
 /**
  * Implements a list which is split into different categories 
@@ -98,17 +98,20 @@ export class PbSplitList extends themableMixin(pbMixin(LitElement)) {
         this._params = {};
         this.selected = null;
         this.subforms = null;
+        this._initialized = false;
     }
 
     connectedCallback() {
         super.connectedCallback();
 
-        this.selected = this.getParameter('category', this.selected);
-        
-        window.addEventListener('popstate', (ev) => {
-            console.log('<pb-split-list> popstate: %o', ev);
-            this.selected = ev.state.category;
-            this.submit();
+        waitOnce('pb-page-ready', () => {
+            this.selected = registry.state.category || this.selected;
+
+            registry.subscribe(this, (state) => {
+                console.log('<pb-split-list> popstate: %o', state);
+                this.selected = state.category;
+                this.submit();
+            });
         });
 
         this.subscribeTo('pb-submit', this.load.bind(this));
@@ -117,7 +120,7 @@ export class PbSplitList extends themableMixin(pbMixin(LitElement)) {
     firstUpdated() {
         super.firstUpdated();
         
-        PbSplitList.waitOnce('pb-page-ready', () => {
+        waitOnce('pb-page-ready', () => {
             this.load();
         });
     }
@@ -128,8 +131,12 @@ export class PbSplitList extends themableMixin(pbMixin(LitElement)) {
 
     load() {
         const formParams = this._paramsFromSubforms({ category: this.selected });
-        this.setParameters(formParams);
-        this.pushHistory('pb-split-list', formParams);
+        if (!this._initialized) {
+            registry.replace(this, formParams);    
+        } else {
+            registry.commit(this, formParams);
+        }
+        this._initialized = true;
 
         const params = new URLSearchParams(formParams);
 

package/src/pb-table-grid.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit-element';
 import { Grid } from "gridjs";
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 import { loadStylesheets, importStyles } from "./theming.js";
 import '@polymer/paper-input/paper-input';
@@ -8,6 +8,7 @@ import '@polymer/iron-icons';
 import '@polymer/iron-form';
 import '@polymer/paper-icon-button';
 import './pb-table-column.js';
+import { registry } from "./urls.js";
 
 /**
  * A table grid based on [gridjs](https://gridjs.io/), which loads its data from a server endpoint
@@ -100,10 +101,10 @@ export class PbTableGrid extends pbMixin(LitElement) {
             this._submit();
         });
 
-        window.addEventListener('popstate', (ev) => {
-            this._params = ev.state;
+        registry.subscribe(this, (state) => {
+            this._params = state;
             this._submit();
-        });
+        })
 
         if (!this.height) {
             const property = getComputedStyle(this).getPropertyValue('--pb-table-grid-height');
@@ -129,8 +130,8 @@ export class PbTableGrid extends pbMixin(LitElement) {
         const pbColumns = this.querySelectorAll('pb-table-column');
         const columns = [];
         pbColumns.forEach((column) => columns.push(column.data()));
-        PbTableGrid.waitOnce('pb-page-ready', () => {
-            this._params = this.getParameters();
+        waitOnce('pb-page-ready', () => {
+            this._params = registry.state;
             const url = this.toAbsoluteURL(this.source);
             const config = {
                 height: this.height,
@@ -164,8 +165,8 @@ export class PbTableGrid extends pbMixin(LitElement) {
                             }
                             this._params.limit = limit;
                             this._params.start = page * limit + 1;
-                            this.setParameters(this._params);
-                            this.pushHistory('grid', this._params);
+
+                            registry.commit(this, this._params);
 
                             return `${prev}${prev.indexOf('?') > -1 ? '&' : '?'}${new URLSearchParams(this._params).toString()}`;
                         }

package/src/pb-tabs.js

@@ -1,7 +1,8 @@
 import { LitElement, html, css } from 'lit-element';
 import '@polymer/paper-tabs';
 import '@polymer/iron-pages';
-import { pbMixin } from './pb-mixin.js';
+import { pbMixin, waitOnce } from './pb-mixin.js';
+import { registry } from "./urls.js";
 
 
 /**
@@ -18,9 +19,6 @@ export class PbTabs extends pbMixin(LitElement) {
             selected: {
                 type: Number,
                 reflect: true
-            },
-            _initial: {
-                type: Number
             }
         };
     }
@@ -28,21 +26,40 @@ export class PbTabs extends pbMixin(LitElement) {
     constructor() {
         super();
 
-        this._initial = this.getParameter('tab', 0);
-        this.selected = this._initial;
+        this.selected = 0;
+        this._initialized = false;
     }
+    
+    connectedCallback() {
+        super.connectedCallback();
+
+        waitOnce('pb-page-ready', () => {
+            this.selected = registry.state.tab || 0;
+
+            registry.subscribe(this, (state) => {
+                this.selected = state.tab;
+            });
 
-    _switchTab(ev) {
-        this.selected = ev.detail.value;
-        this.setParameter('tab', this.selected);
-        this.pushHistory('browse', {
-            tab: this.selected
         });
     }
 
+    _switchTab(ev) {
+        const current = parseInt(ev.detail.value, 10);
+        if (this.selected === current) {
+            return;
+        }
+        this.selected = current;
+        if (this._initialized) {
+            registry.commit(this, { tab: this.selected });
+        } else {
+            registry.replace(this, { tab: this.selected });
+        }
+        this._initialized = true;
+    }
+
     render() {
         return html`
-            <paper-tabs id="tabs" selected="${this._initial}" @selected-changed="${this._switchTab}">
+            <paper-tabs id="tabs" selected="${this.selected || 0 }" @selected-changed="${this._switchTab}">
                 <slot name="tab"></slot>
             </paper-tabs>
             <iron-pages part="pages" selected="${this.selected}">