leaflet-control-geocoder - npm Package Compare versions

Comparing version 1.5.5 to 1.5.6

dist/Control.Geocoder.js

@@ -11,3 +11,3 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.leafletControlGeocoder = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
 			collapsed: true,
-			expand: 'click',
+			expand: 'touch', // options: touch, click, anythingelse
 			position: 'topright',
@@ -21,3 +21,3 @@ placeholder: 'Search...',
 
-		includes: L.Mixin.Events,
+		includes: L.Evented.prototype || L.Mixin.Events,
 
@@ -70,3 +70,2 @@ initialize: function (options) {
 					L.DomEvent.addListener(icon, 'click', function(e) {
-						// TODO: touch
 						if (e.button === 0 && e.detail !== 2) {
@@ -76,3 +75,11 @@ this._toggle();
 					}, this);
-				} else {
+				}
+				else if (L.Browser.touch && this.options.expand === 'touch') {
+					L.DomEvent.addListener(icon, 'touchstart', function(e) {
+						this._toggle();
+						e.preventDefault(); // mobile: clicking focuses the icon, so UI expands and immediately collapses
+						e.stopPropagation();
+					}, this);
+				}
+				else {
 					L.DomEvent.addListener(icon, 'mouseover', this._expand, this);
@@ -83,6 +90,13 @@ L.DomEvent.addListener(icon, 'mouseout', this._collapse, this);
 			} else {
-				L.DomEvent.addListener(icon, 'click', function(e) {
-					this._geocode(e);
-				}, this);
 				this._expand();
+				if (L.Browser.touch) {
+					L.DomEvent.addListener(icon, 'touchstart', function(e) {
+						this._geocode(e);
+					}, this);
+				}
+				else {
+					L.DomEvent.addListener(icon, 'click', function(e) {
+						this._geocode(e);
+					}, this);
+				}
 			}
@@ -162,3 +176,2 @@
 			}
-
 			this.fire('markgeocode', {geocode: result});
@@ -168,3 +181,3 @@ },
 		_toggle: function() {
-			if (this._container.className.indexOf('leaflet-control-geocoder-expanded') >= 0) {
+			if (L.DomUtil.hasClass(this._container, 'leaflet-control-geocoder-expanded')) {
 				this._collapse();
@@ -183,5 +196,6 @@ } else {
 		_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');
@@ -199,17 +213,17 @@ },
 				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();
+						}
 					}, this);
@@ -216,0 +230,0 @@ };

package.json

 {
   "name": "leaflet-control-geocoder",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "Extendable geocoder with builtin support for Nominatim, Bing, Google, Mapbox, Photon, What3Words, MapQuest, Mapzen, HERE",
@@ -5,0 +5,0 @@ "main": "dist/Control.Geocoder.js",

README.md

@@ -97,2 +97,3 @@ ## A few words on diversity in tech
 | 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) |
@@ -99,0 +100,0 @@ | placeholder     |  String          |  "Search..."      | Placeholder text for text input

src/control.js

@@ -9,3 +9,3 @@ var L = require('leaflet'),
 			collapsed: true,
-			expand: 'click',
+			expand: 'touch', // options: touch, click, anythingelse
 			position: 'topright',
@@ -19,3 +19,3 @@ placeholder: 'Search...',
 
-		includes: L.Mixin.Events,
+		includes: L.Evented.prototype || L.Mixin.Events,
 
@@ -68,3 +68,2 @@ initialize: function (options) {
 					L.DomEvent.addListener(icon, 'click', function(e) {
-						// TODO: touch
 						if (e.button === 0 && e.detail !== 2) {
@@ -74,3 +73,11 @@ this._toggle();
 					}, this);
-				} else {
+				}
+				else if (L.Browser.touch && this.options.expand === 'touch') {
+					L.DomEvent.addListener(icon, 'touchstart', function(e) {
+						this._toggle();
+						e.preventDefault(); // mobile: clicking focuses the icon, so UI expands and immediately collapses
+						e.stopPropagation();
+					}, this);
+				}
+				else {
 					L.DomEvent.addListener(icon, 'mouseover', this._expand, this);
@@ -81,6 +88,13 @@ L.DomEvent.addListener(icon, 'mouseout', this._collapse, this);
 			} else {
-				L.DomEvent.addListener(icon, 'click', function(e) {
-					this._geocode(e);
-				}, this);
 				this._expand();
+				if (L.Browser.touch) {
+					L.DomEvent.addListener(icon, 'touchstart', function(e) {
+						this._geocode(e);
+					}, this);
+				}
+				else {
+					L.DomEvent.addListener(icon, 'click', function(e) {
+						this._geocode(e);
+					}, this);
+				}
 			}
@@ -160,3 +174,2 @@
 			}
-
 			this.fire('markgeocode', {geocode: result});
@@ -166,3 +179,3 @@ },
 		_toggle: function() {
-			if (this._container.className.indexOf('leaflet-control-geocoder-expanded') >= 0) {
+			if (L.DomUtil.hasClass(this._container, 'leaflet-control-geocoder-expanded')) {
 				this._collapse();
@@ -181,5 +194,6 @@ } else {
 		_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');
@@ -197,17 +211,17 @@ },
 				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();
+						}
 					}, this);
@@ -214,0 +228,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

532728

increased by0.3%

Lines of code

14113

increased by0.32%

Number of lines in readme file

168

increased by0.6%

Worsened metrics

Number of package files

38

decreased by-2.56%

No dependency changes