tidy up
This commit is contained in:
Dave Conway-Jones
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-heat.js
|
||||||
leaflet/leaflet-omnivore.min.js
|
leaflet/leaflet-omnivore.min.js
|
||||||
leaflet/leaflet-side-by-side.js
|
leaflet/leaflet-side-by-side.js
|
||||||
leaflet/leaflet-slider.css
|
|
||||||
leaflet/leaflet-slider.js
|
|
||||||
leaflet/leaflet-velocity.min.css
|
leaflet/leaflet-velocity.min.css
|
||||||
leaflet/leaflet-velocity.min.js
|
leaflet/leaflet-velocity.min.js
|
||||||
leaflet/leaflet.active-layers.min.js
|
leaflet/leaflet.active-layers.min.js
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user