@teipublisher/pb-components 1.30.2 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.30.2",
+  "version": "1.32.0",
   "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",
@@ -3738,6 +3758,12 @@
           "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": "key",
           "description": "The key to which this element is connected.",
@@ -3819,6 +3845,13 @@
           "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": "key",
           "attribute": "key",
@@ -4547,6 +4580,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 +4681,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 +8900,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

@@ -32,6 +32,14 @@ export class PbGeolocation extends PbHighlight {
             },
             event: {
                 type: String
+            },
+            /**
+             * 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 +47,39 @@ export class PbGeolocation extends PbHighlight {
     constructor() {
         super();
         this.event = 'mouseover';
+        this.auto = false;
     }
 
     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,
+                    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() {

package/src/pb-leaflet-map.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit-element';
-import * as L from 'leaflet/dist/leaflet-src.esm.js';
+import "@lrnwebcomponents/es-global-bridge";
 import { pbMixin } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 import './pb-map-layer.js';
@@ -12,7 +12,6 @@ import './pb-map-layer.js';
  * @fires pb-update-map - When received, redraws the map to fit markers passed in with the event
  * @fires pb-update - When received, redraws the map to show markers for all pb-geolocation elements
  * @fires pb-geolocation - When received, focuses the map on the geocoordinates passed in with the event
- 
  */
 export class PbLeafletMap extends pbMixin(LitElement) {
     static get properties() {
@@ -30,6 +29,20 @@ export class PbLeafletMap extends pbMixin(LitElement) {
             crs: {
                 type: String
             },
+            /**
+             * If set, the map will automatically zoom so it can fit all the markers
+             */
+            fitMarkers: {
+                type: Boolean,
+                attribute: 'fit-markers'
+            },
+            /**
+             * If set, combine markers into clusters if they are located too close together
+             * to display as single markers
+             */
+            cluster: {
+                type: Boolean
+            },
             /**
              * If enabled, the map will not automatically scroll to the coordinates received via `pb-geolocation`
              */
@@ -74,6 +87,8 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         this.toggle = false;
         this.noScroll = false;
         this.disabled = true;
+        this.cluster = false;
+        this.fitMarkers = false;
     }
 
     connectedCallback() {
@@ -86,7 +101,8 @@ export class PbLeafletMap extends pbMixin(LitElement) {
          * @param {{ detail: any[]; }} ev
          */
         this.subscribeTo('pb-update-map', (ev) => {
-            const bounds = L.latLngBounds();
+            this._markerLayer.clearLayers();
+
             /**
              * @param {{ latitude: any; longitude: any; label: any; }} loc
              */
@@ -102,14 +118,9 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                     this.emitTo('pb-leaflet-marker-click', loc);
                 });
                 marker.bindTooltip(loc.label);
-                marker.addTo(this._map);
-                bounds.extend([loc.latitude, loc.longitude]);
+                this._markerLayer.addLayer(marker);
             });
-            if (ev.detail.length > 1) {
-                this._map.fitBounds(bounds);
-            } else {
-                this._map.setZoom(this.zoom);
-            }
+            this._fitBounds();
         });
 
         /**
@@ -118,20 +129,14 @@ export class PbLeafletMap extends pbMixin(LitElement) {
          * @param {{ detail: { root: { querySelectorAll: (arg0: string) => any[]; }; }; }} ev
          */
         this.subscribeTo('pb-update', (ev) => {
-            this._map.eachLayer((layer) => {
-                if (layer instanceof L.Marker) {
-                    layer.remove();
-                }
-            });
-            const bounds = L.latLngBounds();
+            this._markerLayer.clearLayers();
             const locations = ev.detail.root.querySelectorAll('pb-geolocation');
             /**
              * @param {{ latitude: any; longitude: any; }} loc
              */
             locations.forEach((loc) => {
                 const coords = L.latLng(loc.latitude, loc.longitude);
-                bounds.extend(coords);
-                const marker = L.marker(coords).addTo(this._map);
+                const marker = L.marker(coords).addTo(this._markerLayer);
                 if (loc.label) {
                     marker.bindTooltip(loc.label);
                 }
@@ -142,12 +147,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                     this.emitTo('pb-leaflet-marker-click', loc);
                 });
             });
-            // this._map.invalidateSize();
-            if (locations.length > 1) {
-                this._map.fitBounds(bounds);
-            } else {
-                this._map.fitWorld();
-            }
+            this._fitBounds();
         });
 
         /**
@@ -170,7 +170,12 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                     if (ev.detail.popup) {
                         marker.bindPopup(ev.detail.popup);
                     }
-                    marker.addTo(this._map);
+                    marker.addTo(this._markerLayer);
+
+                    if (ev.detail.fitBounds) {
+                        this._fitBounds();
+                    }
+
                     console.log('<pb-leaflet-map> added marker');
                 } else {
                     console.log('<pb-leaflet-map> Marker already added to map');
@@ -178,7 +183,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                 if (this.toggle) {
                     this.disabled = false;
                 }
-                this._locationChanged();
+                this._locationChanged(this.latitude, this.longitude);
             }
         });
     }
@@ -187,13 +192,23 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         if (!this.toggle) {
             this.disabled = false;
         }
-        this._initMap();
+        window.ESGlobalBridge.requestAvailability();
+        const leafletPath = resolveURL('../lib/leaflet-src.js');
+        const pluginPath = resolveURL('../lib/leaflet.markercluster-src.js');
+        window.ESGlobalBridge.instance.load("leaflet", leafletPath)
+        .then(() => window.ESGlobalBridge.instance.load("plugin", pluginPath));
+        window.addEventListener(
+            "es-bridge-plugin-loaded",
+            this._initMap.bind(this),
+            { once: true }
+        );
     }
 
     render() {
         const cssPath = resolveURL(this.cssPath);
         return html`
             <link rel="Stylesheet" href="${cssPath}/leaflet.css">
+            <link rel="Stylesheet" href="${cssPath}/MarkerCluster.Default.css">
             <div id="map" style="height: 100%; width: 100%"></div>
         `;
     }
@@ -235,6 +250,14 @@ export class PbLeafletMap extends pbMixin(LitElement) {
             crs
         });
         this._configureLayers();
+
+        if (this.cluster) {
+            this._markerLayer = L.markerClusterGroup();
+        } else {
+            this._markerLayer = L.layerGroup();
+        }
+        this._markerLayer.addTo(this._map);
+
         this.signalReady();
 
         L.control.scale().addTo(this._map);
@@ -309,16 +332,31 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         }
     }
 
-    _locationChanged() {
+    _fitBounds() {
+        if (!this.fitMarkers) {
+            return;
+        }
+        const bounds = L.latLngBounds();
+        let len = 0;
+        this._markerLayer.eachLayer((layer) => {
+            bounds.extend(layer.getLatLng());
+            len += 1;
+        });
+        if (len === 0) {
+            this._map.fitWorld();
+        } else if (len === 1) {
+            this._map.fitBounds(bounds, {maxZoom: this.zoom});
+        } else {
+            this._map.fitBounds(bounds);
+        }
+    }
+
+    _locationChanged(lat, long) {
         if (this._map) {
-            const coords = L.latLng([this.latitude, this.longitude]);
-            this._map.eachLayer((layer) => {
-                if (layer instanceof L.Marker) {
-                    if (layer.getLatLng().equals(coords)) {
-                        layer.openTooltip();
-                    } else {
-                        layer.closeTooltip();
-                    }
+            const coords = L.latLng([lat, long]);
+            this._markerLayer.eachLayer((layer) => {
+                if (layer.getLatLng().equals(coords)) {
+                    layer.openTooltip();
                 }
             });
             if (!this.noScroll) 
@@ -329,7 +367,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
     _hasMarker(lat, long) {
         const coords = L.latLng([lat, long]);
         let found = false;
-        this._map.eachLayer((layer) => {
+        this._markerLayer.eachLayer((layer) => {
             if (layer instanceof L.Marker && layer.getLatLng().equals(coords)) {
                 found = true;
             }

package/src/pb-select-feature.js

@@ -140,6 +140,12 @@ export class PbSelectFeature extends pbMixin(LitElement) {
             :host {
                 display: block;
             }
+
+            #menu {
+                width: inherit;
+                min-width: inherit;
+                max-width: inherit;
+            }
         `;
     }
 }