vendor/assets/leaflet/leaflet.zoom.js

   1 L.Control.Zoomslider = (function () {
   2
   3         var Knob = L.Draggable.extend({
   4                 initialize: function (element, stepHeight, knobHeight) {
   5                         L.Draggable.prototype.initialize.call(this, element, element);
   6                         this._element = element;
   7
   8                         this._stepHeight = stepHeight;
   9                         this._knobHeight = knobHeight;
  10
  11                         this.on('predrag', function () {
  12                                 this._newPos.x = 0;
  13                                 this._newPos.y = this._adjust(this._newPos.y);
  14                         }, this);
  15                 },
  16
  17                 _adjust: function (y) {
  18                         var value = Math.round(this._toValue(y));
  19                         value = Math.max(0, Math.min(this._maxValue, value));
  20                         return this._toY(value);
  21                 },
  22
  23                 // y = k*v + m
  24                 _toY: function (value) {
  25                         return this._k * value + this._m;
  26                 },
  27                 // v = (y - m) / k
  28                 _toValue: function (y) {
  29                         return (y - this._m) / this._k;
  30                 },
  31
  32                 setSteps: function (steps) {
  33                         var sliderHeight = steps * this._stepHeight;
  34                         this._maxValue = steps - 1;
  35
  36                         // conversion parameters
  37                         // the conversion is just a common linear function.
  38                         this._k = -this._stepHeight;
  39                         this._m = sliderHeight - (this._stepHeight + this._knobHeight) / 2;
  40                 },
  41
  42                 setPosition: function (y) {
  43                         L.DomUtil.setPosition(this._element,
  44                                                                   L.point(0, this._adjust(y)));
  45                 },
  46
  47                 setValue: function (v) {
  48                         this.setPosition(this._toY(v));
  49                 },
  50
  51                 getValue: function () {
  52                         return this._toValue(L.DomUtil.getPosition(this._element).y);
  53                 }
  54         });
  55
  56         var Zoomslider = L.Control.extend({
  57                 options: {
  58                         position: 'topleft',
  59                         // Height of zoom-slider.png in px
  60                         stepHeight: 9,
  61                         // Height of the knob div in px
  62                         knobHeight: 5,
  63                         styleNS: 'leaflet-control-zoomslider'
  64                 },
  65
  66                 onAdd: function (map) {
  67                         var container = L.DomUtil.create('div', this.options.styleNS + ' leaflet-bar');
  68
  69                         L.DomEvent.disableClickPropagation(container);
  70
  71                         this._map = map;
  72
  73                         this._zoomInButton = this._createZoomButton(
  74                                 'in', 'top', container, this._zoomIn);
  75
  76                         this._sliderElem = L.DomUtil.create(
  77                                 'div',
  78                                 this.options.styleNS + "-slider leaflet-bar-part",
  79                                 container);
  80
  81                         this._zoomOutButton = this._createZoomButton(
  82                                 'out', 'bottom', container, this._zoomOut);
  83
  84                         map .on('zoomlevelschange', this._refresh, this)
  85                                 .on("zoomend", this._updateKnob, this)
  86                                 .on("zoomend", this._updateDisabled, this)
  87                                 .whenReady(this._createSlider, this)
  88                                 .whenReady(this._createKnob, this)
  89                                 .whenReady(this._refresh, this);
  90
  91                         return container;
  92                 },
  93
  94                 onRemove: function (map) {
  95                         map .off("zoomend", this._updateKnob)
  96                                 .off("zoomend", this._updateDisabled)
  97                                 .off('zoomlevelschange', this._refresh);
  98                 },
  99
 100                 _refresh: function () {
 101                         var zoomLevels = this._zoomLevels();
 102                         if (zoomLevels < Infinity  && this._knob  && this._sliderBody) {
 103                                 this._setSteps(zoomLevels);
 104                                 this._updateKnob();
 105                                 this._updateDisabled();
 106                         }
 107                 },
 108                 _zoomLevels: function () {
 109                         return this._map.getMaxZoom() - this._map.getMinZoom() + 1;
 110                 },
 111
 112                 _createSlider: function () {
 113                         this._sliderBody = L.DomUtil.create('div',
 114                                                                                                 this.options.styleNS + '-slider-body',
 115                                                                                                 this._sliderElem);
 116                         L.DomEvent.on(this._sliderBody, 'click', this._onSliderClick, this);
 117                 },
 118
 119                 _createKnob: function () {
 120                         var knobElem = L.DomUtil.create('div', this.options.styleNS + '-slider-knob',
 121                                                                                         this._sliderBody);
 122                         L.DomEvent.disableClickPropagation(knobElem);
 123
 124                         this._knob = new Knob(knobElem,
 125                                                                   this.options.stepHeight,
 126                                                                   this.options.knobHeight)
 127                                 .on('dragend', this._updateZoom, this);
 128                         this._knob.enable();
 129                 },
 130
 131                 _onSliderClick: function (e) {
 132                         var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e);
 133                         var y = L.DomEvent.getMousePosition(first).y
 134                                         - L.DomUtil.getViewportOffset(this._sliderBody).y; // Cache this?
 135                         this._knob.setPosition(y);
 136                         this._updateZoom();
 137                 },
 138
 139                 _zoomIn: function (e) {
 140                         this._map.zoomIn(e.shiftKey ? 3 : 1);
 141                 },
 142                 _zoomOut: function (e) {
 143                         this._map.zoomOut(e.shiftKey ? 3 : 1);
 144                 },
 145
 146                 _createZoomButton: function (zoomDir, end, container, fn) {
 147                         var barPart = 'leaflet-bar-part',
 148                                 classDef = this.options.styleNS + '-' + zoomDir
 149                                         + ' ' + barPart
 150                                         + ' ' + barPart + '-' + end,
 151                                 title = 'Zoom ' + zoomDir,
 152                                 link = L.DomUtil.create('a', classDef, container);
 153                         link.href = '#';
 154                         link.title = title;
 155
 156                         L.DomEvent
 157                                 .on(link, 'click', L.DomEvent.preventDefault)
 158                                 .on(link, 'click', fn, this);
 159
 160                         return link;
 161                 },
 162                 _toZoomLevel: function (value) {
 163                         return value + this._map.getMinZoom();
 164                 },
 165                 _toValue: function (zoomLevel) {
 166                         return zoomLevel - this._map.getMinZoom();
 167                 },
 168                 _setSteps: function (zoomLevels) {
 169                         this._sliderBody.style.height
 170                                 = (this.options.stepHeight * zoomLevels) + "px";
 171                         this._knob.setSteps(zoomLevels);
 172                 },
 173                 _updateZoom: function () {
 174                         this._map.setZoom(this._toZoomLevel(this._knob.getValue()));
 175                 },
 176                 _updateKnob: function () {
 177                         if (this._knob) {
 178                                 this._knob.setValue(this._toValue(this._map.getZoom()));
 179                         }
 180                 },
 181                 _updateDisabled: function () {
 182                         var map = this._map,
 183                                 className = this.options.styleNS + '-disabled';
 184
 185                         L.DomUtil.removeClass(this._zoomInButton, className);
 186                         L.DomUtil.removeClass(this._zoomOutButton, className);
 187
 188                         if (map.getZoom() === map.getMinZoom()) {
 189                                 L.DomUtil.addClass(this._zoomOutButton, className);
 190                         }
 191                         if (map.getZoom() === map.getMaxZoom()) {
 192                                 L.DomUtil.addClass(this._zoomInButton, className);
 193                         }
 194                 }
 195         });
 196         return Zoomslider;
 197 })();
 198
 199 L.Map.mergeOptions({
 200     zoomControl: false,
 201     zoomsliderControl: true
 202 });
 203
 204 L.Map.addInitHook(function () {
 205     if (this.options.zoomsliderControl) {
 206                 this.zoomsliderControl = new L.Control.Zoomslider();
 207                 this.addControl(this.zoomsliderControl);
 208         }
 209 });
 210
 211 L.control.zoomslider = function (options) {
 212     return new L.Control.Zoomslider(options);
 213 };