Skip to content

Commit

Permalink
pointer-events:none fixes #3, indenting, whitespace.
Browse files Browse the repository at this point in the history
  • Loading branch information
@IvanSanchez
IvanSanchez committed Oct 15, 2015
1 parent ab9faa6 commit e3fd315
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 79 deletions.
85 changes: 44 additions & 41 deletions src/L.VisualClick.css
View file
Expand Up @@ -5,62 +5,65 @@
*/

.leaflet-visualclick-icon {
border-radius: 100%;
border-radius: 100%;
pointer-events: none;
}

.leaflet-visualclick-icon:after {
content: "";
border-radius: 100%;
height: 60px;
width: 60px;
position: absolute;
margin-left: -30px;
margin-top: -30px;
content: "";
border-radius: 100%;
height: 60px;
width: 60px;
position: absolute;
margin-left: -30px;
margin-top: -30px;
pointer-events: none;

box-shadow: inset 0 0 25px -1px #E1E3E4, 0 0 10px -1px #C5C5C5;
box-shadow: inset 0 0 25px -1px #E1E3E4, 0 0 10px -1px #C5C5C5;

animation: visualclick-pulsate 0.7s ease-out;
animation-iteration-count: 1;
animation-delay: 0s;
opacity: 0;
animation: visualclick-pulsate 0.7s ease-out;
animation-iteration-count: 1;
animation-delay: 0s;
opacity: 0;
}

.leaflet-visualclick-icon-touch:after {
content: "";
border-radius: 100%;
height: 140px;
width: 140px;
position: absolute;
margin-left: -70px;
margin-top: -70px;
content: "";
border-radius: 100%;
height: 140px;
width: 140px;
position: absolute;
margin-left: -70px;
margin-top: -70px;
pointer-events: none;

box-shadow: inset 0 0 25px -1px #E1E3E4, 0 0 10px -1px #C5C5C5;
box-shadow: inset 0 0 25px -1px #E1E3E4, 0 0 10px -1px #C5C5C5;

animation: visualclick-pulsate-touch 0.7s ease-out;
animation-iteration-count: 1;
animation-delay: 0s;
opacity: 0;
animation: visualclick-pulsate-touch 0.7s ease-out;
animation-iteration-count: 1;
animation-delay: 0s;
opacity: 0;
}

@keyframes visualclick-pulsate {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1.3);
opacity: 0;
}
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}


@keyframes visualclick-pulsate-touch {
from {
transform: scale(1);
opacity: 0.8;
}
to {
transform: scale(0.2);
opacity: 0.0;
}
from {
transform: scale(1);
opacity: 0.8;
}
to {
transform: scale(0.2);
opacity: 0.0;
}
}
79 changes: 41 additions & 38 deletions src/L.VisualClick.js
View file
@@ -1,61 +1,64 @@
/*
* L.VisualClick
* Description: A plugin that adds visual feedback when user clicks/taps the map. Useful for when you have a delay on the clickEvents for async fetching of data, or implmentation of Leaflet.singleclick
* Example: L.visualClick({map: leafletMap}); //Just works
* Author: Dag Jomar Mersland (twitter: @dagjomar)
*/
* L.VisualClick
* Description: A plugin that adds visual feedback when user clicks/taps the map. Useful for when you have a delay on the clickEvents for async fetching of data, or implmentation of Leaflet.singleclick
* Example: L.visualClick({map: leafletMap}); //Just works
* Author: Dag Jomar Mersland (twitter: @dagjomar)
*/


L.Map.VisualClick = L.Handler.extend({

_makeVisualIcon: function(){
_makeVisualIcon: function(){

var touchMode = this._map.options.visualClickMode === 'touch' ? true : false;
var touchMode = this._map.options.visualClickMode === 'touch' ? true : false;

return L.divIcon({
className: "leaflet-visualclick-icon" + (touchMode ? '-touch' : ''), // See L.VisualClick.css
iconSize: [0, 0],
clickable: false
});
return L.divIcon({
className: "leaflet-visualclick-icon" + (touchMode ? '-touch' : ''), // See L.VisualClick.css
iconSize: [0, 0],
clickable: false
});
},

},
_visualIcon: null,

_visualIcon: null,
_onClick: function(e) {

_onClick: function(e) {
var map = this._map;

var map = this._map;
var latlng = e.latlng;
var marker = L.marker(latlng, {
pane: 'shadowPane',
icon: this._visualIcon,
interactive: false
}).addTo(map);

var latlng = e.latlng;
var marker = L.marker(latlng, {pane: 'shadowPane', icon: this._visualIcon, interactive: false}).addTo(map);
window.setTimeout(function(){
if(map){
marker.remove();
}
}.bind(this), map.options.visualClick.removeTimeout || 450); // Should somewhat match the css animation to prevent loops

window.setTimeout(function(){
if(map){
marker.remove();
}
}.bind(this), map.options.visualClick.removeTimeout || 450); // Should somewhat match the css animation to prevent loops
return true;
},

return true;
},
addHooks: function () {
if(this._visualIcon === null){
this._visualIcon = this._makeVisualIcon();
}
this._map.on(this._map.options.visualClickEvents, this._onClick, this);
},

addHooks: function () {
if(this._visualIcon === null){
this._visualIcon = this._makeVisualIcon();
}
this._map.on(this._map.options.visualClickEvents, this._onClick, this);
},

removeHooks: function () {
this._map.off(this._map.options.visualClickEvents, this._onClick, this);
},
removeHooks: function () {
this._map.off(this._map.options.visualClickEvents, this._onClick, this);
},

});


L.Map.mergeOptions({
visualClick: L.Browser.any3d ? true : false, //Can be true, desktop, touch, false. Not straight forward to use L.Browser.touch flag because true on IE10
visualClickMode: L.Browser.touch && L.Browser.mobile ? 'touch' : 'desktop', //Not straight forward to use only L.Browser.touch flag because true on IE10 - so this is slightly better
visualClickEvents: 'click contextmenu', //Standard leaflety way of defining which events to hook on to
visualClick: L.Browser.any3d ? true : false, //Can be true, desktop, touch, false. Not straight forward to use L.Browser.touch flag because true on IE10
visualClickMode: L.Browser.touch && L.Browser.mobile ? 'touch' : 'desktop', //Not straight forward to use only L.Browser.touch flag because true on IE10 - so this is slightly better
visualClickEvents: 'click contextmenu', //Standard leaflety way of defining which events to hook on to
});

L.Map.addInitHook('addHandler', 'visualClick', L.Map.VisualClick);
Expand Down

1 comment on commit e3fd315

@dagjomar
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@IvanSanchez please use 4 spaces as standard indentation unit, not tabs.
Also, it's bad practice to add big white-space commits along with "one-liner-fixes"

Please sign in to comment.