make zoom buttons disabled when reaching min/max, closes #917
This commit is contained in:
parent
469211d0cf
commit
c33a4013a2
@ -17,6 +17,7 @@ An in-progress version being developed on the master branch.
|
||||
* **Improved dragging cursors** in Chrome, Safari and Firefox (now grabbing hand cursors are used).
|
||||
* Improved scale control styles.
|
||||
* Improved zoom control to zoom by 3 levels if you hold shift while clicking on a button.
|
||||
* Improved zoom control buttons to become visually disabled when min/max zoom is reached. [#917](https://github.com/CloudMade/Leaflet/issues/917)
|
||||
* Improved scroll wheel zoom to be more responsive.
|
||||
* Improved zoom animation curve for a better feel overall.
|
||||
* Improved fallback control styles for IE6-8.
|
||||
@ -54,7 +55,7 @@ An in-progress version being developed on the master branch.
|
||||
* Fixed a glitch with zooming in while panning animation is running.
|
||||
* Fixed a glitch with dragging the map while zoom animation is running.
|
||||
* Fixed a bug where slight touchpad scrolling or one-wheel scrolling wouln't always perform zooming. [#1039](https://github.com/CloudMade/Leaflet/issues/1039)
|
||||
* Fixed a bug where `panBy` wouldn't round the offset values (so it was possible to make the map blurry with it). [#1085](https://github.com/CloudMade/Leaflet/issues/1085)
|
||||
* Fixed a bug where `panBy` wouldn't round the offset values (so it was possible to make the map blurry with it). [#1085](https://github.com/CloudMade/Leaflet/issues/1085)
|
||||
|
||||
#### API bugfixes
|
||||
|
||||
|
5
dist/leaflet.css
vendored
5
dist/leaflet.css
vendored
@ -226,6 +226,11 @@
|
||||
-webkit-border-radius: 0 0 5px 5px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.leaflet-control-zoom a.leaflet-control-zoom-disabled {
|
||||
cursor: default;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom {
|
||||
border-radius: 10px;
|
||||
|
@ -9,12 +9,20 @@ L.Control.Zoom = L.Control.extend({
|
||||
|
||||
this._map = map;
|
||||
|
||||
this._createButton('+', 'Zoom in', className + '-in', container, this._zoomIn, this);
|
||||
this._createButton('-', 'Zoom out', className + '-out', container, this._zoomOut, this);
|
||||
this._zoomInButton = this._createButton(
|
||||
'+', 'Zoom in', className + '-in', container, this._zoomIn, this);
|
||||
this._zoomOutButton = this._createButton(
|
||||
'-', 'Zoom out', className + '-out', container, this._zoomOut, this);
|
||||
|
||||
map.on('zoomend', this._updateDisabled, this);
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
onRemove: function (map) {
|
||||
map.off('zoomend', this._updateDisabled, this);
|
||||
},
|
||||
|
||||
_zoomIn: function (e) {
|
||||
this._map.zoomIn(e.shiftKey ? 3 : 1);
|
||||
},
|
||||
@ -37,6 +45,21 @@ L.Control.Zoom = L.Control.extend({
|
||||
.on(link, 'click', fn, context);
|
||||
|
||||
return link;
|
||||
},
|
||||
|
||||
_updateDisabled: function () {
|
||||
var map = this._map,
|
||||
className = 'leaflet-control-zoom-disabled';
|
||||
|
||||
L.DomUtil.removeClass(this._zoomInButton, className)
|
||||
L.DomUtil.removeClass(this._zoomOutButton, className);
|
||||
|
||||
if (map._zoom === map.getMinZoom()) {
|
||||
L.DomUtil.addClass(this._zoomOutButton, className);
|
||||
}
|
||||
if (map._zoom === map.getMaxZoom()) {
|
||||
L.DomUtil.addClass(this._zoomInButton, className);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user