starting web app
This commit is contained in:
parent
f9246befb5
commit
ca73a7d47e
3
RpiLedBars/web/README.md
Normal file
3
RpiLedBars/web/README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
https://www.sliderrevolution.com/resources/css-range-slider/
|
||||||
|
https://iro.js.org/guide.html
|
||||||
|
https://javascript.info/websocket
|
||||||
207
RpiLedBars/web/flat_slider.css
Normal file
207
RpiLedBars/web/flat_slider.css
Normal file
|
|
@ -0,0 +1,207 @@
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,600);
|
||||||
|
body {
|
||||||
|
background: #434d5a;
|
||||||
|
font-family: "Roboto";
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #7e8c9f;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
cursor: default;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #c7cdd5;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.5em 1em;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:nth-of-type(1) {
|
||||||
|
margin-top: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:last-child {
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:last-child a {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stuff {
|
||||||
|
padding: 50px 50px 50px;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* #flat-slider .ui-slider-handle,
|
||||||
|
#flat-slider .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
|
||||||
|
#flat-slider .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
|
||||||
|
#flat-slider .ui-slider-range {
|
||||||
|
background-color: #25daa5
|
||||||
|
}
|
||||||
|
|
||||||
|
#flat-slider-vertical-1 .ui-slider-handle,
|
||||||
|
#flat-slider-vertical-1 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
|
||||||
|
#flat-slider-vertical-1 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
|
||||||
|
#flat-slider-vertical-1 .ui-slider-range {
|
||||||
|
background-color: #f27793
|
||||||
|
}
|
||||||
|
|
||||||
|
#flat-slider-vertical-2 .ui-slider-handle,
|
||||||
|
#flat-slider-vertical-2 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
|
||||||
|
#flat-slider-vertical-2 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
|
||||||
|
#flat-slider-vertical-2 .ui-slider-range {
|
||||||
|
background-color: #bd77f2
|
||||||
|
}
|
||||||
|
|
||||||
|
#flat-slider-vertical-3 .ui-slider-handle,
|
||||||
|
#flat-slider-vertical-3 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line,
|
||||||
|
#flat-slider-vertical-3 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
|
||||||
|
#flat-slider-vertical-3 .ui-slider-range {
|
||||||
|
background-color: #67c3ec
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider {
|
||||||
|
background: #e8e2d3;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider .ui-slider-handle {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50% 50% 0;
|
||||||
|
border-color: transparent;
|
||||||
|
transition: border .4s ease
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active,
|
||||||
|
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus,
|
||||||
|
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover {
|
||||||
|
border-color: #172f38
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
|
||||||
|
background: #e8e2d3;
|
||||||
|
transition: all .4s ease
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-horizontal {
|
||||||
|
height: 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-handle {
|
||||||
|
-webkit-transform: rotateZ(45deg);
|
||||||
|
transform: rotateZ(45deg);
|
||||||
|
top: -25px;
|
||||||
|
margin-left: -10px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip {
|
||||||
|
top: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip .ui-slider-line {
|
||||||
|
width: 2px;
|
||||||
|
height: 10px;
|
||||||
|
margin-left: -1px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
|
||||||
|
height: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-horizontal .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
|
||||||
|
height: 12px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-vertical {
|
||||||
|
width: 6px;
|
||||||
|
height: 125px;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 15%
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle {
|
||||||
|
-webkit-transform: rotateZ(-45deg);
|
||||||
|
transform: rotateZ(-45deg);
|
||||||
|
left: -25px;
|
||||||
|
margin-bottom: -10px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip {
|
||||||
|
left: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip .ui-slider-line {
|
||||||
|
height: 2px;
|
||||||
|
width: 10px;
|
||||||
|
margin-top: -1px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
|
||||||
|
width: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
|
||||||
|
width: 12px
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip,
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
border: none;
|
||||||
|
background: 0 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 30px;
|
||||||
|
margin-left: -15px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 400;
|
||||||
|
top: 10px;
|
||||||
|
-webkit-transform: rotateZ(45deg);
|
||||||
|
transform: rotateZ(45deg)
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip:before,
|
||||||
|
[id*=flat-slider].ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip:before {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider,
|
||||||
|
[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
|
||||||
|
background: #7e8c9f;
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider .ui-slider-handle .ui-slider-tip:after {
|
||||||
|
border-left-color: #434d5a;
|
||||||
|
}
|
||||||
|
|
||||||
|
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover,
|
||||||
|
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus,
|
||||||
|
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-widget-content .ui-slider-handle.ui-state-focus {
|
||||||
|
outline: 0;
|
||||||
|
border-color: #434d5a
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
:after,
|
||||||
|
:before {
|
||||||
|
box-sizing: border-box
|
||||||
|
} */
|
||||||
53
RpiLedBars/web/flat_slider.js
Normal file
53
RpiLedBars/web/flat_slider.js
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
$(function() {
|
||||||
|
$.extend($.ui.slider.prototype.options, {
|
||||||
|
animate: 300
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#flat-slider")
|
||||||
|
.slider({
|
||||||
|
max: 50,
|
||||||
|
min: 0,
|
||||||
|
range: true,
|
||||||
|
values: [15, 35]
|
||||||
|
})
|
||||||
|
.slider("pips", {
|
||||||
|
first: "pip",
|
||||||
|
last: "pip"
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#flat-slider-vertical-1")
|
||||||
|
.slider({
|
||||||
|
max: 150,
|
||||||
|
min: 0,
|
||||||
|
range: "min",
|
||||||
|
value: 25,
|
||||||
|
orientation: "vertical"
|
||||||
|
})
|
||||||
|
.slider("float");
|
||||||
|
|
||||||
|
$("#flat-slider-vertical-2")
|
||||||
|
.slider({
|
||||||
|
max: 4,
|
||||||
|
min: 0,
|
||||||
|
range: "min",
|
||||||
|
value: 2,
|
||||||
|
orientation: "vertical"
|
||||||
|
})
|
||||||
|
.slider("float");
|
||||||
|
|
||||||
|
$("#flat-slider-vertical-3")
|
||||||
|
.slider({
|
||||||
|
max: 25,
|
||||||
|
min: 0,
|
||||||
|
range: "min",
|
||||||
|
value: 0,
|
||||||
|
orientation: "vertical"
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#flat-slider-vertical-1, #flat-slider-vertical-2, #flat-slider-vertical-3")
|
||||||
|
.slider("pips", {
|
||||||
|
first: "pip",
|
||||||
|
last: "pip"
|
||||||
|
})
|
||||||
|
.slider("float");
|
||||||
|
});
|
||||||
30
RpiLedBars/web/index.css
Normal file
30
RpiLedBars/web/index.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,600);
|
||||||
|
body {
|
||||||
|
background: #434d5a;
|
||||||
|
font-family: "Roboto";
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #7e8c9f;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
cursor: default;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#picker {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.IroColorPicker {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
25
RpiLedBars/web/index.html
Normal file
25
RpiLedBars/web/index.html
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Config</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<meta name="description" content="Accueil">
|
||||||
|
<meta name="author" content="Tropicananass">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="index.css" type="text/css">
|
||||||
|
|
||||||
|
<script src="iro.js"></script>
|
||||||
|
<script src="index.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<h1> Tropicananass Leds </h1>
|
||||||
|
</div>
|
||||||
|
<div id="picker"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
49
RpiLedBars/web/index.js
Normal file
49
RpiLedBars/web/index.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
let socket = new WebSocket("ws://192.168.1.130:8080");
|
||||||
|
|
||||||
|
socket.onopen = function(e) {
|
||||||
|
alert("[open] Connection established");
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onmessage = function(event) {
|
||||||
|
alert(`[message] Data received from server: ${event.data}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onclose = function(event) {
|
||||||
|
if (event.wasClean) {
|
||||||
|
alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
|
||||||
|
} else {
|
||||||
|
// e.g. server process killed or network down
|
||||||
|
// event.code is usually 1006 in this case
|
||||||
|
alert('[close] Connection died');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onerror = function(error) {
|
||||||
|
alert(`[error] ${error.message}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
var colorPicker = new iro.ColorPicker('#picker', {
|
||||||
|
colors: [
|
||||||
|
'hsl(0, 100, 50)', // pure red
|
||||||
|
'hsl(180, 50, 100)' // pure green
|
||||||
|
],
|
||||||
|
layout: [{
|
||||||
|
component: iro.ui.Wheel,
|
||||||
|
options: {}
|
||||||
|
}, {
|
||||||
|
component: iro.ui.Box,
|
||||||
|
options: {}
|
||||||
|
}],
|
||||||
|
display: "flex",
|
||||||
|
handleRadius: 14,
|
||||||
|
});
|
||||||
|
|
||||||
|
// make a handler function
|
||||||
|
function colorChangeCallback(color) {
|
||||||
|
console.log("{index: " + color.index + ", h: " + color.hsl.h + ", s: " + color.hsl.s + ", l: " + color.hsl.l + "}");
|
||||||
|
socket.send("{" + color.index + "," + color.hsl.h + "," + color.hsl.s + "," + color.hsl.l + "}");
|
||||||
|
}
|
||||||
|
|
||||||
|
// start listening to the color change event
|
||||||
|
// colorChangeCallback will be called whenever the color changes
|
||||||
|
colorPicker.on("color:change", colorChangeCallback);
|
||||||
38
RpiLedBars/web/index_model.html
Normal file
38
RpiLedBars/web/index_model.html
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Config</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<meta name="description" content="Accueil">
|
||||||
|
<meta name="author" content="Tropicananass">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css" type=" text/css">
|
||||||
|
<link rel="stylesheet" href="slider/jquery-ui-slider-pips.min.css" type=" text/css">
|
||||||
|
<link rel="stylesheet" href="slider/app.min.css" type=" text/css">
|
||||||
|
<!-- <link rel="stylesheet" href="flat_slider.css" type="text/css"> -->
|
||||||
|
|
||||||
|
<!-- include the jQuery and jQuery UI scripts -->
|
||||||
|
<script src="jquery-ui-1.12.1/external/jquery/jquery.js"></script>
|
||||||
|
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
|
||||||
|
<script src="slider/jquery-ui-slider-pips.min.js"></script>
|
||||||
|
<script src="flat_slider.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<h1> HALO </h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="flat-slider"></div>
|
||||||
|
|
||||||
|
<div class="vertical">
|
||||||
|
|
||||||
|
<div id="flat-slider-vertical-1"></div>
|
||||||
|
<div id="flat-slider-vertical-2"></div>
|
||||||
|
<div id="flat-slider-vertical-3"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
1787
RpiLedBars/web/iro.js
Normal file
1787
RpiLedBars/web/iro.js
Normal file
File diff suppressed because one or more lines are too long
8285
RpiLedBars/web/slider/app.min.css
vendored
Normal file
8285
RpiLedBars/web/slider/app.min.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
326
RpiLedBars/web/slider/jquery-ui-slider-pips.css
Normal file
326
RpiLedBars/web/slider/jquery-ui-slider-pips.css
Normal file
|
|
@ -0,0 +1,326 @@
|
||||||
|
/*! jQuery-ui-Slider-Pips - v1.11.4 - 2016-09-04
|
||||||
|
* Copyright (c) 2016 Simon Goellner <simey.me@gmail.com>; Licensed MIT */
|
||||||
|
|
||||||
|
/* HORIZONTAL */
|
||||||
|
/* increase bottom margin to fit the pips */
|
||||||
|
.ui-slider-horizontal.ui-slider-pips {
|
||||||
|
margin-bottom: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* default hide the labels and pips that arnt visible */
|
||||||
|
/* we just use css to hide incase we want to show certain */
|
||||||
|
/* labels/pips individually later */
|
||||||
|
.ui-slider-pips .ui-slider-label,
|
||||||
|
.ui-slider-pips .ui-slider-pip-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* now we show any labels that we've set to show in the options */
|
||||||
|
.ui-slider-pips .ui-slider-pip-label .ui-slider-label {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* PIP/LABEL WRAPPER */
|
||||||
|
/* position each pip absolutely just below the default slider */
|
||||||
|
/* and also prevent accidental selection */
|
||||||
|
.ui-slider-pips .ui-slider-pip {
|
||||||
|
width: 2em;
|
||||||
|
height: 1em;
|
||||||
|
line-height: 1em;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: #999;
|
||||||
|
overflow: visible;
|
||||||
|
text-align: center;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
margin-left: -1em;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-state-disabled.ui-slider-pips .ui-slider-pip {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* little pip/line position & size */
|
||||||
|
.ui-slider-pips .ui-slider-line {
|
||||||
|
background: #999;
|
||||||
|
width: 1px;
|
||||||
|
height: 3px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* the text label postion & size */
|
||||||
|
/* it overflows so no need for width to be accurate */
|
||||||
|
.ui-slider-pips .ui-slider-label {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -1em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* make it easy to see when we hover a label */
|
||||||
|
.ui-slider-pips:not(.ui-slider-disabled) .ui-slider-pip:hover .ui-slider-label {
|
||||||
|
color: black;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* VERTICAL */
|
||||||
|
/* vertical slider needs right-margin, not bottom */
|
||||||
|
.ui-slider-vertical.ui-slider-pips {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-right: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* align vertical pips left and to right of the slider */
|
||||||
|
.ui-slider-vertical.ui-slider-pips .ui-slider-pip {
|
||||||
|
text-align: left;
|
||||||
|
top: auto;
|
||||||
|
left: 20px;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-bottom: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* vertical line/pip should be horizontal instead */
|
||||||
|
.ui-slider-vertical.ui-slider-pips .ui-slider-line {
|
||||||
|
width: 3px;
|
||||||
|
height: 1px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-vertical.ui-slider-pips .ui-slider-label {
|
||||||
|
top: 50%;
|
||||||
|
left: 0.5em;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: -0.5em;
|
||||||
|
width: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FLOATING HORIZTONAL TOOLTIPS */
|
||||||
|
/* remove the godawful looking focus outline on handle and float */
|
||||||
|
.ui-slider-float .ui-slider-handle:focus,
|
||||||
|
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
|
||||||
|
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
|
||||||
|
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
|
||||||
|
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip-label
|
||||||
|
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* style tooltips on handles and on labels */
|
||||||
|
/* also has a nice transition */
|
||||||
|
.ui-slider-float .ui-slider-tip,
|
||||||
|
.ui-slider-float .ui-slider-tip-label {
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
top: -40px;
|
||||||
|
display: block;
|
||||||
|
width: 34px;
|
||||||
|
margin-left: -18px;
|
||||||
|
left: 50%;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0;
|
||||||
|
color: #333;
|
||||||
|
-webkit-transition-property: opacity, top, visibility;
|
||||||
|
transition-property: opacity, top, visibility;
|
||||||
|
-webkit-transition-timing-function: ease-in;
|
||||||
|
transition-timing-function: ease-in;
|
||||||
|
-webkit-transition-duration: 200ms, 200ms, 0ms;
|
||||||
|
transition-duration: 200ms, 200ms, 0ms;
|
||||||
|
-webkit-transition-delay: 0ms, 0ms, 200ms;
|
||||||
|
transition-delay: 0ms, 0ms, 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* show the tooltip on hover or focus */
|
||||||
|
/* also switch transition delay around */
|
||||||
|
.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
|
||||||
|
.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
|
||||||
|
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
|
||||||
|
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
|
||||||
|
.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
|
||||||
|
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
|
||||||
|
opacity: 1;
|
||||||
|
top: -30px;
|
||||||
|
visibility: visible;
|
||||||
|
-webkit-transition-timing-function: ease-out;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
-webkit-transition-delay: 200ms, 200ms, 0ms;
|
||||||
|
transition-delay: 200ms, 200ms, 0ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* put label tooltips below slider */
|
||||||
|
.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
|
||||||
|
top: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
|
||||||
|
top: 32px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* give the tooltip a css triangle arrow */
|
||||||
|
.ui-slider-float .ui-slider-tip:after,
|
||||||
|
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
|
||||||
|
content: " ";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 5px solid rgba(255, 255, 255, 0);
|
||||||
|
border-top-color: white;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* put a 1px border on the tooltip arrow to match tooltip border */
|
||||||
|
.ui-slider-float .ui-slider-tip:before,
|
||||||
|
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
|
||||||
|
content: " ";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 5px solid rgba(255, 255, 255, 0);
|
||||||
|
border-top-color: #888;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -11px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* switch the arrow to top on labels */
|
||||||
|
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
|
||||||
|
border: 5px solid rgba(255, 255, 255, 0);
|
||||||
|
border-bottom-color: white;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
|
||||||
|
border: 5px solid rgba(255, 255, 255, 0);
|
||||||
|
border-bottom-color: #888;
|
||||||
|
top: -11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FLOATING VERTICAL TOOLTIPS */
|
||||||
|
/* tooltip floats to left of handle */
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-tip,
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-tip-label {
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -11px;
|
||||||
|
width: 34px;
|
||||||
|
margin-left: 0px;
|
||||||
|
left: -60px;
|
||||||
|
color: #333;
|
||||||
|
-webkit-transition-duration: 200ms, 200ms, 0;
|
||||||
|
transition-duration: 200ms, 200ms, 0;
|
||||||
|
-webkit-transition-property: opacity, left, visibility;
|
||||||
|
transition-property: opacity, left, visibility;
|
||||||
|
-webkit-transition-delay: 0, 0, 200ms;
|
||||||
|
transition-delay: 0, 0, 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -11px;
|
||||||
|
left: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* put label tooltips to right of slider */
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
|
||||||
|
left: 47px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
|
||||||
|
left: 37px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* give the tooltip a css triangle arrow */
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-tip:after,
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
|
||||||
|
border: 5px solid rgba(255, 255, 255, 0);
|
||||||
|
border-left-color: white;
|
||||||
|
border-top-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50%;
|
||||||
|
margin-bottom: -5px;
|
||||||
|
right: -10px;
|
||||||
|
margin-left: 0;
|
||||||
|
top: auto;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-tip:before,
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
|
||||||
|
border: 5px solid rgba(255, 255, 255, 0);
|
||||||
|
border-left-color: #888;
|
||||||
|
border-top-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50%;
|
||||||
|
margin-bottom: -5px;
|
||||||
|
right: -11px;
|
||||||
|
margin-left: 0;
|
||||||
|
top: auto;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
|
||||||
|
border: 5px solid rgba(255, 255, 255, 0);
|
||||||
|
border-right-color: white;
|
||||||
|
right: auto;
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
|
||||||
|
border: 5px solid rgba(255, 255, 255, 0);
|
||||||
|
border-right-color: #888;
|
||||||
|
right: auto;
|
||||||
|
left: -11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SELECTED STATES */
|
||||||
|
/* Comment out this chuck of code if you don't want to have
|
||||||
|
the new label colours shown */
|
||||||
|
.ui-slider-pips [class*=ui-slider-pip-initial] {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #14CA82;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-pips .ui-slider-pip-initial-2 {
|
||||||
|
color: #1897C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-pips [class*=ui-slider-pip-selected] {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FF7A00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-pips .ui-slider-pip-inrange {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-pips .ui-slider-pip-selected-2 {
|
||||||
|
color: #E70081;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-pips [class*=ui-slider-pip-selected] .ui-slider-line,
|
||||||
|
.ui-slider-pips .ui-slider-pip-inrange .ui-slider-line {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
812
RpiLedBars/web/slider/jquery-ui-slider-pips.js
vendored
Normal file
812
RpiLedBars/web/slider/jquery-ui-slider-pips.js
vendored
Normal file
|
|
@ -0,0 +1,812 @@
|
||||||
|
/*! jQuery-ui-Slider-Pips - v1.11.4 - 2016-09-04
|
||||||
|
* Copyright (c) 2016 Simon Goellner <simey.me@gmail.com>; Licensed MIT */
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var extensionMethods = {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// pips
|
||||||
|
|
||||||
|
pips: function( settings ) {
|
||||||
|
|
||||||
|
var slider = this,
|
||||||
|
i, j, p,
|
||||||
|
collection = "",
|
||||||
|
mousedownHandlers,
|
||||||
|
min = slider._valueMin(),
|
||||||
|
max = slider._valueMax(),
|
||||||
|
pips = ( max - min ) / slider.options.step,
|
||||||
|
$handles = slider.element.find(".ui-slider-handle"),
|
||||||
|
$pips;
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
|
||||||
|
first: "label",
|
||||||
|
/* "label", "pip", false */
|
||||||
|
|
||||||
|
last: "label",
|
||||||
|
/* "label", "pip", false */
|
||||||
|
|
||||||
|
rest: "pip",
|
||||||
|
/* "label", "pip", false */
|
||||||
|
|
||||||
|
labels: false,
|
||||||
|
/* [array], { first: "string", rest: [array], last: "string" }, false */
|
||||||
|
|
||||||
|
prefix: "",
|
||||||
|
/* "", string */
|
||||||
|
|
||||||
|
suffix: "",
|
||||||
|
/* "", string */
|
||||||
|
|
||||||
|
step: ( pips > 100 ) ? Math.floor( pips * 0.05 ) : 1,
|
||||||
|
/* number */
|
||||||
|
|
||||||
|
formatLabel: function(value) {
|
||||||
|
return this.prefix + value + this.suffix;
|
||||||
|
}
|
||||||
|
/* function
|
||||||
|
must return a value to display in the pip labels */
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
if ( $.type( settings ) === "object" || $.type( settings ) === "undefined" ) {
|
||||||
|
|
||||||
|
$.extend( options, settings );
|
||||||
|
slider.element.data("pips-options", options );
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if ( settings === "destroy" ) {
|
||||||
|
|
||||||
|
destroy();
|
||||||
|
|
||||||
|
} else if ( settings === "refresh" ) {
|
||||||
|
|
||||||
|
slider.element.slider( "pips", slider.element.data("pips-options") );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// we don't want the step ever to be a floating point or negative
|
||||||
|
// (or 0 actually, so we'll set it to 1 in that case).
|
||||||
|
slider.options.pipStep = Math.abs( Math.round( options.step ) ) || 1;
|
||||||
|
|
||||||
|
// get rid of all pips that might already exist.
|
||||||
|
slider.element
|
||||||
|
.off( ".selectPip" )
|
||||||
|
.addClass("ui-slider-pips")
|
||||||
|
.find(".ui-slider-pip")
|
||||||
|
.remove();
|
||||||
|
|
||||||
|
// small object with functions for marking pips as selected.
|
||||||
|
|
||||||
|
var selectPip = {
|
||||||
|
|
||||||
|
single: function(value) {
|
||||||
|
|
||||||
|
this.resetClasses();
|
||||||
|
|
||||||
|
$pips
|
||||||
|
.filter(".ui-slider-pip-" + this.classLabel(value) )
|
||||||
|
.addClass("ui-slider-pip-selected");
|
||||||
|
|
||||||
|
if ( slider.options.range ) {
|
||||||
|
|
||||||
|
$pips.each(function(k, v) {
|
||||||
|
|
||||||
|
var pipVal = $(v).children(".ui-slider-label").data("value");
|
||||||
|
|
||||||
|
if (( slider.options.range === "min" && pipVal < value ) ||
|
||||||
|
( slider.options.range === "max" && pipVal > value )) {
|
||||||
|
|
||||||
|
$(v).addClass("ui-slider-pip-inrange");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
range: function(values) {
|
||||||
|
|
||||||
|
this.resetClasses();
|
||||||
|
|
||||||
|
for ( i = 0; i < values.length; i++ ) {
|
||||||
|
|
||||||
|
$pips
|
||||||
|
.filter(".ui-slider-pip-" + this.classLabel(values[i]) )
|
||||||
|
.addClass("ui-slider-pip-selected-" + ( i + 1 ) );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( slider.options.range ) {
|
||||||
|
|
||||||
|
$pips.each(function(k, v) {
|
||||||
|
|
||||||
|
var pipVal = $(v).children(".ui-slider-label").data("value");
|
||||||
|
|
||||||
|
if ( pipVal > values[0] && pipVal < values[1] ) {
|
||||||
|
|
||||||
|
$(v).addClass("ui-slider-pip-inrange");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
classLabel: function(value) {
|
||||||
|
|
||||||
|
return value.toString().replace(".", "-");
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
resetClasses: function() {
|
||||||
|
|
||||||
|
var regex = /(^|\s*)(ui-slider-pip-selected|ui-slider-pip-inrange)(-{1,2}\d+|\s|$)/gi;
|
||||||
|
|
||||||
|
$pips.removeClass( function(index, css) {
|
||||||
|
return ( css.match(regex) || [] ).join(" ");
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
function getClosestHandle( val ) {
|
||||||
|
|
||||||
|
var h, k,
|
||||||
|
sliderVals,
|
||||||
|
comparedVals,
|
||||||
|
closestVal,
|
||||||
|
tempHandles = [],
|
||||||
|
closestHandle = 0;
|
||||||
|
|
||||||
|
if ( slider.values() && slider.values().length ) {
|
||||||
|
|
||||||
|
// get the current values of the slider handles
|
||||||
|
sliderVals = slider.values();
|
||||||
|
|
||||||
|
// find the offset value from the `val` for each
|
||||||
|
// handle, and store it in a new array
|
||||||
|
comparedVals = $.map( sliderVals, function(v) {
|
||||||
|
return Math.abs( v - val );
|
||||||
|
});
|
||||||
|
|
||||||
|
// figure out the closest handles to the value
|
||||||
|
closestVal = Math.min.apply( Math, comparedVals );
|
||||||
|
|
||||||
|
// if a comparedVal is the closestVal, then
|
||||||
|
// set the value accordingly, and set the closest handle.
|
||||||
|
for ( h = 0; h < comparedVals.length; h++ ) {
|
||||||
|
if ( comparedVals[h] === closestVal ) {
|
||||||
|
tempHandles.push(h);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// set the closest handle to the first handle in array,
|
||||||
|
// just incase we have no _lastChangedValue to compare to.
|
||||||
|
closestHandle = tempHandles[0];
|
||||||
|
|
||||||
|
// now we want to find out if any of the closest handles were
|
||||||
|
// the last changed handle, if so we specify that handle to change
|
||||||
|
for ( k = 0; k < tempHandles.length; k++ ) {
|
||||||
|
if ( slider._lastChangedValue === tempHandles[k] ) {
|
||||||
|
closestHandle = tempHandles[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( slider.options.range && tempHandles.length === 2 ) {
|
||||||
|
|
||||||
|
if ( val > sliderVals[1] ) {
|
||||||
|
|
||||||
|
closestHandle = tempHandles[1];
|
||||||
|
|
||||||
|
} else if ( val < sliderVals[0] ) {
|
||||||
|
|
||||||
|
closestHandle = tempHandles[0];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return closestHandle;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function destroy() {
|
||||||
|
|
||||||
|
slider.element
|
||||||
|
.off(".selectPip")
|
||||||
|
.on("mousedown.slider", slider.element.data("mousedown-original") )
|
||||||
|
.removeClass("ui-slider-pips")
|
||||||
|
.find(".ui-slider-pip")
|
||||||
|
.remove();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// when we click on a label, we want to make sure the
|
||||||
|
// slider's handle actually goes to that label!
|
||||||
|
// so we check all the handles and see which one is closest
|
||||||
|
// to the label we clicked. If 2 handles are equidistant then
|
||||||
|
// we move both of them. We also want to trigger focus on the
|
||||||
|
// handle.
|
||||||
|
|
||||||
|
// without this method the label is just treated like a part
|
||||||
|
// of the slider and there's no accuracy in the selected value
|
||||||
|
|
||||||
|
function labelClick( label, e ) {
|
||||||
|
|
||||||
|
if (slider.option("disabled")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var val = $(label).data("value"),
|
||||||
|
indexToChange = getClosestHandle( val );
|
||||||
|
|
||||||
|
if ( slider.values() && slider.values().length ) {
|
||||||
|
|
||||||
|
slider.options.values[ indexToChange ] = slider._trimAlignValue( val );
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
slider.options.value = slider._trimAlignValue( val );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
slider._refreshValue();
|
||||||
|
slider._change( e, indexToChange );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// method for creating a pip. We loop this for creating all
|
||||||
|
// the pips.
|
||||||
|
|
||||||
|
function createPip( which ) {
|
||||||
|
|
||||||
|
var label,
|
||||||
|
percent,
|
||||||
|
number = which,
|
||||||
|
classes = "ui-slider-pip",
|
||||||
|
css = "",
|
||||||
|
value = slider.value(),
|
||||||
|
values = slider.values(),
|
||||||
|
labelValue,
|
||||||
|
classLabel,
|
||||||
|
labelIndex;
|
||||||
|
|
||||||
|
if ( which === "first" ) {
|
||||||
|
|
||||||
|
number = 0;
|
||||||
|
|
||||||
|
} else if ( which === "last" ) {
|
||||||
|
|
||||||
|
number = pips;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// labelValue is the actual value of the pip based on the min/step
|
||||||
|
labelValue = min + ( slider.options.step * number );
|
||||||
|
|
||||||
|
// classLabel replaces any decimals with hyphens
|
||||||
|
classLabel = labelValue.toString().replace(".", "-");
|
||||||
|
|
||||||
|
// get the index needed for selecting labels out of the array
|
||||||
|
labelIndex = ( number + min ) - min;
|
||||||
|
|
||||||
|
// we need to set the human-readable label to either the
|
||||||
|
// corresponding element in the array, or the appropriate
|
||||||
|
// item in the object... or an empty string.
|
||||||
|
|
||||||
|
if ( $.type(options.labels) === "array" ) {
|
||||||
|
|
||||||
|
label = options.labels[ labelIndex ] || "";
|
||||||
|
|
||||||
|
} else if ( $.type( options.labels ) === "object" ) {
|
||||||
|
|
||||||
|
if ( which === "first" ) {
|
||||||
|
|
||||||
|
// set first label
|
||||||
|
label = options.labels.first || "";
|
||||||
|
|
||||||
|
} else if ( which === "last" ) {
|
||||||
|
|
||||||
|
// set last label
|
||||||
|
label = options.labels.last || "";
|
||||||
|
|
||||||
|
} else if ( $.type( options.labels.rest ) === "array" ) {
|
||||||
|
|
||||||
|
// set other labels, but our index should start at -1
|
||||||
|
// because of the first pip.
|
||||||
|
label = options.labels.rest[ labelIndex - 1 ] || "";
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// urrggh, the options must be f**ked, just show nothing.
|
||||||
|
label = labelValue;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
label = labelValue;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if ( which === "first" ) {
|
||||||
|
|
||||||
|
// first Pip on the Slider
|
||||||
|
percent = "0%";
|
||||||
|
|
||||||
|
classes += " ui-slider-pip-first";
|
||||||
|
classes += ( options.first === "label" ) ? " ui-slider-pip-label" : "";
|
||||||
|
classes += ( options.first === false ) ? " ui-slider-pip-hide" : "";
|
||||||
|
|
||||||
|
} else if ( which === "last" ) {
|
||||||
|
|
||||||
|
// last Pip on the Slider
|
||||||
|
percent = "100%";
|
||||||
|
|
||||||
|
classes += " ui-slider-pip-last";
|
||||||
|
classes += ( options.last === "label" ) ? " ui-slider-pip-label" : "";
|
||||||
|
classes += ( options.last === false ) ? " ui-slider-pip-hide" : "";
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// all other Pips
|
||||||
|
percent = (( 100 / pips ) * which ).toFixed(4) + "%";
|
||||||
|
|
||||||
|
classes += ( options.rest === "label" ) ? " ui-slider-pip-label" : "";
|
||||||
|
classes += ( options.rest === false ) ? " ui-slider-pip-hide" : "";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
classes += " ui-slider-pip-" + classLabel;
|
||||||
|
|
||||||
|
|
||||||
|
// add classes for the initial-selected values.
|
||||||
|
if ( values && values.length ) {
|
||||||
|
|
||||||
|
for ( i = 0; i < values.length; i++ ) {
|
||||||
|
|
||||||
|
if ( labelValue === values[i] ) {
|
||||||
|
|
||||||
|
classes += " ui-slider-pip-initial-" + ( i + 1 );
|
||||||
|
classes += " ui-slider-pip-selected-" + ( i + 1 );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( slider.options.range ) {
|
||||||
|
|
||||||
|
if ( labelValue > values[0] &&
|
||||||
|
labelValue < values[1] ) {
|
||||||
|
|
||||||
|
classes += " ui-slider-pip-inrange";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if ( labelValue === value ) {
|
||||||
|
|
||||||
|
classes += " ui-slider-pip-initial";
|
||||||
|
classes += " ui-slider-pip-selected";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( slider.options.range ) {
|
||||||
|
|
||||||
|
if (( slider.options.range === "min" && labelValue < value ) ||
|
||||||
|
( slider.options.range === "max" && labelValue > value )) {
|
||||||
|
|
||||||
|
classes += " ui-slider-pip-inrange";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
css = ( slider.options.orientation === "horizontal" ) ?
|
||||||
|
"left: " + percent :
|
||||||
|
"bottom: " + percent;
|
||||||
|
|
||||||
|
|
||||||
|
// add this current pip to the collection
|
||||||
|
return "<span class=\"" + classes + "\" style=\"" + css + "\">" +
|
||||||
|
"<span class=\"ui-slider-line\"></span>" +
|
||||||
|
"<span class=\"ui-slider-label\" data-value=\"" +
|
||||||
|
labelValue + "\">" + options.formatLabel(label) + "</span>" +
|
||||||
|
"</span>";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// create our first pip
|
||||||
|
collection += createPip("first");
|
||||||
|
|
||||||
|
// for every stop in the slider where we need a pip; create one.
|
||||||
|
for ( p = slider.options.pipStep; p < pips; p += slider.options.pipStep ) {
|
||||||
|
collection += createPip( p );
|
||||||
|
}
|
||||||
|
|
||||||
|
// create our last pip
|
||||||
|
collection += createPip("last");
|
||||||
|
|
||||||
|
// append the collection of pips.
|
||||||
|
slider.element.append( collection );
|
||||||
|
|
||||||
|
// store the pips for setting classes later.
|
||||||
|
$pips = slider.element.find(".ui-slider-pip");
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// store the mousedown handlers for later, just in case we reset
|
||||||
|
// the slider, the handler would be lost!
|
||||||
|
|
||||||
|
if ( $._data( slider.element.get(0), "events").mousedown &&
|
||||||
|
$._data( slider.element.get(0), "events").mousedown.length ) {
|
||||||
|
|
||||||
|
mousedownHandlers = $._data( slider.element.get(0), "events").mousedown;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
mousedownHandlers = slider.element.data("mousedown-handlers");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
slider.element.data("mousedown-handlers", mousedownHandlers.slice() );
|
||||||
|
|
||||||
|
// loop through all the mousedown handlers on the slider,
|
||||||
|
// and store the original namespaced (.slider) event handler so
|
||||||
|
// we can trigger it later.
|
||||||
|
for ( j = 0; j < mousedownHandlers.length; j++ ) {
|
||||||
|
if ( mousedownHandlers[j].namespace === "slider" ) {
|
||||||
|
slider.element.data("mousedown-original", mousedownHandlers[j].handler );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// unbind the mousedown.slider event, because it interferes with
|
||||||
|
// the labelClick() method (stops smooth animation), and decide
|
||||||
|
// if we want to trigger the original event based on which element
|
||||||
|
// was clicked.
|
||||||
|
slider.element
|
||||||
|
.off("mousedown.slider")
|
||||||
|
.on("mousedown.selectPip", function(e) {
|
||||||
|
|
||||||
|
var $target = $(e.target),
|
||||||
|
closest = getClosestHandle( $target.data("value") ),
|
||||||
|
$handle = $handles.eq( closest );
|
||||||
|
|
||||||
|
$handle.addClass("ui-state-active");
|
||||||
|
|
||||||
|
if ( $target.is(".ui-slider-label") ) {
|
||||||
|
|
||||||
|
labelClick( $target, e );
|
||||||
|
|
||||||
|
slider.element
|
||||||
|
.one("mouseup.selectPip", function() {
|
||||||
|
|
||||||
|
$handle
|
||||||
|
.removeClass("ui-state-active")
|
||||||
|
.focus();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
var originalMousedown = slider.element.data("mousedown-original");
|
||||||
|
originalMousedown(e);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
slider.element.on( "slide.selectPip slidechange.selectPip", function(e, ui) {
|
||||||
|
|
||||||
|
var $slider = $(this),
|
||||||
|
value = $slider.slider("value"),
|
||||||
|
values = $slider.slider("values");
|
||||||
|
|
||||||
|
if ( ui ) {
|
||||||
|
|
||||||
|
value = ui.value;
|
||||||
|
values = ui.values;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( slider.values() && slider.values().length ) {
|
||||||
|
|
||||||
|
selectPip.range( values );
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
selectPip.single( value );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// floats
|
||||||
|
|
||||||
|
float: function( settings ) {
|
||||||
|
|
||||||
|
var i,
|
||||||
|
slider = this,
|
||||||
|
min = slider._valueMin(),
|
||||||
|
max = slider._valueMax(),
|
||||||
|
value = slider._value(),
|
||||||
|
values = slider._values(),
|
||||||
|
tipValues = [],
|
||||||
|
$handles = slider.element.find(".ui-slider-handle");
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
|
||||||
|
handle: true,
|
||||||
|
/* false */
|
||||||
|
|
||||||
|
pips: false,
|
||||||
|
/* true */
|
||||||
|
|
||||||
|
labels: false,
|
||||||
|
/* [array], { first: "string", rest: [array], last: "string" }, false */
|
||||||
|
|
||||||
|
prefix: "",
|
||||||
|
/* "", string */
|
||||||
|
|
||||||
|
suffix: "",
|
||||||
|
/* "", string */
|
||||||
|
|
||||||
|
event: "slidechange slide",
|
||||||
|
/* "slidechange", "slide", "slidechange slide" */
|
||||||
|
|
||||||
|
formatLabel: function(value) {
|
||||||
|
return this.prefix + value + this.suffix;
|
||||||
|
}
|
||||||
|
/* function
|
||||||
|
must return a value to display in the floats */
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
if ( $.type( settings ) === "object" || $.type( settings ) === "undefined" ) {
|
||||||
|
|
||||||
|
$.extend( options, settings );
|
||||||
|
slider.element.data("float-options", options );
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if ( settings === "destroy" ) {
|
||||||
|
|
||||||
|
destroy();
|
||||||
|
|
||||||
|
} else if ( settings === "refresh" ) {
|
||||||
|
|
||||||
|
slider.element.slider( "float", slider.element.data("float-options") );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if ( value < min ) {
|
||||||
|
value = min;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( value > max ) {
|
||||||
|
value = max;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( values && values.length ) {
|
||||||
|
|
||||||
|
for ( i = 0; i < values.length; i++ ) {
|
||||||
|
|
||||||
|
if ( values[i] < min ) {
|
||||||
|
values[i] = min;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( values[i] > max ) {
|
||||||
|
values[i] = max;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// add a class for the CSS
|
||||||
|
slider.element
|
||||||
|
.addClass("ui-slider-float")
|
||||||
|
.find(".ui-slider-tip, .ui-slider-tip-label")
|
||||||
|
.remove();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function destroy() {
|
||||||
|
|
||||||
|
slider.element
|
||||||
|
.off(".sliderFloat")
|
||||||
|
.removeClass("ui-slider-float")
|
||||||
|
.find(".ui-slider-tip, .ui-slider-tip-label")
|
||||||
|
.remove();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function getPipLabels( values ) {
|
||||||
|
|
||||||
|
// when checking the array we need to divide
|
||||||
|
// by the step option, so we store those values here.
|
||||||
|
|
||||||
|
var vals = [],
|
||||||
|
steppedVals = $.map( values, function(v) {
|
||||||
|
return Math.ceil(( v - min ) / slider.options.step);
|
||||||
|
});
|
||||||
|
|
||||||
|
// now we just get the values we need to return
|
||||||
|
// by looping through the values array and assigning the
|
||||||
|
// label if it exists.
|
||||||
|
|
||||||
|
if ( $.type( options.labels ) === "array" ) {
|
||||||
|
|
||||||
|
for ( i = 0; i < values.length; i++ ) {
|
||||||
|
|
||||||
|
vals[i] = options.labels[ steppedVals[i] ] || values[i];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
} else if ( $.type( options.labels ) === "object" ) {
|
||||||
|
|
||||||
|
for ( i = 0; i < values.length; i++ ) {
|
||||||
|
|
||||||
|
if ( values[i] === min ) {
|
||||||
|
|
||||||
|
vals[i] = options.labels.first || min;
|
||||||
|
|
||||||
|
} else if ( values[i] === max ) {
|
||||||
|
|
||||||
|
vals[i] = options.labels.last || max;
|
||||||
|
|
||||||
|
} else if ( $.type( options.labels.rest ) === "array" ) {
|
||||||
|
|
||||||
|
vals[i] = options.labels.rest[ steppedVals[i] - 1 ] || values[i];
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
vals[i] = values[i];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
for ( i = 0; i < values.length; i++ ) {
|
||||||
|
|
||||||
|
vals[i] = values[i];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return vals;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// apply handle tip if settings allows.
|
||||||
|
if ( options.handle ) {
|
||||||
|
|
||||||
|
// we need to set the human-readable label to either the
|
||||||
|
// corresponding element in the array, or the appropriate
|
||||||
|
// item in the object... or an empty string.
|
||||||
|
|
||||||
|
tipValues = ( slider.values() && slider.values().length ) ?
|
||||||
|
getPipLabels( values ) :
|
||||||
|
getPipLabels( [ value ] );
|
||||||
|
|
||||||
|
for ( i = 0; i < tipValues.length; i++ ) {
|
||||||
|
|
||||||
|
$handles
|
||||||
|
.eq( i )
|
||||||
|
.append( $("<span class=\"ui-slider-tip\">"+ options.formatLabel(tipValues[i]) +"</span>") );
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( options.pips ) {
|
||||||
|
|
||||||
|
// if this slider also has pip-labels, we make those into tips, too.
|
||||||
|
slider.element.find(".ui-slider-label").each(function(k, v) {
|
||||||
|
|
||||||
|
var $this = $(v),
|
||||||
|
val = [ $this.data("value") ],
|
||||||
|
label,
|
||||||
|
$tip;
|
||||||
|
|
||||||
|
|
||||||
|
label = options.formatLabel( getPipLabels( val )[0] );
|
||||||
|
|
||||||
|
// create a tip element
|
||||||
|
$tip =
|
||||||
|
$("<span class=\"ui-slider-tip-label\">" + label + "</span>")
|
||||||
|
.insertAfter( $this );
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// check that the event option is actually valid against our
|
||||||
|
// own list of the slider's events.
|
||||||
|
if ( options.event !== "slide" &&
|
||||||
|
options.event !== "slidechange" &&
|
||||||
|
options.event !== "slide slidechange" &&
|
||||||
|
options.event !== "slidechange slide" ) {
|
||||||
|
|
||||||
|
options.event = "slidechange slide";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// when slider changes, update handle tip label.
|
||||||
|
slider.element
|
||||||
|
.off(".sliderFloat")
|
||||||
|
.on( options.event + ".sliderFloat", function( e, ui ) {
|
||||||
|
|
||||||
|
var uiValue = ( $.type( ui.value ) === "array" ) ? ui.value : [ ui.value ],
|
||||||
|
val = options.formatLabel( getPipLabels( uiValue )[0] );
|
||||||
|
|
||||||
|
$(ui.handle)
|
||||||
|
.find(".ui-slider-tip")
|
||||||
|
.html( val );
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
$.extend(true, $.ui.slider.prototype, extensionMethods);
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
4
RpiLedBars/web/slider/jquery-ui-slider-pips.min.css
vendored
Normal file
4
RpiLedBars/web/slider/jquery-ui-slider-pips.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4
RpiLedBars/web/slider/jquery-ui-slider-pips.min.js
vendored
Normal file
4
RpiLedBars/web/slider/jquery-ui-slider-pips.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user