Outdooractive · jvgriffis · Jun 3, 2015 · Sep 29, 2015 · Sep 29, 2015 · Sep 29, 2015
diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,4 @@ DIRECTIONS.org
 *.exe
 *.obj
 *.out
+*.bower_components
diff --git a/README.md b/README.md
@@ -1,11 +1,18 @@
-# singleclick for Leaflet 0.7.*
+# Leaflet.singleclick
 
-This plugin extends `L.Map` to fire the `singleclick` event. The `singleclick` event is not part of Leaflet's core, and most likely never will be: [#108](https://github.com/Leaflet/Leaflet/issues/108)
 
 
+This plugin extends `L.Evented` to fire the `singleclick` event. A `singleclick` happens when clicking on something but not double-clicking for 500msec.
 
-Note: For Leaflet 0.8 it could be possible to extend `L.Evented` instead, to have also Marker etc. support the `singleclick` event.
+The timeout can be configured by setting the `singleClickTimeout` option on the relevant `L.Evented`, like so:
 
-## live example
+```js
+marker.options.singleClickTimeout = 250;
+marker.on('singleclick', function(ev){ ... } );
+```
 
-http://alpstein.github.io/leaflet-singleclick_0.7/
+Works with Leaflet 1.0.0-beta1 and greater. Does **not** work with 0.7.x.
+
+## Live example
+
+http://mazemap.github.io/Leaflet.singleclick/
diff --git a/bower.json b/bower.json
@@ -0,0 +1,25 @@
+{
+  "name": "Leaflet.singleclick",
+  "version": "0.4.0",
+  "homepage": "https://github.com/MazeMap/Leaflet.singleclick",
+  "authors": [
+    "Iván Sánchez Ortega <[email protected]>"
+  ],
+  "description": "Allows Leaflet layers to fire 'singleclick' events",
+  "main": "singleclick.js",
+  "keywords": [
+    "leaflet",
+    "events"
+  ],
+  "license": "Apache",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "leaflet": "~1.0.0-beta.1"
+  }
+}
diff --git a/index.html b/index.html
@@ -1,45 +1,52 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>singleclick example</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
-    <style type="text/css">#map { position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; }</style>
-  </head>
-  <body>
-    <div id="map"></div>
-
-    <script type="text/javascript" src="http://leafletjs.com/dist/leaflet.js"></script>
-
-    <script type="text/javascript" src="singleclick.js"></script>
-
-    <script type="text/javascript">
-// create a map
-
-var div = document.createElement('div');
-div.setAttribute('style','position:fixed;margin:0;padding:0;left:0;top:0;width:100%;height:100%;');
-document.documentElement.appendChild(div);
+<head>
+	<title>Leaflet.singleclick example</title>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<style type="text/css">
+		#map { position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; }
+	</style>
+	<link href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" rel="stylesheet" type="text/css" />
+	<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet-src.js"></script>
+</head>
+<body>
+	<div id="map"></div>
+
+	<script type="text/javascript" src="singleclick.js"></script>
+
+	<script type="text/javascript">
+var div = document.getElementById('map');
 
 var map = L.map(div).setView([51.505, -0.09], 13);
 
-L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
-    maxZoom: 18,
-    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
-        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
-        'Imagery � <a href="http://mapbox.com">Mapbox</a>',
-    id: 'examples.map-i875mjb7'
+var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
 }).addTo(map);
 
 // test
 
-map.on('singleclick',function ( e ) { 
-    console.log( 'singleclick', e ); 
-    L.popup().setLatLng( e.latlng )
-        .setContent( '<p><code>singleclick</code> at ' + e.latlng ) 
-        .openOn( map );
+map.options.singleClickTimeout = 250;
+
+map.on('singleclick',function ( e ) {
+	console.log( 'map singleclick', e );
+	L.popup().setLatLng( e.latlng )
+		.setContent( '<p>Basemap <code>singleclick</code> at ' + e.latlng )
+		.openOn( map );
 } );
-    </script>
 
-  </body>
+var group = L.featureGroup().addTo(map);
+
+var circle = L.circle([51.505, -0.09], 1000).addTo(group).on('singleclick', function(ev) {
+	console.log( 'circle singleclick', ev );
+	L.DomEvent.stop(ev);
+	L.popup().setLatLng( ev.latlng )
+		.setContent( '<p>Circle <code>singleclick</code> at ' + ev.latlng )
+		.openOn( map );
+});
+circle.options.singleClickTimeout = 250;
+
+	</script>
+
+</body>
 </html>
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "leaflet-singleclick",
+  "version": "0.5.0",
+  "main": "singleclick.js"
+}
diff --git a/singleclick.js b/singleclick.js
@@ -1,34 +1,39 @@
-L.Map.addInitHook( function () {
-
-    var that = this
-    ,   h
-    ;
-
-    if (that.on)
-    {
-        that.on( 'click',    check_later );
-        that.on( 'dblclick', function () { setTimeout( clear_h, 0 ); } );
-    }
-
-    function check_later( e )
-    {
-        clear_h();
-
-        h = setTimeout( check, 500 );
-
-        function check()
-        {
-            that.fire( 'singleclick', L.Util.extend( e, { type : 'singleclick' } ) );
+L.Evented.addInitHook( function () {
+    this._singleClickTimeout = null;
+    this.on( 'click', this._scheduleSingleClick, this );
+    this.on( 'dblclick dragstart zoomstart', this._cancelSingleClick, this );
+});
+
+L.Evented.include({
+
+    _cancelSingleClick : function(){
+        // This timeout is key to workaround an issue where double-click events
+        // are fired in this order on some touch browsers: ['click', 'dblclick', 'click']
+        // instead of ['click', 'click', 'dblclick']
+        setTimeout( this._clearSingleClickTimeout.bind(this), 0 );
+    },
+
+    _scheduleSingleClick: function(e) {
+        this._clearSingleClickTimeout();
+
+        this._singleClickTimeout = setTimeout(
+            this._fireSingleClick.bind(this, e),
+            (this.options.singleClickTimeout || 500)
+        );
+    },
+
+    _fireSingleClick: function(e){
+        if ( !e.originalEvent._stopped ) {
+            this.fire( 'singleclick', L.Util.extend( e, { type : 'singleclick' } ) );
         }
-    }
-
-    function clear_h()
-    {
-        if (h != null)
-        {
-            clearTimeout( h );
-            h = null;
+    },
+
+    _clearSingleClickTimeout: function(){
+        if (this._singleClickTimeout != null) {
+            clearTimeout( this._singleClickTimeout );
+            this._singleClickTimeout = null;
         }
     }
-    
+
 });
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,3 +10,4 @@ DIRECTIONS.org @@
     *.exe
     *.obj
     *.out
+    *.bower_components