tidy up
This commit is contained in:
parent
9b2f89c33a
commit
64abc0d190
@ -1,230 +0,0 @@
|
||||
.leaflet-control-slider {
|
||||
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.4);
|
||||
background: none repeat scroll 0% 0% #FFF;
|
||||
border-radius: 5px;
|
||||
}
|
||||
a.leaflet-control-slider-toggle {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
line-height: 36px !important;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color:#000;
|
||||
font-size:1.3em;
|
||||
}
|
||||
|
||||
.leaflet-control-slider p.leaflet-control-slider-value {
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
display:none;
|
||||
}
|
||||
.leaflet-control-slider.leaflet-control-slider-horizontal p.leaflet-control-slider-value {
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
border-right: 1px solid #CCC;
|
||||
width: 35px;
|
||||
float :left;
|
||||
clear:none;
|
||||
}
|
||||
.leaflet-control-slider.leaflet-control-slider-vertical p.leaflet-control-slider-value {
|
||||
height: 25px;
|
||||
line-height: 26px;
|
||||
margin: 0px 0px 5px 0px;
|
||||
border-bottom: 1px solid #CCC;
|
||||
width: 36px;
|
||||
}
|
||||
.leaflet-control-slider input.leaflet-slider {
|
||||
margin:0px;
|
||||
}
|
||||
.leaflet-control-slider input.leaflet-slider , .leaflet-control-slider .leaflet-slider-container {
|
||||
display:none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.leaflet-control-slider.leaflet-control-slider-horizontal .leaflet-slider-container {
|
||||
float :right;
|
||||
clear:none;
|
||||
width: 90%;
|
||||
height:36px;
|
||||
}
|
||||
.leaflet-control-slider.leaflet-control-slider-horizontal input.leaflet-slider {
|
||||
height:36px;
|
||||
}
|
||||
|
||||
.leaflet-control-slider.leaflet-control-slider-vertical input.leaflet-slider{
|
||||
writing-mode: bt-lr;
|
||||
width: 36px;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.leaflet-control-slider.leaflet-control-slider-expanded p.leaflet-control-slider-value {
|
||||
display:block;
|
||||
}
|
||||
.leaflet-control-slider.leaflet-control-slider-expanded a.leaflet-control-slider-toggle {
|
||||
display:none;
|
||||
}
|
||||
.leaflet-control-slider.leaflet-control-slider-expanded input.leaflet-slider, .leaflet-control-slider.leaflet-control-slider-expanded .leaflet-slider-container{
|
||||
display:inherit;
|
||||
}
|
||||
.leaflet-control-slider.leaflet-control-slider-vertical .leaflet-slider-container {
|
||||
width:36px;
|
||||
-webkit-transform:rotate(180deg);
|
||||
}
|
||||
|
||||
.leaflet-control-slider.leaflet-control-slider-vertical .leaflet-slider-container {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.leaflet-control-slider.leaflet-control-slider-horizontal .leaflet-slider-container {
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.leaflet-control-slider.leaflet-control-slider-vertical.leaflet-control-slider-incdec .leaflet-slider-container {
|
||||
margin: 0px 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.leaflet-control-slider input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
}
|
||||
.leaflet-control-slider input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
.leaflet-control-slider input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
background: #dddddd;
|
||||
border-radius: 25px;
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
.leaflet-control-slider input[type=range]::-webkit-slider-thumb {
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 8px;
|
||||
background: #a4a4a4;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -5.5px;
|
||||
}
|
||||
.leaflet-control-slider input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: #eaeaea;
|
||||
}
|
||||
.leaflet-control-slider input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
background: #dddddd;
|
||||
border-radius: 25px;
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
.leaflet-control-slider input[type=range]::-moz-range-thumb {
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 8px;
|
||||
background: #a4a4a4;
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-control-slider input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
.leaflet-control-slider input[type=range]::-ms-fill-lower {
|
||||
background: #d0d0d0;
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
border-radius: 50px;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
}
|
||||
.leaflet-control-slider input[type=range]::-ms-fill-upper {
|
||||
background: #dddddd;
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
border-radius: 50px;
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
}
|
||||
.leaflet-control-slider input[type=range]::-ms-thumb {
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
|
||||
border: 0px solid rgba(0, 0, 0, 0);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 8px;
|
||||
background: #a4a4a4;
|
||||
cursor: pointer;
|
||||
height: 5px;
|
||||
}
|
||||
.leaflet-control-slider input[type=range]:focus::-ms-fill-lower {
|
||||
background: #dddddd;
|
||||
}
|
||||
.leaflet-control-slider input[type=range]:focus::-ms-fill-upper {
|
||||
background: #eaeaea;
|
||||
}
|
||||
|
||||
.leaflet-control-slider.leaflet-control-slider-vertical input[type=range]::-moz-range-track {
|
||||
height: 100%;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
/*increment/decrement*/
|
||||
|
||||
|
||||
.leaflet-control-slider-plus, .leaflet-control-slider-minus{
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
line-height: 32px !important;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
color:#000;
|
||||
font-size:1.3em;
|
||||
display:none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.leaflet-control-slider.leaflet-control-slider-expanded .leaflet-control-slider-plus, .leaflet-control-slider.leaflet-control-slider-expanded .leaflet-control-slider-minus{
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-slider.leaflet-control-slider-horizontal .leaflet-control-slider-plus, .leaflet-control-slider.leaflet-control-slider-horizontal .leaflet-control-slider-minus{
|
||||
float:right;
|
||||
}
|
||||
|
||||
.leaflet-control-slider input[type=range]::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
/* webkit specific CSS */
|
||||
.leaflet-control-slider.leaflet-control-slider-vertical input[type=range] {
|
||||
-webkit-transform-origin: 18px 18px;
|
||||
-webkit-transform:rotate(90deg);
|
||||
height:36px;
|
||||
}
|
||||
}
|
@ -1,150 +0,0 @@
|
||||
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);
|
||||
};
|
@ -28,8 +28,6 @@ leaflet/l.ellipse.min.js
|
||||
leaflet/leaflet-heat.js
|
||||
leaflet/leaflet-omnivore.min.js
|
||||
leaflet/leaflet-side-by-side.js
|
||||
leaflet/leaflet-slider.css
|
||||
leaflet/leaflet-slider.js
|
||||
leaflet/leaflet-velocity.min.css
|
||||
leaflet/leaflet-velocity.min.js
|
||||
leaflet/leaflet.active-layers.min.js
|
||||
|
Loading…
Reference in New Issue
Block a user