fix(LeafletGeotagField): Do not display a Marker if field is empty

roadiz · Sep 12, 2023 · 9b6b27d · 9b6b27d
1 parent 37bf74b
commit 9b6b27d
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 374 deletions.
diff --git a/lib/Rozier/src/Resources/app/components/WarningModal.vue b/lib/Rozier/src/Resources/app/components/WarningModal.vue
@@ -13,7 +13,7 @@
 
                         <div class="btns">
                             <a :href="linkUrl" class="btn large-btn" v-if="linkUrl && linkLabel">{{ linkLabel }}</a>
-                            <button v-if="closeable" class="large-btn" @click="close">Close</button>
+                            <button type="button" v-if="closeable" class="large-btn" @click="close">Close</button>
                         </div>
                     </div>
                 </div>

diff --git a/lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js b/lib/Rozier/src/Resources/app/widgets/LeafletGeotagField.js
@@ -65,8 +65,8 @@ export default class LeafletGeotagField {
             '</ul>',
             '<div class="uk-navbar-content uk-navbar-flip">',
             '<div class="geotag-widget-quick-creation uk-button-group">',
-            '<input class="rz-geotag-address" id="' + fieldAddressId + '" type="text" value="" />',
-            '<button id="' +
+            '<input autocomplete="off" class="rz-geotag-address" id="' + fieldAddressId + '" type="text" value="" />',
+            '<button type="button" id="' +
                 resetButtonId +
                 '" class="uk-button uk-button-content uk-button-table-delete rz-geotag-reset" title="' +
                 window.Rozier.messages.geotag.resetMarker +
@@ -110,23 +110,23 @@ export default class LeafletGeotagField {
                 jsonCode = JSON.parse(element.value)
                 marker = this.createMarker(jsonCode, map)
                 $geocodeReset.style.display = 'inline-block'
+                marker.on('dragend', $.proxy(this.setMarkerEvent, this, marker, element, $geocodeReset, map))
+                $geocodeReset.addEventListener(
+                    'click',
+                    $.proxy(this.resetMarker, this, marker, element, $geocodeReset, map)
+                )
             } catch (e) {
                 element.style.display = null
                 document.getElementById(fieldId).style.display = 'none'
                 return false
             }
-        } else {
-            marker = this.createMarker(jsonCode, map)
         }
 
-        marker.on('dragend', $.proxy(this.setMarkerEvent, this, marker, element, $geocodeReset, map))
-        map.on('click', $.proxy(this.setMarkerEvent, this, marker, element, $geocodeReset, map))
-
+        map.on('click', $.proxy(this.setMarkerEvent, this, null, element, $geocodeReset, map))
         $geocodeInput.addEventListener(
             'keypress',
             $.proxy(this.requestGeocode, this, marker, element, $geocodeReset, map)
         )
-        $geocodeReset.addEventListener('click', $.proxy(this.resetMarker, this, marker, element, $geocodeReset, map))
         window.Rozier.$window.on('resize', $.proxy(this.resetMap, this, map, marker, mapOptions))
         window.Rozier.$window.on('pageshowend', $.proxy(this.resetMap, this, map, marker, mapOptions))
         this.resetMap(map, marker, mapOptions, null)
@@ -144,13 +144,14 @@ export default class LeafletGeotagField {
     }
 
     /**
-     * @param {Object} marker
+     * @param {Marker} marker
      * @param {HTMLInputElement} $input
      * @param {HTMLElement} $geocodeReset
      * @param {Map} map
      * @param {Event} event
      */
     resetMarker(marker, $input, $geocodeReset, map, event) {
+        event.preventDefault()
         marker.removeFrom(map)
         $input.value = ''
         $geocodeReset.style.display = 'none'
@@ -165,23 +166,44 @@ export default class LeafletGeotagField {
      * @param {Event} event
      */
     setMarkerEvent(marker, $input, $geocodeReset, map, event) {
+        if (!marker) {
+            marker = this.createAndBindMarker(event.latlng, map, $input, $geocodeReset)
+        }
+
         if (typeof event.latlng !== 'undefined') {
             this.setMarker(marker, $input, $geocodeReset, map, event.latlng)
-        } else if (marker !== null) {
+        } else {
             const latLng = marker.getLatLng()
             map.panTo(latLng)
             this.applyGeocode($input, $geocodeReset, latLng, map.getZoom(), undefined)
         }
     }
 
     /**
-     * @param {Marker} marker
+     * @param {LatLng} latlng
+     * @param {Map} map
+     * @param {HTMLInputElement} $input
+     * @param {HTMLElement} $geocodeReset
+     * @returns {Marker}
+     */
+    createAndBindMarker(latlng, map, $input, $geocodeReset) {
+        const marker = this.createMarker(latlng, map)
+        marker.on('dragend', $.proxy(this.setMarkerEvent, this, marker, $input, $geocodeReset, map))
+        $geocodeReset.addEventListener('click', $.proxy(this.resetMarker, this, marker, $input, $geocodeReset, map))
+        return marker
+    }
+
+    /**
+     * @param {Marker|null} marker
      * @param {HTMLInputElement} $input
      * @param {HTMLElement} $geocodeReset
      * @param {Map} map
      * @param {LatLng} latlng
      */
     setMarker(marker, $input, $geocodeReset, map, latlng) {
+        if (!marker) {
+            marker = this.createAndBindMarker(latlng, map, $input, $geocodeReset)
+        }
         marker.setLatLng(latlng)
         marker.addTo(map)
         map.panTo(latlng)
@@ -258,7 +280,7 @@ export default class LeafletGeotagField {
     }
 
     /**
-     * @param {Marker} marker
+     * @param {Marker|null} marker
      * @param {HTMLInputElement} $input
      * @param {HTMLElement} $geocodeReset
      * @param {Map} map

diff --git a/lib/Rozier/src/Resources/app/widgets/MultiLeafletGeotagField.js b/lib/Rozier/src/Resources/app/widgets/MultiLeafletGeotagField.js
@@ -74,8 +74,8 @@ export default class MultiLeafletGeotagField extends LeafletGeotagField {
             '</ul>',
             '<div class="uk-navbar-content uk-navbar-flip">',
             '<div class="geotag-widget-quick-creation uk-button-group">',
-            '<input class="rz-geotag-address" id="' + fieldAddressId + '" type="text" value="" />',
-            '<button id="' +
+            '<input autocomplete="off" class="rz-geotag-address" id="' + fieldAddressId + '" type="text" value="" />',
+            '<button type="button" id="' +
                 resetButtonId +
                 '" class="uk-button uk-button-content uk-button-table-delete rz-geotag-reset" title="' +
                 window.Rozier.messages.geotag.resetMarker +
@@ -122,7 +122,6 @@ export default class MultiLeafletGeotagField extends LeafletGeotagField {
                     )
                     markers.push(marker)
                 }
-                $geocodeReset.style.display = 'inline-block'
             } catch (e) {
                 element.style.display = 'block'
                 $(document.getElementById(fieldId)).style.display = 'none'
@@ -135,10 +134,6 @@ export default class MultiLeafletGeotagField extends LeafletGeotagField {
             'keypress',
             $.proxy(this.requestGeocode, this, markers, element, $geocodeReset, map, $selector)
         )
-        $geocodeReset.addEventListener(
-            'click',
-            $.proxy(this.resetMarker, this, markers, element, $geocodeReset, map, $selector)
-        )
         window.Rozier.$window.on('resize', $.proxy(this.resetMap, this, map, markers, mapOptions))
         window.Rozier.$window.on('pageshowend', $.proxy(this.resetMap, this, map, markers, mapOptions))
         this.resetMap(map, markers, mapOptions, null)
@@ -164,10 +159,10 @@ export default class MultiLeafletGeotagField extends LeafletGeotagField {
                 marker.name ? marker.name : '#' + i,
                 '</span>',
                 '<span class="uk-button-group">',
-                '<button class="uk-button uk-button-mini rz-multi-geotag-center" data-geocode-id="' +
+                '<button type="button" class="uk-button uk-button-mini rz-multi-geotag-center" data-geocode-id="' +
                     i +
                     '"><i class="uk-icon-rz-marker"></i></button>',
-                '<button class="uk-button uk-button-mini rz-multi-geotag-remove" data-geocode-id="' +
+                '<button type="button" class="uk-button uk-button-mini rz-multi-geotag-remove" data-geocode-id="' +
                     i +
                     '"><i class="uk-icon-rz-trash-o"></i></button>',
                 '</span>',
@@ -305,7 +300,6 @@ export default class MultiLeafletGeotagField extends LeafletGeotagField {
             map.flyTo(latLng, latLng.alt)
             markers.push(marker)
             this.writeMarkers(markers, $input)
-            $geocodeReset.style.display = 'inline-block'
         }
 
         return marker

diff --git a/lib/Rozier/src/Resources/views/partials/css-inject.html.twig b/lib/Rozier/src/Resources/views/partials/css-inject.html.twig
@@ -1,7 +1,7 @@
 
 <link href="{{ asset('css/vendor.00b2be12b114cc414b2c.css', 'Rozier') }}" rel="stylesheet">
 
-<link href="{{ asset('css/app.bd1efb846a65ba8724e5.css', 'Rozier') }}" rel="stylesheet">
+<link href="{{ asset('css/app.5b5b64bd3bc26c8fe87e.css', 'Rozier') }}" rel="stylesheet">
 
 
 

diff --git a/lib/Rozier/src/Resources/views/partials/js-inject.html.twig b/lib/Rozier/src/Resources/views/partials/js-inject.html.twig
@@ -1,5 +1,5 @@
 
-<script src="{{ asset('js/vendor.41061e77e5bc12f769d2.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/vendor.eb9f55bc148f20edd4a5.js', 'Rozier') }}" defer type="text/javascript"></script>
 
-<script src="{{ asset('js/app.41061e77e5bc12f769d2.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/app.eb9f55bc148f20edd4a5.js', 'Rozier') }}" defer type="text/javascript"></script>
 
diff --git a/lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig b/lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig
@@ -1,3 +1,3 @@
 
-<script src="{{ asset('js/simple.41061e77e5bc12f769d2.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/simple.eb9f55bc148f20edd4a5.js', 'Rozier') }}" defer type="text/javascript"></script>
 
diff --git a/lib/Rozier/src/static/css/app.bd1efb846a65ba8724e5.css b/lib/Rozier/src/static/css/app.bd1efb846a65ba8724e5.css
diff --git a/lib/Rozier/src/static/css/app.bd1efb846a65ba8724e5.css.map b/lib/Rozier/src/static/css/app.bd1efb846a65ba8724e5.css.map
diff --git a/lib/Rozier/src/static/js/app.41061e77e5bc12f769d2.js b/lib/Rozier/src/static/js/app.41061e77e5bc12f769d2.js
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,3 @@

		<script src="{{ asset('js/simple.41061e77e5bc12f769d2.js', 'Rozier') }}" defer type="text/javascript"></script>
		<script src="{{ asset('js/simple.eb9f55bc148f20edd4a5.js', 'Rozier') }}" defer type="text/javascript"></script>