Update leaflet geocoder.

2025-11-28 02:54:12 +01:00 · 2018-02-06 16:59:33 +01:00
parent 232d223eee
commit bf88bbca8c
6 changed files with 64 additions and 48 deletions
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ This package contains following packages:
 - [Leaflet-omnivore 0.3.4](https://github.com/mapbox/leaflet-omnivore)
 - [Leaflet.loading 0.1.24](https://github.com/ebrelsford/Leaflet.loading)
 - [Leaflet.Control.FullScreen 1.4.3](https://github.com/brunob/leaflet.fullscreen)
- - [Leaflet Control Geocoder 1.5.5](https://github.com/perliedman/leaflet-control-geocoder)
+ - [Leaflet Control Geocoder 1.5.8](https://github.com/perliedman/leaflet-control-geocoder)
 - [Leaflet.ExtraMarkers 1.0.6](https://github.com/coryasilva/Leaflet.ExtraMarkers)
 - [leaflet.pm 0.23.1](https://github.com/codeofsumit/leaflet.pm)
 - [osmtogeojson 2.2.12](https://github.com/tyrasd/osmtogeojson)
--- a/assets/control-geocoder/Control.Geocoder.css
+++ b/assets/control-geocoder/Control.Geocoder.css
@@ -49,6 +49,7 @@
 	background-image: url(images/geocoder.png);
 	background-repeat: no-repeat;
 	background-position: center;
+	cursor: pointer;
 }

 .leaflet-touch .leaflet-control-geocoder-icon {
--- a/assets/control-geocoder/Control.Geocoder.js
+++ b/assets/control-geocoder/Control.Geocoder.js
@@ -8,7 +8,7 @@ module.exports = {
 		options: {
 			showResultIcons: false,
 			collapsed: true,
-			expand: 'click',
+			expand: 'touch', // options: touch, click, anythingelse
 			position: 'topright',
 			placeholder: 'Search...',
 			errorMessage: 'Nothing found.',
@@ -17,7 +17,7 @@ module.exports = {
 			defaultMarkGeocode: true
 		},

-		includes: L.Mixin.Events,
+		includes: L.Evented.prototype || L.Mixin.Events,

 		initialize: function (options) {
 			L.Util.setOptions(this, options);
@@ -54,6 +54,9 @@ module.exports = {
 			L.DomEvent.disableClickPropagation(this._alts);

 			L.DomEvent.addListener(input, 'keydown', this._keydown, this);
+			if (this.options.geocoder.suggest) {
+				L.DomEvent.addListener(input, 'input', this._change, this);
+			}
 			L.DomEvent.addListener(input, 'blur', function() {
 				if (this.options.collapsed && !this._preventBlurCollapse) {
 					this._collapse();
@@ -64,22 +67,36 @@ module.exports = {

 			if (this.options.collapsed) {
 				if (this.options.expand === 'click') {
-					L.DomEvent.addListener(icon, 'click', function(e) {
-						// TODO: touch
+					L.DomEvent.addListener(container, 'click', function(e) {
 						if (e.button === 0 && e.detail !== 2) {
 							this._toggle();
 						}
 					}, this);
-				} else {
-					L.DomEvent.addListener(icon, 'mouseover', this._expand, this);
-					L.DomEvent.addListener(icon, 'mouseout', this._collapse, this);
+				}
+				else if (L.Browser.touch && this.options.expand === 'touch') {
+					L.DomEvent.addListener(container, 'touchstart mousedown', function(e) {
+						this._toggle();
+						e.preventDefault(); // mobile: clicking focuses the icon, so UI expands and immediately collapses
+						e.stopPropagation();
+					}, this);
+				}
+				else {
+					L.DomEvent.addListener(container, 'mouseover', this._expand, this);
+					L.DomEvent.addListener(container, 'mouseout', this._collapse, this);
 					this._map.on('movestart', this._collapse, this);
 				}
 			} else {
-				L.DomEvent.addListener(icon, 'click', function(e) {
-					this._geocode(e);
-				}, this);
 				this._expand();
+				if (L.Browser.touch) {
+					L.DomEvent.addListener(container, 'touchstart', function(e) {
+						this._geocode(e);
+					}, this);
+				}
+				else {
+					L.DomEvent.addListener(container, 'click', function(e) {
+						this._geocode(e);
+					}, this);
+				}
 			}

 			if (this.options.defaultMarkGeocode) {
@@ -151,15 +168,11 @@ module.exports = {
 		},

 		_geocodeResultSelected: function(result) {
-			if (!this.options.collapsed) {
-				this._clearResults();
-			}
-
 			this.fire('markgeocode', {geocode: result});
 		},

 		_toggle: function() {
-			if (this._container.className.indexOf('leaflet-control-geocoder-expanded') >= 0) {
+			if (L.DomUtil.hasClass(this._container, 'leaflet-control-geocoder-expanded')) {
 				this._collapse();
 			} else {
 				this._expand();
@@ -173,9 +186,10 @@ module.exports = {
 		},

 		_collapse: function () {
-			this._container.className = this._container.className.replace(' leaflet-control-geocoder-expanded', '');
+			L.DomUtil.removeClass(this._container, 'leaflet-control-geocoder-expanded');
 			L.DomUtil.addClass(this._alts, 'leaflet-control-geocoder-alternatives-minimized');
 			L.DomUtil.removeClass(this._errorElement, 'leaflet-control-geocoder-error');
+			this._input.blur(); // mobile: keyboard shouldn't stay expanded
 			this.fire('collapse');
 		},

@@ -188,21 +202,23 @@ module.exports = {
 		_createAlt: function(result, index) {
 			var li = L.DomUtil.create('li', ''),
 				a = L.DomUtil.create('a', '', li),
-			    icon = this.options.showResultIcons && result.icon ? L.DomUtil.create('img', '', a) : null,
-			    text = result.html ? undefined : document.createTextNode(result.name),
-			    mouseDownHandler = function mouseDownHandler(e) {
-			    	// In some browsers, a click will fire on the map if the control is
-			    	// collapsed directly after mousedown. To work around this, we
-			    	// wait until the click is completed, and _then_ collapse the
-			    	// control. Messy, but this is the workaround I could come up with
-			    	// for #142.
-			    	this._preventBlurCollapse = true;
+				icon = this.options.showResultIcons && result.icon ? L.DomUtil.create('img', '', a) : null,
+				text = result.html ? undefined : document.createTextNode(result.name),
+				mouseDownHandler = function mouseDownHandler(e) {
+					// In some browsers, a click will fire on the map if the control is
+					// collapsed directly after mousedown. To work around this, we
+					// wait until the click is completed, and _then_ collapse the
+					// control. Messy, but this is the workaround I could come up with
+					// for #142.
+					this._preventBlurCollapse = true;
 					L.DomEvent.stop(e);
 					this._geocodeResultSelected(result);
 					L.DomEvent.on(li, 'click', function() {
-			    		if (this.options.collapsed) {
-			    			this._collapse();
-			    		}
+						if (this.options.collapsed) {
+							this._collapse();
+						} else {
+							this._clearResults();
+						}
 					}, this);
 				};

@@ -221,7 +237,7 @@ module.exports = {
 			// Use mousedown and not click, since click will fire _after_ blur,
 			// causing the control to have collapsed and removed the items
 			// before the click can fire.
-			L.DomEvent.addListener(li, 'mousedown', mouseDownHandler, this);
+			L.DomEvent.addListener(li, 'mousedown touchstart', mouseDownHandler, this);

 			return li;
 		},
@@ -252,12 +268,10 @@ module.exports = {
 			// Up
 			case 38:
 				select(-1);
-				L.DomEvent.preventDefault(e);
 				break;
 			// Up
 			case 40:
 				select(1);
-				L.DomEvent.preventDefault(e);
 				break;
 			// Enter
 			case 13:
@@ -268,19 +282,19 @@ module.exports = {
 				} else {
 					this._geocode();
 				}
-				L.DomEvent.preventDefault(e);
 				break;
-			default:
-				var v = this._input.value;
-				if (this.options.geocoder.suggest && v !== this._lastGeocode) {
-					clearTimeout(this._suggestTimeout);
-					if (v.length >= this.options.suggestMinLength) {
-						this._suggestTimeout = setTimeout(L.bind(function() {
-							this._geocode(true);
-						}, this), this.options.suggestTimeout);
-					} else {
-						this._clearResults();
-					}
+			}
+		},
+		_change: function(e) {
+			var v = this._input.value;
+			if (v !== this._lastGeocode) {
+				clearTimeout(this._suggestTimeout);
+				if (v.length >= this.options.suggestMinLength) {
+					this._suggestTimeout = setTimeout(L.bind(function() {
+						this._geocode(true);
+					}, this), this.options.suggestTimeout);
+				} else {
+					this._clearResults();
 				}
 			}
 		}
--- a/assets/control-geocoder/README.md
+++ b/assets/control-geocoder/README.md
@@ -21,7 +21,7 @@ The plugin supports many different data providers:
 * [What3Words](http://what3words.com/)
 * [Photon](http://photon.komoot.de/)
 * [Mapzen Search](https://mapzen.com/projects/search)
-* [HERE Geocoder API] (https://developer.here.com/rest-apis/documentation/geocoder/topics/overview.html)
+* [HERE Geocoder API](https://developer.here.com/documentation/geocoder/topics/introduction.html)

 The plugin can easily be extended to support other providers. Current extensions:

@@ -94,6 +94,7 @@ L.Control.Geocoder(options)
 | Option          |  Type            |  Default          | Description |
 | --------------- | ---------------- | ----------------- | ----------- |
 | collapsed       |  Boolean         |  true             | Collapse control unless hovered/clicked |
+| expand          |  String          |  "touch"          | How to expand a collapsed control: `touch` `click` `hover` |
 | position        |  String          |  "topright"       | Control [position](http://leafletjs.com/reference.html#control-positions) |
 | placeholder     |  String          |  "Search..."      | Placeholder text for text input
 | errorMessage    |  String          |  "Nothing found." | Message when no result found / geocoding error occurs |
--- a/assets/control-geocoder/package.json
+++ b/assets/control-geocoder/package.json
@@ -1,10 +1,10 @@
 {
  "name": "leaflet-control-geocoder",
-  "version": "1.5.5",
+  "version": "1.5.8",
  "description": "Extendable geocoder with builtin support for Nominatim, Bing, Google, Mapbox, Photon, What3Words, MapQuest, Mapzen, HERE",
  "main": "dist/Control.Geocoder.js",
  "scripts": {
-    "prepublish": "sh ./scripts/build.sh",
+    "prepare": "sh ./scripts/build.sh",
    "publish": "sh ./scripts/publish.sh",
    "postpublish": "sh ./scripts/postpublish.sh"
  },
--- a/module/config/config.php
+++ b/module/config/config.php
@@ -75,7 +75,7 @@ $GLOBALS['LEAFLET_LIBRARIES']['leaflet-fullscreen'] = array
 $GLOBALS['LEAFLET_LIBRARIES']['leaflet-control-geocoder'] = array
 (
    'name'       => 'Leaflet Control Geocoder',
-    'version'    => '1.5.5',
+    'version'    => '1.5.8',
    'license'    => '<a href="https://github.com/perliedman/leaflet-control-geocoder/blob/master/LICENSE" target="_blank">BSD-2-Clause</a>',
    'homepage'   => 'https://github.com/perliedman/leaflet-control-geocoder',
    'css'        => 'assets/leaflet/libs/control-geocoder/Control.Geocoder.min.css',