From bf88bbca8c8b87b9f4ec1bcf1a0907ad97979e0c Mon Sep 17 00:00:00 2001 From: David Molineus Date: Tue, 6 Feb 2018 16:59:33 +0100 Subject: [PATCH] Update leaflet geocoder. --- README.md | 2 +- assets/control-geocoder/Control.Geocoder.css | 1 + assets/control-geocoder/Control.Geocoder.js | 100 +++++++++++-------- assets/control-geocoder/README.md | 3 +- assets/control-geocoder/package.json | 4 +- module/config/config.php | 2 +- 6 files changed, 64 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index d408e48..3f1a3e3 100644 --- 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) diff --git a/assets/control-geocoder/Control.Geocoder.css b/assets/control-geocoder/Control.Geocoder.css index 3418d89..f89d72e 100644 --- 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 { diff --git a/assets/control-geocoder/Control.Geocoder.js b/assets/control-geocoder/Control.Geocoder.js index 542e54f..202dbda 100644 --- 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(); } } } diff --git a/assets/control-geocoder/README.md b/assets/control-geocoder/README.md index 27c5b16..736b082 100755 --- 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 | diff --git a/assets/control-geocoder/package.json b/assets/control-geocoder/package.json index c7deb52..a4da1e3 100644 --- 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" }, diff --git a/module/config/config.php b/module/config/config.php index aee9dd0..6dc3ef0 100644 --- 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' => 'BSD-2-Clause', 'homepage' => 'https://github.com/perliedman/leaflet-control-geocoder', 'css' => 'assets/leaflet/libs/control-geocoder/Control.Geocoder.min.css',