Remove jQuery (#4178)

Remove outer function
changes as per @fisharebest

1 files changed, 90 insertions, 90 deletions

diff --git a/resources/views/admin/location-edit.phtml b/resources/views/admin/location-edit.phtml
index 6bee1d9753..e6759bb6d9 100644
--- a/resources/views/admin/location-edit.phtml
+++ b/resources/views/admin/location-edit.phtml
@@ -26,7 +26,7 @@ use Fisharebest\Webtrees\View;
 
 <div class="row form-group mb-3">
     <div class="col-sm-12">
-        <div id="osm-map" class="wt-ajax-load col-sm-12 osm-admin-map" dir="ltr"></div>
+        <div id="wt-map" class="wt-ajax-load col-sm-12 wt-map-admin" dir="ltr"></div>
     </div>
 </div>
 
@@ -82,7 +82,7 @@ use Fisharebest\Webtrees\View;
 
 <?php View::push('styles') ?>
 <style>
-    .osm-admin-map {
+    .wt-map-admin {
         height: 55vh;
         border: 1px solid darkGrey
     }
@@ -91,103 +91,103 @@ use Fisharebest\Webtrees\View;
 
 <?php View::push('javascript') ?>
 <script>
-    'use strict';
+  'use strict';
 
-    window.WT_OSM_ADMIN = (function () {
-        const config = <?= json_encode($leaflet_config, JSON_THROW_ON_ERROR) ?>;
-        const add_place = <?= json_encode($location->id() === null, JSON_THROW_ON_ERROR) ?>;
+  (function () {
+    const config = <?= json_encode($leaflet_config, JSON_THROW_ON_ERROR) ?>;
+    const add_place = <?= json_encode($location->id() === null, JSON_THROW_ON_ERROR) ?>;
 
-        // postcss_image_inliner breaks the autodetection of image paths.
-        L.Icon.Default.imagePath = <?= json_encode(asset('css/images/'), JSON_THROW_ON_ERROR) ?>;
+    let new_place_lati = document.getElementById('new_place_lati');
+    let new_place_long = document.getElementById('new_place_long');
 
-        // draggable marker
-        let marker = L.marker(<?= json_encode($marker_position, JSON_THROW_ON_ERROR) ?>, {
-            draggable: true,
-        })
-            .on('dragend', function () {
-                let coords = marker.getLatLng();
-                map.panTo(coords);
-                $('#new_place_lati').val(Number(coords.lat).toFixed(5));
-                $('#new_place_long').val(Number(coords.lng).toFixed(5));
-            });
+    // postcss_image_inliner breaks the autodetection of image paths.
+    L.Icon.Default.imagePath = <?= json_encode(asset('css/images/'), JSON_THROW_ON_ERROR) ?>;
 
-        //reset map to initial state
-        let resetControl = L.Control.extend({
-            options: {
-                position: 'topleft'
-            },
-            onAdd: function (map) {
-                let container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
-                container.onclick = function () {
-                    map.fitBounds(<?= json_encode($map_bounds, JSON_THROW_ON_ERROR) ?>, {padding: [50, 30]});
-                    marker.setLatLng(<?= json_encode([$location->latitude(), $location->longitude()], JSON_THROW_ON_ERROR) ?>);
-                    $('form').trigger('reset');
-                    return false;
-                };
-                let reset = config.i18n.reset;
-                let anchor = L.DomUtil.create('a', 'leaflet-control-reset', container);
-                anchor.setAttribute('aria-label', reset);
-                anchor.href = '#';
-                anchor.title = reset;
-                anchor.role = 'button';
-                let image = L.DomUtil.create('i', 'fas fa-redo', anchor);
-                image.alt = reset;
+    // draggable marker
+    let marker = L.marker(<?= json_encode($marker_position, JSON_THROW_ON_ERROR) ?>, {
+      draggable: true,
+    })
+    .on('dragend', function () {
+      let coords = marker.getLatLng();
+      map.panTo(coords);
+      new_place_lati.value = Number(coords.lat).toFixed(5);
+      new_place_long.value = Number(coords.lng).toFixed(5);
+    });
 
-                return container;
-            }
-        });
+    //reset map to initial state
+    let resetControl = L.Control.extend({
+      options: {
+          position: 'topleft'
+      },
+      onAdd: function (map) {
+        let container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
+        container.onclick = function () {
+          map.fitBounds(<?= json_encode($map_bounds, JSON_THROW_ON_ERROR) ?>, {padding: [50, 30]});
+          marker.setLatLng(<?= json_encode([$location->latitude(), $location->longitude()], JSON_THROW_ON_ERROR) ?>);
+          document.querySelector('form').reset();
 
-        // Geocoder (place lookup)
-        let geocoder = new L.Control.geocoder({
-            position: 'bottomleft',
-            defaultMarkGeocode: false,
-            expand: 'click',
-            showResultIcons: true,
-            query: <?= json_encode($location->locationName(), JSON_THROW_ON_ERROR) ?>,
-            placeholder: <?= json_encode(I18N::translate('Place'), JSON_THROW_ON_ERROR) ?>,
-            errorMessage: <?= json_encode(I18N::translate('Nothing found.'), JSON_THROW_ON_ERROR) ?>,
-            iconLabel: <?= json_encode(I18N::translate('Search'), JSON_THROW_ON_ERROR) ?>
-        })
-            .on('markgeocode', function (result) {
-                let coords = result.geocode.center;
-                let place = result.geocode.name.split(',', 1).toString();
-                marker.setLatLng(coords);
-                map.panTo(coords);
-                if (add_place) {
-                    $('#new_place_name').val(place);
-                }
-                $('#new_place_lati').val(Number(coords.lat).toFixed(5));
-                $('#new_place_long').val(Number(coords.lng).toFixed(5));
-            });
+          return false;
+        };
+        let reset = config.i18n.reset;
+        let anchor = L.DomUtil.create('a', 'leaflet-control-reset', container);
+        anchor.setAttribute('aria-label', reset);
+        anchor.href = '#';
+        anchor.title = reset;
+        anchor.role = 'button';
+        let image = L.DomUtil.create('i', 'fas fa-redo', anchor);
+        image.alt = reset;
 
-        /**
-         * @private
-         */
-        $(function () {
-            // geocoder button tooltip
-            $('.leaflet-control-geocoder-icon')
-                .attr('title', <?= json_encode(I18N::translate('Search'), JSON_THROW_ON_ERROR) ?>);
+        return container;
+      }
+    });
 
-            $('.editable').on('change', function () {
-                let lat = $('#new_place_lati').val();
-                let lng = $('#new_place_long').val();
-                marker.setLatLng([lat, lng]);
-                map.panTo([lat, lng]);
-            });
-        });
+    // Geocoder (place lookup)
+    let geocoder = new L.Control.geocoder({
+      position: 'bottomleft',
+      defaultMarkGeocode: false,
+      expand: 'click',
+      showResultIcons: true,
+      query: <?= json_encode($location->locationName(), JSON_THROW_ON_ERROR) ?>,
+      placeholder: <?= json_encode(I18N::translate('Place'), JSON_THROW_ON_ERROR) ?>,
+      errorMessage: <?= json_encode(I18N::translate('Nothing found.'), JSON_THROW_ON_ERROR) ?>,
+      iconLabel: <?= json_encode(I18N::translate('Search'), JSON_THROW_ON_ERROR) ?>
+    })
+    .on('markgeocode', function (result) {
+      let coords = result.geocode.center;
+      let place = result.geocode.name.split(',', 1).toString();
+      marker.setLatLng(coords);
+      map.panTo(coords);
+      if (add_place) {
+        document.getElementById('new_place_name').value = place
+      }
+      new_place_lati.value = Number(coords.lat).toFixed(5);
+      new_place_long.value = Number(coords.lng).toFixed(5);
+    });
 
-      const map = webtrees.buildLeafletJsMap('osm-map', config)
-            .addControl(new resetControl())
-            .addControl(geocoder)
-            .addLayer(marker)
-            .fitBounds(<?= json_encode($map_bounds, JSON_THROW_ON_ERROR) ?>, {padding: [50, 30]})
-            .on('zoomend', function () {
-              if (!map.getBounds().contains(marker.getLatLng())) {
-                map.panTo(marker.getLatLng());
-              }
-            });
+    const map = webtrees.buildLeafletJsMap('wt-map', config)
+      .addControl(new resetControl())
+      .addControl(geocoder)
+      .addLayer(marker)
+      .fitBounds(<?= json_encode($map_bounds, JSON_THROW_ON_ERROR) ?>, {padding: [50, 30]})
+      .on('zoomend', function () {
+        if (!map.getBounds().contains(marker.getLatLng())) {
+          map.panTo(marker.getLatLng());
+        }
+    });
 
-        return 'Leaflet map interface for webtrees-2';
-    })();
+    document.querySelectorAll('.editable').forEach((element) => {
+      element.addEventListener('change', () => {
+        let lat = new_place_lati.value;
+        let lng = new_place_long.value;
+        marker.setLatLng([lat, lng]);
+        map.panTo([lat, lng]);
+      });
+    });
+
+    window.onload = function() {
+      let icon = document.querySelector('.leaflet-control-geocoder-icon');
+      icon.setAttribute('title', <?= json_encode(I18N::translate('Search'), JSON_THROW_ON_ERROR) ?>);
+    }
+  })();
 </script>
 <?php View::endpush() ?>