@teipublisher/pb-components 1.32.1 → 1.34.0

package/src/pb-browse-docs.js

@@ -87,6 +87,13 @@ export class PbBrowseDocs extends PbLoad {
             subforms: {
                 type: String
             },
+            /**
+             * If set, rewrite URLs to load pages as static HTML files,
+             * so no TEI Publisher instance is required
+             */
+            static: {
+                type: Boolean
+            },
             _file: {
                 type: String
             },
@@ -120,6 +127,8 @@ export class PbBrowseDocs extends PbLoad {
         this.filterBy = 'title';
         this._allowModification = false;
         this._suggestions = [];
+
+        this.static = false;
     }
 
     connectedCallback() {
@@ -177,14 +186,16 @@ export class PbBrowseDocs extends PbLoad {
         });
         this.shadowRoot.getElementById('autocomplete').addEventListener('autocomplete-change', this._autocomplete.bind(this));
 
-        const login = document.getElementById(this.login);
-        if (!login) {
-            console.error('<pb-browse-docs> connected pb-login element not found!');
-        } else {
-            this.subscribeTo('pb-login', (ev) => {
-                this._allowModification = this._loggedIn(ev.detail.user, ev.detail.group);
-            }, []);
-            this._allowModification = login.loggedIn && this._loggedIn(login.user, login.groups);
+        if (this.login) {
+            const login = document.getElementById(this.login);
+            if (!login) {
+                console.error('<pb-browse-docs> connected pb-login element not found!');
+            } else {
+                this.subscribeTo('pb-login', (ev) => {
+                    this._allowModification = this._loggedIn(ev.detail.user, ev.detail.group);
+                }, []);
+                this._allowModification = login.loggedIn && this._loggedIn(login.user, login.groups);
+            }
         }
 
         this.shadowRoot.getElementById('sort-list').addEventListener('selected-item-changed', this._sort.bind(this));
@@ -206,6 +217,7 @@ export class PbBrowseDocs extends PbLoad {
                     }
                 </style>
             </custom-style>
+            <slot name="header"></slot>
             <div class="toolbar">
                 <paper-dropdown-menu id="sort" label="${translate(this.sortLabel)}" part="sort-dropdown">
                     <paper-listbox id="sort-list" selected="${this.sortBy}" slot="dropdown-content" class="dropdown-content" attr-for-selected="value">
@@ -312,6 +324,10 @@ export class PbBrowseDocs extends PbLoad {
     }
 
     getURL(params) {
+        if (this.static) {
+            // use a static URL
+            return `collections/${this.collection}/${params.start || '1'}.html`;
+        }
         const url = super.getURL(params);
         return this.collection ? `${url}/${this.collection}` : url;
     }

package/src/pb-components.js

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

package/src/pb-leaflet-map.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() {
@@ -43,6 +56,16 @@ export class PbLeafletMap extends pbMixin(LitElement) {
             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`
              */
@@ -89,6 +112,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         this.disabled = true;
         this.cluster = false;
         this.fitMarkers = false;
+        this.disableClusteringAt = null;
     }
 
     connectedCallback() {
@@ -159,9 +183,6 @@ export class PbLeafletMap extends pbMixin(LitElement) {
             if (ev.detail.coordinates) {
                 this.latitude = ev.detail.coordinates.latitude;
                 this.longitude = ev.detail.coordinates.longitude;
-                if (ev.detail.zoom) {
-                    this.zoom = ev.detail.zoom;
-                }
                 if (!this._hasMarker(this.latitude, this.longitude)) {
                     const marker = L.marker([this.latitude, this.longitude]);
                     marker.addEventListener('click', () => {
@@ -186,7 +207,7 @@ export class PbLeafletMap extends pbMixin(LitElement) {
                 if (this.toggle) {
                     this.disabled = false;
                 }
-                this._locationChanged(this.latitude, this.longitude, this.zoom);
+                this._locationChanged(this.latitude, this.longitude, ev.detail.zoom);
             }
         });
     }
@@ -255,7 +276,11 @@ export class PbLeafletMap extends pbMixin(LitElement) {
         this._configureLayers();
 
         if (this.cluster) {
-            this._markerLayer = L.markerClusterGroup();
+            const options = {};
+            if (this.disableClusteringAt) {
+                options.disableClusteringAtZoom = this.disableClusteringAt;
+            }
+            this._markerLayer = L.markerClusterGroup(options);
         } else {
             this._markerLayer = L.layerGroup();
         }
@@ -359,11 +384,19 @@ export class PbLeafletMap extends pbMixin(LitElement) {
             const coords = L.latLng([lat, long]);
             this._markerLayer.eachLayer((layer) => {
                 if (layer.getLatLng().equals(coords)) {
-                    layer.openTooltip();
+                    if (zoom && !this.noScroll) {
+                        layer.openTooltip();
+                        this._map.setView(coords, zoom);
+                    } else if (this.cluster) {
+                        this._markerLayer.zoomToShowLayer(layer, () =>
+                            layer.openTooltip()
+                        );
+                    } else {
+                        layer.openTooltip();
+                        this._map.setView(coords, this.zoom);
+                    }
                 }
             });
-            if (!this.noScroll) 
-                this._map.setView(coords, zoom);
         }
     }
 

package/src/pb-load.js

@@ -288,13 +288,12 @@ export class PbLoad extends pbMixin(LitElement) {
     }
 
     _handleContent(ev) {
-        this._parseHeaders(ev.detail.xhr);
-
         const resp = this.shadowRoot.getElementById('loadContent').lastResponse;
         if (this.container) {
             this.style.display = 'none';
             document.querySelectorAll(this.container).forEach((elem) => {
-                elem.innerHTML = resp
+                elem.innerHTML = resp;
+                this._parseHeaders(ev.detail.xhr, elem);
                 this._fixLinks(elem);
                 this._onLoad(elem);
             });
@@ -304,6 +303,7 @@ export class PbLoad extends pbMixin(LitElement) {
 
             const div = document.createElement('div');
             div.innerHTML = resp;
+            this._parseHeaders(ev.detail.xhr, div);
             div.slot = '';
             this.appendChild(div);
             this._fixLinks(div);
@@ -338,9 +338,20 @@ export class PbLoad extends pbMixin(LitElement) {
         dialog.open();
     }
 
-    _parseHeaders(xhr) {
-        const total = xhr.getResponseHeader('pb-total');
-        const start = xhr.getResponseHeader('pb-start');
+    _parseHeaders(xhr, content) {
+        // Try to determine number of pages and current position
+        // Search for data-pagination-* attributes first and if they
+        // can't be found, check HTTP headers
+        function getPaginationParam(type) {
+            const elem = content.querySelector(`[data-pagination-${type}]`);
+            if (elem) {
+                return elem.getAttribute(`data-pagination-${type}`);
+            }
+            return xhr.getResponseHeader(`pb-${type}`);
+        }
+
+        const total = getPaginationParam('total');
+        const start = getPaginationParam('start');
 
         if (this.start !== start) {
             this.start = parseInt(start);