source: binary-improvements/webserver_legacy/leaflet/zoomslider/L.Control.Zoomslider.js@ 501

Last change on this file since 501 was 366, checked in by alloc, 3 years ago

Map: Added options for fractional zoom to map.js lines 42 - 46

File size: 5.8 KB
Line 
1L.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: 8,
61 // Height of the knob div in px (including border)
62 knobHeight: 6,
63 styleNS: 'leaflet-control-zoomslider'
64 },
65
66 onAdd: function (map) {
67 this._map = map;
68 this._ui = this._createUI();
69 this._knob = new Knob(this._ui.knob,
70 this.options.stepHeight,
71 this.options.knobHeight);
72
73 map .whenReady(this._initKnob, this)
74 .whenReady(this._initEvents, this)
75 .whenReady(this._updateSize, this)
76 .whenReady(this._updateKnobValue, this)
77 .whenReady(this._updateDisabled, this);
78 return this._ui.bar;
79 },
80
81 onRemove: function (map) {
82 map .off('zoomlevelschange', this._updateSize, this)
83 .off('zoomend zoomlevelschange', this._updateKnobValue, this)
84 .off('zoomend zoomlevelschange', this._updateDisabled, this);
85 },
86
87 _createUI: function () {
88 var ui = {},
89 ns = this.options.styleNS;
90
91 ui.bar = L.DomUtil.create('div', ns + ' leaflet-bar'),
92 ui.zoomIn = this._createZoomBtn('in', 'top', ui.bar),
93 ui.wrap = L.DomUtil.create('div', ns + '-wrap leaflet-bar-part', ui.bar),
94 ui.zoomOut = this._createZoomBtn('out', 'bottom', ui.bar),
95 ui.body = L.DomUtil.create('div', ns + '-body', ui.wrap),
96 ui.knob = L.DomUtil.create('div', ns + '-knob');
97
98 L.DomEvent.disableClickPropagation(ui.bar);
99 L.DomEvent.disableClickPropagation(ui.knob);
100
101 return ui;
102 },
103 _createZoomBtn: function (zoomDir, end, container) {
104 var classDef = this.options.styleNS + '-' + zoomDir
105 + ' leaflet-bar-part'
106 + ' leaflet-bar-part-' + end,
107 link = L.DomUtil.create('a', classDef, container);
108
109 link.href = '#';
110 link.title = 'Zoom ' + zoomDir;
111
112 L.DomEvent.on(link, 'click', L.DomEvent.preventDefault);
113
114 return link;
115 },
116
117 _initKnob: function () {
118 this._knob.enable();
119 this._ui.body.appendChild(this._ui.knob);
120 },
121 _initEvents: function (map) {
122 this._map
123 .on('zoomlevelschange', this._updateSize, this)
124 .on('zoomend zoomlevelschange', this._updateKnobValue, this)
125 .on('zoomend zoomlevelschange', this._updateDisabled, this);
126
127 L.DomEvent.on(this._ui.body, 'click', this._onSliderClick, this);
128 L.DomEvent.on(this._ui.zoomIn, 'click', this._zoomIn, this);
129 L.DomEvent.on(this._ui.zoomOut, 'click', this._zoomOut, this);
130
131 this._knob.on('dragend', this._updateMapZoom, this);
132 },
133
134 _onSliderClick: function (e) {
135 var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e),
136 y = L.DomEvent.getMousePosition(first, this._ui.body).y;
137
138 this._knob.setPosition(y);
139 this._updateMapZoom();
140 },
141
142 _zoomIn: function (e) {
143 var delta = this._map.options.zoomDelta || 0;
144 this._map.zoomIn(e.shiftKey ? 3 * delta : delta);
145 },
146 _zoomOut: function (e) {
147 var delta = this._map.options.zoomDelta || 0;
148 this._map.zoomOut(e.shiftKey ? 3 * delta : delta);
149 },
150
151 _zoomLevels: function () {
152 var zoomLevels = (this._map.getMaxZoom() - this._map.getMinZoom()) / this._map.options.zoomDelta + 1;
153 return zoomLevels < Infinity ? zoomLevels : 0;
154 },
155 _toZoomLevel: function (value) {
156 return value * this._map.options.zoomDelta + this._map.getMinZoom();
157 },
158 _toValue: function (zoomLevel) {
159 return (zoomLevel - this._map.getMinZoom()) / this._map.options.zoomDelta;
160 },
161
162 _updateSize: function () {
163 var steps = this._zoomLevels();
164
165 this._ui.body.style.height = this.options.stepHeight * steps + 'px';
166 this._knob.setSteps(steps);
167 },
168 _updateMapZoom: function () {
169 this._map.setZoom(this._toZoomLevel(this._knob.getValue()));
170 },
171 _updateKnobValue: function () {
172 this._knob.setValue(this._toValue(this._map.getZoom()));
173 },
174 _updateDisabled: function () {
175 var zoomLevel = this._map.getZoom(),
176 className = this.options.styleNS + '-disabled';
177
178 L.DomUtil.removeClass(this._ui.zoomIn, className);
179 L.DomUtil.removeClass(this._ui.zoomOut, className);
180
181 if (zoomLevel === this._map.getMinZoom()) {
182 L.DomUtil.addClass(this._ui.zoomOut, className);
183 }
184 if (zoomLevel === this._map.getMaxZoom()) {
185 L.DomUtil.addClass(this._ui.zoomIn, className);
186 }
187 }
188 });
189
190 return Zoomslider;
191})();
192
193L.Map.mergeOptions({
194 zoomControl: false,
195 zoomsliderControl: false
196});
197
198L.Map.addInitHook(function () {
199 if (this.options.zoomsliderControl) {
200 this.zoomsliderControl = new L.Control.Zoomslider();
201 this.addControl(this.zoomsliderControl);
202 }
203});
204
205L.control.zoomslider = function (options) {
206 return new L.Control.Zoomslider(options);
207};
Note: See TracBrowser for help on using the repository browser.