diff options
| -rw-r--r-- | resources/views/modules/pedigree-map/chart.phtml | 87 |
1 files changed, 43 insertions, 44 deletions
diff --git a/resources/views/modules/pedigree-map/chart.phtml b/resources/views/modules/pedigree-map/chart.phtml index 5f0faab3fa..1ef88f446c 100644 --- a/resources/views/modules/pedigree-map/chart.phtml +++ b/resources/views/modules/pedigree-map/chart.phtml @@ -10,19 +10,19 @@ use Fisharebest\Webtrees\View; ?> <div class="py-4"> - <div class="row gchart osm-wrapper"> - <div id="osm-map" class="col-sm-9 wt-ajax-load osm-user-map" dir="ltr"></div> - <ul class="col-sm-3 osm-sidebar wt-page-options-value list-unstyled px-md-1"></ul> + <div class="row gchart wt-wrapper"> + <div id="wt-map" class="col-sm-9 wt-ajax-load wt-map-user" dir="ltr"></div> + <ul class="col-sm-3 wt-map-sidebar wt-page-options-value list-unstyled px-md-1"></ul> </div> </div> <?php View::push('styles') ?> <style> - .osm-wrapper, .osm-user-map { + .wt-wrapper, .wt-map-user { height: 70vh } - .osm-sidebar { + .wt-map-sidebar { height: 100%; overflow-y: auto; font-size: small; @@ -35,12 +35,19 @@ use Fisharebest\Webtrees\View; <script> 'use strict'; - window.WT_OSM = (function () { + (function () { const config = <?= json_encode($leaflet_config, JSON_THROW_ON_ERROR) ?>; const minZoom = 2; + const sidebar = document.querySelector('.wt-map-sidebar'); + + const scrollOptions = { + behavior: "smooth", + block: "start", + inline: "start" + }; + let map = null; - let sidebar = $('.osm-sidebar'); // Map components let markers = L.markerClusterGroup({ @@ -55,7 +62,7 @@ use Fisharebest\Webtrees\View; let container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom'); container.onclick = function () { map.flyToBounds(markers.getBounds(), { padding: [50, 30], maxZoom: 15 }); - sidebar.scrollTo(sidebar.children(':first')); + sidebar.firstElementChild.scrollIntoView(scrollOptions); return false; }; @@ -73,24 +80,26 @@ use Fisharebest\Webtrees\View; }); /** + * * @private */ let _drawMap = function () { - map = webtrees.buildLeafletJsMap('osm-map', config) + map = webtrees.buildLeafletJsMap('wt-map', config) .addControl(new resetControl()); }; /** + * * @private */ let _buildMapData = function () { - let sidebar_content = ''; let geoJson_data = <?= json_encode($data, JSON_THROW_ON_ERROR) ?>; if (geoJson_data.features.length === 0) { map.fitWorld(); - sidebar_content += '<div class="bg-info text-white text-center">' + <?= json_encode(I18N::translate('Nothing to show'), JSON_THROW_ON_ERROR) ?> + '</div>'; + sidebar.innerHTML = '<div class="bg-info text-white text-center">' + <?= json_encode(I18N::translate('Nothing to show'), JSON_THROW_ON_ERROR) ?> + '</div>'; } else { + sidebar.innerHTML = ''; let geoJsonLayer = L.geoJson(geoJson_data, { pointToLayer: function (feature, latlng) { return new L.Marker(latlng, { @@ -106,12 +115,13 @@ use Fisharebest\Webtrees\View; id: feature.id, }) .on('popupopen', function (e) { - let item = sidebar.children('.gchart[data-wt-feature-id=' + e.target.feature.id + ']'); - item.addClass('messagebox'); - sidebar.scrollTo(item); + let item = document.querySelector('.gchart[data-wt-feature-id="' + e.target.feature.id + '"]'); + item.classList.add('messagebox'); + item.scrollIntoView(scrollOptions); }) .on('popupclose', function () { - sidebar.children('.gchart').removeClass('messagebox'); + sidebar.childNodes.forEach(e => e.classList.remove('messagebox')); + sidebar.firstElementChild.scrollIntoView(scrollOptions); }); }, onEachFeature: function (feature, layer) { @@ -120,59 +130,48 @@ use Fisharebest\Webtrees\View; markers.addLayer(pline); } layer.bindPopup(feature.properties.summary); - sidebar_content += `<li class="gchart px-md-2" data-wt-feature-id=${feature.id}>${feature.properties.summary}</li>`; + sidebar.innerHTML += `<li class="gchart px-md-2" data-wt-feature-id=${feature.id}>${feature.properties.summary}</li>`; }, }); markers.addLayer(geoJsonLayer); map.addLayer(markers); map.fitBounds(markers.getBounds(), { padding: [50, 30], maxZoom: 15 }); } - sidebar.append(sidebar_content); - }; - - /** - * @param elem - * @returns {$} - */ - $.fn.scrollTo = function (elem) { - let _this = $(this); - _this.animate({ - scrollTop: elem.offset().top - _this.offset().top + _this.scrollTop(), - }); - return this; }; + window.onload = function() { // Activate marker popup when sidebar entry clicked - $(function () { - sidebar - // open marker popup if sidebar event is clicked - .on('click', '.gchart', function (e) { + sidebar.querySelectorAll('.gchart').forEach((element) => { + var eventId = parseInt(element.dataset.wtFeatureId); + + element.addEventListener('click', () => { // first close any existing map.closePopup(); - let eventId = $(this).data('wt-feature-id'); //find the marker corresponding to the clicked event let mkrLayer = markers.getLayers().filter(function (v) { - return typeof (v.feature) !== 'undefined' && v.feature.id === eventId; + return v.feature !== undefined && v.feature.id === eventId; }); + let mkr = mkrLayer.pop(); - // Unfortunately zoomToShowLayer zooms to maxZoom - // when all marker in a cluster have exactly the - // same co-ordinates + markers.zoomToShowLayer(mkr, function (e) { mkr.openPopup(); }); return false; - }) - .on('click', 'a', function (e) { // stop click on a person also opening the popup - e.stopPropagation(); }); - }); + + // stop click on a person also opening the popup + element.querySelectorAll('a').forEach((el) => { + el.addEventListener('click', (e) => { + e.stopPropagation(); + }); + }); + }); + } _drawMap(); _buildMapData(); - - return 'Leaflet map interface for webtrees-2'; })(); </script> <?php View::endpush() ?> |