From 178520dd6f8b137196b62ef9c6fd87b64d8c04ba Mon Sep 17 00:00:00 2001
From: David Molineus <david.molineus@netzmacht.de>
Date: Mon, 12 Feb 2018 16:51:24 +0100
Subject: [PATCH] Add feature to pick a new location by clicking on the map.

---
 src/Resources/contao/languages/de/default.php |  3 ++
 src/Resources/contao/languages/en/default.php |  9 +++--
 .../templates/be_widget_leaflet_geocode.html5 |  3 ++
 src/Resources/public/css/backend.css          |  8 +++--
 src/Resources/public/js/geocode.widget.js     | 35 +++++++++++++++++++
 5 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/src/Resources/contao/languages/de/default.php b/src/Resources/contao/languages/de/default.php
index 44e3e13..652c006 100644
--- a/src/Resources/contao/languages/de/default.php
+++ b/src/Resources/contao/languages/de/default.php
@@ -13,3 +13,6 @@
 $GLOBALS['TL_LANG']['ERR']['leafletInvalidCoordinate']   = 'Die angegebenen Koordinaten sind ungültig.';
 $GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel'] = 'Suchen';
 $GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel']  = 'Übernehmen';
+$GLOBALS['TL_LANG']['MSC']['leafletConfirmPositionLabel'] = 'Als neue Position übernehmen?';
+$GLOBALS['TL_LANG']['MSC']['leafletOkLabel']              = 'Ja';
+$GLOBALS['TL_LANG']['MSC']['leafletCancelLabel']          = 'Nein';
diff --git a/src/Resources/contao/languages/en/default.php b/src/Resources/contao/languages/en/default.php
index 61d74e9..c225f67 100644
--- a/src/Resources/contao/languages/en/default.php
+++ b/src/Resources/contao/languages/en/default.php
@@ -10,6 +10,9 @@
  * @filesource
  */
 
-$GLOBALS['TL_LANG']['ERR']['leafletInvalidCoordinate']   = 'Invalid coordinates given.';
-$GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel'] = 'Search';
-$GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel']  = 'Apply';
+$GLOBALS['TL_LANG']['ERR']['leafletInvalidCoordinate']    = 'Invalid coordinates given.';
+$GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel']  = 'Search';
+$GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel']   = 'Apply';
+$GLOBALS['TL_LANG']['MSC']['leafletConfirmPositionLabel'] = 'Set as new position';
+$GLOBALS['TL_LANG']['MSC']['leafletOkLabel']              = 'Ok';
+$GLOBALS['TL_LANG']['MSC']['leafletCancelLabel']          = 'Cancel';
diff --git a/src/Resources/contao/templates/be_widget_leaflet_geocode.html5 b/src/Resources/contao/templates/be_widget_leaflet_geocode.html5
index 2f41077..510de54 100644
--- a/src/Resources/contao/templates/be_widget_leaflet_geocode.html5
+++ b/src/Resources/contao/templates/be_widget_leaflet_geocode.html5
@@ -37,6 +37,9 @@ $GLOBALS['TL_JAVASCRIPT'][] = 'bundles/leafletgeocodewidget/js/geocode.widget.js
                 id: 'ctrl_<?= $this->id ?>',
                 searchPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletSearchPositionLabel'] ?>',
                 applyPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletApplyPositionLabel'] ?>',
+                confirmPositionLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletConfirmPositionLabel'] ?>',
+                okLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletOkLabel'] ?>',
+                cancelLabel: '<?= $GLOBALS['TL_LANG']['MSC']['leafletCancelLabel'] ?>',
                 modalTitle: '<?= $this->label ?>'<?php if ($this->radius): ?>,
                 radius: <?= json_encode($this->radius) ?>,
                 picker: LeafletGeocodeCirclePicker
diff --git a/src/Resources/public/css/backend.css b/src/Resources/public/css/backend.css
index 12a099b..e82756f 100644
--- a/src/Resources/public/css/backend.css
+++ b/src/Resources/public/css/backend.css
@@ -9,9 +9,9 @@
     min-height: 400px
 }
 
-.leaflet-submit-btn {
+.leaflet-geocode-btn {
     margin-top: 10px;
-    display: block;
+    display: inline-block;
     padding: 7px 12px;
     border: 1px solid #aaa;
     border-radius: 2px;
@@ -20,3 +20,7 @@
     background: #eee;
     transition: background .2s ease;
 }
+
+.leaflet-geocode-btn + .leaflet-geocode-btn {
+    margin-left: 5px;
+}
diff --git a/src/Resources/public/js/geocode.widget.js b/src/Resources/public/js/geocode.widget.js
index a0f4f62..f12da94 100644
--- a/src/Resources/public/js/geocode.widget.js
+++ b/src/Resources/public/js/geocode.widget.js
@@ -124,6 +124,9 @@ var LeafletGeocodeWidget = L.Class.extend({
         modalTitle: 'Choose coordinates',
         searchPositionLabel: 'Search',
         applyPositionLabel: 'Apply',
+        confirmPositionLabel: 'Set as new position',
+        okLabel: 'Ok',
+        cancelLabel: 'Cancel',
         radius: null,
         picker: LeafletGeocodeMarkerPicker,
         map: {
@@ -194,6 +197,38 @@ var LeafletGeocodeWidget = L.Class.extend({
             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);
 
+        map.on('click', function (event) {
+            var marker       = new L.marker(event.latlng).addTo(map);
+            var container    = document.createElement('div');
+            var okButton     = document.createElement('button');
+            var cancelButton = document.createElement('button');
+
+            okButton.set('class', 'leaflet-geocode-btn').appendHTML(this.options.okLabel);
+            okButton.addEvent('click', function (event) {
+                event.stop();
+
+                this.picker.show(marker.getLatLng());
+                map.removeLayer(marker);
+            }.bind(this));
+
+            cancelButton.set('class', 'leaflet-geocode-btn').appendHTML(this.options.cancelLabel);
+            cancelButton.addEvent('click', function (event) {
+                map.removeLayer(marker);
+            });
+
+            container.appendHTML('<h2>' + this.options.confirmPositionLabel + '</h2>');
+            container.appendChild(okButton);
+            container.appendChild(cancelButton);
+
+            marker.bindPopup (container, {
+                keepInView: true,
+                autoPanPaddingTopLeft: this.options.bboxPadding,
+                autoClose: false,
+                closeOnClick: false,
+                closeButton: false
+            }).openPopup();
+        }.bind(this));
+
         var geoCoder = L.Control.geocoder({
             defaultMarkGeocode: false,
             collapsed: false,