Merge pull request #283 from Fragger/update-external-L.Controls

Update L.Control plugins to follow leaflet update

external/L.Control.Zoomslider.css

@@ -1,7 +1,9 @@
 /** Slider **/
 .leaflet-control-zoomslider-slider {
-	padding-top: 5px ;
+	padding-top: 5px;
 	padding-bottom: 5px;
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
 }
 
 .leaflet-control-zoomslider-slider-body {
@@ -17,7 +19,7 @@
 	height:5px;
 	background-color: black;
 	background-position: center;
-  -webkit-border-radius: 15px;
+ 	-webkit-border-radius: 15px;
 	border-radius: 15px;
 	margin-left: 5px;
 	/*border: 5px; */

external/L.Control.Zoomslider.js

@@ -1,19 +1,14 @@
-L.Control.Zoomslider = (function(){
+L.Control.Zoomslider = (function () {
 
 	var Knob = L.Draggable.extend({
-		initialize: function (element, steps, stepHeight, knobHeight) {
-			var sliderHeight = steps * stepHeight;
+		initialize: function (element, stepHeight, knobHeight) {
 			L.Draggable.prototype.initialize.call(this, element, element);
-
 			this._element = element;
-			this._maxValue = steps - 1;
 
-			// conversion parameters
-			// the conversion is just a common linear function.
-			this._k = -stepHeight;
-			this._m = sliderHeight - (stepHeight + knobHeight) / 2;
+			this._stepHeight = stepHeight;
+			this._knobHeight = knobHeight;
 
-			this.on('predrag', function() {
+			this.on('predrag', function () {
 				this._newPos.x = 0;
 				this._newPos.y = this._adjust(this._newPos.y);
 			}, this);
@@ -34,6 +29,16 @@ L.Control.Zoomslider = (function(){
 			return (y - this._m) / this._k;
 		},
 
+		setSteps: function (steps) {
+			var sliderHeight = steps * this._stepHeight;
+			this._maxValue = steps - 1;
+
+			// conversion parameters
+			// the conversion is just a common linear function.
+			this._k = -this._stepHeight;
+			this._m = sliderHeight - (this._stepHeight + this._knobHeight) / 2;
+		},
+
 		setPosition: function (y) {
 			L.DomUtil.setPosition(this._element,
 								  L.point(0, this._adjust(y)));
@@ -76,64 +81,47 @@ L.Control.Zoomslider = (function(){
 			this._zoomOutButton = this._createZoomButton(
 				'out', 'bottom', container, this._zoomOut);
 
-			map .on('layeradd layerremove', this._refresh, this)
-				.on("zoomend", this._updateSlider, this)
+			map .on('zoomlevelschange', this._refresh, this)
+				.on("zoomend", this._updateKnob, this)
 				.on("zoomend", this._updateDisabled, this)
 				.whenReady(this._createSlider, this)
 				.whenReady(this._createKnob, this)
-				.whenReady(this._updateSlider, this)
-				.whenReady(this._updateDisabled, this);
+				.whenReady(this._refresh, this);
 
 			return container;
 		},
 
 		onRemove: function (map) {
-			map .off("zoomend", this._updateSlider)
+			map .off("zoomend", this._updateKnob)
 				.off("zoomend", this._updateDisabled)
-				.off('layeradd layerremove', this._refresh);
+				.off('zoomlevelschange', this._refresh);
 		},
 
 		_refresh: function () {
-			// TODO: listen to zoomlevelschange-event instead in 0.6.x
-			this._map
-				.removeControl(this)
-				.addControl(this);
+			var zoomLevels = this._zoomLevels();
+			if (zoomLevels < Infinity  && this._knob  && this._sliderBody) {
+				this._setSteps(zoomLevels);
+				this._updateKnob();
+				this._updateDisabled();
+			}
 		},
-		_zoomLevels: function(){
+		_zoomLevels: function () {
 			return this._map.getMaxZoom() - this._map.getMinZoom() + 1;
 		},
 
 		_createSlider: function () {
-			var zoomLevels = this._zoomLevels();
-
-			// No tilelayer probably
-			if(zoomLevels == Infinity){
-				return;
-			}
-
 			this._sliderBody = L.DomUtil.create('div',
 												this.options.styleNS + '-slider-body',
 												this._sliderElem);
-			this._sliderBody.style.height
-				= (this.options.stepHeight * zoomLevels) + "px";
 			L.DomEvent.on(this._sliderBody, 'click', this._onSliderClick, this);
 		},
 
 		_createKnob: function () {
-			var knobElem,
-				zoomLevels = this._zoomLevels();
-
-			// No tilelayer probably
-			if(zoomLevels == Infinity) {
-				return;
-			}
-
-			knobElem = L.DomUtil.create('div', this.options.styleNS + '-slider-knob',
-										this._sliderBody);
+			var knobElem = L.DomUtil.create('div', this.options.styleNS + '-slider-knob',
+											this._sliderBody);
 			L.DomEvent.disableClickPropagation(knobElem);
 
 			this._knob = new Knob(knobElem,
-								  this._zoomLevels(),
 								  this.options.stepHeight,
 								  this.options.knobHeight)
 				.on('dragend', this._updateZoom, this);
@@ -171,19 +159,23 @@ L.Control.Zoomslider = (function(){
 
 			return link;
 		},
-		_toZoomLevel: function (sliderValue) {
-			return sliderValue + this._map.getMinZoom();
+		_toZoomLevel: function (value) {
+			return value + this._map.getMinZoom();
 		},
-		_toSliderValue: function (zoomLevel) {
+		_toValue: function (zoomLevel) {
 			return zoomLevel - this._map.getMinZoom();
 		},
-
-		_updateZoom: function(){
+		_setSteps: function (zoomLevels) {
+			this._sliderBody.style.height 
+				= (this.options.stepHeight * zoomLevels) + "px";
+			this._knob.setSteps(zoomLevels);
+		},
+		_updateZoom: function () {
 			this._map.setZoom(this._toZoomLevel(this._knob.getValue()));
 		},
-		_updateSlider: function(){
-			if(this._knob){
-				this._knob.setValue(this._toSliderValue(this._map.getZoom()));
+		_updateKnob: function () {
+			if (this._knob) {
+				this._knob.setValue(this._toValue(this._map.getZoom()));
 			}
 		},
 		_updateDisabled: function () {

plugins/zoom-slider.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @id             iitc-plugin-zoom-slider@fragger
 // @name           IITC plugin: zoom slider
-// @version        0.1.0.@@DATETIMEVERSION@@
+// @version        0.1.1.@@DATETIMEVERSION@@
 // @namespace      https://github.com/jonatkins/ingress-intel-total-conversion
 // @updateURL      @@UPDATEURL@@
 // @downloadURL    @@DOWNLOADURL@@