This commit is contained in:
Dave Conway-Jones 2019-03-11 22:12:52 +00:00
parent 9b2f89c33a
commit 64abc0d190
No known key found for this signature in database
GPG Key ID: 9E7F9C73F5168CD4
3 changed files with 0 additions and 382 deletions

View File

@ -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;
}
}

View File

@ -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);
};

View File

@ -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