@teipublisher/pb-components 1.30.4 → 1.32.2

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+## [1.32.2](https://github.com/eeditiones/tei-publisher-components/compare/v1.32.1...v1.32.2) (2022-01-26)
+
+
+### Bug Fixes
+
+* **pb-leaflet-map:** when clustering markers, make sure to zoom the map so the marker becomes visible - unless user defined a fixed zoom level ([2e44a9a](https://github.com/eeditiones/tei-publisher-components/commit/2e44a9a872b9c3030aa2776793625ff4dab13617))
+
+## [1.32.1](https://github.com/eeditiones/tei-publisher-components/compare/v1.32.0...v1.32.1) (2022-01-25)
+
+
+### Bug Fixes
+
+* **pb-geolocation:** allow a desired zoom level to be passed in via pb-geolocation event ([e0054f8](https://github.com/eeditiones/tei-publisher-components/commit/e0054f89d9f08d1e1b5ee5dd712f0eb354225e1e))
+* **pb-split-list:** allow categories to wrap around if screen is too small ([53fb84d](https://github.com/eeditiones/tei-publisher-components/commit/53fb84dc7087fb85665ec250c0e6c6ec2f343a87))
+
+# [1.32.0](https://github.com/eeditiones/tei-publisher-components/compare/v1.31.0...v1.32.0) (2022-01-25)
+
+
+### Bug Fixes
+
+* **pb-split-list:** add items to light DOM instead of shadow DOM, so they can be styled ([6dd2267](https://github.com/eeditiones/tei-publisher-components/commit/6dd22675c898b1a7cf641ee653e21def9c23e818))
+
+
+### Features
+
+* **pb-leaflet-map:** Support clustering of markers to improve performance of maps with many markers ([4d73e38](https://github.com/eeditiones/tei-publisher-components/commit/4d73e3898fc235d402e28420e18819c5146b1673))
+
+# [1.31.0](https://github.com/eeditiones/tei-publisher-components/compare/v1.30.4...v1.31.0) (2022-01-24)
+
+
+### Bug Fixes
+
+* **pb-leaflet-map:** if there's only one location marked, show it on the map using the defined zoom level and not the whole world ([88ca01d](https://github.com/eeditiones/tei-publisher-components/commit/88ca01d24ce9ea1e756f9707eed0d1e74ae14ffc))
+
+
+### Features
+
+* **pb-custom-form:** add auto-submit feature: selected form elements will automatically submit the form when changed ([b34385a](https://github.com/eeditiones/tei-publisher-components/commit/b34385a768281964c8f571ebc96d6712276fe7c9))
+* **pb-split-list:** new component to display lists organized into categories (e.g. letter of the alphabet, topic, country ...) ([0060931](https://github.com/eeditiones/tei-publisher-components/commit/00609317946f6f2750d9c504d9775f5191835868))
+
 ## [1.30.4](https://github.com/eeditiones/tei-publisher-components/compare/v1.30.3...v1.30.4) (2022-01-19)
 
 

package/css/leaflet/MarkerCluster.Default.css

@@ -0,0 +1,60 @@
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 0.6);
+	}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}

package/css/leaflet/MarkerCluster.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}

package/dist/demo/demos.json

@@ -151,5 +151,8 @@
   },
   "pb-table-grid": {
     "demo/pb-table-grid.html": "Demo"
+  },
+  "pb-custom-form": {
+    "demo/pb-custom-form.html": "Demo"
   }
 }

package/dist/demo/pb-custom-form.html

@@ -0,0 +1,61 @@
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/>
+
+        <title>pb-split-list Demo</title>
+        <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
+    </head>
+
+    <body>
+        <pb-demo-snippet>
+            <template>
+                <style>
+                    fieldset {
+                        display: flex;
+                        align-items: center;
+                        border: 0;
+                    }
+                    fieldset * {
+                        margin-right: 20px;
+                    }
+                </style>
+                <pb-page endpoint="https://teipublisher.com/exist/apps/tei-publisher">
+                    <pb-custom-form auto-submit="paper-input,paper-icon-button,input,select,paper-dropdown-menu">
+                        <paper-input name="search" label="Search">
+                            <paper-icon-button icon="search" slot="suffix"></paper-icon-button>
+                        </paper-input>
+                        <fieldset>
+                            <label>
+                                <input type="radio" name="view" value="correspondents"> Korrespondenten
+                            </label>
+                            <label>
+                                <input type="radio" name="view" value="mentions"> Korrespondenten und erwähnte Personen
+                            </label>
+                        </fieldset>
+                        <fieldset>
+                            <select name="type">
+                                <option value="one">One</option>
+                                <option value="two">Two</option>
+                            </select>
+                            <paper-dropdown-menu id="sort" label="Sort" name="sort">
+                                <paper-listbox slot="dropdown-content" class="dropdown-content" attr-for-selected="value">
+                                    <paper-item value="author">Author</paper-item>
+                                    <paper-item value="title">Title</paper-item>
+                                </paper-listbox>
+                            </paper-dropdown-menu>
+                        </fieldset>
+                    </pb-custom-form>
+                    <pre id="output"></pre>
+                </pb-page>
+                <script>
+                    window.addEventListener('WebComponentsReady', () => {
+                        pbEvents.subscribe('pb-submit', null, (ev) => {
+                            document.getElementById('output').innerText = JSON.stringify(ev.detail.params);
+                        });
+                    });
+                </script>
+            </template>
+        </pb-demo-snippet>
+    </body>
+</html>

package/dist/demo/pb-leaflet-map.html

@@ -39,7 +39,7 @@
                             </pb-geolocation>
                         </li>
                     </ul>
-                    <pb-leaflet-map id="map" zoom="11">
+                    <pb-leaflet-map id="map" zoom="11" fit-markers>
                         <pb-map-layer show base label="HikeBike Map" url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}" max-zoom="19"
                             access-token="pk.eyJ1Ijoid29sZmdhbmdtbSIsImEiOiJjam1kMjVpMnUwNm9wM3JwMzdsNGhhcnZ0In0.v65crewF-dkNsPF3o1Q4uw"
                             attribution='&copy; &lt;a href="https://www.mapbox.com/about/maps/"&gt;Mapbox&lt;/a&gt; &copy &lt;a href="http://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; &lt;strong&gt;&lt;a href="https://www.mapbox.com/map-feedback/" target="_blank"&gt;Improve this map&lt;/a&gt;&lt;/strong&gt;'></pb-map-layer>
@@ -52,12 +52,14 @@
                  * Not necessary if the pb-geolocation appear inside a component
                  * which does itself send the `pb-update` event, e.g. `pb-view`.
                  */
-                document.addEventListener('WebComponentsReady', () => { 
-                    document.dispatchEvent(new CustomEvent('pb-update', { 
-                        detail: { 
-                            root: document.getElementById('locations')
-                        }
-                    }));
+                document.addEventListener('WebComponentsReady', () => {
+                    pbEvents.subscribe('pb-ready', null, function() {
+                        document.dispatchEvent(new CustomEvent('pb-update', { 
+                            detail: { 
+                                root: document.getElementById('locations')
+                            }
+                        }));
+                    });
                 });
             </script>
         </template>

package/dist/demo/pb-leaflet-map2.html

@@ -38,8 +38,8 @@
                         dolore magna aliquyam erat, sed diam voluptua <pb-geolocation event="click" longitude="8.1499728" latitude="47.9011491">Titisee</pb-geolocation>. At vero eos et accusam et justo duo dolores et ea rebum. 
                         Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                     <pb-leaflet-map id="map" zoom="11" toggle>
-                        <pb-map-layer show base label="HikeBike Map" url="https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png" max-zoom="19"
-                            attribution='&copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'></pb-map-layer>
+                        <pb-map-layer show base label="OpenTopo Map" url="https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png" max-zoom="19"
+                            attribution='&copy; &lt;a href="https://www.openstreetmap.org/copyright">OpenStreetMap&lt;/a> contributors'></pb-map-layer>
                     </pb-leaflet-map>
                 </main>
             </pb-page>

package/dist/demo/pb-leaflet-map3.html

@@ -62,13 +62,11 @@
                             </pb-geolocation>
                         </li>
                     </ul>
-                    <pb-leaflet-map id="map" zoom="14" access-token="pk.eyJ1Ijoid29sZmdhbmdtbSIsImEiOiJjam1kMjVpMnUwNm9wM3JwMzdsNGhhcnZ0In0.v65crewF-dkNsPF3o1Q4uw">
-                        <pb-map-layer show base label="HikeBike Map" url="https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png" max-zoom="19"
-                            attribution='&copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'></pb-map-layer>
+                    <pb-leaflet-map id="map" zoom="14" fit-markers>
+                        <pb-map-layer show base label="OpenTopo Map" url="https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png" max-zoom="19"
+                            attribution='Map data: &copy; &lt;a href="https://www.openstreetmap.org/copyright">OpenStreetMap&lt;/a> contributors, &lt;a href="http://viewfinderpanoramas.org">SRTM&lt;/a> | Map style: &copy; &lt;a href="https://opentopomap.org">OpenTopoMap&lt;/a> (&lt;a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA&lt;/a>)'></pb-map-layer>
                         <pb-map-layer base label="ESRI World Imagery" url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
                             attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'></pb-map-layer>
-                        <pb-map-layer show label="Hillshading" url="https://tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png" max-zoom="15"
-                            attribution='&copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'></pb-map-layer>
                         <pb-map-layer show label="Ski Slopes" url="https://tile.waymarkedtrails.org/slopes/{z}/{x}/{y}.png"
                             attribution='Map data: &copy; &lt;a href="https://www.openstreetmap.org/copyright">OpenStreetMap&lt;/a> contributors | Map style: &copy; &lt;a href="https://waymarkedtrails.org">waymarkedtrails.org</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA&lt;/a>)'
                             max-zoom="18"></pb-map-layer>

package/dist/es-global-bridge-6abe3a88.js

@@ -0,0 +1,5 @@
+/**
+ * Copyright 2018 The Pennsylvania State University
+ * @license Apache-2.0, see License.md for full text.
+ */
+class o{constructor(){this.load=(o,i,e=!1)=>{let l=window.ESGlobalBridge.imports&&window.ESGlobalBridge.imports[o];if(!(!e&&window.ESGlobalBridge.webpack&&window.ESGlobalBridge.webpack[o])&&!l)return new Promise((e,l)=>{const d=document.createElement("script");d.src=i,d.setAttribute("data-name",o),window.ESGlobalBridge.imports[o]=i,d.onload=()=>{e(window.ESGlobalBridge.imports[o]),window.ESGlobalBridge.imports[o]=!0,setTimeout(()=>{const e=new CustomEvent(`es-bridge-${o}-loaded`,{bubbles:!0,cancelable:!0,detail:{name:o,location:i}});document.dispatchEvent(e)},100)},d.onerror=()=>{l(new Error(`Failed to load ${o} script with location ${i}.`)),delete window.ESGlobalBridge.imports[o],window.ESGlobalBridge.imports[o]=!1},document.documentElement.appendChild(d)})}}}window.ESGlobalBridge=window.ESGlobalBridge||{},window.ESGlobalBridge.imports=window.ESGlobalBridge.imports||{},window.ESGlobalBridge.requestAvailability=()=>(window.ESGlobalBridge.instance||(window.ESGlobalBridge.instance=new o),window.ESGlobalBridge);window.ESGlobalBridge.requestAvailability();