Subversion Repositories eFlore/Applications.moissonnage

Compare Revisions

Ignore whitespace Rev 6 → Rev 7

/trunk/widget/modules/carto/squelettes/scripts/L.Control.Zoomslider.js
New file
0,0 → 1,221
L.Control.Zoomslider = (function(){
 
var Knob = L.Draggable.extend({
initialize: function (element, steps, stepHeight, knobHeight) {
var sliderHeight = steps * stepHeight;
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.on('predrag', function() {
this._newPos.x = 0;
this._newPos.y = this._adjust(this._newPos.y);
}, this);
},
 
_adjust: function (y) {
var value = Math.round(this._toValue(y));
value = Math.max(0, Math.min(this._maxValue, value));
return this._toY(value);
},
 
// y = k*v + m
_toY: function (value) {
return this._k * value + this._m;
},
// v = (y - m) / k
_toValue: function (y) {
return (y - this._m) / this._k;
},
 
setPosition: function (y) {
L.DomUtil.setPosition(this._element,
L.point(0, this._adjust(y)));
},
 
setValue: function (v) {
this.setPosition(this._toY(v));
},
 
getValue: function () {
return this._toValue(L.DomUtil.getPosition(this._element).y);
}
});
 
var Zoomslider = L.Control.extend({
options: {
position: 'topleft',
// Height of zoom-slider.png in px
stepHeight: 9,
// Height of the knob div in px
knobHeight: 5,
styleNS: 'leaflet-control-zoomslider'
},
 
onAdd: function (map) {
var container = L.DomUtil.create('div', this.options.styleNS + ' leaflet-bar');
 
L.DomEvent.disableClickPropagation(container);
 
this._map = map;
 
this._zoomInButton = this._createZoomButton(
'in', 'top', container, this._zoomIn);
 
this._sliderElem = L.DomUtil.create(
'div',
this.options.styleNS + "-slider leaflet-bar-part",
container);
 
this._zoomOutButton = this._createZoomButton(
'out', 'bottom', container, this._zoomOut);
 
map .on('layeradd layerremove', this._refresh, this)
.on("zoomend", this._updateSlider, this)
.on("zoomend", this._updateDisabled, this)
.whenReady(this._createSlider, this)
.whenReady(this._createKnob, this)
.whenReady(this._updateSlider, this)
.whenReady(this._updateDisabled, this);
 
return container;
},
 
onRemove: function (map) {
map .off("zoomend", this._updateSlider)
.off("zoomend", this._updateDisabled)
.off('layeradd layerremove', this._refresh);
},
 
_refresh: function () {
// TODO: listen to zoomlevelschange-event instead in 0.6.x
this._map
.removeControl(this)
.addControl(this);
},
_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);
L.DomEvent.disableClickPropagation(knobElem);
 
this._knob = new Knob(knobElem,
this._zoomLevels(),
this.options.stepHeight,
this.options.knobHeight)
.on('dragend', this._updateZoom, this);
this._knob.enable();
},
 
_onSliderClick: function (e) {
var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e);
var y = L.DomEvent.getMousePosition(first).y
- L.DomUtil.getViewportOffset(this._sliderBody).y; // Cache this?
this._knob.setPosition(y);
this._updateZoom();
},
 
_zoomIn: function (e) {
this._map.zoomIn(e.shiftKey ? 3 : 1);
},
_zoomOut: function (e) {
this._map.zoomOut(e.shiftKey ? 3 : 1);
},
 
_createZoomButton: function (zoomDir, end, container, fn) {
var barPart = 'leaflet-bar-part',
classDef = this.options.styleNS + '-' + zoomDir
+ ' ' + barPart
+ ' ' + barPart + '-' + end,
title = 'Zoom ' + zoomDir,
link = L.DomUtil.create('a', classDef, container);
link.href = '#';
link.title = title;
 
L.DomEvent
.on(link, 'click', L.DomEvent.preventDefault)
.on(link, 'click', fn, this);
 
return link;
},
_toZoomLevel: function (sliderValue) {
return sliderValue + this._map.getMinZoom();
},
_toSliderValue: function (zoomLevel) {
return zoomLevel - this._map.getMinZoom();
},
 
_updateZoom: function(){
this._map.setZoom(this._toZoomLevel(this._knob.getValue()));
},
_updateSlider: function(){
if(this._knob){
this._knob.setValue(this._toSliderValue(this._map.getZoom()));
}
},
_updateDisabled: function () {
var map = this._map,
className = this.options.styleNS + '-disabled';
 
L.DomUtil.removeClass(this._zoomInButton, className);
L.DomUtil.removeClass(this._zoomOutButton, className);
 
if (map.getZoom() === map.getMinZoom()) {
L.DomUtil.addClass(this._zoomOutButton, className);
}
if (map.getZoom() === map.getMaxZoom()) {
L.DomUtil.addClass(this._zoomInButton, className);
}
}
});
return Zoomslider;
})();
 
L.Map.mergeOptions({
zoomControl: false,
zoomsliderControl: true
});
 
L.Map.addInitHook(function () {
if (this.options.zoomsliderControl) {
this.zoomsliderControl = new L.Control.Zoomslider();
this.addControl(this.zoomsliderControl);
}
});
 
L.control.zoomslider = function (options) {
return new L.Control.Zoomslider(options);
};