@teipublisher/pb-components 1.30.4 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.30.4",
+  "version": "1.31.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",

package/pb-elements.json

@@ -2249,8 +2249,13 @@
     {
       "name": "pb-custom-form",
       "path": "./src/pb-custom-form.js",
-      "description": "A custom form element which loads the actual form from a server-side script using AJAX.\nEmits a `pb-search-resubmit` event when the form is submitted, signalling `pb-search` that\na search should be redone using the parameters passed.\n\nThe component is currently used to implement the additional search facets on the start page and\nsearch result page.",
+      "description": "A custom form element which loads the actual form from a server-side script using AJAX.\nEmits `pb-search-resubmit` and `pb-submit` events, signalling the receiver that it should\nrefresh.\n\nThe component is currently used to implement the additional search facets on the start and\nsearch result page. It can also be combined with `pb-split-list` to contain an additional form\nwith options.",
       "attributes": [
+        {
+          "name": "auto-submit",
+          "description": "Register event handlers on all inputs and submit the form\nautomatically if any of those changes. For button-like controls,\na submit is triggered on click, for text input on keyUp, and for\nall other form components on change.",
+          "type": "string"
+        },
         {
           "name": "url",
           "description": "The URL for the AJAX request. If a relative URL is passed, it will be resolved\nagainst the current API endpoint.",
@@ -2345,6 +2350,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "autoSubmit",
+          "attribute": "auto-submit",
+          "description": "Register event handlers on all inputs and submit the form\nautomatically if any of those changes. For button-like controls,\na submit is triggered on click, for text input on keyUp, and for\nall other form components on change.",
+          "type": "string"
+        },
         {
           "name": "url",
           "attribute": "url",
@@ -2466,7 +2477,16 @@
       ],
       "events": [
         {
-          "name": "pb-custom-form-loaded"
+          "name": "pb-custom-form-loaded",
+          "description": "Fired before the element updates its content"
+        },
+        {
+          "name": "pb-search-resubmit",
+          "description": "Fired when the form is submitted"
+        },
+        {
+          "name": "pb-submit",
+          "description": "Fired when the form is submitted"
         },
         {
           "name": "pb-start-update",
@@ -8852,6 +8872,136 @@
         }
       ]
     },
+    {
+      "name": "pb-split-list",
+      "path": "./src/pb-split-list.js",
+      "description": "Implements a list which is split into different categories \n(e.g. letters of the alphabet, countries ...).\nOnly one category is shown at a time unless the server reports\nno categories (e.g. if the number of items to display goes below\na defined threshold).\n\nThe server-side API endpoint should return a JSON object with two\nproperties:\n\n+ `categories`: an array of category descriptions: each item should \n  be an object with two properties: `category` - containing the name of the category\n  and `count` - containing a count of items available under this category.\n+ `items`: an array with the items to be shown for the currently selected\n  category. Those may contain HTML markup.",
+      "attributes": [
+        {
+          "name": "url",
+          "description": "Server-side API endpoint to retrieve items from",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "The initially selected category",
+          "type": "string"
+        },
+        {
+          "name": "subforms",
+          "description": "A CSS selector pointing to one or more `pb-custom-form`\ninstances. The element will collect additional parameters\nfrom those forms and includes them in the request to the server",
+          "type": "string"
+        },
+        {
+          "name": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "url",
+          "attribute": "url",
+          "description": "Server-side API endpoint to retrieve items from",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "The initially selected category",
+          "type": "string"
+        },
+        {
+          "name": "subforms",
+          "attribute": "subforms",
+          "description": "A CSS selector pointing to one or more `pb-custom-form`\ninstances. The element will collect additional parameters\nfrom those forms and includes them in the request to the server",
+          "type": "string"
+        },
+        {
+          "name": "subscribe",
+          "attribute": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribeConfig",
+          "attribute": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "attribute": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emitConfig",
+          "attribute": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "waitFor",
+          "attribute": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "pb-submit",
+          "description": "when received, submit a request to the server and refresh"
+        },
+        {
+          "name": "pb-start-update",
+          "description": "sent before the element sends the request to the server"
+        },
+        {
+          "name": "pb-end-update",
+          "description": "sent after new content has been received"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--pb-categorized-list-columns",
+          "description": "the number of columns to display (default: 2)"
+        }
+      ]
+    },
     {
       "name": "pb-svg",
       "path": "./src/pb-svg.js",

package/src/pb-components.js

@@ -57,6 +57,7 @@ import './pb-message.js';
 import './pb-blacklab-results.js';
 import './pb-blacklab-highlight.js';
 import './pb-table-grid.js';
+import './pb-split-list.js';
 
 import '@polymer/iron-icons/editor-icons';
 import '@polymer/iron-icons/social-icons';

package/src/pb-custom-form.js

@@ -7,14 +7,16 @@ import { PbLoad } from './pb-load.js';
 
 /**
  * A custom form element which loads the actual form from a server-side script using AJAX.
- * Emits a `pb-search-resubmit` event when the form is submitted, signalling `pb-search` that
- * a search should be redone using the parameters passed.
+ * Emits `pb-search-resubmit` and `pb-submit` events, signalling the receiver that it should
+ * refresh.
  *
- * The component is currently used to implement the additional search facets on the start page and
- * search result page.
+ * The component is currently used to implement the additional search facets on the start and
+ * search result page. It can also be combined with `pb-split-list` to contain an additional form
+ * with options.
  *
- * @customElement
- * @polymer
+ * @fires pb-custom-form-loaded - Fired before the element updates its content
+ * @fires pb-search-resubmit - Fired when the form is submitted
+ * @fires pb-submit - Fired when the form is submitted
  */
 export class PbCustomForm extends PbLoad {
 
@@ -34,6 +36,8 @@ export class PbCustomForm extends PbLoad {
                 this._reset();
             }
         });
+
+        this._submissionHandlers();
     }
 
     render() {
@@ -81,7 +85,8 @@ export class PbCustomForm extends PbLoad {
 
     _submit() {
         const json = this.serializeForm();
-        this.emitTo('pb-search-resubmit', { 'params': json });
+        this.emitTo('pb-search-resubmit', { params: json });
+        this.emitTo('pb-submit', { params: json});
     }
 
     _reset(){
@@ -102,6 +107,43 @@ export class PbCustomForm extends PbLoad {
         this.dispatchEvent(new CustomEvent('pb-custom-form-loaded', { detail: content }));
     }
 
+    _submissionHandlers() {
+        if (!this.autoSubmit) {
+            return;
+        }
+        this.querySelectorAll(this.autoSubmit).forEach((control) => {
+            const name = control.nodeName.toLowerCase();
+            let event = 'change';
+            if (control instanceof HTMLButtonElement ||
+                name === 'paper-icon-button' || name === 'paper-button' ||
+                (name === 'input' && (control.type === 'button' || control.type === 'submit' || control.type === 'reset'))
+            ) {
+                event = 'click';
+            } else if (name === 'paper-input' || (control instanceof HTMLInputElement && control.type === 'text')) {
+                event = 'keyup';
+            } else if (name === 'paper-dropdown-menu') {
+                event = 'value-changed';
+            }
+            control.addEventListener(event, this._submit.bind(this));
+        });
+    }
+
+    static get properties() {
+        return {
+            /**
+             * Register event handlers on all inputs and submit the form
+             * automatically if any of those changes. For button-like controls,
+             * a submit is triggered on click, for text input on keyUp, and for
+             * all other form components on change.
+             */
+            autoSubmit: {
+                type: String,
+                attribute: 'auto-submit'
+            },
+            ...super.properties
+        };
+    }
+
     /**
      * Fired before the element updates its content
      *

package/src/pb-leaflet-map.js

@@ -142,10 +142,12 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                 });
             });
             // this._map.invalidateSize();
-            if (locations.length >= 1) {
-                this._map.fitBounds(bounds);
-            } else {
+            if (locations.length === 0) {
                 this._map.fitWorld();
+            } else if (locations.length === 1) {
+                this._map.fitBounds(bounds, {maxZoom: this.zoom});
+            } else {
+                this._map.fitBounds(bounds);
             }
         });
 

package/src/pb-split-list.js

@@ -0,0 +1,196 @@
+import { LitElement, html, css } from 'lit-element';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { pbMixin } from './pb-mixin.js';
+
+/**
+ * Implements a list which is split into different categories 
+ * (e.g. letters of the alphabet, countries ...).
+ * Only one category is shown at a time unless the server reports
+ * no categories (e.g. if the number of items to display goes below
+ * a defined threshold).
+ *
+ * The server-side API endpoint should return a JSON object with two
+ * properties:
+ * 
+ * + `categories`: an array of category descriptions: each item should 
+ *  be an object with two properties: `category` - containing the name of the category
+ *  and `count` - containing a count of items available under this category.
+ * + `items`: an array with the items to be shown for the currently selected
+ *  category. Those may contain HTML markup.
+ * 
+ * @cssprop --pb-categorized-list-columns - the number of columns to display (default: 2)
+ * @fires pb-submit - when received, submit a request to the server and refresh
+ * @fires pb-start-update - sent before the element sends the request to the server
+ * @fires pb-end-update - sent after new content has been received
+ */
+export class PbSplitList extends pbMixin(LitElement) {
+    static get properties() {
+        return {
+            /**
+             * Server-side API endpoint to retrieve items from
+             */
+            url: {
+                type: String
+            },
+            /**
+             * The initially selected category
+             */
+            selected: {
+                type: String
+            },
+            /**
+             * A CSS selector pointing to one or more `pb-custom-form`
+             * instances. The element will collect additional parameters
+             * from those forms and includes them in the request to the server
+             */
+            subforms: {
+                type: String
+            },
+            _categories: {
+                type: Array
+            },
+            _items: {
+                type: Array
+            },
+            ...super.properties
+        };
+    }
+
+    constructor() {
+        super();
+        this._categories = [];
+        this._items = [];
+        this._params = {};
+        this.selected = null;
+        this.subforms = null;
+    }
+
+    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();
+        });
+
+        this.subscribeTo('pb-submit', this.load.bind(this));
+    }
+
+    firstUpdated() {
+        super.firstUpdated();
+        
+        PbSplitList.waitOnce('pb-page-ready', () => {
+            this.load();
+        });
+    }
+
+    submit() {
+        this.load();
+    }
+
+    load() {
+        const formParams = this._paramsFromSubforms({ category: this.selected });
+        this.setParameters(formParams);
+        this.pushHistory('pb-split-list', formParams);
+
+        const params = new URLSearchParams(formParams);
+
+        const url = `${this.toAbsoluteURL(this.url)}?${params.toString()}`;
+        console.log(`<pb-split-list> Fetching from URL: ${url}`);
+
+        this.emitTo('pb-start-update');
+
+        fetch(url)
+        .then((response) => {
+            if (response.ok) {
+                return response.json();
+            }
+            return Promise.reject(response.status);
+        })
+        .then((json) => {
+            this._categories = json.categories;
+            this._items = json.items;
+            this.emitTo('pb-end-update');
+        })
+        .catch((error) => {
+            console.error(`<pb-split-list> Error caught: ${error}`);
+            this.emitTo('pb-end-update');
+        });
+    }
+
+    _selectCategory(ev, category) {
+        ev.preventDefault();
+        this.selected = category;
+        this.load();
+    }
+
+    _paramsFromSubforms(params) {
+        if (this.subforms) {
+            document.querySelectorAll(this.subforms).forEach((form) => {
+                if (form.serializeForm) {
+                    Object.assign(params, form.serializeForm());
+                }
+            });
+        }
+        return params;
+    }
+
+    render() {
+        return html`
+            <header>
+            ${
+                this._categories.map((cat) =>
+                    html`
+                        <a part="${this.selected === cat.category ? 'active-category' : 'category'}" href="#${cat.category}" title="${cat.count}" class="${this.selected === cat.category ? 'active' : ''}"
+                            @click="${(ev) => this._selectCategory(ev, cat.category)}">
+                            ${cat.category}
+                        </a>
+                    `
+                )
+            }
+            </header>
+            <div id="items" part="items">
+            ${
+                this._items.map((item) => html`<div part="item">${unsafeHTML(item)}</div>`)
+            }
+            </div>
+        `;
+    }
+
+    static get styles() {
+        return css`
+            :host {
+                display: block;
+            }
+
+            header {
+                display: grid;
+                grid-auto-flow: column;
+                width: 100%;
+                column-gap: 10px;
+            }
+
+            #items {
+                display: grid;
+                grid-template-columns: repeat(var(--pb-categorized-list-columns, 2), auto);
+                grid-auto-rows: 1fr;
+                column-gap: 10px;
+                width: 100%;
+            }
+
+            [part=category], #items a {
+                text-decoration: none;
+                color: var(--pb-link-color);
+            }
+
+            [part=active-category] {
+                text-decoration: none;
+                color: var(--pb-highlight-color);
+            }
+        `;
+    }
+}
+customElements.define('pb-split-list', PbSplitList);