@teipublisher/pb-components 1.30.4 → 1.32.2

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';
@@ -9,9 +9,22 @@ import './pb-map-layer.js';
  *
  * @slot - may contain a series of `pb-map-layer` configurations
  * @fires pb-leaflet-marker-click - Fires event to be processed by the map upon click
- * @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
+ * @fires pb-update-map - When received, redraws the map to fit markers passed in with the event.
+ * Event details should include an array of locations, see `pb-geolocation` event below.
+ * @fires pb-update - When received, redraws the map to show markers for all pb-geolocation elements found in the content of the pb-view
+ * @fires pb-geolocation - When received, focuses the map on the geocoordinates passed in with the event.
+ * The event details should include an object:
+ * ```
+ * {
+ *   coordinates: {
+ *         latitude: Number,
+ *         longitude: Number
+ *   },
+ *   label: string - the label to show on mouseover,
+ *   zoom: Number - fixed zoom level to zoom to,
+ *   fitBounds: Boolean - if true, recompute current zoom level to show all markers
+ * }
+ * ```
  */
 export class PbLeafletMap extends pbMixin(LitElement) {
     static get properties() {
@@ -29,6 +42,30 @@ 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
+            },
+            /**
+             * Limits up to which zoom level markers are arranged into clusters.
+             * Using a higher zoom level here will result in more markers to be shown.
+             * 
+             * Requires `cluster` option to be enabled.
+             */
+            disableClusteringAt: {
+                type: Number,
+                attribute: 'disable-clustering-at'
+            },
             /**
              * If enabled, the map will not automatically scroll to the coordinates received via `pb-geolocation`
              */
@@ -73,6 +110,9 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         this.toggle = false;
         this.noScroll = false;
         this.disabled = true;
+        this.cluster = false;
+        this.fitMarkers = false;
+        this.disableClusteringAt = null;
     }
 
     connectedCallback() {
@@ -85,7 +125,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
              */
@@ -101,14 +142,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();
         });
 
         /**
@@ -117,20 +153,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);
                 }
@@ -141,12 +171,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();
         });
 
         /**
@@ -169,7 +194,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');
@@ -177,7 +207,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                 if (this.toggle) {
                     this.disabled = false;
                 }
-                this._locationChanged();
+                this._locationChanged(this.latitude, this.longitude, ev.detail.zoom);
             }
         });
     }
@@ -186,13 +216,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>
         `;
     }
@@ -234,6 +274,18 @@ export class PbLeafletMap extends pbMixin(LitElement) {
             crs
         });
         this._configureLayers();
+
+        if (this.cluster) {
+            const options = {};
+            if (this.disableClusteringAt) {
+                options.disableClusteringAtZoom = this.disableClusteringAt;
+            }
+            this._markerLayer = L.markerClusterGroup(options);
+        } else {
+            this._markerLayer = L.layerGroup();
+        }
+        this._markerLayer.addTo(this._map);
+
         this.signalReady();
 
         L.control.scale().addTo(this._map);
@@ -308,27 +360,50 @@ 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, zoom) {
         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)) {
+            const coords = L.latLng([lat, long]);
+            this._markerLayer.eachLayer((layer) => {
+                if (layer.getLatLng().equals(coords)) {
+                    if (zoom && !this.noScroll) {
                         layer.openTooltip();
+                        this._map.setView(coords, zoom);
+                    } else if (this.cluster) {
+                        this._markerLayer.zoomToShowLayer(layer, () =>
+                            layer.openTooltip()
+                        );
                     } else {
-                        layer.closeTooltip();
+                        layer.openTooltip();
+                        this._map.setView(coords, this.zoom);
                     }
                 }
             });
-            if (!this.noScroll) 
-                this._map.setView(coords, this.zoom);
         }
     }
 
     _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-split-list.js

@@ -0,0 +1,188 @@
+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
+            },
+            ...super.properties
+        };
+    }
+
+    constructor() {
+        super();
+        this._categories = [];
+        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.innerHTML = json.items.join('');
+            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"><slot></slot></div>
+        `;
+    }
+
+    static get styles() {
+        return css`
+            :host {
+                display: block;
+            }
+
+            header {
+                display: flex;
+                flex-wrap: wrap;
+                column-gap: 10px;
+                width: 100%;
+            }
+
+            #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);