-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathleaflet-slider.js
151 lines (140 loc) · 6.19 KB
/
leaflet-slider.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
L.Control.Slider = L.Control.extend({
update: function(value){
return value;
},
options: {
size: '100px',
position: 'topright',
min: 0,
max: 250,
step: 1,
id: "slider",
value: 50,
collapsed: true,
title: 'Leaflet Slider',
logo: 'S',
orientation: 'horizontal',
increment: false,
getValue: function(value) {
return value;
},
showValue: true,
syncSlider: false
},
initialize: function (f, options) {
L.setOptions(this, options);
if (typeof f == "function") {
this.update = f;
} else {
this.update = function (value) {
console.log(value);
};
}
if (typeof this.options.getValue != "function") {
this.options.getValue = function (value) {
return value;
};
}
if (this.options.orientation!='vertical') {
this.options.orientation = 'horizontal';
}
},
onAdd: function (map) {
this._initLayout();
this.update(this.options.value+"");
return this._container;
},
_updateValue: function () {
this.value = this.slider.value;
if (this.options.showValue){
this._sliderValue.innerHTML = this.options.getValue(this.value);
}
this.update(this.value);
},
_initLayout: function () {
var className = 'leaflet-control-slider';
this._container = L.DomUtil.create('div', className + ' ' +className + '-' + this.options.orientation);
this._sliderLink = L.DomUtil.create('a', className + '-toggle', this._container);
this._sliderLink.setAttribute("title", this.options.title);
this._sliderLink.innerHTML = this.options.logo;
if (this.options.showValue){
this._sliderValue = L.DomUtil.create('p', className+'-value', this._container);
this._sliderValue.innerHTML = this.options.getValue(this.options.value);
}
if(this.options.increment) {
this._plus = L.DomUtil.create('a', className + '-plus', this._container);
this._plus.innerHTML = "+";
L.DomEvent.on(this._plus, 'click', this._increment, this);
L.DomUtil.addClass(this._container, 'leaflet-control-slider-incdec');
}
this._sliderContainer = L.DomUtil.create('div', 'leaflet-slider-container', this._container);
this.slider = L.DomUtil.create('input', 'leaflet-slider', this._sliderContainer);
if (this.options.orientation == 'vertical') {this.slider.setAttribute("orient", "vertical");}
this.slider.setAttribute("title", this.options.title);
this.slider.setAttribute("id", this.options.id);
this.slider.setAttribute("type", "range");
this.slider.setAttribute("min", this.options.min);
this.slider.setAttribute("max", this.options.max);
this.slider.setAttribute("step", this.options.step);
this.slider.setAttribute("value", this.options.value);
if (this.options.syncSlider) {
L.DomEvent.on(this.slider, "input", function (e) {
this._updateValue();
}, this);
} else {
L.DomEvent.on(this.slider, "change", function (e) {
this._updateValue();
}, this);
}
if(this.options.increment) {
this._minus = L.DomUtil.create('a', className + '-minus', this._container);
this._minus.innerHTML = "-";
L.DomEvent.on(this._minus, 'click', this._decrement, this);
}
if (this.options.showValue){
if (window.matchMedia("screen and (-webkit-min-device-pixel-ratio:0)").matches && this.options.orientation =='vertical') {this.slider.style.width = (this.options.size.replace('px','') -36) +'px'; this._sliderContainer.style.height = (this.options.size.replace('px','') -36) +'px';}
else if (this.options.orientation =='vertical') {this._sliderContainer.style.height = (this.options.size.replace('px','') -36) +'px';}
else {this._sliderContainer.style.width = (this.options.size.replace('px','') -56) +'px';}
} else {
if (window.matchMedia("screen and (-webkit-min-device-pixel-ratio:0)").matches && this.options.orientation =='vertical') {this.slider.style.width = (this.options.size.replace('px','') -10) +'px'; this._sliderContainer.style.height = (this.options.size.replace('px','') -10) +'px';}
else if (this.options.orientation =='vertical') {this._sliderContainer.style.height = (this.options.size.replace('px','') -10) +'px';}
else {this._sliderContainer.style.width = (this.options.size.replace('px','') -25) +'px';}
}
L.DomEvent.disableClickPropagation(this._container);
if (this.options.collapsed) {
if (!L.Browser.android) {
L.DomEvent
.on(this._container, 'mouseenter', this._expand, this)
.on(this._container, 'mouseleave', this._collapse, this);
}
if (L.Browser.touch) {
L.DomEvent
.on(this._sliderLink, 'click', L.DomEvent.stop)
.on(this._sliderLink, 'click', this._expand, this);
} else {
L.DomEvent.on(this._sliderLink, 'focus', this._expand, this);
}
} else {
this._expand();
}
},
_expand: function () {
L.DomUtil.addClass(this._container, 'leaflet-control-slider-expanded');
},
_collapse: function () {
L.DomUtil.removeClass(this._container, 'leaflet-control-slider-expanded');
},
_increment: function () {
console.log(this.slider.value-this.slider.step + " " + this.slider.value+this.slider.step);
this.slider.value = this.slider.value*1+this.slider.step*1;
this._updateValue();
},
_decrement: function () {
console.log(this.slider.value-this.slider.step + " " + this.slider.value+this.slider.step);
this.slider.value = this.slider.value*1-this.slider.step*1;
this._updateValue();
}
});
L.control.slider = function (f, options) {
return new L.Control.Slider(f, options);
};