@teipublisher/pb-components 1.31.0 → 1.33.0

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+# [1.33.0](https://github.com/eeditiones/tei-publisher-components/compare/v1.32.2...v1.33.0) (2022-01-31)
+
+
+### Bug Fixes
+
+* **pb-timeline:** fix reported range ([fdbbc44](https://github.com/eeditiones/tei-publisher-components/commit/fdbbc445ede8a36631349e43ee6966804e03b819))
+* **pb-timeline:** get timeline to work with facets ([71b3c4d](https://github.com/eeditiones/tei-publisher-components/commit/71b3c4da45c043f269e3114725370973180e2f44))
+* **pb-timeline:** improve display, show current time range ([edc317e](https://github.com/eeditiones/tei-publisher-components/commit/edc317e7e880c2609b1df1f8156eb10d4e7851a1))
+* **pb-timeline:** various fixes to support integration in publisher ([8fb1b7c](https://github.com/eeditiones/tei-publisher-components/commit/8fb1b7c63c3c33dda21b982310372590d0b55202))
+
+
+### Features
+
+* **pb-timeline:** show additional info in tooltip ([45dd690](https://github.com/eeditiones/tei-publisher-components/commit/45dd6907debc7c67db067eb6558304e3c6475972))
+
+## [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)
 
 

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

@@ -109,6 +109,9 @@
   "pb-tabs": {
     "demo/pb-tabs.html": "Demo"
   },
+  "pb-timeline": {
+    "demo/pb-timeline.html": "Demo"
+  },
   "pb-toggle-feature": {
     "demo/pb-toggle-feature.html": "Server-side with pb-view",
     "demo/pb-toggle-feature2.html": "Client-side",
@@ -155,4 +158,4 @@
   "pb-custom-form": {
     "demo/pb-custom-form.html": "Demo"
   }
-}
+}

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/demo/pb-timeline.html

@@ -0,0 +1,122 @@
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/>
+
+        <title>pb-timeline Demo</title>
+        <link rel="stylesheet" href="demo.css">
+        <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
+
+        <style>
+            main{
+                padding: 50px;
+
+            }
+            pb-timeline{
+                padding: 2rem 0;
+            }
+            #start, #end, #scope{
+                display: block;
+                margin-bottom: 1rem;
+            }
+            .wraptl{
+                max-width: 60vw;
+                overflow-y:hidden;
+                overflow-x:auto;
+            }
+        </style>
+    </head>
+
+    <body>
+        <main>
+            <h1>Timeline Demo</h1>
+            <!--
+        <pb-demo-snippet>
+            <template>
+-->
+
+            <label for="start">Start Date</label>
+            <input id="start" type="date" value="1891-05-18">
+            <label for="end">End Date</label>
+            <input id="end" type="date" value="1978-01-01">
+
+
+            <label for="scope">Scope</label>
+            <select id="scope">
+                <option value="D">Day</option>
+                <option value="W">Week</option>
+                <option value="M">Month</option>
+                <option value="Y" selected="selected">Year</option>
+                <option value="5Y">5 Years</option>
+                <option value="10Y">10 Years</option>
+            </select>
+
+
+            <div class="wraptl">
+                <pb-timeline scope="Y" auto
+                             start-date="1891-05-18"
+                             end-date="1978-01-01"
+                             url="./timeline-dev-data.json"
+                             resettable></pb-timeline>
+            </div>
+
+<!--            <textarea id="logs"></textarea>-->
+            <!--
+
+                </template>
+            </pb-demo-snippet>
+    -->
+
+        </main>
+    </body>
+
+
+    <script type="module">
+        // import { jsonDataDev } from './timeline-dev-data.js';
+        import {SearchResultService} from "../src/search-result-service.js";
+
+/*
+        const jsonData = jsonDataDev;
+
+        const dispatchPbTimelineDataLoadedEvent = (jsonData) => {
+            document.dispatchEvent(new CustomEvent('pb-timeline-data-loaded', {
+                bubbles: true,
+                detail: {
+                    jsonData: jsonData,
+                }
+            }));
+        }
+*/
+
+        document.addEventListener("DOMContentLoaded", () => {
+            // initDevControls();
+
+            const startInput = document.getElementById('start');
+            startInput.addEventListener('input', (e)=>{
+                const val = e.target.value;
+                const tl = document.querySelector('pb-timeline').startDate = val;
+            });
+
+            const endInput = document.getElementById('end');
+            endInput.addEventListener('input', (e)=>{
+                const val = e.target.value;
+                const tl = document.querySelector('pb-timeline').endDate = val;
+            });
+            const select = document.getElementById('scope');
+            select.addEventListener('change', (e)=>{
+                console.log('scope changed')
+                const val = e.target.value;
+                const tl = document.querySelector('pb-timeline').scope = val;
+            });
+
+            document.addEventListener('pb-timeline-date-changed', (e) =>{
+                console.log('date changed ', e.detail.date);
+            });
+            document.addEventListener('pb-timeline-daterange-changed', (e) =>{
+                console.log('daterange changed ', e.detail.startDateStr, e.detail.endDateStr);
+            });
+        });
+
+
+    </script>
+</html>

package/dist/demo/pb-timeline2.html

@@ -0,0 +1,94 @@
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/>
+
+        <title>pb-timeline Demo</title>
+        <link rel="stylesheet" href="demo.css">
+        <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script><script type="module" src="../pb-components-bundle.js"></script>
+
+        <style>
+            main{
+                padding: 50px;
+
+            }
+            pb-timeline{
+                padding: 2rem 0;
+                width: 100%;
+            }
+            #start, #end, #scope{
+                display: block;
+                margin-bottom: 1rem;
+            }
+            .wraptl{
+                max-width: 60vw;
+                overflow-y:hidden;
+                overflow-x:auto;
+            }
+        </style>
+    </head>
+
+    <body>
+        <main>
+            <h1>Timeline Demo</h1>
+            <!--
+        <pb-demo-snippet>
+            <template>
+-->
+        <pb-page endpoint="https://teipublisher.com/exist/apps/tei-publisher">
+            <pb-login id="login" group="tei"></pb-login>
+
+            <label for="start">Start Date</label>
+            <input id="start" type="date" value="1891-05-18">
+            <label for="end">End Date</label>
+            <input id="end" type="date" value="1978-01-01">
+
+
+            <label for="scope">Scope</label>
+            <select id="scope">
+                <option value="D">Day</option>
+                <option value="W">Week</option>
+                <option value="M">Month</option>
+                <option value="Y" selected="selected">Year</option>
+                <option value="5Y">5 Years</option>
+                <option value="10Y">10 Years</option>
+            </select>
+
+
+            <div class="wraptl">
+                <pb-timeline scope="10Y"
+                             start-date="1438-01-13"
+                             end-date="2020-02-01"
+                             subscribe="docs" emit="docs"
+                             url="api/search/timeline"></pb-timeline>
+            </div>
+
+            <pb-browse-docs id="document-list" fix-links login="login"
+                collection="test"
+                sort-options='[{"label": "browse.title", "value": "title"},{"label": "browse.author", "value": "author"},{"label": "browse.modificationDate", "value": "default"}]'
+                sort-by="title"
+                filter-options='[{"label": "browse.title", "value": "title"},{"label": "browse.author", "value": "author"},{"label": "browse.file", "value": "file"}]'
+                filter-by="title" auto="auto" history="history" emit="docs" subscribe="docs">
+                <pb-paginate slot="toolbar" id="paginate" per-page="10" range="5"
+                    emit="docs" subscribe="docs"></pb-paginate>
+            </pb-browse-docs>
+        </pb-page>
+
+<!--            <textarea id="logs"></textarea>-->
+            <!--
+
+                </template>
+            </pb-demo-snippet>
+    -->
+
+        </main>
+    </body>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            pbEvents.subscribe('pb-timeline-daterange-changed', 'docs', (ev) => {
+                console.log(ev.detail);
+            });
+        });
+    </script>
+</html>