From ff91990893b2fc2b13543647204bdd31908242f3 Mon Sep 17 00:00:00 2001 From: Kevin Date: Thu, 16 May 2013 18:19:07 -0700 Subject: [PATCH 1/3] Update L.Control plugins to follow leaflet update --- external/L.Control.Pan.css | 3 +- external/L.Control.Zoomslider.css | 6 ++- external/L.Control.Zoomslider.js | 90 ++++++++++++++----------------- plugins/pan-control.user.js | 2 +- plugins/zoom-slider.user.js | 2 +- 5 files changed, 49 insertions(+), 54 deletions(-) diff --git a/external/L.Control.Pan.css b/external/L.Control.Pan.css index 512df2ac..cca95b95 100644 --- a/external/L.Control.Pan.css +++ b/external/L.Control.Pan.css @@ -1,10 +1,11 @@ /* Make the default zoom control align with the pan control. + This is ugly. The parent box (class="leaflet-top leaflet-left") should make all the child boxes be center-aligned instead. Not sure if that is possible though. */ -.leaflet-bar { +.leaflet-control-zoom { position: relative; left:23px; } diff --git a/external/L.Control.Zoomslider.css b/external/L.Control.Zoomslider.css index 5e70bbee..3edce1c4 100644 --- a/external/L.Control.Zoomslider.css +++ b/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; */ diff --git a/external/L.Control.Zoomslider.js b/external/L.Control.Zoomslider.js index 06b594b0..0d105f9e 100644 --- a/external/L.Control.Zoomslider.js +++ b/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 () { diff --git a/plugins/pan-control.user.js b/plugins/pan-control.user.js index 723d2875..f9d99df3 100644 --- a/plugins/pan-control.user.js +++ b/plugins/pan-control.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @id iitc-plugin-pan-control@fragger // @name IITC plugin: pan control -// @version 0.1.1.@@DATETIMEVERSION@@ +// @version 0.2.@@DATETIMEVERSION@@ // @namespace https://github.com/jonatkins/ingress-intel-total-conversion // @updateURL @@UPDATEURL@@ // @downloadURL @@DOWNLOADURL@@ diff --git a/plugins/zoom-slider.user.js b/plugins/zoom-slider.user.js index a0b41b7b..53e34f0c 100644 --- a/plugins/zoom-slider.user.js +++ b/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.2.@@DATETIMEVERSION@@ // @namespace https://github.com/jonatkins/ingress-intel-total-conversion // @updateURL @@UPDATEURL@@ // @downloadURL @@DOWNLOADURL@@ From 23b01a8949538b76d484c7be1503d3e14bf9eb8f Mon Sep 17 00:00:00 2001 From: Kevin Date: Thu, 16 May 2013 18:25:05 -0700 Subject: [PATCH 2/3] Fix leaflet bar align for other tools on the side --- external/L.Control.Pan.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/external/L.Control.Pan.css b/external/L.Control.Pan.css index cca95b95..de0c20b6 100644 --- a/external/L.Control.Pan.css +++ b/external/L.Control.Pan.css @@ -5,7 +5,7 @@ should make all the child boxes be center-aligned instead. Not sure if that is possible though. */ -.leaflet-control-zoom { +.leaflet-bar { position: relative; left:23px; } From 4c4d27ad6d6a03cebf749ed5c289b49a5eee68bd Mon Sep 17 00:00:00 2001 From: Kevin Date: Thu, 16 May 2013 18:26:59 -0700 Subject: [PATCH 3/3] Nits, pan control had no update --- external/L.Control.Pan.css | 1 - plugins/pan-control.user.js | 2 +- plugins/zoom-slider.user.js | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/external/L.Control.Pan.css b/external/L.Control.Pan.css index de0c20b6..512df2ac 100644 --- a/external/L.Control.Pan.css +++ b/external/L.Control.Pan.css @@ -1,5 +1,4 @@ /* Make the default zoom control align with the pan control. - This is ugly. The parent box (class="leaflet-top leaflet-left") should make all the child boxes be center-aligned instead. diff --git a/plugins/pan-control.user.js b/plugins/pan-control.user.js index f9d99df3..723d2875 100644 --- a/plugins/pan-control.user.js +++ b/plugins/pan-control.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @id iitc-plugin-pan-control@fragger // @name IITC plugin: pan control -// @version 0.2.@@DATETIMEVERSION@@ +// @version 0.1.1.@@DATETIMEVERSION@@ // @namespace https://github.com/jonatkins/ingress-intel-total-conversion // @updateURL @@UPDATEURL@@ // @downloadURL @@DOWNLOADURL@@ diff --git a/plugins/zoom-slider.user.js b/plugins/zoom-slider.user.js index 53e34f0c..78ae4462 100644 --- a/plugins/zoom-slider.user.js +++ b/plugins/zoom-slider.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @id iitc-plugin-zoom-slider@fragger // @name IITC plugin: zoom slider -// @version 0.2.@@DATETIMEVERSION@@ +// @version 0.1.1.@@DATETIMEVERSION@@ // @namespace https://github.com/jonatkins/ingress-intel-total-conversion // @updateURL @@UPDATEURL@@ // @downloadURL @@DOWNLOADURL@@