Subversion Repositories eFlore/Applications.moissonnage

Rev

Rev 7 | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 7 Rev 28
- 
 
 1 
/*
- 
 
 2 
 *
- 
 
 3 
 * Copyright (c) 2012, Kartena AB
- 
 
 4 
 * All rights reserved.
- 
 
 5 
 *
- 
 
 6 
 * Redistribution and use in source and binary forms, with or without
- 
 
 7 
 * modification, are permitted provided that the following conditions are met:
- 
 
 8 
 *
- 
 
 9 
 * 1. Redistributions of source code must retain the above copyright notice, this
- 
 
 10 
 *    list of conditions and the following disclaimer.
- 
 
 11 
 * 2. Redistributions in binary form must reproduce the above copyright notice,
- 
 
 12 
 *    this list of conditions and the following disclaimer in the documentation
- 
 
 13 
 *    and/or other materials provided with the distribution.
- 
 
 14 
 *
- 
 
 15 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
- 
 
 16 
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- 
 
 17 
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- 
 
 18 
 * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
- 
 
 19 
 * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- 
 
 20 
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- 
 
 21 
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- 
 
 22 
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- 
 
 23 
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
- 
 
 24 
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- 
 
 25 
 *
- 
 
 26 
 */
- 
 
 27 
 
1 
L.Control.Zoomslider = (function(){
 28 
L.Control.Zoomslider = (function(){
2 
 
 29 
 
3 
	var Knob = L.Draggable.extend({
 30 
	var Knob = L.Draggable.extend({
4 
		initialize: function (element, steps, stepHeight, knobHeight) {
 31 
		initialize: function (element, steps, stepHeight, knobHeight) {
5 
			var sliderHeight = steps * stepHeight;
 32 
			var sliderHeight = steps * stepHeight;
6 
			L.Draggable.prototype.initialize.call(this, element, element);
 33 
			L.Draggable.prototype.initialize.call(this, element, element);
7 
 
 34 
 
8 
			this._element = element;
 35 
			this._element = element;
9 
			this._maxValue = steps - 1;
 36 
			this._maxValue = steps - 1;
10 
 
 37 
 
11 
			// conversion parameters
 38 
			// conversion parameters
12 
			// the conversion is just a common linear function.
 39 
			// the conversion is just a common linear function.
13 
			this._k = -stepHeight;
 40 
			this._k = -stepHeight;
14 
			this._m = sliderHeight - (stepHeight + knobHeight) / 2;
 41 
			this._m = sliderHeight - (stepHeight + knobHeight) / 2;
15 
 
 42 
 
16 
			this.on('predrag', function() {
 43 
			this.on('predrag', function() {
17 
				this._newPos.x = 0;
 44 
				this._newPos.x = 0;
18 
				this._newPos.y = this._adjust(this._newPos.y);
 45 
				this._newPos.y = this._adjust(this._newPos.y);
19 
			}, this);
 46 
			}, this);
20 
		},
 47 
		},
21 
 
 48 
 
22 
		_adjust: function (y) {
 49 
		_adjust: function (y) {
23 
			var value = Math.round(this._toValue(y));
 50 
			var value = Math.round(this._toValue(y));
24 
			value = Math.max(0, Math.min(this._maxValue, value));
 51 
			value = Math.max(0, Math.min(this._maxValue, value));
25 
			return this._toY(value);
 52 
			return this._toY(value);
26 
		},
 53 
		},
27 
 
 54 
 
28 
		// y = k*v + m
 55 
		// y = k*v + m
29 
		_toY: function (value) {
 56 
		_toY: function (value) {
30 
			return this._k * value + this._m;
 57 
			return this._k * value + this._m;
31 
		},
 58 
		},
32 
		// v = (y - m) / k
 59 
		// v = (y - m) / k
33 
		_toValue: function (y) {
 60 
		_toValue: function (y) {
34 
			return (y - this._m) / this._k;
 61 
			return (y - this._m) / this._k;
35 
		},
 62 
		},
36 
 
 63 
 
37 
		setPosition: function (y) {
 64 
		setPosition: function (y) {
38 
			L.DomUtil.setPosition(this._element,
 65 
			L.DomUtil.setPosition(this._element,
39 
								  L.point(0, this._adjust(y)));
 66 
								  L.point(0, this._adjust(y)));
40 
		},
 67 
		},
41 
 
 68 
 
42 
		setValue: function (v) {
 69 
		setValue: function (v) {
43 
			this.setPosition(this._toY(v));
 70 
			this.setPosition(this._toY(v));
44 
		},
 71 
		},
45 
 
 72 
 
46 
		getValue: function () {
 73 
		getValue: function () {
47 
			return this._toValue(L.DomUtil.getPosition(this._element).y);
 74 
			return this._toValue(L.DomUtil.getPosition(this._element).y);
48 
		}
 75 
		}
49 
	});
 76 
	});
50 
 
 77 
 
51 
	var Zoomslider = L.Control.extend({
 78 
	var Zoomslider = L.Control.extend({
52 
		options: {
 79 
		options: {
53 
			position: 'topleft',
 80 
			position: 'topleft',
54 
			// Height of zoom-slider.png in px
 81 
			// Height of zoom-slider.png in px
55 
			stepHeight: 9,
 82 
			stepHeight: 9,
56 
			// Height of the knob div in px
 83 
			// Height of the knob div in px
57 
			knobHeight: 5,
 84 
			knobHeight: 5,
58 
			styleNS: 'leaflet-control-zoomslider'
 85 
			styleNS: 'leaflet-control-zoomslider'
59 
		},
 86 
		},
60 
 
 87 
 
61 
		onAdd: function (map) {
 88 
		onAdd: function (map) {
62 
			var container = L.DomUtil.create('div', this.options.styleNS + ' leaflet-bar');
 89 
			var container = L.DomUtil.create('div', this.options.styleNS + ' leaflet-bar');
63 
 
 90 
 
64 
			L.DomEvent.disableClickPropagation(container);
 91 
			L.DomEvent.disableClickPropagation(container);
65 
 
 92 
 
66 
			this._map = map;
 93 
			this._map = map;
67 
 
 94 
 
68 
			this._zoomInButton = this._createZoomButton(
 95 
			this._zoomInButton = this._createZoomButton(
69 
				'in', 'top', container, this._zoomIn);
 96 
				'in', 'top', container, this._zoomIn);
70 
 
 97 
 
71 
			this._sliderElem = L.DomUtil.create(
 98 
			this._sliderElem = L.DomUtil.create(
72 
				'div',
 99 
				'div',
73 
				this.options.styleNS + "-slider leaflet-bar-part",
 100 
				this.options.styleNS + "-slider leaflet-bar-part",
74 
				container);
 101 
				container);
75 
 
 102 
 
76 
			this._zoomOutButton = this._createZoomButton(
 103 
			this._zoomOutButton = this._createZoomButton(
77 
				'out', 'bottom', container, this._zoomOut);
 104 
				'out', 'bottom', container, this._zoomOut);
78 
 
 105 
 
79 
			map .on('layeradd layerremove', this._refresh, this)
 106 
			map .on('layeradd layerremove', this._refresh, this)
80 
				.on("zoomend", this._updateSlider, this)
 107 
				.on("zoomend", this._updateSlider, this)
81 
				.on("zoomend", this._updateDisabled, this)
 108 
				.on("zoomend", this._updateDisabled, this)
82 
				.whenReady(this._createSlider, this)
 109 
				.whenReady(this._createSlider, this)
83 
				.whenReady(this._createKnob, this)
 110 
				.whenReady(this._createKnob, this)
84 
				.whenReady(this._updateSlider, this)
 111 
				.whenReady(this._updateSlider, this)
85 
				.whenReady(this._updateDisabled, this);
 112 
				.whenReady(this._updateDisabled, this);
86 
 
 113 
 
87 
			return container;
 114 
			return container;
88 
		},
 115 
		},
89 
 
 116 
 
90 
		onRemove: function (map) {
 117 
		onRemove: function (map) {
91 
			map .off("zoomend", this._updateSlider)
 118 
			map .off("zoomend", this._updateSlider)
92 
				.off("zoomend", this._updateDisabled)
 119 
				.off("zoomend", this._updateDisabled)
93 
				.off('layeradd layerremove', this._refresh);
 120 
				.off('layeradd layerremove', this._refresh);
94 
		},
 121 
		},
95 
 
 122 
 
96 
		_refresh: function () {
 123 
		_refresh: function () {
97 
			// TODO: listen to zoomlevelschange-event instead in 0.6.x
 124 
			// TODO: listen to zoomlevelschange-event instead in 0.6.x
98 
			this._map
 125 
			this._map
99 
				.removeControl(this)
 126 
				.removeControl(this)
100 
				.addControl(this);
 127 
				.addControl(this);
101 
		},
 128 
		},
102 
		_zoomLevels: function(){
 129 
		_zoomLevels: function(){
103 
			return this._map.getMaxZoom() - this._map.getMinZoom() + 1;
 130 
			return this._map.getMaxZoom() - this._map.getMinZoom() + 1;
104 
		},
 131 
		},
105 
 
 132 
 
106 
		_createSlider: function () {
 133 
		_createSlider: function () {
107 
			var zoomLevels = this._zoomLevels();
 134 
			var zoomLevels = this._zoomLevels();
108 
 
 135 
 
109 
			// No tilelayer probably
 136 
			// No tilelayer probably
110 
			if(zoomLevels == Infinity){
 137 
			if(zoomLevels == Infinity){
111 
				return;
 138 
				return;
112 
			}
 139 
			}
113 
 
 140 
 
114 
			this._sliderBody = L.DomUtil.create('div',
 141 
			this._sliderBody = L.DomUtil.create('div',
115 
												this.options.styleNS + '-slider-body',
 142 
												this.options.styleNS + '-slider-body',
116 
												this._sliderElem);
 143 
												this._sliderElem);
117 
			this._sliderBody.style.height
 144 
			this._sliderBody.style.height
118 
				= (this.options.stepHeight * zoomLevels) + "px";
 145 
				= (this.options.stepHeight * zoomLevels) + "px";
119 
			L.DomEvent.on(this._sliderBody, 'click', this._onSliderClick, this);
 146 
			L.DomEvent.on(this._sliderBody, 'click', this._onSliderClick, this);
120 
		},
 147 
		},
121 
 
 148 
 
122 
		_createKnob: function () {
 149 
		_createKnob: function () {
123 
			var knobElem,
 150 
			var knobElem,
124 
				zoomLevels = this._zoomLevels();
 151 
				zoomLevels = this._zoomLevels();
125 
 
 152 
 
126 
			// No tilelayer probably
 153 
			// No tilelayer probably
127 
			if(zoomLevels == Infinity) {
 154 
			if(zoomLevels == Infinity) {
128 
				return;
 155 
				return;
129 
			}
 156 
			}
130 
 
 157 
 
131 
			knobElem = L.DomUtil.create('div', this.options.styleNS + '-slider-knob',
 158 
			knobElem = L.DomUtil.create('div', this.options.styleNS + '-slider-knob',
132 
										this._sliderBody);
 159 
										this._sliderBody);
133 
			L.DomEvent.disableClickPropagation(knobElem);
 160 
			L.DomEvent.disableClickPropagation(knobElem);
134 
 
 161 
 
135 
			this._knob = new Knob(knobElem,
 162 
			this._knob = new Knob(knobElem,
136 
								  this._zoomLevels(),
 163 
								  this._zoomLevels(),
137 
								  this.options.stepHeight,
 164 
								  this.options.stepHeight,
138 
								  this.options.knobHeight)
 165 
								  this.options.knobHeight)
139 
				.on('dragend', this._updateZoom, this);
 166 
				.on('dragend', this._updateZoom, this);
140 
			this._knob.enable();
 167 
			this._knob.enable();
141 
		},
 168 
		},
142 
 
 169 
 
143 
		_onSliderClick: function (e) {
 170 
		_onSliderClick: function (e) {
144 
			var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e);
 171 
			var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e);
145 
			var y = L.DomEvent.getMousePosition(first).y
 172 
			var y = L.DomEvent.getMousePosition(first).y
146 
	  				- L.DomUtil.getViewportOffset(this._sliderBody).y; // Cache this?
 173 
	  				- L.DomUtil.getViewportOffset(this._sliderBody).y; // Cache this?
147 
			this._knob.setPosition(y);
 174 
			this._knob.setPosition(y);
148 
			this._updateZoom();
 175 
			this._updateZoom();
149 
		},
 176 
		},
150 
 
 177 
 
151 
		_zoomIn: function (e) {
 178 
		_zoomIn: function (e) {
152 
			this._map.zoomIn(e.shiftKey ? 3 : 1);
 179 
			this._map.zoomIn(e.shiftKey ? 3 : 1);
153 
		},
 180 
		},
154 
		_zoomOut: function (e) {
 181 
		_zoomOut: function (e) {
155 
			this._map.zoomOut(e.shiftKey ? 3 : 1);
 182 
			this._map.zoomOut(e.shiftKey ? 3 : 1);
156 
		},
 183 
		},
157 
 
 184 
 
158 
		_createZoomButton: function (zoomDir, end, container, fn) {
 185 
		_createZoomButton: function (zoomDir, end, container, fn) {
159 
			var barPart = 'leaflet-bar-part',
 186 
			var barPart = 'leaflet-bar-part',
160 
				classDef = this.options.styleNS + '-' + zoomDir
 187 
				classDef = this.options.styleNS + '-' + zoomDir
161 
					+ ' ' + barPart
 188 
					+ ' ' + barPart
162 
					+ ' ' + barPart + '-' + end,
 189 
					+ ' ' + barPart + '-' + end,
163 
				title = 'Zoom ' + zoomDir,
 190 
				title = 'Zoom ' + zoomDir,
164 
				link = L.DomUtil.create('a', classDef, container);
 191 
				link = L.DomUtil.create('a', classDef, container);
165 
			link.href = '#';
 192 
			link.href = '#';
166 
			link.title = title;
 193 
			link.title = title;
167 
 
 194 
 
168 
			L.DomEvent
 195 
			L.DomEvent
169 
				.on(link, 'click', L.DomEvent.preventDefault)
 196 
				.on(link, 'click', L.DomEvent.preventDefault)
170 
				.on(link, 'click', fn, this);
 197 
				.on(link, 'click', fn, this);
171 
 
 198 
 
172 
			return link;
 199 
			return link;
173 
		},
 200 
		},
174 
		_toZoomLevel: function (sliderValue) {
 201 
		_toZoomLevel: function (sliderValue) {
175 
			return sliderValue + this._map.getMinZoom();
 202 
			return sliderValue + this._map.getMinZoom();
176 
		},
 203 
		},
177 
		_toSliderValue: function (zoomLevel) {
 204 
		_toSliderValue: function (zoomLevel) {
178 
			return zoomLevel - this._map.getMinZoom();
 205 
			return zoomLevel - this._map.getMinZoom();
179 
		},
 206 
		},
180 
 
 207 
 
181 
		_updateZoom: function(){
 208 
		_updateZoom: function(){
182 
			this._map.setZoom(this._toZoomLevel(this._knob.getValue()));
 209 
			this._map.setZoom(this._toZoomLevel(this._knob.getValue()));
183 
		},
 210 
		},
184 
		_updateSlider: function(){
 211 
		_updateSlider: function(){
185 
			if(this._knob){
 212 
			if(this._knob){
186 
				this._knob.setValue(this._toSliderValue(this._map.getZoom()));
 213 
				this._knob.setValue(this._toSliderValue(this._map.getZoom()));
187 
			}
 214 
			}
188 
		},
 215 
		},
189 
		_updateDisabled: function () {
 216 
		_updateDisabled: function () {
190 
			var map = this._map,
 217 
			var map = this._map,
191 
				className = this.options.styleNS + '-disabled';
 218 
				className = this.options.styleNS + '-disabled';
192 
 
 219 
 
193 
			L.DomUtil.removeClass(this._zoomInButton, className);
 220 
			L.DomUtil.removeClass(this._zoomInButton, className);
194 
			L.DomUtil.removeClass(this._zoomOutButton, className);
 221 
			L.DomUtil.removeClass(this._zoomOutButton, className);
195 
 
 222 
 
196 
			if (map.getZoom() === map.getMinZoom()) {
 223 
			if (map.getZoom() === map.getMinZoom()) {
197 
				L.DomUtil.addClass(this._zoomOutButton, className);
 224 
				L.DomUtil.addClass(this._zoomOutButton, className);
198 
			}
 225 
			}
199 
			if (map.getZoom() === map.getMaxZoom()) {
 226 
			if (map.getZoom() === map.getMaxZoom()) {
200 
				L.DomUtil.addClass(this._zoomInButton, className);
 227 
				L.DomUtil.addClass(this._zoomInButton, className);
201 
			}
 228 
			}
202 
		}
 229 
		}
203 
	});
 230 
	});
204 
	return Zoomslider;
 231 
	return Zoomslider;
205 
})();
 232 
})();
206 
 
 233 
 
207 
L.Map.mergeOptions({
 234 
L.Map.mergeOptions({
208 
    zoomControl: false,
 235 
    zoomControl: false,
209 
    zoomsliderControl: true
 236 
    zoomsliderControl: true
210 
});
 237 
});
211 
 
 238 
 
212 
L.Map.addInitHook(function () {
 239 
L.Map.addInitHook(function () {
213 
    if (this.options.zoomsliderControl) {
 240 
    if (this.options.zoomsliderControl) {
214 
		this.zoomsliderControl = new L.Control.Zoomslider();
 241 
		this.zoomsliderControl = new L.Control.Zoomslider();
215 
		this.addControl(this.zoomsliderControl);
 242 
		this.addControl(this.zoomsliderControl);
216 
	}
 243 
	}
217 
});
 244 
});
218 
 
 245 
 
219 
L.control.zoomslider = function (options) {
 246 
L.control.zoomslider = function (options) {
220 
    return new L.Control.Zoomslider(options);
 247 
    return new L.Control.Zoomslider(options);
221 
};
 248 
};