Remove jQuery dependencies. As OpenStreetMap is now not the only provider rename "osm-" references to "wt-" (#4177)

Add changes per @fisharebest

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() ?>