Iniit
This commit is contained in:
@@ -0,0 +1,94 @@
|
||||
.double-label-slider.ui-slider {
|
||||
margin-top: 10px;
|
||||
height: 6px;
|
||||
background: #dddddd;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-handle {
|
||||
background: #00acf0;
|
||||
border: none;
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
margin-left: -7px;
|
||||
border-radius: 100%;
|
||||
outline: medium none;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
z-index: 2;
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-handle.ui-state-hover,
|
||||
.double-label-slider.ui-slider .ui-slider-handle.ui-state-focus,
|
||||
.double-label-slider.ui-slider .ui-slider-handle.ui-state-active {
|
||||
box-shadow: 0 0 0 1px #00acf0;
|
||||
}
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-handle.childSlider.ui-state-hover,
|
||||
.double-label-slider.ui-slider .ui-slider-handle.childSlider.ui-state-focus,
|
||||
.double-label-slider.ui-slider .ui-slider-handle.childSlider.ui-state-active {
|
||||
box-shadow: 0 0 0 1px #ab26aa;
|
||||
}
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-pip {
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-pip .ui-slider-line {
|
||||
background: white;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: -5px;
|
||||
box-shadow: 0 0 0 2px #00acf0;
|
||||
border-radius: 100%;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-pip .ui-slider-label,
|
||||
.double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i,
|
||||
.double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span {
|
||||
width: 100px;
|
||||
margin-left: -50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-pip .ui-slider-label {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i {
|
||||
font-style: normal;
|
||||
font-size: 1.8em;
|
||||
position: absolute;
|
||||
top: -36px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span {
|
||||
opacity: 0.6;
|
||||
/*font-size: 1.2em;*/
|
||||
line-height: 1.3;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-pip:hover .ui-slider-label span,
|
||||
.double-label-slider.ui-slider .ui-slider-pip:focus .ui-slider-label span,
|
||||
.double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label span {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label {
|
||||
/*color: black;*/
|
||||
}
|
||||
|
||||
.double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-line {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
Reference in New Issue
Block a user