@teipublisher/pb-components 1.30.3 → 1.32.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.30.3",
+  "version": "1.32.1",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",
@@ -76,6 +76,7 @@
     "i18next-xhr-backend": "^3.2.2",
     "js-cookie": "^2.2.1",
     "leaflet": "^1.7.1",
+    "leaflet.markercluster": "^1.5.3",
     "lit-element": "latest",
     "lit-html": "^1.3.0",
     "marked": "^1.2.0",

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",
@@ -3735,9 +3755,21 @@
         },
         {
           "name": "event",
+          "description": "Name of the event which triggers a pb-geolocation event, e.g. 'click'.\nDefault is 'mouseover'.",
           "type": "string",
           "default": "\"mouseover\""
         },
+        {
+          "name": "auto",
+          "description": "If set, add location to a map automatically upon load by\nemitting an event. If not set, locations are only added when\nthe configured event is triggered.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "zoom",
+          "description": "Zoom level to use for the map if it centers on the location.",
+          "type": "number"
+        },
         {
           "name": "key",
           "description": "The key to which this element is connected.",
@@ -3816,9 +3848,23 @@
         {
           "name": "event",
           "attribute": "event",
+          "description": "Name of the event which triggers a pb-geolocation event, e.g. 'click'.\nDefault is 'mouseover'.",
           "type": "string",
           "default": "\"mouseover\""
         },
+        {
+          "name": "auto",
+          "attribute": "auto",
+          "description": "If set, add location to a map automatically upon load by\nemitting an event. If not set, locations are only added when\nthe configured event is triggered.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "zoom",
+          "attribute": "zoom",
+          "description": "Zoom level to use for the map if it centers on the location.",
+          "type": "number"
+        },
         {
           "name": "key",
           "attribute": "key",
@@ -4547,6 +4593,18 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "cluster",
+          "description": "If set, combine markers into clusters if they are located too close together\nto display as single markers",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "fit-markers",
+          "description": "If set, the map will automatically zoom so it can fit all the markers",
+          "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.",
@@ -4636,6 +4694,20 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "cluster",
+          "attribute": "cluster",
+          "description": "If set, combine markers into clusters if they are located too close together\nto display as single markers",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "fitMarkers",
+          "attribute": "fit-markers",
+          "description": "If set, the map will automatically zoom so it can fit all the markers",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -8841,6 +8913,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-geolocation.js

@@ -30,8 +30,26 @@ export class PbGeolocation extends PbHighlight {
             label: {
                 type: String
             },
+            /**
+             * Name of the event which triggers a pb-geolocation event, e.g. 'click'.
+             * Default is 'mouseover'.
+             */
             event: {
                 type: String
+            },
+            /**
+             * Zoom level to use for the map if it centers on the location.
+             */
+            zoom: {
+                type: Number
+            },
+            /**
+             * If set, add location to a map automatically upon load by
+             * emitting an event. If not set, locations are only added when
+             * the configured event is triggered.
+             */
+            auto: {
+                type: Boolean
             }
         };
     }
@@ -39,22 +57,41 @@ export class PbGeolocation extends PbHighlight {
     constructor() {
         super();
         this.event = 'mouseover';
+        this.auto = false;
+        this.zoom = null;
     }
 
     connectedCallback() {
         super.connectedCallback();
 
-        this.addEventListener(this.event, () =>
-            this.emitTo('pb-geolocation', {
-                coordinates: {
-                    latitude: this.latitude,
-                    longitude: this.longitude
-                },
-                label: this.label,
-                popup: this.popup,
-                element: this
-            })
-        );
+        if (this.event) {
+            this.addEventListener(this.event, () =>
+                this.emitTo('pb-geolocation', {
+                    coordinates: {
+                        latitude: this.latitude,
+                        longitude: this.longitude
+                    },
+                    label: this.label,
+                    zoom: this.zoom,
+                    popup: this.popup,
+                    element: this
+                })
+            );
+        }
+        if (this.auto) {
+            this.waitForChannel(() => {
+                this.emitTo('pb-geolocation', {
+                    coordinates: {
+                        latitude: this.latitude,
+                        longitude: this.longitude
+                    },
+                    label: this.label,
+                    popup: this.popup,
+                    fitBounds: true,
+                    element: this
+                });
+            });
+        }
     }
 
     render() {