Harmonize event handling with L.Control.Layers

This harmonizes the toggle/expand/collapse handling with
`L.Control.Layers`. Now there are two choices for `options.expand`:
- "click": expands the control upon click, closes it on map click/pan
- "hover" on desktop: expands/collapses upon mouse enter/leave
- "hover" on mobile: expands the control upon click

Author: simon04

README.md

@@ -97,7 +97,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` or `click` or `hover` |
+| `expand`          |  String          |  `"hover"`          | How to expand a collapsed control: `click` or `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 |

demo/index.html

@@ -27,7 +27,12 @@
 	<script type="text/javascript">
 		var map = L.map('map').setView([0, 0], 2),
 			geocoder = L.Control.Geocoder.mapzen('search-DopSHJw'),
-			control = L.Control.geocoder({
+			hoverControl = L.Control.geocoder({
+				expand: 'hover',
+				geocoder: geocoder
+			}).addTo(map),
+			clickControl = L.Control.geocoder({
+				expand: 'click',
 				geocoder: geocoder
 			}).addTo(map),
 			marker;

src/control.js

@@ -6,7 +6,7 @@ export default {
     options: {
       showResultIcons: false,
       collapsed: true,
-      expand: 'touch', // options: touch, click, anythingelse
+      expand: 'hover', // options: click or anything else (hover or touch)
       position: 'topright',
       placeholder: 'Search...',
       errorMessage: 'Nothing found.',
@@ -69,54 +69,26 @@ export default {
         this
       );
 
+      // based on https://github.com/leaflet/leaflet/blob/2dbda53/src/control/Control.Layers.js#L187-L211
       if (this.options.collapsed) {
+        this._map.on('click', this._collapse, this);
+        this._map.on('movestart', this._collapse, this);
         if (this.options.expand === 'click') {
-          L.DomEvent.addListener(
-            container,
-            'click',
-            function(e) {
-              if (e.button === 0 && e.detail !== 2) {
-                this._toggle();
-              }
-            },
-            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);
+          L.DomEvent.on(container, 'click', L.DomEvent.stop);
+          L.DomEvent.on(container, 'click', this._expand, this);
+        } else if (!L.Browser.android) {
+          L.DomEvent.addListener(container, 'mouseenter', this._expand, this);
+          L.DomEvent.addListener(container, 'mouseleave', this._collapse, this);
         }
       } else {
         this._expand();
+      }
+      if (this.options.expand !== 'click') {
         if (L.Browser.touch) {
-          L.DomEvent.addListener(
-            container,
-            'touchstart',
-            function() {
-              this._geocode();
-            },
-            this
-          );
+          L.DomEvent.on(container, 'click', L.DomEvent.stop);
+          L.DomEvent.on(container, 'click', this._expand, this);
         } else {
-          L.DomEvent.addListener(
-            container,
-            'click',
-            function() {
-              this._geocode();
-            },
-            this
-          );
+          L.DomEvent.on(container, 'focus', this._expand, this);
         }
       }