mirror of
https://github.com/s00500/ESPUI.git
synced 2025-06-12 04:10:39 +00:00
Fixing sliders not updating properly
Signed-off-by: Lukas Bachschwell <lukas@lbsfilm.at>
This commit is contained in:
@ -135,114 +135,145 @@
|
||||
.container {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.column,
|
||||
.columns {
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.column:first-child,
|
||||
.columns:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.one.column,
|
||||
.one.columns {
|
||||
width: 4.66666666667%;
|
||||
}
|
||||
|
||||
.two.columns {
|
||||
width: 13.3333333333%;
|
||||
}
|
||||
|
||||
.three.columns {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.four.columns {
|
||||
width: 30.6666666667%;
|
||||
}
|
||||
|
||||
.five.columns {
|
||||
width: 39.3333333333%;
|
||||
}
|
||||
|
||||
.six.columns {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.seven.columns {
|
||||
width: 56.6666666667%;
|
||||
}
|
||||
|
||||
.eight.columns {
|
||||
width: 65.3333333333%;
|
||||
}
|
||||
|
||||
.nine.columns {
|
||||
width: 74%;
|
||||
}
|
||||
|
||||
.ten.columns {
|
||||
width: 82.6666666667%;
|
||||
}
|
||||
|
||||
.eleven.columns {
|
||||
width: 91.3333333333%;
|
||||
}
|
||||
|
||||
.twelve.columns {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.one-third.column {
|
||||
width: 30.6666666667%;
|
||||
}
|
||||
|
||||
.two-thirds.column {
|
||||
width: 65.3333333333%;
|
||||
}
|
||||
|
||||
.one-half.column {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
/* Offsets */
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns {
|
||||
margin-left: 8.66666666667%;
|
||||
}
|
||||
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns {
|
||||
margin-left: 17.3333333333%;
|
||||
}
|
||||
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns {
|
||||
margin-left: 26%;
|
||||
}
|
||||
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns {
|
||||
margin-left: 34.6666666667%;
|
||||
}
|
||||
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns {
|
||||
margin-left: 43.3333333333%;
|
||||
}
|
||||
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns {
|
||||
margin-left: 52%;
|
||||
}
|
||||
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns {
|
||||
margin-left: 60.6666666667%;
|
||||
}
|
||||
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns {
|
||||
margin-left: 69.3333333333%;
|
||||
}
|
||||
|
||||
.offset-by-nine.column,
|
||||
.offset-by-nine.columns {
|
||||
margin-left: 78%;
|
||||
}
|
||||
|
||||
.offset-by-ten.column,
|
||||
.offset-by-ten.columns {
|
||||
margin-left: 86.6666666667%;
|
||||
}
|
||||
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns {
|
||||
margin-left: 95.3333333333%;
|
||||
}
|
||||
|
||||
.offset-by-one-third.column,
|
||||
.offset-by-one-third.columns {
|
||||
margin-left: 34.6666666667%;
|
||||
}
|
||||
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns {
|
||||
margin-left: 69.3333333333%;
|
||||
}
|
||||
|
||||
.offset-by-one-half.column,
|
||||
.offset-by-one-half.columns {
|
||||
margin-left: 52%;
|
||||
@ -322,18 +353,23 @@ h6 {
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 4.2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@ -438,10 +474,8 @@ hr {
|
||||
|
||||
.control {
|
||||
background-color: #ddd;
|
||||
background-image: linear-gradient(
|
||||
hsla(0, 0%, 0%, 0.1),
|
||||
hsla(0, 0%, 100%, 0.1)
|
||||
);
|
||||
background-image: linear-gradient(hsla(0, 0%, 0%, 0.1),
|
||||
hsla(0, 0%, 100%, 0.1));
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, 0.5),
|
||||
0 0 1px 1px hsla(0, 0%, 100%, 0.75), 0 0 1px 2px hsla(0, 0%, 100%, 0.25),
|
||||
@ -506,10 +540,8 @@ hr {
|
||||
|
||||
.control .confirm {
|
||||
background-color: #ddd;
|
||||
background-image: linear-gradient(
|
||||
hsla(0, 0%, 0%, 0.15),
|
||||
hsla(0, 0%, 100%, 0.25)
|
||||
);
|
||||
background-image: linear-gradient(hsla(0, 0%, 0%, 0.15),
|
||||
hsla(0, 0%, 100%, 0.25));
|
||||
box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, 0.5),
|
||||
0 0 1px 1px hsla(0, 0%, 100%, 0.25), 0 0 1px 2px hsla(0, 0%, 100%, 0.25),
|
||||
0 0 1px 3px hsla(0, 0%, 100%, 0.25), 0 0 1px 4px hsla(0, 0%, 100%, 0.25),
|
||||
@ -582,13 +614,11 @@ hr {
|
||||
.switch .in:before {
|
||||
background: #fff;
|
||||
background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
left bottom,
|
||||
color-stop(0%, #fff),
|
||||
color-stop(100%, #f0f0f0)
|
||||
);
|
||||
background: -webkit-gradient(linear,
|
||||
left top,
|
||||
left bottom,
|
||||
color-stop(0%, #fff),
|
||||
color-stop(100%, #f0f0f0));
|
||||
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
|
||||
background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
|
||||
background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
|
||||
@ -607,13 +637,11 @@ hr {
|
||||
.switch .in:after {
|
||||
background: #f0f0f0;
|
||||
background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
left bottom,
|
||||
color-stop(0%, #f0f0f0),
|
||||
color-stop(100%, #fff)
|
||||
);
|
||||
background: -webkit-gradient(linear,
|
||||
left top,
|
||||
left bottom,
|
||||
color-stop(0%, #f0f0f0),
|
||||
color-stop(100%, #fff));
|
||||
background: -webkit-linear-gradient(top, #f0f0f0 0%, #fff 100%);
|
||||
background: -o-linear-gradient(top, #f0f0f0 0%, #fff 100%);
|
||||
background: -ms-linear-gradient(top, #f0f0f0 0%, #fff 100%);
|
||||
@ -635,6 +663,7 @@ hr {
|
||||
font-size: 16px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
.rkmd-slider input[type="range"] {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
@ -642,7 +671,8 @@ hr {
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
.rkmd-slider input[type="range"] + .slider {
|
||||
|
||||
.rkmd-slider input[type="range"]+.slider {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -650,13 +680,15 @@ hr {
|
||||
border-radius: 13px;
|
||||
background-color: #bebebe;
|
||||
}
|
||||
|
||||
@media (pointer: fine) {
|
||||
.rkmd-slider input[type="range"] + .slider {
|
||||
.rkmd-slider input[type="range"]+.slider {
|
||||
height: 4px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
.rkmd-slider input[type="range"] + .slider .slider-fill {
|
||||
|
||||
.rkmd-slider input[type="range"]+.slider .slider-fill {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
@ -664,7 +696,8 @@ hr {
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.rkmd-slider input[type="range"] + .slider .slider-handle {
|
||||
|
||||
.rkmd-slider input[type="range"]+.slider .slider-handle {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
@ -677,50 +710,45 @@ hr {
|
||||
user-select: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (pointer: fine) {
|
||||
.rkmd-slider input[type="range"] + .slider .slider-handle {
|
||||
.rkmd-slider input[type="range"]+.slider .slider-handle {
|
||||
top: -5.5px;
|
||||
}
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider {
|
||||
|
||||
.rkmd-slider input[type="range"]:disabled+.slider {
|
||||
background-color: #b0b0b0 !important;
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-fill,
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-handle {
|
||||
|
||||
.rkmd-slider input[type="range"]:disabled+.slider .slider-fill,
|
||||
.rkmd-slider input[type="range"]:disabled+.slider .slider-handle {
|
||||
cursor: default !important;
|
||||
background-color: #b0b0b0 !important;
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-fill .slider-label,
|
||||
.rkmd-slider
|
||||
input[type="range"]:disabled
|
||||
+ .slider
|
||||
.slider-handle
|
||||
.slider-label {
|
||||
|
||||
.rkmd-slider input[type="range"]:disabled+.slider .slider-fill .slider-label,
|
||||
.rkmd-slider input[type="range"]:disabled+.slider .slider-handle .slider-label {
|
||||
display: none;
|
||||
background-color: #b0b0b0 !important;
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-fill.is-active,
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-handle.is-active {
|
||||
|
||||
.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active,
|
||||
.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active {
|
||||
top: -5.5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
.rkmd-slider
|
||||
input[type="range"]:disabled
|
||||
+ .slider
|
||||
.slider-fill.is-active
|
||||
.slider-label,
|
||||
.rkmd-slider
|
||||
input[type="range"]:disabled
|
||||
+ .slider
|
||||
.slider-handle.is-active
|
||||
.slider-label {
|
||||
|
||||
.rkmd-slider input[type="range"]:disabled+.slider .slider-fill.is-active .slider-label,
|
||||
.rkmd-slider input[type="range"]:disabled+.slider .slider-handle.is-active .slider-label {
|
||||
display: none;
|
||||
border-radius: 50%;
|
||||
transform: none;
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider .slider-handle:active {
|
||||
|
||||
.rkmd-slider input[type="range"]:disabled+.slider .slider-handle:active {
|
||||
box-shadow: none !important;
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
@ -747,6 +775,7 @@ hr {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@media (pointer: fine) {
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
|
||||
left: -2px;
|
||||
@ -771,17 +800,20 @@ hr {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (pointer: fine) {
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle.is-active {
|
||||
top: 0px;
|
||||
margin-left: -2px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label {
|
||||
top: -15px;
|
||||
left: -2px;
|
||||
@ -789,11 +821,8 @@ hr {
|
||||
-webkit-transform: rotate(-45deg) translate(23px, -25px);
|
||||
transform: rotate(-45deg) translate(23px, -25px);
|
||||
}
|
||||
.rkmd-slider.slider-discrete
|
||||
.slider
|
||||
.slider-handle.is-active
|
||||
.slider-label
|
||||
span {
|
||||
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle.is-active .slider-label span {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -898,20 +927,23 @@ input[id^="num"] {
|
||||
font-size: 115%;
|
||||
}
|
||||
|
||||
body div > ul.navigation {
|
||||
body div>ul.navigation {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: 3px solid #666;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul.navigation li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
ul.navigation li.controls {
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul.navigation li a {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
@ -936,7 +968,7 @@ ul.navigation li.active a {
|
||||
-pie-background: linear-gradient(#888, #666);
|
||||
}
|
||||
|
||||
div.tabscontent > div {
|
||||
div.tabscontent>div {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
@ -947,9 +979,11 @@ div.tabscontent > div {
|
||||
.range-slider {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
.range-slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.range-slider__range {
|
||||
-webkit-appearance: none;
|
||||
width: calc(100% - (45px));
|
||||
@ -959,6 +993,8 @@ div.tabscontent > div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
.range-slider__range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
@ -985,6 +1021,7 @@ div.tabscontent > div {
|
||||
.range-slider__range:focus::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
|
||||
}
|
||||
*/
|
||||
.range-slider__value {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@ -996,6 +1033,7 @@ div.tabscontent > div {
|
||||
padding: 5px 5px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.range-slider__value:after {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
@ -1007,9 +1045,11 @@ div.tabscontent > div {
|
||||
border-bottom:1px solid transparent;*/
|
||||
content: "";
|
||||
}
|
||||
|
||||
::-moz-range-track {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
input::-moz-focus-inner,
|
||||
input::-moz-focus-outer {
|
||||
border: 0;
|
||||
@ -1051,7 +1091,7 @@ svg {
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.data-points circle:hover + text {
|
||||
.data-points circle:hover+text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
2
data/css/style.min.css
vendored
2
data/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
4
data/js/controls.js
vendored
4
data/js/controls.js
vendored
@ -226,7 +226,7 @@ function start() {
|
||||
};
|
||||
|
||||
var handleEvent = function (evt) {
|
||||
//console.log(evt);
|
||||
console.log(evt);
|
||||
var data = JSON.parse(evt.data);
|
||||
var e = document.body;
|
||||
var center = "";
|
||||
@ -750,7 +750,7 @@ function start() {
|
||||
break;
|
||||
|
||||
case UPDATE_SLIDER:
|
||||
slider_move($("#sl" + data.id), data.value, "100", false);
|
||||
slider_move($("#id" + data.id), data.value, "100", false);
|
||||
break;
|
||||
|
||||
case UPDATE_NUMBER:
|
||||
|
||||
4
data/js/controls.min.js
vendored
4
data/js/controls.min.js
vendored
@ -7,7 +7,7 @@ function restart(){$(document).add("*").off();$("#row").html("");websock.close()
|
||||
function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart,});}
|
||||
function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
|
||||
function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{websock=new WebSocket("ws://"+window.location.hostname+"/ws");}
|
||||
websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
|
||||
websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
|
||||
data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
|
||||
parent.append("<div id='id"+
|
||||
data.id+
|
||||
@ -237,7 +237,7 @@ data.id+
|
||||
"'></div><pre class='accelerometeroutput"+
|
||||
data.id+
|
||||
"'></pre>"+
|
||||
"</div>");requestOrientationPermission();break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);break;case UPDATE_SLIDER:slider_move($("#sl"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event");break;}
|
||||
"</div>");requestOrientationPermission();break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event");break;}
|
||||
if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$("#id"+data.id);if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}}};websock.onmessage=handleEvent;}
|
||||
function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);}
|
||||
function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);}
|
||||
|
||||
@ -10,7 +10,7 @@ function rkmd_rangeSlider(selector) {
|
||||
slider_offset = self.offset().left;
|
||||
sliderDiscrete = self;
|
||||
|
||||
sliderDiscrete.each(function(i, v) {
|
||||
sliderDiscrete.each(function (i, v) {
|
||||
curnt = $(this);
|
||||
curnt.append(sliderDiscrete_tmplt());
|
||||
range = curnt.find('input[type="range"]');
|
||||
@ -25,7 +25,7 @@ function rkmd_rangeSlider(selector) {
|
||||
slider_label.find("span").text(range_val);
|
||||
});
|
||||
|
||||
self.on("mousedown touchstart", ".slider-handle", function(e) {
|
||||
self.on("mousedown touchstart", ".slider-handle", function (e) {
|
||||
if (e.button === 2) {
|
||||
return false;
|
||||
}
|
||||
@ -37,14 +37,14 @@ function rkmd_rangeSlider(selector) {
|
||||
return false;
|
||||
}
|
||||
$(this).addClass("is-active");
|
||||
var moveFu = function(e) {
|
||||
var moveFu = function (e) {
|
||||
var pageX = e.pageX || e.changedTouches[0].pageX;
|
||||
var slider_new_width = pageX - slider_offset;
|
||||
if (slider_new_width <= slider_width && !(slider_new_width < "0")) {
|
||||
slider_move(parents, slider_new_width, slider_width, true);
|
||||
}
|
||||
};
|
||||
var upFu = function(e) {
|
||||
var upFu = function (e) {
|
||||
$(this).off(handlers);
|
||||
parents.find(".is-active").removeClass("is-active");
|
||||
};
|
||||
@ -53,12 +53,12 @@ function rkmd_rangeSlider(selector) {
|
||||
mousemove: moveFu,
|
||||
touchmove: moveFu,
|
||||
mouseup: upFu,
|
||||
touchend: upFu
|
||||
touchend: upFu,
|
||||
};
|
||||
$(document).on(handlers);
|
||||
});
|
||||
|
||||
self.on("mousedown touchstart", ".slider", function(e) {
|
||||
self.on("mousedown touchstart", ".slider", function (e) {
|
||||
if (e.button === 2) {
|
||||
return false;
|
||||
}
|
||||
@ -76,13 +76,13 @@ function rkmd_rangeSlider(selector) {
|
||||
if (slider_new_width <= slider_width && !(slider_new_width < "0")) {
|
||||
slider_move(parents, slider_new_width, slider_width, true);
|
||||
}
|
||||
var upFu = function(e) {
|
||||
var upFu = function (e) {
|
||||
$(this).off(handlers);
|
||||
};
|
||||
|
||||
var handlers = {
|
||||
mouseup: upFu,
|
||||
touchend: upFu
|
||||
touchend: upFu,
|
||||
};
|
||||
$(document).on(handlers);
|
||||
});
|
||||
@ -104,13 +104,14 @@ function slider_move(parents, newW, sliderW, send) {
|
||||
var slider_fill = parents.find(".slider-fill");
|
||||
var slider_handle = parents.find(".slider-handle");
|
||||
var range = parents.find('input[type="range"]');
|
||||
range.next().html(newW); // update value
|
||||
|
||||
slider_fill.css("width", slider_new_val + "%");
|
||||
slider_handle.css({
|
||||
left: slider_new_val + "%",
|
||||
transition: "none",
|
||||
"-webkit-transition": "none",
|
||||
"-moz-transition": "none"
|
||||
"-moz-transition": "none",
|
||||
});
|
||||
|
||||
range.val(slider_new_val);
|
||||
|
||||
22
data/js/slider.min.js
vendored
22
data/js/slider.min.js
vendored
@ -1,11 +1,11 @@
|
||||
function rkmd_rangeSlider(selector){var self,slider_width,slider_offset,curnt,sliderDiscrete,range,slider;self=$(selector);slider_width=self.width();slider_offset=self.offset().left;sliderDiscrete=self;sliderDiscrete.each(function(i,v){curnt=$(this);curnt.append(sliderDiscrete_tmplt());range=curnt.find('input[type="range"]');slider=curnt.find(".slider");slider_fill=slider.find(".slider-fill");slider_handle=slider.find(".slider-handle");slider_label=slider.find(".slider-label");var range_val=parseInt(range.val());slider_fill.css("width",range_val+"%");slider_handle.css("left",range_val+"%");slider_label.find("span").text(range_val);});self.on("mousedown touchstart",".slider-handle",function(e){if(e.button===2){return false;}
|
||||
var parents=$(this).parents(".rkmd-slider");var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(":disabled");if(check_range===true){return false;}
|
||||
$(this).addClass("is-active");var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<"0")){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find(".is-active").removeClass("is-active");};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu};$(document).on(handlers);});self.on("mousedown touchstart",".slider",function(e){if(e.button===2){return false;}
|
||||
var parents=$(this).parents(".rkmd-slider");var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(":disabled");if(check_range===true){return false;}
|
||||
var slider_new_width=e.pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<"0")){slider_move(parents,slider_new_width,slider_width,true);}
|
||||
var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu};$(document).on(handlers);});}
|
||||
function sliderDiscrete_tmplt(){var tmplt='<div class="slider">'+
|
||||
'<div class="slider-fill"></div>'+
|
||||
'<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>'+
|
||||
"</div>";return tmplt;}
|
||||
function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round((newW/sliderW)*100));var slider_fill=parents.find(".slider-fill");var slider_handle=parents.find(".slider-handle");var range=parents.find('input[type="range"]');slider_fill.css("width",slider_new_val+"%");slider_handle.css({left:slider_new_val+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none"});range.val(slider_new_val);if(parents.find(".slider-handle span").text()!=slider_new_val){parents.find(".slider-handle span").text(slider_new_val);var number=parents.attr("id").substring(2);if(send)websock.send("slvalue:"+slider_new_val+":"+number);}}
|
||||
function rkmd_rangeSlider(selector){var self,slider_width,slider_offset,curnt,sliderDiscrete,range,slider;self=$(selector);slider_width=self.width();slider_offset=self.offset().left;sliderDiscrete=self;sliderDiscrete.each(function(i,v){curnt=$(this);curnt.append(sliderDiscrete_tmplt());range=curnt.find('input[type="range"]');slider=curnt.find(".slider");slider_fill=slider.find(".slider-fill");slider_handle=slider.find(".slider-handle");slider_label=slider.find(".slider-label");var range_val=parseInt(range.val());slider_fill.css("width",range_val+"%");slider_handle.css("left",range_val+"%");slider_label.find("span").text(range_val);});self.on("mousedown touchstart",".slider-handle",function(e){if(e.button===2){return false;}
|
||||
var parents=$(this).parents(".rkmd-slider");var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(":disabled");if(check_range===true){return false;}
|
||||
$(this).addClass("is-active");var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<"0")){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find(".is-active").removeClass("is-active");};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu,};$(document).on(handlers);});self.on("mousedown touchstart",".slider",function(e){if(e.button===2){return false;}
|
||||
var parents=$(this).parents(".rkmd-slider");var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(":disabled");if(check_range===true){return false;}
|
||||
var slider_new_width=e.pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<"0")){slider_move(parents,slider_new_width,slider_width,true);}
|
||||
var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu,};$(document).on(handlers);});}
|
||||
function sliderDiscrete_tmplt(){var tmplt='<div class="slider">'+
|
||||
'<div class="slider-fill"></div>'+
|
||||
'<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>'+
|
||||
"</div>";return tmplt;}
|
||||
function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round((newW/sliderW)*100));var slider_fill=parents.find(".slider-fill");var slider_handle=parents.find(".slider-handle");var range=parents.find('input[type="range"]');range.next().html(newW);slider_fill.css("width",slider_new_val+"%");slider_handle.css({left:slider_new_val+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none",});range.val(slider_new_val);if(parents.find(".slider-handle span").text()!=slider_new_val){parents.find(".slider-handle span").text(slider_new_val);var number=parents.attr("id").substring(2);if(send)websock.send("slvalue:"+slider_new_val+":"+number);}}
|
||||
Reference in New Issue
Block a user