From f7b8a7ad40d7068393207107bedf45b4e218cefc Mon Sep 17 00:00:00 2001
From: Simon Legner <Simon.Legner@gmail.com>
Date: Mon, 8 Jan 2018 21:57:41 +0100
Subject: [PATCH] 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
---
 README.md       |  2 +-
 demo/index.html |  7 ++++++-
 src/control.js  | 56 +++++++++++++------------------------------------
 3 files changed, 21 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index f71d490e..644b7af4 100755
--- a/README.md
+++ b/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 |
diff --git a/demo/index.html b/demo/index.html
index f98f6939..2b09e09c 100644
--- a/demo/index.html
+++ b/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;
diff --git a/src/control.js b/src/control.js
index 8aa0c81e..cdb7b403 100644
--- a/src/control.js
+++ b/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);
         }
       }