make zoom buttons disabled when reaching min/max, closes #917

This commit is contained in:
Vladimir Agafonkin 2012-11-14 15:12:31 +02:00
parent 469211d0cf
commit c33a4013a2
3 changed files with 32 additions and 3 deletions

View File

@ -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
View File

@ -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;

View File

@ -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);
}
}
});