@teipublisher/pb-components 1.36.2 → 1.38.0

package/pb-elements.json

@@ -2285,6 +2285,161 @@
         }
       ]
     },
+    {
+      "name": "pb-combo-box",
+      "path": "./src/pb-combo-box.js",
+      "description": "Provides a combo box, i.e. a combination of an input with a dropdown.\nItems to select from may be obtained from a remote data source.\n\nThe form control to be used (either a select or input) should be passed \nin the content of the element. If no control is provided, a simple `<input>`\nwill be created.",
+      "attributes": [
+        {
+          "name": "source",
+          "description": "A remote data source to use. The component will pass the text entered by the user\nin parameter `query`. It expects a JSON array of objects with each object describing\none item:\n\n```json\n{\n  \"text\": \"Text to show as label\",\n  \"value\": \"value-to-use\"\n}\n```",
+          "type": "string"
+        },
+        {
+          "name": "close-after-select",
+          "description": "Automatically close the dropdown once the user made a selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "preload",
+          "description": "Preload all items from the remote data source at startup",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "on-blur",
+          "description": "Name of the event to be emitted when the user leaves the form control",
+          "type": "string",
+          "default": "\"pb-combo-box-blur\""
+        },
+        {
+          "name": "on-change",
+          "description": "Name of the event to be emitted when the value of the form control has changed",
+          "type": "string",
+          "default": "\"pb-combo-box-change\""
+        },
+        {
+          "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": "renderItem",
+          "description": "Set a javascript function to be called whenever an item\nneeds to be rendered. The function will be passed the data\nobject of the current item as argument.",
+          "type": "Function"
+        },
+        {
+          "name": "theme",
+          "type": "string",
+          "default": "\"default\""
+        },
+        {
+          "name": "source",
+          "attribute": "source",
+          "description": "A remote data source to use. The component will pass the text entered by the user\nin parameter `query`. It expects a JSON array of objects with each object describing\none item:\n\n```json\n{\n  \"text\": \"Text to show as label\",\n  \"value\": \"value-to-use\"\n}\n```",
+          "type": "string"
+        },
+        {
+          "name": "closeAfterSelect",
+          "attribute": "close-after-select",
+          "description": "Automatically close the dropdown once the user made a selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "preload",
+          "attribute": "preload",
+          "description": "Preload all items from the remote data source at startup",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "renderFunction",
+          "type": "object",
+          "default": "\"renderDefault\""
+        },
+        {
+          "name": "onBlur",
+          "attribute": "on-blur",
+          "description": "Name of the event to be emitted when the user leaves the form control",
+          "type": "string",
+          "default": "\"pb-combo-box-blur\""
+        },
+        {
+          "name": "onChange",
+          "attribute": "on-change",
+          "description": "Name of the event to be emitted when the value of the form control has changed",
+          "type": "string",
+          "default": "\"pb-combo-box-change\""
+        },
+        {
+          "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"
+        }
+      ]
+    },
     {
       "name": "pb-custom-form",
       "path": "./src/pb-custom-form.js",
@@ -3803,7 +3958,7 @@
     {
       "name": "pb-geolocation",
       "path": "./src/pb-geolocation.js",
-      "description": "Represents a geo location. Extends `pb-highlight`, but sends an additional `pb-geolocation` event\non mouseover.\n\nFor `pb-leaflet-map` to show markers for `pb-geolocation` elements, make sure that map subscribes to the channel\ninto which `pb-geolocation`s emit and that map is loaded before the emitting component, e.g. `pb-view`, by specifying \n`wait-for` property",
+      "description": "Represents a geo location. Extends `pb-highlight`, but sends an additional `pb-geolocation` event\non mouseover.\n\nFor `pb-leaflet-map` to show markers for `pb-geolocation` elements, make sure that map subscribes to the channel\ninto which `pb-geolocation`s emit and that map is loaded before the emitting component, e.g. `pb-view`, by specifying \n`wait-for` property.",
       "attributes": [
         {
           "name": "longitude",
@@ -4609,7 +4764,7 @@
     {
       "name": "pb-leaflet-map",
       "path": "./src/pb-leaflet-map.js",
-      "description": "A wrapper component for [leaflet](https://leafletjs.com/) displaying a map.",
+      "description": "A wrapper component for [leaflet](https://leafletjs.com/) displaying a map.\n\nThe map layers displayed can be configured via nested `pb-map-layer` (see docs) elements,\nicons via `pb-map-icon`.",
       "attributes": [
         {
           "name": "latitude",
@@ -5582,6 +5737,114 @@
         }
       ]
     },
+    {
+      "name": "pb-map-icon",
+      "path": "./src/pb-map-icon.js",
+      "description": "Configure a map icon type to be used for markers. \nShould be nested inside `pb-leaflet-map`.",
+      "attributes": [
+        {
+          "name": "icon-size",
+          "description": "Size of the icon as comma-separated string, i.e. 'height, width'.",
+          "type": "array"
+        },
+        {
+          "name": "icon-anchor",
+          "description": "Anchor position of the icon as comma-separated string, i.e. 'height, width'.",
+          "type": "array"
+        },
+        {
+          "name": "shadow-url",
+          "description": "The URL to load the shadow icon from. Should be relative to the path set via the `imagesPath` property on `pb-leaflet-map`.",
+          "type": "string"
+        },
+        {
+          "name": "shadow-size",
+          "description": "Size of the shadow icon as comma-separated string, i.e. 'height, width'.",
+          "type": "array"
+        },
+        {
+          "name": "shadow-anchor",
+          "description": "Anchor position of the shadow icon as comma-separated string, i.e. 'height, width'.",
+          "type": "array"
+        },
+        {
+          "name": "popup-anchor",
+          "description": "Anchor position of the popup as comma-separated string, i.e. 'height, width'.",
+          "type": "array"
+        },
+        {
+          "name": "name",
+          "description": "Name of the icon. Set to 'active' to configure the icon used for\nplaces which were target of a previous `pb-geolocation` event (i.e. are currently 'active').",
+          "type": "string",
+          "default": "\"default\""
+        },
+        {
+          "name": "icon-url",
+          "description": "The URL to load the icon from. Should be relative to the path set via the `imagesPath` property on `pb-leaflet-map`.",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "iconSize",
+          "attribute": "icon-size",
+          "description": "Size of the icon as comma-separated string, i.e. 'height, width'.",
+          "type": "array"
+        },
+        {
+          "name": "iconAnchor",
+          "attribute": "icon-anchor",
+          "description": "Anchor position of the icon as comma-separated string, i.e. 'height, width'.",
+          "type": "array"
+        },
+        {
+          "name": "shadowUrl",
+          "attribute": "shadow-url",
+          "description": "The URL to load the shadow icon from. Should be relative to the path set via the `imagesPath` property on `pb-leaflet-map`.",
+          "type": "string"
+        },
+        {
+          "name": "shadowSize",
+          "attribute": "shadow-size",
+          "description": "Size of the shadow icon as comma-separated string, i.e. 'height, width'.",
+          "type": "array"
+        },
+        {
+          "name": "shadowAnchor",
+          "attribute": "shadow-anchor",
+          "description": "Anchor position of the shadow icon as comma-separated string, i.e. 'height, width'.",
+          "type": "array"
+        },
+        {
+          "name": "popupAncor",
+          "attribute": "popup-anchor",
+          "description": "Anchor position of the popup as comma-separated string, i.e. 'height, width'.",
+          "type": "array"
+        },
+        {
+          "name": "options",
+          "type": "object"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "Name of the icon. Set to 'active' to configure the icon used for\nplaces which were target of a previous `pb-geolocation` event (i.e. are currently 'active').",
+          "type": "string",
+          "default": "\"default\""
+        },
+        {
+          "name": "type",
+          "type": "string",
+          "default": "\"image\""
+        },
+        {
+          "name": "iconUrl",
+          "attribute": "icon-url",
+          "description": "The URL to load the icon from. Should be relative to the path set via the `imagesPath` property on `pb-leaflet-map`.",
+          "type": "string"
+        }
+      ]
+    },
     {
       "name": "pb-map-layer",
       "path": "./src/pb-map-layer.js",
@@ -7390,6 +7653,9 @@
         {
           "name": "pb-toggle",
           "description": "when received, dispatch state changes to the elements on the page (see `pb-toggle-feature`, `pb-select-feature`)"
+        },
+        {
+          "name": "pb-page-loaded"
         }
       ],
       "slots": [
@@ -7773,7 +8039,8 @@
         },
         {
           "name": "popup-class",
-          "type": "string"
+          "description": "Additional class names which will be added to the popup element.\nUse this to apply a specific style to certain popovers, but not others.",
+          "type": "String"
         },
         {
           "name": "subscribe",
@@ -7808,11 +8075,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "poupClass",
-          "description": "Additional class names which will be added to the popup element.\nUse this to apply a specific style to certain popovers, but not others.",
-          "type": "String"
-        },
         {
           "name": "remote",
           "attribute": "remote",
@@ -7863,7 +8125,8 @@
         {
           "name": "popupClass",
           "attribute": "popup-class",
-          "type": "string"
+          "description": "Additional class names which will be added to the popup element.\nUse this to apply a specific style to certain popovers, but not others.",
+          "type": "String"
         },
         {
           "name": "subscribe",
@@ -9576,6 +9839,11 @@
           "type": "array",
           "default": "[\"D\",\"W\",\"M\",\"Y\",\"5Y\",\"10Y\"]"
         },
+        {
+          "name": "max-interval",
+          "type": "number",
+          "default": "60"
+        },
         {
           "name": "url",
           "description": "Endpoint to load timeline data from. Expects response to be an\nobject with key value pairs for (date, hits).\n\nWill be reloaded whenever 'start-date' or 'end-date' attributes change.",
@@ -9672,6 +9940,12 @@
           "type": "array",
           "default": "[\"D\",\"W\",\"M\",\"Y\",\"5Y\",\"10Y\"]"
         },
+        {
+          "name": "maxInterval",
+          "attribute": "max-interval",
+          "type": "number",
+          "default": "60"
+        },
         {
           "name": "url",
           "attribute": "url",

package/src/pb-combo-box.js

@@ -0,0 +1,154 @@
+import { LitElement } from 'lit-element';
+import TomSelect from "tom-select";
+import { pbMixin } from './pb-mixin.js';
+import { resolveURL } from './utils.js';
+
+function importTheme(theme) {
+    if (document.getElementById('__pb-multi-select-css')) {
+        return;
+    }
+    const themes = resolveURL('../css/tom-select');
+    const link = document.createElement('link');
+    link.id = '__pb-multi-select-css';
+    link.href = `${themes}/tom-select.${theme}.min.css`;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+}
+
+const renderDefault = (data) =>
+    data ? `<div>${data.text}</div>` : '';
+
+/**
+ * Provides a combo box, i.e. a combination of an input with a dropdown.
+ * Items to select from may be obtained from a remote data source.
+ * 
+ * The form control to be used (either a select or input) should be passed 
+ * in the content of the element. If no control is provided, a simple `<input>`
+ * will be created.
+ * 
+ */
+export class PbComboBox extends pbMixin(LitElement) {
+    static get properties() {
+        return {
+            ...super.properties,
+            /**
+             * A remote data source to use. The component will pass the text entered by the user
+             * in parameter `query`. It expects a JSON array of objects with each object describing
+             * one item:
+             * 
+             * ```json
+             * {
+             *  "text": "Text to show as label",
+             *  "value": "value-to-use"
+             * }
+             * ```
+             */
+            source: {
+                type: String
+            },
+            /**
+             * Automatically close the dropdown once the user made a selection
+             */
+            closeAfterSelect: {
+                type: Boolean,
+                attribute: 'close-after-select'
+            },
+            /**
+             * Preload all items from the remote data source at startup
+             */
+            preload: {
+                type: Boolean
+            },
+            /**
+             * Name of the event to be emitted when the user leaves the form control
+             */
+            onBlur: {
+                type: String,
+                attribute: 'on-blur'
+            },
+            /**
+             * Name of the event to be emitted when the value of the form control has changed
+             */
+            onChange: {
+                type: String,
+                attribute: 'on-change'
+            }
+        };
+    }
+
+    /**
+     * Set a javascript function to be called whenever an item
+     * needs to be rendered. The function will be passed the data
+     * object of the current item as argument.
+     * 
+     * @param {Function} callbackFunction
+     */
+    set renderItem(callbackFunction) {
+        this.renderFunction = callbackFunction;
+    }
+
+    constructor() {
+        super();
+        this.theme = 'default';
+        this.source = null;
+        this.closeAfterSelect = false;
+        this.preload = false;
+        this.renderFunction = renderDefault;
+        this.onBlur = 'pb-combo-box-blur';
+        this.onChange = 'pb-combo-box-change';
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+    firstUpdated() {
+        importTheme(this.theme);
+
+        let input = this.querySelector('select,input');
+
+        if (!input) {
+            // create input if none was passed
+            input = document.createElement('input');
+            this.appendChild(input);
+        }
+        input.autocomplete = false;
+
+        PbComboBox.waitOnce('pb-page-ready', () => {
+            const options = {};
+            if (this.source) {
+                const url = this.toAbsoluteURL(this.source);
+                options.labelField = 'text';
+                options.valueField = 'value';
+                options.searchField = ['text', 'value'];
+                options.preload = this.preload;
+                options.load = (query, callback) => {
+                    fetch(`${url}?query=${encodeURIComponent(query)}`, {
+                        method: 'GET',
+                        mode: 'cors',
+                        credentials: 'same-origin'
+                    })
+                    .then(response => response.json())
+                    .then(json => {
+                        callback(json);
+                    }).catch(()=>{
+                        callback();
+                    });
+                };
+                options.render = {
+                    option: this.renderFunction,
+                    item: this.renderFunction
+                };
+            }
+            options.closeAfterSelect = this.closeAfterSelect;
+            options.onBlur = () => this.emitTo(this.onBlur);
+            options.onChange = () => this.emitTo(this.onChange);
+            this._select = new TomSelect(input, options);
+        });
+    }
+
+    createRenderRoot() {
+        return this;
+    }
+}
+customElements.define('pb-combo-box', PbComboBox);

package/src/pb-components.js

@@ -59,6 +59,7 @@ import './pb-blacklab-highlight.js';
 import './pb-table-grid.js';
 import './pb-split-list.js';
 import './pb-timeline.js';
+import './pb-combo-box.js';
 
 import '@polymer/iron-icons/editor-icons';
 import '@polymer/iron-icons/social-icons';

package/src/pb-geolocation.js

@@ -8,7 +8,7 @@ import { PbHighlight } from "./pb-highlight.js";
  * 
  * For `pb-leaflet-map` to show markers for `pb-geolocation` elements, make sure that map subscribes to the channel
  * into which `pb-geolocation`s emit and that map is loaded before the emitting component, e.g. `pb-view`, by specifying 
- * `wait-for` property
+ * `wait-for` property.
  *
  * @slot - default unnamed slot for content. May also contain an option `<template>` element for content to be shown in a popup
  * @fires pb-geolocation - Sends geocoordinates
@@ -74,7 +74,8 @@ export class PbGeolocation extends PbHighlight {
                     label: this.label,
                     zoom: this.zoom,
                     popup: this.popup,
-                    element: this
+                    element: this,
+                    event: this.event
                 })
             );
         }

package/src/pb-leaflet-map.js

@@ -3,9 +3,13 @@ import "@lrnwebcomponents/es-global-bridge";
 import { pbMixin } from './pb-mixin.js';
 import { resolveURL } from './utils.js';
 import './pb-map-layer.js';
+import './pb-map-icon.js';
 
 /**
  * A wrapper component for [leaflet](https://leafletjs.com/) displaying a map.
+ * 
+ * The map layers displayed can be configured via nested `pb-map-layer` (see docs) elements,
+ * icons via `pb-map-icon`.
  *
  * @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
@@ -113,12 +117,14 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         this.cluster = false;
         this.fitMarkers = false;
         this.disableClusteringAt = null;
+        this._icons = {};
     }
 
     connectedCallback() {
         super.connectedCallback();
 
         this._layers = this.querySelectorAll('pb-map-layer');
+        this._markers = this.querySelectorAll('pb-map-icon');
 
         /**
          * Custom event which passes an array of pb-geolocation within event details
@@ -142,6 +148,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                     this.emitTo('pb-leaflet-marker-click', loc);
                 });
                 marker.bindTooltip(loc.label);
+                this.setMarkerIcon(marker);
                 this._markerLayer.addLayer(marker);
             });
             this._fitBounds();
@@ -170,6 +177,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                 marker.addEventListener('click', () => {
                     this.emitTo('pb-leaflet-marker-click', loc);
                 });
+                this.setMarkerIcon(marker);
             });
             this._fitBounds();
         });
@@ -194,6 +202,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                     if (ev.detail.popup) {
                         marker.bindPopup(ev.detail.popup);
                     }
+                    this.setMarkerIcon(marker);
                     marker.addTo(this._markerLayer);
 
                     if (ev.detail.fitBounds) {
@@ -204,14 +213,22 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                 } else {
                     console.log('<pb-leaflet-map> Marker already added to map');
                 }
+
                 if (this.toggle) {
                     this.disabled = false;
                 }
-                this._locationChanged(this.latitude, this.longitude, ev.detail.zoom);
+                const activateMarker = ev.detail.event;
+                this._locationChanged(this.latitude, this.longitude, ev.detail.zoom, activateMarker);
             }
         });
     }
 
+    setMarkerIcon(layer) {
+        if (this._icons && this._icons.default) {
+            layer.setIcon(this._icons.default);
+        }
+    }
+
     firstUpdated() {
         if (!this.toggle) {
             this.disabled = false;
@@ -274,6 +291,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
             crs
         });
         this._configureLayers();
+        this._configureMarkers();
 
         if (this.cluster) {
             const options = {};
@@ -312,6 +330,19 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         }
     }
 
+    _configureMarkers() {
+        if (this._markers.length === 0) {
+            return;
+        }
+
+        this._icons = {};
+        this._markers.forEach(config => {
+            if (config.iconUrl) {
+                this._icons[config.name] = L.icon(config.options);
+            }
+        })
+    }
+
     _configureLayers() {
         if (this._layers.length === 0) {
             // configure a default layer
@@ -379,7 +410,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         }
     }
 
-    _locationChanged(lat, long, zoom) {
+    _locationChanged(lat, long, zoom, setActive) {
         if (this._map) {
             const coords = L.latLng([lat, long]);
             this._markerLayer.eachLayer((layer) => {
@@ -395,6 +426,11 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                         layer.openTooltip();
                         this._map.setView(coords, this.zoom);
                     }
+                    if (setActive && this._icons && this._icons.active) {
+                        layer.setIcon(this._icons.active);
+                    }
+                } else if (this._icons && this._icons.default && layer.getIcon() !== this._icons.default) {
+                        layer.setIcon(this._icons.default);
                 }
             });
         }
@@ -402,10 +438,10 @@ export class PbLeafletMap extends pbMixin(LitElement) {
 
     _hasMarker(lat, long) {
         const coords = L.latLng([lat, long]);
-        let found = false;
+        let found = null;
         this._markerLayer.eachLayer((layer) => {
             if (layer instanceof L.Marker && layer.getLatLng().equals(coords)) {
-                found = true;
+                found = layer;
             }
         });
         return found;