From 799b6d4cc72cc339679f5f458d98504c36b49aa1 Mon Sep 17 00:00:00 2001 From: Tom Hughes Date: Fri, 23 Nov 2012 13:12:51 +0000 Subject: [PATCH] Update the leaflet zoom slider plugin to fix IE8 --- vendor/assets/leaflet/leaflet.zoom.js | 94 +++++++++++++++++---------- 1 file changed, 60 insertions(+), 34 deletions(-) diff --git a/vendor/assets/leaflet/leaflet.zoom.js b/vendor/assets/leaflet/leaflet.zoom.js index de634040d..6ce96757c 100644 --- a/vendor/assets/leaflet/leaflet.zoom.js +++ b/vendor/assets/leaflet/leaflet.zoom.js @@ -7,28 +7,42 @@ L.Control.Zoomslider = L.Control.extend({ onAdd: function (map) { var className = 'leaflet-control-zoomslider', - container = L.DomUtil.create('div', className); + container = L.DomUtil.create('div', className); + + L.DomEvent + .on(container, 'click', L.DomEvent.stopPropagation) + .on(container, 'mousedown', L.DomEvent.stopPropagation) + .on(container, 'dblclick', L.DomEvent.stopPropagation); - this._map = map; + this._map = map; - this._createButton('Zoom in', className + '-in' - , container, this._zoomIn , this); + this._zoomInButton = this._createButton('+', 'Zoom in', className + '-in' + , container, this._zoomIn , this); this._createSlider(className + '-slider', container, map); - this._createButton('Zoom out', className + '-out' - , container, this._zoomOut, this); - + this._zoomOutButton = this._createButton('-', 'Zoom out', className + '-out' + , container, this._zoomOut, this); - - this._map.on('zoomend', this._snapToSliderValue, this); + map.on('layeradd layerremove', this._refresh, this); + + map.whenReady(function(){ + this._snapToSliderValue(); + map.on('zoomend', this._snapToSliderValue, this); + }, this); - this._snapToSliderValue(); return container; }, onRemove: function(map){ map.off('zoomend', this._snapToSliderValue); + map.off('layeradd layerremove', this._refresh); }, - + + _refresh: function(){ + this._map + .removeControl(this) + .addControl(this); + }, + _createSlider: function (className, container, map) { var zoomLevels = map.getMaxZoom() - map.getMinZoom(); this._sliderHeight = this.options.stepHeight * zoomLevels; @@ -40,11 +54,8 @@ L.Control.Zoomslider = L.Control.extend({ this._draggable = this._createDraggable(); this._draggable.enable(); - - L.DomEvent - .on(slider, 'click', L.DomEvent.stopPropagation) - .on(slider, 'click', L.DomEvent.preventDefault) - .on(slider, 'click', this._onSliderClick, this); + + L.DomEvent.on(slider, 'click', this._onSliderClick, this); return slider; }, @@ -57,16 +68,16 @@ L.Control.Zoomslider = L.Control.extend({ this._map.zoomOut(e.shiftKey ? 3 : 1); }, - _createButton: function (title, className, container, fn, context) { + _createButton: function (html, title, className, container, fn, context) { var link = L.DomUtil.create('a', className, container); + link.innerHTML = html; link.href = '#'; link.title = title; L.DomEvent - .on(link, 'click', L.DomEvent.stopPropagation) - .on(link, 'click', L.DomEvent.preventDefault) - .on(link, 'click', fn, context); - + .on(link, 'click', L.DomEvent.preventDefault) + .on(link, 'click', fn, context); + return link; }, @@ -79,15 +90,15 @@ L.Control.Zoomslider = L.Control.extend({ .on(this._knob, 'click', L.DomEvent.stopPropagation); var bounds = new L.Bounds( - new L.Point(0, 0), + new L.Point(0, 0), new L.Point(0, this._sliderHeight) ); - var draggable = new L.BoundedDraggable(this._knob, - this._knob, + var draggable = new L.BoundedDraggable(this._knob, + this._knob, bounds) .on('drag', this._snap, this) .on('dragend', this._setZoom, this); - + return draggable; }, @@ -100,9 +111,9 @@ L.Control.Zoomslider = L.Control.extend({ _onSliderClick: function(e){ var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e); - var offset = first.offsetY + var offset = first.offsetY ? first.offsetY - : L.DomEvent.getMousePosition(first).y + : L.DomEvent.getMousePosition(first).y - L.DomUtil.getViewportOffset(this._knob).y; var value = this._posToSliderValue(offset - this._knob.offsetHeight / 2); this._snapToSliderValue(value); @@ -110,18 +121,19 @@ L.Control.Zoomslider = L.Control.extend({ }, _posToSliderValue: function(pos) { - pos = isNaN(pos) + pos = isNaN(pos) ? L.DomUtil.getPosition(this._knob).y - : pos + : pos; return Math.round( (this._sliderHeight - pos) / this.options.stepHeight); }, _snapToSliderValue: function(sliderValue) { + this._updateDisabled(); if(this._knob) { - sliderValue = isNaN(sliderValue) + sliderValue = isNaN(sliderValue) ? this._getSliderValue() : sliderValue; - var y = this._sliderHeight + var y = this._sliderHeight - (sliderValue * this.options.stepHeight); L.DomUtil.setPosition(this._knob, new L.Point(0, y)); } @@ -134,6 +146,21 @@ L.Control.Zoomslider = L.Control.extend({ }, _getSliderValue: function(){ return this._toSliderValue(this._map.getZoom()); + }, + + _updateDisabled: function () { + var map = this._map, + className = 'leaflet-control-zoomslider-disabled'; + + L.DomUtil.removeClass(this._zoomInButton, className); + L.DomUtil.removeClass(this._zoomOutButton, className); + + if (map.getZoom() === map.getMinZoom()) { + L.DomUtil.addClass(this._zoomOutButton, className); + } + if (map.getZoom() === map.getMaxZoom()) { + L.DomUtil.addClass(this._zoomInButton, className); + } } }); @@ -144,8 +171,7 @@ L.Map.mergeOptions({ L.Map.addInitHook(function () { if (this.options.zoomsliderControl) { - this.zoomsliderControl = new L.Control.Zoomslider(); - this.addControl(this.zoomsliderControl); + L.control.zoomslider().addTo(this); } }); @@ -163,7 +189,7 @@ L.BoundedDraggable = L.Draggable.extend({ this._newPos = this._fitPoint(this._newPos); } }, this); - }, + }, _fitPoint: function(point){ var closest = new L.Point( Math.min(point.x, this._bounds.max.x), -- 2.43.2