Permalink
Browse files

Tweak docs about IE10

  • Loading branch information...
IvanSanchez committed Oct 16, 2015
1 parent 130a6c9 commit 652486fd29966e4b6592932f0b7c52fc4de4a8d2
Showing with 89 additions and 90 deletions.
  1. +3 −4 README.md
  2. +44 −44 src/L.VisualClick.css
  3. +42 −42 src/L.VisualClick.js
View
@@ -35,10 +35,9 @@ Tested in
Behaviour is bugged in IE10 due to the lack of `pointer-events: none` in CSS.
This means that the decoration added by this plugin will catch events meant for
whatever overlay might be underneath the clicked point. This can be worked around
by using a map pane underneath the map panes (at pane z-index 3,
`map.createPane('paneName', 3)`) used for overlays and markers (but
of course this means overlays might overlap the visual click effect).
whatever overlay might be underneath the clicked point. This is worked around
by using a map pane between the tiles pane and the overlays pane (but
of course this means overlays will overlap the visual click effect).
### Configurations
There are some options you can configure if you really need to.
View
@@ -5,67 +5,67 @@
*/
.leaflet-visualclick-icon {
border-radius: 100%;
pointer-events: none;
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;
pointer-events: none;
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;
pointer-events: none;
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;
}
}
View
@@ -8,65 +8,65 @@
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: this._map.options.visualClickPane,
icon: this._visualIcon,
interactive: false
}).addTo(map);
var latlng = e.latlng;
var marker = L.marker(latlng, {
pane: this._map.options.visualClickPane,
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();
}
addHooks: function () {
if(this._visualIcon === null){
this._visualIcon = this._makeVisualIcon();
}
if (this._map.options.visualClickPane === 'ie10-visual-click-pane') {
this._map.createPane('ie10-visual-click-pane');
}
if (this._map.options.visualClickPane === 'ie10-visual-click-pane') {
this._map.createPane('ie10-visual-click-pane');
}
this._map.on(this._map.options.visualClickEvents, this._onClick, this);
},
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
visualClickPane: (L.Browser.ie && document.documentMode === 10) ?
'ie10-visual-click-pane' :
'shadowPane' // Map pane where the pulse markers will be showh
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
visualClickPane: (L.Browser.ie && document.documentMode === 10) ?
'ie10-visual-click-pane' :
'shadowPane' // Map pane where the pulse markers will be showh
});
L.Map.addInitHook('addHandler', 'visualClick', L.Map.VisualClick);

0 comments on commit 652486f

Please sign in to comment.