diff --git a/.gitignore b/.gitignore index 23141bb..4a12ed2 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,4 @@ DIRECTIONS.org *.exe *.obj *.out +*.bower_components diff --git a/README.md b/README.md index 2150caa..1631c4e 100644 --- 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 new file mode 100644 index 0000000..917741f --- /dev/null +++ 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 " + ], + "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 index ea56652..6d88da9 100644 --- a/index.html +++ b/index.html @@ -1,45 +1,52 @@ - - singleclick example - - - - - - -
- - - - - - + + +
+ + + + - +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( '

Circle singleclick at ' + ev.latlng ) + .openOn( map ); +}); +circle.options.singleClickTimeout = 250; + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..c065ee6 --- /dev/null +++ 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 index 319b428..97a59dd 100644 --- 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; } } - + }); +