mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update jqm
This commit is contained in:
Luke Pulverenti
parent
cacc76dc5d
commit
55c36e3507
7 changed files with 1256 additions and 1232 deletions
|
|
@ -116,7 +116,7 @@
|
||||||
|
|
||||||
if (AppInfo.isTouchPreferred) {
|
if (AppInfo.isTouchPreferred) {
|
||||||
|
|
||||||
$('.mainDrawerButton').on('touchend', openMainDrawer).on('click', openMainDrawer);
|
$('.mainDrawerButton').on('click', openMainDrawer);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
$('.mainDrawerButton').createHoverTouch().on('hovertouch', openMainDrawer);
|
$('.mainDrawerButton').createHoverTouch().on('hovertouch', openMainDrawer);
|
||||||
|
|
|
||||||
|
|
@ -2112,6 +2112,11 @@ var AppInfo = {};
|
||||||
return {};
|
return {};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
define("jqmslider", ["thirdparty/jquerymobile-1.4.5/jqm.slider"], function () {
|
||||||
|
Dashboard.importCss('thirdparty/jquerymobile-1.4.5/jqm.slider.css');
|
||||||
|
return {};
|
||||||
|
});
|
||||||
|
|
||||||
$.extend(AppInfo, Dashboard.getAppInfo(appName, deviceId, deviceName));
|
$.extend(AppInfo, Dashboard.getAppInfo(appName, deviceId, deviceName));
|
||||||
|
|
||||||
var drawer = document.querySelector('.mainDrawerPanel');
|
var drawer = document.querySelector('.mainDrawerPanel');
|
||||||
|
|
@ -2263,6 +2268,11 @@ $(document).on('pagecreate', ".page", function () {
|
||||||
var dependencies = this.getAttribute('data-require');
|
var dependencies = this.getAttribute('data-require');
|
||||||
dependencies = dependencies ? dependencies.split(',') : null;
|
dependencies = dependencies ? dependencies.split(',') : null;
|
||||||
|
|
||||||
|
if (!page.classList.contains('libraryPage')) {
|
||||||
|
dependencies = dependencies || [];
|
||||||
|
dependencies.push('jqmicons');
|
||||||
|
}
|
||||||
|
|
||||||
Dashboard.firePageEvent(page, 'pageinitdepends', dependencies);
|
Dashboard.firePageEvent(page, 'pageinitdepends', dependencies);
|
||||||
|
|
||||||
}).on('pagebeforeshow', ".page", function () {
|
}).on('pagebeforeshow', ".page", function () {
|
||||||
|
|
@ -2331,8 +2341,4 @@ $(document).on('pagecreate', ".page", function () {
|
||||||
if (apiClient && !apiClient.isWebSocketOpen()) {
|
if (apiClient && !apiClient.isWebSocketOpen()) {
|
||||||
Dashboard.refreshSystemInfoFromServer();
|
Dashboard.refreshSystemInfoFromServer();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!page.classList.contains('libraryPage')) {
|
|
||||||
require(['jqmicons']);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
280
dashboard-ui/thirdparty/jquerymobile-1.4.5/jqm.slider.css
vendored
Normal file
280
dashboard-ui/thirdparty/jquerymobile-1.4.5/jqm.slider.css
vendored
Normal file
|
|
@ -0,0 +1,280 @@
|
||||||
|
|
||||||
|
.ui-rangeslider {
|
||||||
|
margin: .5em 0;
|
||||||
|
}
|
||||||
|
.ui-rangeslider:before,
|
||||||
|
.ui-rangeslider:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.ui-rangeslider:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.ui-rangeslider .ui-slider-input.ui-rangeslider-last {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.ui-rangeslider .ui-rangeslider-sliders {
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
height: 30px;
|
||||||
|
margin: 0 68px;
|
||||||
|
}
|
||||||
|
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track {
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track {
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
|
.ui-rangeslider .ui-slider-track:first-child .ui-slider-bg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
|
||||||
|
background-color: transparent;
|
||||||
|
background: none;
|
||||||
|
border-width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* this makes ie6 and ie7 set height to 0 to fix z-index problem */
|
||||||
|
html >/**/body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
|
||||||
|
height: 15px;
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:first-child {
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the second label (the first is moved outside the div) */
|
||||||
|
div.ui-rangeslider label {
|
||||||
|
position: absolute !important;
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(1px,1px,1px,1px);
|
||||||
|
}
|
||||||
|
.ui-field-contain .ui-rangeslider input.ui-slider-input,
|
||||||
|
.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input,
|
||||||
|
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders,
|
||||||
|
.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
div.ui-slider {
|
||||||
|
height: 30px;
|
||||||
|
margin: .5em 0;
|
||||||
|
padding: 0;
|
||||||
|
-ms-touch-action: pan-y pinch-zoom double-tap-zoom;
|
||||||
|
}
|
||||||
|
div.ui-slider:before,
|
||||||
|
div.ui-slider:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
div.ui-slider:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
input.ui-slider-input {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
|
padding: 4px;
|
||||||
|
width: 40px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
outline: 0;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
.ui-slider-input::-webkit-outer-spin-button,
|
||||||
|
.ui-slider-input::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.ui-slider-track {
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
height: 15px;
|
||||||
|
margin: 0 15px 0 68px;
|
||||||
|
top: 6px;
|
||||||
|
}
|
||||||
|
.ui-slider-track.ui-mini {
|
||||||
|
height: 12px;
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
|
.ui-slider-track .ui-slider-bg {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/* High level of specificity to override button margins in grids */
|
||||||
|
.ui-slider-track .ui-btn.ui-slider-handle {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 50%;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
margin: -15px 0 0 -15px;
|
||||||
|
outline: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.ui-slider-track.ui-mini .ui-slider-handle {
|
||||||
|
height: 14px;
|
||||||
|
width: 14px;
|
||||||
|
margin: -8px 0 0 -8px;
|
||||||
|
}
|
||||||
|
select.ui-slider-switch {
|
||||||
|
position: absolute !important;
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(1px,1px,1px,1px);
|
||||||
|
}
|
||||||
|
div.ui-slider-switch {
|
||||||
|
display: inline-block;
|
||||||
|
height: 32px;
|
||||||
|
width: 5.8em;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
/* reset the clearfix */
|
||||||
|
div.ui-slider-switch:before,
|
||||||
|
div.ui-slider-switch:after {
|
||||||
|
display: none;
|
||||||
|
clear: none;
|
||||||
|
}
|
||||||
|
div.ui-slider-switch.ui-mini {
|
||||||
|
height: 29px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.ui-slider-inneroffset {
|
||||||
|
margin: 0 16px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.ui-slider-switch.ui-mini .ui-slider-inneroffset {
|
||||||
|
margin: 0 15px 0 14px;
|
||||||
|
}
|
||||||
|
.ui-slider-switch .ui-btn.ui-slider-handle {
|
||||||
|
margin: 1px 0 0 -15px;
|
||||||
|
}
|
||||||
|
.ui-slider-switch.ui-mini .ui-slider-handle {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
margin: 1px 0 0 -13px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.ui-slider-handle-snapping {
|
||||||
|
-webkit-transition: left 70ms linear;
|
||||||
|
-moz-transition: left 70ms linear;
|
||||||
|
transition: left 70ms linear;
|
||||||
|
}
|
||||||
|
.ui-slider-switch .ui-slider-label {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: 16px;
|
||||||
|
top: 0;
|
||||||
|
line-height: 2;
|
||||||
|
min-height: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.ui-slider-switch.ui-mini .ui-slider-label {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.ui-slider-switch .ui-slider-label-a {
|
||||||
|
z-index: 1;
|
||||||
|
left: 0;
|
||||||
|
text-indent: -1.5em;
|
||||||
|
}
|
||||||
|
.ui-slider-switch .ui-slider-label-b {
|
||||||
|
z-index: 0;
|
||||||
|
right: 0;
|
||||||
|
text-indent: 1.5em;
|
||||||
|
}
|
||||||
|
/* The corner radii for ui-slider-switch/track can be specified in theme CSS. The bg and handle inherits. */
|
||||||
|
.ui-slider-track .ui-slider-bg,
|
||||||
|
.ui-slider-switch .ui-slider-label,
|
||||||
|
.ui-slider-switch .ui-slider-inneroffset,
|
||||||
|
.ui-slider-handle {
|
||||||
|
-webkit-border-radius: inherit;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
.ui-field-contain div.ui-slider-switch {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
|
||||||
|
.ui-field-contain div.ui-slider-switch,
|
||||||
|
.ui-field-contain.ui-hide-label div.ui-slider-switch,
|
||||||
|
html .ui-popup .ui-field-contain div.ui-slider-switch {
|
||||||
|
display: inline-block;
|
||||||
|
width: 5.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* slider tooltip
|
||||||
|
-----------------------------------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
.ui-slider-popup {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
font-size: 36px;
|
||||||
|
padding-top: 14px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-popup {
|
||||||
|
position: absolute !important;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-slider-track .ui-btn.ui-slider-handle {
|
||||||
|
font-size: .9em;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Active slider track */
|
||||||
|
.ui-page-theme-a .ui-slider-track .ui-btn-active,
|
||||||
|
html .ui-bar-a .ui-slider-track .ui-btn-active,
|
||||||
|
html .ui-body-a .ui-slider-track .ui-btn-active,
|
||||||
|
html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
|
||||||
|
html body div.ui-slider-track.ui-body-a .ui-btn-active {
|
||||||
|
background-color: #3388cc /*{a-active-background-color}*/;
|
||||||
|
border-color: #3388cc /*{a-active-border}*/;
|
||||||
|
color: #fff /*{a-active-color}*/;
|
||||||
|
text-shadow: 0 /*{a-active-shadow-x}*/ 1px /*{a-active-shadow-y}*/ 0 /*{a-active-shadow-radius}*/ #005599 /*{a-active-shadow-color}*/;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active slider track */
|
||||||
|
.ui-page-theme-b .ui-slider-track .ui-btn-active,
|
||||||
|
html .ui-bar-b .ui-slider-track .ui-btn-active,
|
||||||
|
html .ui-body-b .ui-slider-track .ui-btn-active,
|
||||||
|
html body .ui-group-theme-b .ui-slider-track .ui-btn-active,
|
||||||
|
html body div.ui-slider-track.ui-body-b .ui-btn-active {
|
||||||
|
background-color: #22aadd /*{b-active-background-color}*/;
|
||||||
|
border-color: #22aadd /*{b-active-border}*/;
|
||||||
|
color: #fff /*{b-active-color}*/;
|
||||||
|
text-shadow: 0 /*{b-active-shadow-x}*/ 1px /*{b-active-shadow-y}*/ 0 /*{b-active-shadow-radius}*/ #0088bb /*{b-active-shadow-color}*/;
|
||||||
|
}
|
||||||
958
dashboard-ui/thirdparty/jquerymobile-1.4.5/jqm.slider.js
vendored
Normal file
958
dashboard-ui/thirdparty/jquerymobile-1.4.5/jqm.slider.js
vendored
Normal file
|
|
@ -0,0 +1,958 @@
|
||||||
|
(function ($, undefined) {
|
||||||
|
|
||||||
|
$.widget("mobile.slider", $.extend({
|
||||||
|
initSelector: "input[type='range'], *[data-type='range'], *[data-role='slider']",
|
||||||
|
|
||||||
|
widgetEventPrefix: "slide",
|
||||||
|
|
||||||
|
options: {
|
||||||
|
theme: null,
|
||||||
|
trackTheme: null,
|
||||||
|
corners: true,
|
||||||
|
mini: false,
|
||||||
|
highlight: false
|
||||||
|
},
|
||||||
|
|
||||||
|
_create: function () {
|
||||||
|
|
||||||
|
// TODO: Each of these should have comments explain what they're for
|
||||||
|
var self = this,
|
||||||
|
control = this.element,
|
||||||
|
trackTheme = this.options.trackTheme || $.mobile.getAttribute(control[0], "theme"),
|
||||||
|
trackThemeClass = trackTheme ? " ui-bar-" + trackTheme : " ui-bar-inherit",
|
||||||
|
cornerClass = (this.options.corners || control.jqmData("corners")) ? " ui-corner-all" : "",
|
||||||
|
miniClass = (this.options.mini || control.jqmData("mini")) ? " ui-mini" : "",
|
||||||
|
cType = control[0].nodeName.toLowerCase(),
|
||||||
|
isToggleSwitch = (cType === "select"),
|
||||||
|
isRangeslider = control.parent().is(":jqmData(role='rangeslider')"),
|
||||||
|
selectClass = (isToggleSwitch) ? "ui-slider-switch" : "",
|
||||||
|
controlID = control.attr("id"),
|
||||||
|
$label = $("[for='" + controlID + "']"),
|
||||||
|
labelID = $label.attr("id") || controlID + "-label",
|
||||||
|
min = !isToggleSwitch ? parseFloat(control.attr("min")) : 0,
|
||||||
|
max = !isToggleSwitch ? parseFloat(control.attr("max")) : control.find("option").length - 1,
|
||||||
|
step = window.parseFloat(control.attr("step") || 1),
|
||||||
|
domHandle = document.createElement("a"),
|
||||||
|
handle = $(domHandle),
|
||||||
|
domSlider = document.createElement("div"),
|
||||||
|
slider = $(domSlider),
|
||||||
|
valuebg = this.options.highlight && !isToggleSwitch ? (function () {
|
||||||
|
var bg = document.createElement("div");
|
||||||
|
bg.className = "ui-slider-bg " + $.mobile.activeBtnClass;
|
||||||
|
return $(bg).prependTo(slider);
|
||||||
|
})() : false,
|
||||||
|
options,
|
||||||
|
wrapper,
|
||||||
|
j, length,
|
||||||
|
i, optionsCount, origTabIndex,
|
||||||
|
side, activeClass, sliderImg;
|
||||||
|
|
||||||
|
$label.attr("id", labelID);
|
||||||
|
this.isToggleSwitch = isToggleSwitch;
|
||||||
|
|
||||||
|
domHandle.setAttribute("href", "#");
|
||||||
|
domSlider.setAttribute("role", "application");
|
||||||
|
domSlider.className = [this.isToggleSwitch ? "ui-slider ui-slider-track ui-shadow-inset " : "ui-slider-track ui-shadow-inset ", selectClass, trackThemeClass, cornerClass, miniClass].join("");
|
||||||
|
domHandle.className = "ui-slider-handle";
|
||||||
|
domSlider.appendChild(domHandle);
|
||||||
|
|
||||||
|
handle.attr({
|
||||||
|
"role": "slider",
|
||||||
|
"aria-valuemin": min,
|
||||||
|
"aria-valuemax": max,
|
||||||
|
"aria-valuenow": this._value(),
|
||||||
|
"aria-valuetext": this._value(),
|
||||||
|
"title": this._value(),
|
||||||
|
"aria-labelledby": labelID
|
||||||
|
});
|
||||||
|
|
||||||
|
$.extend(this, {
|
||||||
|
slider: slider,
|
||||||
|
handle: handle,
|
||||||
|
control: control,
|
||||||
|
type: cType,
|
||||||
|
step: step,
|
||||||
|
max: max,
|
||||||
|
min: min,
|
||||||
|
valuebg: valuebg,
|
||||||
|
isRangeslider: isRangeslider,
|
||||||
|
dragging: false,
|
||||||
|
beforeStart: null,
|
||||||
|
userModified: false,
|
||||||
|
mouseMoved: false
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isToggleSwitch) {
|
||||||
|
// TODO: restore original tabindex (if any) in a destroy method
|
||||||
|
origTabIndex = control.attr("tabindex");
|
||||||
|
if (origTabIndex) {
|
||||||
|
handle.attr("tabindex", origTabIndex);
|
||||||
|
}
|
||||||
|
control.attr("tabindex", "-1").focus(function () {
|
||||||
|
$(this).blur();
|
||||||
|
handle.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper = document.createElement("div");
|
||||||
|
wrapper.className = "ui-slider-inneroffset";
|
||||||
|
|
||||||
|
for (j = 0, length = domSlider.childNodes.length; j < length; j++) {
|
||||||
|
wrapper.appendChild(domSlider.childNodes[j]);
|
||||||
|
}
|
||||||
|
|
||||||
|
domSlider.appendChild(wrapper);
|
||||||
|
|
||||||
|
// slider.wrapInner( "<div class='ui-slider-inneroffset'></div>" );
|
||||||
|
|
||||||
|
// make the handle move with a smooth transition
|
||||||
|
handle.addClass("ui-slider-handle-snapping");
|
||||||
|
|
||||||
|
options = control.find("option");
|
||||||
|
|
||||||
|
for (i = 0, optionsCount = options.length; i < optionsCount; i++) {
|
||||||
|
side = !i ? "b" : "a";
|
||||||
|
activeClass = !i ? "" : " " + $.mobile.activeBtnClass;
|
||||||
|
sliderImg = document.createElement("span");
|
||||||
|
|
||||||
|
sliderImg.className = ["ui-slider-label ui-slider-label-", side, activeClass].join("");
|
||||||
|
sliderImg.setAttribute("role", "img");
|
||||||
|
sliderImg.appendChild(document.createTextNode(options[i].innerHTML));
|
||||||
|
$(sliderImg).prependTo(slider);
|
||||||
|
}
|
||||||
|
|
||||||
|
self._labels = $(".ui-slider-label", slider);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// monitor the input for updated values
|
||||||
|
control.addClass(isToggleSwitch ? "ui-slider-switch" : "ui-slider-input");
|
||||||
|
|
||||||
|
this._on(control, {
|
||||||
|
"change": "_controlChange",
|
||||||
|
"keyup": "_controlKeyup",
|
||||||
|
"blur": "_controlBlur",
|
||||||
|
"vmouseup": "_controlVMouseUp"
|
||||||
|
});
|
||||||
|
|
||||||
|
slider.bind("vmousedown", $.proxy(this._sliderVMouseDown, this))
|
||||||
|
.bind("vclick", false);
|
||||||
|
|
||||||
|
// We have to instantiate a new function object for the unbind to work properly
|
||||||
|
// since the method itself is defined in the prototype (causing it to unbind everything)
|
||||||
|
this._on(document, { "vmousemove": "_preventDocumentDrag" });
|
||||||
|
this._on(slider.add(document), { "vmouseup": "_sliderVMouseUp" });
|
||||||
|
|
||||||
|
slider.insertAfter(control);
|
||||||
|
|
||||||
|
// wrap in a div for styling purposes
|
||||||
|
if (!isToggleSwitch && !isRangeslider) {
|
||||||
|
wrapper = this.options.mini ? "<div class='ui-slider ui-mini'>" : "<div class='ui-slider'>";
|
||||||
|
|
||||||
|
control.add(slider).wrapAll(wrapper);
|
||||||
|
}
|
||||||
|
|
||||||
|
// bind the handle event callbacks and set the context to the widget instance
|
||||||
|
this._on(this.handle, {
|
||||||
|
"vmousedown": "_handleVMouseDown",
|
||||||
|
"keydown": "_handleKeydown",
|
||||||
|
"keyup": "_handleKeyup"
|
||||||
|
});
|
||||||
|
|
||||||
|
this.handle.bind("vclick", false);
|
||||||
|
|
||||||
|
this._handleFormReset();
|
||||||
|
|
||||||
|
this.refresh(undefined, undefined, true);
|
||||||
|
},
|
||||||
|
|
||||||
|
_setOptions: function (options) {
|
||||||
|
if (options.theme !== undefined) {
|
||||||
|
this._setTheme(options.theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.trackTheme !== undefined) {
|
||||||
|
this._setTrackTheme(options.trackTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.corners !== undefined) {
|
||||||
|
this._setCorners(options.corners);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.mini !== undefined) {
|
||||||
|
this._setMini(options.mini);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.highlight !== undefined) {
|
||||||
|
this._setHighlight(options.highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.disabled !== undefined) {
|
||||||
|
this._setDisabled(options.disabled);
|
||||||
|
}
|
||||||
|
this._super(options);
|
||||||
|
},
|
||||||
|
|
||||||
|
_controlChange: function (event) {
|
||||||
|
// if the user dragged the handle, the "change" event was triggered from inside refresh(); don't call refresh() again
|
||||||
|
if (this._trigger("controlchange", event) === false) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (!this.mouseMoved) {
|
||||||
|
this.refresh(this._value(), true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_controlKeyup: function (/* event */) { // necessary?
|
||||||
|
this.refresh(this._value(), true, true);
|
||||||
|
},
|
||||||
|
|
||||||
|
_controlBlur: function (/* event */) {
|
||||||
|
this.refresh(this._value(), true);
|
||||||
|
},
|
||||||
|
|
||||||
|
// it appears the clicking the up and down buttons in chrome on
|
||||||
|
// range/number inputs doesn't trigger a change until the field is
|
||||||
|
// blurred. Here we check thif the value has changed and refresh
|
||||||
|
_controlVMouseUp: function (/* event */) {
|
||||||
|
this._checkedRefresh();
|
||||||
|
},
|
||||||
|
|
||||||
|
// NOTE force focus on handle
|
||||||
|
_handleVMouseDown: function (/* event */) {
|
||||||
|
this.handle.focus();
|
||||||
|
},
|
||||||
|
|
||||||
|
_handleKeydown: function (event) {
|
||||||
|
var index = this._value();
|
||||||
|
if (this.options.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// In all cases prevent the default and mark the handle as active
|
||||||
|
switch (event.keyCode) {
|
||||||
|
case $.mobile.keyCode.HOME:
|
||||||
|
case $.mobile.keyCode.END:
|
||||||
|
case $.mobile.keyCode.PAGE_UP:
|
||||||
|
case $.mobile.keyCode.PAGE_DOWN:
|
||||||
|
case $.mobile.keyCode.UP:
|
||||||
|
case $.mobile.keyCode.RIGHT:
|
||||||
|
case $.mobile.keyCode.DOWN:
|
||||||
|
case $.mobile.keyCode.LEFT:
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (!this._keySliding) {
|
||||||
|
this._keySliding = true;
|
||||||
|
this.handle.addClass("ui-state-active"); /* TODO: We don't use this class for styling. Do we need to add it? */
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// move the slider according to the keypress
|
||||||
|
switch (event.keyCode) {
|
||||||
|
case $.mobile.keyCode.HOME:
|
||||||
|
this.refresh(this.min);
|
||||||
|
break;
|
||||||
|
case $.mobile.keyCode.END:
|
||||||
|
this.refresh(this.max);
|
||||||
|
break;
|
||||||
|
case $.mobile.keyCode.PAGE_UP:
|
||||||
|
case $.mobile.keyCode.UP:
|
||||||
|
case $.mobile.keyCode.RIGHT:
|
||||||
|
this.refresh(index + this.step);
|
||||||
|
break;
|
||||||
|
case $.mobile.keyCode.PAGE_DOWN:
|
||||||
|
case $.mobile.keyCode.DOWN:
|
||||||
|
case $.mobile.keyCode.LEFT:
|
||||||
|
this.refresh(index - this.step);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}, // remove active mark
|
||||||
|
|
||||||
|
_handleKeyup: function (/* event */) {
|
||||||
|
if (this._keySliding) {
|
||||||
|
this._keySliding = false;
|
||||||
|
this.handle.removeClass("ui-state-active"); /* See comment above. */
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_sliderVMouseDown: function (event) {
|
||||||
|
// NOTE: we don't do this in refresh because we still want to
|
||||||
|
// support programmatic alteration of disabled inputs
|
||||||
|
if (this.options.disabled || !(event.which === 1 || event.which === 0 || event.which === undefined)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (this._trigger("beforestart", event) === false) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.dragging = true;
|
||||||
|
this.userModified = false;
|
||||||
|
this.mouseMoved = false;
|
||||||
|
|
||||||
|
if (this.isToggleSwitch) {
|
||||||
|
this.beforeStart = this.element[0].selectedIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.refresh(event);
|
||||||
|
this._trigger("start");
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
_sliderVMouseUp: function () {
|
||||||
|
if (this.dragging) {
|
||||||
|
this.dragging = false;
|
||||||
|
|
||||||
|
if (this.isToggleSwitch) {
|
||||||
|
// make the handle move with a smooth transition
|
||||||
|
this.handle.addClass("ui-slider-handle-snapping");
|
||||||
|
|
||||||
|
if (this.mouseMoved) {
|
||||||
|
// this is a drag, change the value only if user dragged enough
|
||||||
|
if (this.userModified) {
|
||||||
|
this.refresh(this.beforeStart === 0 ? 1 : 0);
|
||||||
|
} else {
|
||||||
|
this.refresh(this.beforeStart);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// this is just a click, change the value
|
||||||
|
this.refresh(this.beforeStart === 0 ? 1 : 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.mouseMoved = false;
|
||||||
|
this._trigger("stop");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_preventDocumentDrag: function (event) {
|
||||||
|
// NOTE: we don't do this in refresh because we still want to
|
||||||
|
// support programmatic alteration of disabled inputs
|
||||||
|
if (this._trigger("drag", event) === false) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (this.dragging && !this.options.disabled) {
|
||||||
|
|
||||||
|
// this.mouseMoved must be updated before refresh() because it will be used in the control "change" event
|
||||||
|
this.mouseMoved = true;
|
||||||
|
|
||||||
|
if (this.isToggleSwitch) {
|
||||||
|
// make the handle move in sync with the mouse
|
||||||
|
this.handle.removeClass("ui-slider-handle-snapping");
|
||||||
|
}
|
||||||
|
|
||||||
|
this.refresh(event);
|
||||||
|
|
||||||
|
// only after refresh() you can calculate this.userModified
|
||||||
|
this.userModified = this.beforeStart !== this.element[0].selectedIndex;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_checkedRefresh: function () {
|
||||||
|
if (this.value !== this._value()) {
|
||||||
|
this.refresh(this._value());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_value: function () {
|
||||||
|
return this.isToggleSwitch ? this.element[0].selectedIndex : parseFloat(this.element.val());
|
||||||
|
},
|
||||||
|
|
||||||
|
_reset: function () {
|
||||||
|
this.refresh(undefined, false, true);
|
||||||
|
},
|
||||||
|
|
||||||
|
refresh: function (val, isfromControl, preventInputUpdate) {
|
||||||
|
// NOTE: we don't return here because we want to support programmatic
|
||||||
|
// alteration of the input value, which should still update the slider
|
||||||
|
|
||||||
|
var self = this,
|
||||||
|
parentTheme = $.mobile.getAttribute(this.element[0], "theme"),
|
||||||
|
theme = this.options.theme || parentTheme,
|
||||||
|
themeClass = theme ? " ui-btn-" + theme : "",
|
||||||
|
trackTheme = this.options.trackTheme || parentTheme,
|
||||||
|
trackThemeClass = trackTheme ? " ui-bar-" + trackTheme : " ui-bar-inherit",
|
||||||
|
cornerClass = this.options.corners ? " ui-corner-all" : "",
|
||||||
|
miniClass = this.options.mini ? " ui-mini" : "",
|
||||||
|
left, width, data, tol,
|
||||||
|
pxStep, percent,
|
||||||
|
control, isInput, optionElements, min, max, step,
|
||||||
|
newval, valModStep, alignValue, percentPerStep,
|
||||||
|
handlePercent, aPercent, bPercent,
|
||||||
|
valueChanged;
|
||||||
|
|
||||||
|
self.slider[0].className = [this.isToggleSwitch ? "ui-slider ui-slider-switch ui-slider-track ui-shadow-inset" : "ui-slider-track ui-shadow-inset", trackThemeClass, cornerClass, miniClass].join("");
|
||||||
|
if (this.options.disabled || this.element.prop("disabled")) {
|
||||||
|
this.disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// set the stored value for comparison later
|
||||||
|
this.value = this._value();
|
||||||
|
if (this.options.highlight && !this.isToggleSwitch && this.slider.find(".ui-slider-bg").length === 0) {
|
||||||
|
this.valuebg = (function () {
|
||||||
|
var bg = document.createElement("div");
|
||||||
|
bg.className = "ui-slider-bg " + $.mobile.activeBtnClass;
|
||||||
|
return $(bg).prependTo(self.slider);
|
||||||
|
})();
|
||||||
|
}
|
||||||
|
this.handle.addClass("ui-btn" + themeClass + " ui-shadow");
|
||||||
|
|
||||||
|
control = this.element;
|
||||||
|
isInput = !this.isToggleSwitch;
|
||||||
|
optionElements = isInput ? [] : control.find("option");
|
||||||
|
min = isInput ? parseFloat(control.attr("min")) : 0;
|
||||||
|
max = isInput ? parseFloat(control.attr("max")) : optionElements.length - 1;
|
||||||
|
step = (isInput && parseFloat(control.attr("step")) > 0) ? parseFloat(control.attr("step")) : 1;
|
||||||
|
|
||||||
|
if (typeof val === "object") {
|
||||||
|
data = val;
|
||||||
|
// a slight tolerance helped get to the ends of the slider
|
||||||
|
tol = 8;
|
||||||
|
|
||||||
|
left = this.slider.offset().left;
|
||||||
|
width = this.slider.width();
|
||||||
|
pxStep = width / ((max - min) / step);
|
||||||
|
if (!this.dragging ||
|
||||||
|
data.pageX < left - tol ||
|
||||||
|
data.pageX > left + width + tol) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (pxStep > 1) {
|
||||||
|
percent = ((data.pageX - left) / width) * 100;
|
||||||
|
} else {
|
||||||
|
percent = Math.round(((data.pageX - left) / width) * 100);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (val == null) {
|
||||||
|
val = isInput ? parseFloat(control.val() || 0) : control[0].selectedIndex;
|
||||||
|
}
|
||||||
|
percent = (parseFloat(val) - min) / (max - min) * 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isNaN(percent)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
newval = (percent / 100) * (max - min) + min;
|
||||||
|
|
||||||
|
//from jQuery UI slider, the following source will round to the nearest step
|
||||||
|
valModStep = (newval - min) % step;
|
||||||
|
alignValue = newval - valModStep;
|
||||||
|
|
||||||
|
if (Math.abs(valModStep) * 2 >= step) {
|
||||||
|
alignValue += (valModStep > 0) ? step : (-step);
|
||||||
|
}
|
||||||
|
|
||||||
|
percentPerStep = 100 / ((max - min) / step);
|
||||||
|
// Since JavaScript has problems with large floats, round
|
||||||
|
// the final value to 5 digits after the decimal point (see jQueryUI: #4124)
|
||||||
|
newval = parseFloat(alignValue.toFixed(5));
|
||||||
|
|
||||||
|
if (typeof pxStep === "undefined") {
|
||||||
|
pxStep = width / ((max - min) / step);
|
||||||
|
}
|
||||||
|
if (pxStep > 1 && isInput) {
|
||||||
|
percent = (newval - min) * percentPerStep * (1 / step);
|
||||||
|
}
|
||||||
|
if (percent < 0) {
|
||||||
|
percent = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (percent > 100) {
|
||||||
|
percent = 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newval < min) {
|
||||||
|
newval = min;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (newval > max) {
|
||||||
|
newval = max;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.handle.css("left", percent + "%");
|
||||||
|
|
||||||
|
this.handle[0].setAttribute("aria-valuenow", isInput ? newval : optionElements.eq(newval).attr("value"));
|
||||||
|
|
||||||
|
this.handle[0].setAttribute("aria-valuetext", isInput ? newval : optionElements.eq(newval).getEncodedText());
|
||||||
|
|
||||||
|
this.handle[0].setAttribute("title", isInput ? newval : optionElements.eq(newval).getEncodedText());
|
||||||
|
|
||||||
|
if (this.valuebg) {
|
||||||
|
this.valuebg.css("width", percent + "%");
|
||||||
|
}
|
||||||
|
|
||||||
|
// drag the label widths
|
||||||
|
if (this._labels) {
|
||||||
|
handlePercent = this.handle.width() / this.slider.width() * 100;
|
||||||
|
aPercent = percent && handlePercent + (100 - handlePercent) * percent / 100;
|
||||||
|
bPercent = percent === 100 ? 0 : Math.min(handlePercent + 100 - aPercent, 100);
|
||||||
|
|
||||||
|
this._labels.each(function () {
|
||||||
|
var ab = $(this).hasClass("ui-slider-label-a");
|
||||||
|
$(this).width((ab ? aPercent : bPercent) + "%");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!preventInputUpdate) {
|
||||||
|
valueChanged = false;
|
||||||
|
|
||||||
|
// update control"s value
|
||||||
|
if (isInput) {
|
||||||
|
valueChanged = parseFloat(control.val()) !== newval;
|
||||||
|
control.val(newval);
|
||||||
|
} else {
|
||||||
|
valueChanged = control[0].selectedIndex !== newval;
|
||||||
|
control[0].selectedIndex = newval;
|
||||||
|
}
|
||||||
|
if (this._trigger("beforechange", val) === false) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (!isfromControl && valueChanged) {
|
||||||
|
control.trigger("change");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_setHighlight: function (value) {
|
||||||
|
value = !!value;
|
||||||
|
if (value) {
|
||||||
|
this.options.highlight = !!value;
|
||||||
|
this.refresh();
|
||||||
|
} else if (this.valuebg) {
|
||||||
|
this.valuebg.remove();
|
||||||
|
this.valuebg = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_setTheme: function (value) {
|
||||||
|
this.handle
|
||||||
|
.removeClass("ui-btn-" + this.options.theme)
|
||||||
|
.addClass("ui-btn-" + value);
|
||||||
|
|
||||||
|
var currentTheme = this.options.theme ? this.options.theme : "inherit",
|
||||||
|
newTheme = value ? value : "inherit";
|
||||||
|
|
||||||
|
this.control
|
||||||
|
.removeClass("ui-body-" + currentTheme)
|
||||||
|
.addClass("ui-body-" + newTheme);
|
||||||
|
},
|
||||||
|
|
||||||
|
_setTrackTheme: function (value) {
|
||||||
|
var currentTrackTheme = this.options.trackTheme ? this.options.trackTheme : "inherit",
|
||||||
|
newTrackTheme = value ? value : "inherit";
|
||||||
|
|
||||||
|
this.slider
|
||||||
|
.removeClass("ui-body-" + currentTrackTheme)
|
||||||
|
.addClass("ui-body-" + newTrackTheme);
|
||||||
|
},
|
||||||
|
|
||||||
|
_setMini: function (value) {
|
||||||
|
value = !!value;
|
||||||
|
if (!this.isToggleSwitch && !this.isRangeslider) {
|
||||||
|
this.slider.parent().toggleClass("ui-mini", value);
|
||||||
|
this.element.toggleClass("ui-mini", value);
|
||||||
|
}
|
||||||
|
this.slider.toggleClass("ui-mini", value);
|
||||||
|
},
|
||||||
|
|
||||||
|
_setCorners: function (value) {
|
||||||
|
this.slider.toggleClass("ui-corner-all", value);
|
||||||
|
|
||||||
|
if (!this.isToggleSwitch) {
|
||||||
|
this.control.toggleClass("ui-corner-all", value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_setDisabled: function (value) {
|
||||||
|
value = !!value;
|
||||||
|
this.element.prop("disabled", value);
|
||||||
|
this.slider
|
||||||
|
.toggleClass("ui-state-disabled", value)
|
||||||
|
.attr("aria-disabled", value);
|
||||||
|
|
||||||
|
this.element.toggleClass("ui-state-disabled", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
}, $.mobile.behaviors.formReset));
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
|
|
||||||
|
(function ($, undefined) {
|
||||||
|
$.widget("mobile.rangeslider", $.extend({
|
||||||
|
|
||||||
|
options: {
|
||||||
|
theme: null,
|
||||||
|
trackTheme: null,
|
||||||
|
corners: true,
|
||||||
|
mini: false,
|
||||||
|
highlight: true
|
||||||
|
},
|
||||||
|
|
||||||
|
_create: function () {
|
||||||
|
var $el = this.element,
|
||||||
|
elClass = this.options.mini ? "ui-rangeslider ui-mini" : "ui-rangeslider",
|
||||||
|
_inputFirst = $el.find("input").first(),
|
||||||
|
_inputLast = $el.find("input").last(),
|
||||||
|
_label = $el.find("label").first(),
|
||||||
|
_sliderWidgetFirst = $.data(_inputFirst.get(0), "mobile-slider") ||
|
||||||
|
$.data(_inputFirst.slider().get(0), "mobile-slider"),
|
||||||
|
_sliderWidgetLast = $.data(_inputLast.get(0), "mobile-slider") ||
|
||||||
|
$.data(_inputLast.slider().get(0), "mobile-slider"),
|
||||||
|
_sliderFirst = _sliderWidgetFirst.slider,
|
||||||
|
_sliderLast = _sliderWidgetLast.slider,
|
||||||
|
firstHandle = _sliderWidgetFirst.handle,
|
||||||
|
_sliders = $("<div class='ui-rangeslider-sliders' />").appendTo($el);
|
||||||
|
|
||||||
|
_inputFirst.addClass("ui-rangeslider-first");
|
||||||
|
_inputLast.addClass("ui-rangeslider-last");
|
||||||
|
$el.addClass(elClass);
|
||||||
|
|
||||||
|
_sliderFirst.appendTo(_sliders);
|
||||||
|
_sliderLast.appendTo(_sliders);
|
||||||
|
_label.insertBefore($el);
|
||||||
|
firstHandle.prependTo(_sliderLast);
|
||||||
|
|
||||||
|
$.extend(this, {
|
||||||
|
_inputFirst: _inputFirst,
|
||||||
|
_inputLast: _inputLast,
|
||||||
|
_sliderFirst: _sliderFirst,
|
||||||
|
_sliderLast: _sliderLast,
|
||||||
|
_label: _label,
|
||||||
|
_targetVal: null,
|
||||||
|
_sliderTarget: false,
|
||||||
|
_sliders: _sliders,
|
||||||
|
_proxy: false
|
||||||
|
});
|
||||||
|
|
||||||
|
this.refresh();
|
||||||
|
this._on(this.element.find("input.ui-slider-input"), {
|
||||||
|
"slidebeforestart": "_slidebeforestart",
|
||||||
|
"slidestop": "_slidestop",
|
||||||
|
"slidedrag": "_slidedrag",
|
||||||
|
"slidebeforechange": "_change",
|
||||||
|
"blur": "_change",
|
||||||
|
"keyup": "_change"
|
||||||
|
});
|
||||||
|
this._on({
|
||||||
|
"mousedown": "_change"
|
||||||
|
});
|
||||||
|
this._on(this.element.closest("form"), {
|
||||||
|
"reset": "_handleReset"
|
||||||
|
});
|
||||||
|
this._on(firstHandle, {
|
||||||
|
"vmousedown": "_dragFirstHandle"
|
||||||
|
});
|
||||||
|
},
|
||||||
|
_handleReset: function () {
|
||||||
|
var self = this;
|
||||||
|
//we must wait for the stack to unwind before updateing other wise sliders will not have updated yet
|
||||||
|
setTimeout(function () {
|
||||||
|
self._updateHighlight();
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
|
||||||
|
_dragFirstHandle: function (event) {
|
||||||
|
//if the first handle is dragged send the event to the first slider
|
||||||
|
$.data(this._inputFirst.get(0), "mobile-slider").dragging = true;
|
||||||
|
$.data(this._inputFirst.get(0), "mobile-slider").refresh(event);
|
||||||
|
$.data(this._inputFirst.get(0), "mobile-slider")._trigger("start");
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
_slidedrag: function (event) {
|
||||||
|
var first = $(event.target).is(this._inputFirst),
|
||||||
|
otherSlider = (first) ? this._inputLast : this._inputFirst;
|
||||||
|
|
||||||
|
this._sliderTarget = false;
|
||||||
|
//if the drag was initiated on an extreme and the other handle is focused send the events to
|
||||||
|
//the closest handle
|
||||||
|
if ((this._proxy === "first" && first) || (this._proxy === "last" && !first)) {
|
||||||
|
$.data(otherSlider.get(0), "mobile-slider").dragging = true;
|
||||||
|
$.data(otherSlider.get(0), "mobile-slider").refresh(event);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_slidestop: function (event) {
|
||||||
|
var first = $(event.target).is(this._inputFirst);
|
||||||
|
|
||||||
|
this._proxy = false;
|
||||||
|
//this stops dragging of the handle and brings the active track to the front
|
||||||
|
//this makes clicks on the track go the the last handle used
|
||||||
|
this.element.find("input").trigger("vmouseup");
|
||||||
|
this._sliderFirst.css("z-index", first ? 1 : "");
|
||||||
|
},
|
||||||
|
|
||||||
|
_slidebeforestart: function (event) {
|
||||||
|
this._sliderTarget = false;
|
||||||
|
//if the track is the target remember this and the original value
|
||||||
|
if ($(event.originalEvent.target).hasClass("ui-slider-track")) {
|
||||||
|
this._sliderTarget = true;
|
||||||
|
this._targetVal = $(event.target).val();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_setOptions: function (options) {
|
||||||
|
if (options.theme !== undefined) {
|
||||||
|
this._setTheme(options.theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.trackTheme !== undefined) {
|
||||||
|
this._setTrackTheme(options.trackTheme);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.mini !== undefined) {
|
||||||
|
this._setMini(options.mini);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.highlight !== undefined) {
|
||||||
|
this._setHighlight(options.highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.disabled !== undefined) {
|
||||||
|
this._setDisabled(options.disabled);
|
||||||
|
}
|
||||||
|
|
||||||
|
this._super(options);
|
||||||
|
this.refresh();
|
||||||
|
},
|
||||||
|
|
||||||
|
refresh: function () {
|
||||||
|
var $el = this.element,
|
||||||
|
o = this.options;
|
||||||
|
|
||||||
|
if (this._inputFirst.is(":disabled") || this._inputLast.is(":disabled")) {
|
||||||
|
this.options.disabled = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
$el.find("input").slider({
|
||||||
|
theme: o.theme,
|
||||||
|
trackTheme: o.trackTheme,
|
||||||
|
disabled: o.disabled,
|
||||||
|
corners: o.corners,
|
||||||
|
mini: o.mini,
|
||||||
|
highlight: o.highlight
|
||||||
|
}).slider("refresh");
|
||||||
|
this._updateHighlight();
|
||||||
|
},
|
||||||
|
|
||||||
|
_change: function (event) {
|
||||||
|
if (event.type === "keyup") {
|
||||||
|
this._updateHighlight();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var self = this,
|
||||||
|
min = parseFloat(this._inputFirst.val(), 10),
|
||||||
|
max = parseFloat(this._inputLast.val(), 10),
|
||||||
|
first = $(event.target).hasClass("ui-rangeslider-first"),
|
||||||
|
thisSlider = first ? this._inputFirst : this._inputLast,
|
||||||
|
otherSlider = first ? this._inputLast : this._inputFirst;
|
||||||
|
|
||||||
|
if ((this._inputFirst.val() > this._inputLast.val() && event.type === "mousedown" && !$(event.target).hasClass("ui-slider-handle"))) {
|
||||||
|
thisSlider.blur();
|
||||||
|
} else if (event.type === "mousedown") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (min > max && !this._sliderTarget) {
|
||||||
|
//this prevents min from being greater then max
|
||||||
|
thisSlider.val(first ? max : min).slider("refresh");
|
||||||
|
this._trigger("normalize");
|
||||||
|
} else if (min > max) {
|
||||||
|
//this makes it so clicks on the target on either extreme go to the closest handle
|
||||||
|
thisSlider.val(this._targetVal).slider("refresh");
|
||||||
|
|
||||||
|
//You must wait for the stack to unwind so first slider is updated before updating second
|
||||||
|
setTimeout(function () {
|
||||||
|
otherSlider.val(first ? min : max).slider("refresh");
|
||||||
|
$.data(otherSlider.get(0), "mobile-slider").handle.focus();
|
||||||
|
self._sliderFirst.css("z-index", first ? "" : 1);
|
||||||
|
self._trigger("normalize");
|
||||||
|
}, 0);
|
||||||
|
this._proxy = (first) ? "first" : "last";
|
||||||
|
}
|
||||||
|
//fixes issue where when both _sliders are at min they cannot be adjusted
|
||||||
|
if (min === max) {
|
||||||
|
$.data(thisSlider.get(0), "mobile-slider").handle.css("z-index", 1);
|
||||||
|
$.data(otherSlider.get(0), "mobile-slider").handle.css("z-index", 0);
|
||||||
|
} else {
|
||||||
|
$.data(otherSlider.get(0), "mobile-slider").handle.css("z-index", "");
|
||||||
|
$.data(thisSlider.get(0), "mobile-slider").handle.css("z-index", "");
|
||||||
|
}
|
||||||
|
|
||||||
|
this._updateHighlight();
|
||||||
|
|
||||||
|
if (min >= max) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_updateHighlight: function () {
|
||||||
|
var min = parseInt($.data(this._inputFirst.get(0), "mobile-slider").handle.get(0).style.left, 10),
|
||||||
|
max = parseInt($.data(this._inputLast.get(0), "mobile-slider").handle.get(0).style.left, 10),
|
||||||
|
width = (max - min);
|
||||||
|
|
||||||
|
this.element.find(".ui-slider-bg").css({
|
||||||
|
"margin-left": min + "%",
|
||||||
|
"width": width + "%"
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
_setTheme: function (value) {
|
||||||
|
this._inputFirst.slider("option", "theme", value);
|
||||||
|
this._inputLast.slider("option", "theme", value);
|
||||||
|
},
|
||||||
|
|
||||||
|
_setTrackTheme: function (value) {
|
||||||
|
this._inputFirst.slider("option", "trackTheme", value);
|
||||||
|
this._inputLast.slider("option", "trackTheme", value);
|
||||||
|
},
|
||||||
|
|
||||||
|
_setMini: function (value) {
|
||||||
|
this._inputFirst.slider("option", "mini", value);
|
||||||
|
this._inputLast.slider("option", "mini", value);
|
||||||
|
this.element.toggleClass("ui-mini", !!value);
|
||||||
|
},
|
||||||
|
|
||||||
|
_setHighlight: function (value) {
|
||||||
|
this._inputFirst.slider("option", "highlight", value);
|
||||||
|
this._inputLast.slider("option", "highlight", value);
|
||||||
|
},
|
||||||
|
|
||||||
|
_setDisabled: function (value) {
|
||||||
|
this._inputFirst.prop("disabled", value);
|
||||||
|
this._inputLast.prop("disabled", value);
|
||||||
|
},
|
||||||
|
|
||||||
|
_destroy: function () {
|
||||||
|
this._label.prependTo(this.element);
|
||||||
|
this.element.removeClass("ui-rangeslider ui-mini");
|
||||||
|
this._inputFirst.after(this._sliderFirst);
|
||||||
|
this._inputLast.after(this._sliderLast);
|
||||||
|
this._sliders.remove();
|
||||||
|
this.element.find("input").removeClass("ui-rangeslider-first ui-rangeslider-last").slider("destroy");
|
||||||
|
}
|
||||||
|
|
||||||
|
}, $.mobile.behaviors.formReset));
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
|
|
||||||
|
|
||||||
|
(function ($, undefined) {
|
||||||
|
|
||||||
|
var popup;
|
||||||
|
|
||||||
|
function getPopup() {
|
||||||
|
if (!popup) {
|
||||||
|
popup = $("<div></div>", {
|
||||||
|
"class": "ui-slider-popup ui-shadow ui-corner-all"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return popup.clone();
|
||||||
|
}
|
||||||
|
|
||||||
|
$.widget("mobile.slider", $.mobile.slider, {
|
||||||
|
options: {
|
||||||
|
popupEnabled: false,
|
||||||
|
showValue: false
|
||||||
|
},
|
||||||
|
|
||||||
|
_create: function () {
|
||||||
|
this._super();
|
||||||
|
|
||||||
|
$.extend(this, {
|
||||||
|
_currentValue: null,
|
||||||
|
_popup: null,
|
||||||
|
_popupVisible: false
|
||||||
|
});
|
||||||
|
|
||||||
|
this._setOption("popupEnabled", this.options.popupEnabled);
|
||||||
|
|
||||||
|
this._on(this.handle, { "vmousedown": "_showPopup" });
|
||||||
|
this._on(this.slider.add(this.document), { "vmouseup": "_hidePopup" });
|
||||||
|
this._refresh();
|
||||||
|
},
|
||||||
|
|
||||||
|
// position the popup centered 5px above the handle
|
||||||
|
_positionPopup: function () {
|
||||||
|
var dstOffset = this.handle.offset();
|
||||||
|
|
||||||
|
this._popup.offset({
|
||||||
|
left: dstOffset.left + (this.handle.width() - this._popup.width()) / 2,
|
||||||
|
top: dstOffset.top - this._popup.outerHeight() - 5
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
_setOption: function (key, value) {
|
||||||
|
this._super(key, value);
|
||||||
|
|
||||||
|
if (key === "showValue") {
|
||||||
|
this.handle.html(value && !this.options.mini ? this._value() : "");
|
||||||
|
} else if (key === "popupEnabled") {
|
||||||
|
if (value && !this._popup) {
|
||||||
|
this._popup = getPopup()
|
||||||
|
.addClass("ui-body-" + (this.options.theme || "a"))
|
||||||
|
.hide()
|
||||||
|
.insertBefore(this.element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// show value on the handle and in popup
|
||||||
|
refresh: function () {
|
||||||
|
this._super.apply(this, arguments);
|
||||||
|
this._refresh();
|
||||||
|
},
|
||||||
|
|
||||||
|
_refresh: function () {
|
||||||
|
var o = this.options, newValue;
|
||||||
|
|
||||||
|
if (o.popupEnabled) {
|
||||||
|
// remove the title attribute from the handle (which is
|
||||||
|
// responsible for the annoying tooltip); NB we have
|
||||||
|
// to do it here as the jqm slider sets it every time
|
||||||
|
// the slider's value changes :(
|
||||||
|
this.handle.removeAttr("title");
|
||||||
|
}
|
||||||
|
|
||||||
|
newValue = this._value();
|
||||||
|
if (newValue === this._currentValue) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._currentValue = newValue;
|
||||||
|
|
||||||
|
if (o.popupEnabled && this._popup) {
|
||||||
|
this._positionPopup();
|
||||||
|
this._popup.html(newValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (o.showValue && !this.options.mini) {
|
||||||
|
this.handle.html(newValue);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_showPopup: function () {
|
||||||
|
if (this.options.popupEnabled && !this._popupVisible) {
|
||||||
|
this.handle.html("");
|
||||||
|
this._popup.show();
|
||||||
|
this._positionPopup();
|
||||||
|
this._popupVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_hidePopup: function () {
|
||||||
|
var o = this.options;
|
||||||
|
|
||||||
|
if (o.popupEnabled && this._popupVisible) {
|
||||||
|
if (o.showValue && !o.mini) {
|
||||||
|
this.handle.html(this._value());
|
||||||
|
}
|
||||||
|
this._popup.hide();
|
||||||
|
this._popupVisible = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
|
|
@ -5096,12 +5096,14 @@ $.fn.grid = function( options ) {
|
||||||
_include: function (page, jPage, settings) {
|
_include: function (page, jPage, settings) {
|
||||||
|
|
||||||
// append to page and enhance
|
// append to page and enhance
|
||||||
this.element[0].appendChild(page);
|
jPage.appendTo(this.element);
|
||||||
|
//alert(jPage[0].parentNode == this.element[0]);
|
||||||
|
//this.element[0].appendChild(page);
|
||||||
|
|
||||||
// use the page widget to enhance
|
// use the page widget to enhance
|
||||||
this._enhance(jPage, settings.role);
|
this._enhance(jPage, settings.role);
|
||||||
|
|
||||||
// remove page on hide
|
// remove page on hide
|
||||||
jPage.page("bindRemove");
|
jPage.page("bindRemove");
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -7957,847 +7959,6 @@ $.widget( "mobile.checkboxradio", $.extend( {
|
||||||
|
|
||||||
(function( $, undefined ) {
|
(function( $, undefined ) {
|
||||||
|
|
||||||
$.widget( "mobile.slider", $.extend( {
|
|
||||||
initSelector: "input[type='range'], *[data-type='range'], *[data-role='slider']",
|
|
||||||
|
|
||||||
widgetEventPrefix: "slide",
|
|
||||||
|
|
||||||
options: {
|
|
||||||
theme: null,
|
|
||||||
trackTheme: null,
|
|
||||||
corners: true,
|
|
||||||
mini: false,
|
|
||||||
highlight: false
|
|
||||||
},
|
|
||||||
|
|
||||||
_create: function() {
|
|
||||||
|
|
||||||
// TODO: Each of these should have comments explain what they're for
|
|
||||||
var self = this,
|
|
||||||
control = this.element,
|
|
||||||
trackTheme = this.options.trackTheme || $.mobile.getAttribute( control[ 0 ], "theme" ),
|
|
||||||
trackThemeClass = trackTheme ? " ui-bar-" + trackTheme : " ui-bar-inherit",
|
|
||||||
cornerClass = ( this.options.corners || control.jqmData( "corners" ) ) ? " ui-corner-all" : "",
|
|
||||||
miniClass = ( this.options.mini || control.jqmData( "mini" ) ) ? " ui-mini" : "",
|
|
||||||
cType = control[ 0 ].nodeName.toLowerCase(),
|
|
||||||
isToggleSwitch = ( cType === "select" ),
|
|
||||||
isRangeslider = control.parent().is( ":jqmData(role='rangeslider')" ),
|
|
||||||
selectClass = ( isToggleSwitch ) ? "ui-slider-switch" : "",
|
|
||||||
controlID = control.attr( "id" ),
|
|
||||||
$label = $( "[for='" + controlID + "']" ),
|
|
||||||
labelID = $label.attr( "id" ) || controlID + "-label",
|
|
||||||
min = !isToggleSwitch ? parseFloat( control.attr( "min" ) ) : 0,
|
|
||||||
max = !isToggleSwitch ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length-1,
|
|
||||||
step = window.parseFloat( control.attr( "step" ) || 1 ),
|
|
||||||
domHandle = document.createElement( "a" ),
|
|
||||||
handle = $( domHandle ),
|
|
||||||
domSlider = document.createElement( "div" ),
|
|
||||||
slider = $( domSlider ),
|
|
||||||
valuebg = this.options.highlight && !isToggleSwitch ? (function() {
|
|
||||||
var bg = document.createElement( "div" );
|
|
||||||
bg.className = "ui-slider-bg " + $.mobile.activeBtnClass;
|
|
||||||
return $( bg ).prependTo( slider );
|
|
||||||
})() : false,
|
|
||||||
options,
|
|
||||||
wrapper,
|
|
||||||
j, length,
|
|
||||||
i, optionsCount, origTabIndex,
|
|
||||||
side, activeClass, sliderImg;
|
|
||||||
|
|
||||||
$label.attr( "id", labelID );
|
|
||||||
this.isToggleSwitch = isToggleSwitch;
|
|
||||||
|
|
||||||
domHandle.setAttribute( "href", "#" );
|
|
||||||
domSlider.setAttribute( "role", "application" );
|
|
||||||
domSlider.className = [ this.isToggleSwitch ? "ui-slider ui-slider-track ui-shadow-inset " : "ui-slider-track ui-shadow-inset ", selectClass, trackThemeClass, cornerClass, miniClass ].join( "" );
|
|
||||||
domHandle.className = "ui-slider-handle";
|
|
||||||
domSlider.appendChild( domHandle );
|
|
||||||
|
|
||||||
handle.attr({
|
|
||||||
"role": "slider",
|
|
||||||
"aria-valuemin": min,
|
|
||||||
"aria-valuemax": max,
|
|
||||||
"aria-valuenow": this._value(),
|
|
||||||
"aria-valuetext": this._value(),
|
|
||||||
"title": this._value(),
|
|
||||||
"aria-labelledby": labelID
|
|
||||||
});
|
|
||||||
|
|
||||||
$.extend( this, {
|
|
||||||
slider: slider,
|
|
||||||
handle: handle,
|
|
||||||
control: control,
|
|
||||||
type: cType,
|
|
||||||
step: step,
|
|
||||||
max: max,
|
|
||||||
min: min,
|
|
||||||
valuebg: valuebg,
|
|
||||||
isRangeslider: isRangeslider,
|
|
||||||
dragging: false,
|
|
||||||
beforeStart: null,
|
|
||||||
userModified: false,
|
|
||||||
mouseMoved: false
|
|
||||||
});
|
|
||||||
|
|
||||||
if ( isToggleSwitch ) {
|
|
||||||
// TODO: restore original tabindex (if any) in a destroy method
|
|
||||||
origTabIndex = control.attr( "tabindex" );
|
|
||||||
if ( origTabIndex ) {
|
|
||||||
handle.attr( "tabindex", origTabIndex );
|
|
||||||
}
|
|
||||||
control.attr( "tabindex", "-1" ).focus(function() {
|
|
||||||
$( this ).blur();
|
|
||||||
handle.focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper = document.createElement( "div" );
|
|
||||||
wrapper.className = "ui-slider-inneroffset";
|
|
||||||
|
|
||||||
for ( j = 0, length = domSlider.childNodes.length; j < length; j++ ) {
|
|
||||||
wrapper.appendChild( domSlider.childNodes[j] );
|
|
||||||
}
|
|
||||||
|
|
||||||
domSlider.appendChild( wrapper );
|
|
||||||
|
|
||||||
// slider.wrapInner( "<div class='ui-slider-inneroffset'></div>" );
|
|
||||||
|
|
||||||
// make the handle move with a smooth transition
|
|
||||||
handle.addClass( "ui-slider-handle-snapping" );
|
|
||||||
|
|
||||||
options = control.find( "option" );
|
|
||||||
|
|
||||||
for ( i = 0, optionsCount = options.length; i < optionsCount; i++ ) {
|
|
||||||
side = !i ? "b" : "a";
|
|
||||||
activeClass = !i ? "" : " " + $.mobile.activeBtnClass;
|
|
||||||
sliderImg = document.createElement( "span" );
|
|
||||||
|
|
||||||
sliderImg.className = [ "ui-slider-label ui-slider-label-", side, activeClass ].join( "" );
|
|
||||||
sliderImg.setAttribute( "role", "img" );
|
|
||||||
sliderImg.appendChild( document.createTextNode( options[i].innerHTML ) );
|
|
||||||
$( sliderImg ).prependTo( slider );
|
|
||||||
}
|
|
||||||
|
|
||||||
self._labels = $( ".ui-slider-label", slider );
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// monitor the input for updated values
|
|
||||||
control.addClass( isToggleSwitch ? "ui-slider-switch" : "ui-slider-input" );
|
|
||||||
|
|
||||||
this._on( control, {
|
|
||||||
"change": "_controlChange",
|
|
||||||
"keyup": "_controlKeyup",
|
|
||||||
"blur": "_controlBlur",
|
|
||||||
"vmouseup": "_controlVMouseUp"
|
|
||||||
});
|
|
||||||
|
|
||||||
slider.bind( "vmousedown", $.proxy( this._sliderVMouseDown, this ) )
|
|
||||||
.bind( "vclick", false );
|
|
||||||
|
|
||||||
// We have to instantiate a new function object for the unbind to work properly
|
|
||||||
// since the method itself is defined in the prototype (causing it to unbind everything)
|
|
||||||
this._on( document, { "vmousemove": "_preventDocumentDrag" });
|
|
||||||
this._on( slider.add( document ), { "vmouseup": "_sliderVMouseUp" });
|
|
||||||
|
|
||||||
slider.insertAfter( control );
|
|
||||||
|
|
||||||
// wrap in a div for styling purposes
|
|
||||||
if ( !isToggleSwitch && !isRangeslider ) {
|
|
||||||
wrapper = this.options.mini ? "<div class='ui-slider ui-mini'>" : "<div class='ui-slider'>";
|
|
||||||
|
|
||||||
control.add( slider ).wrapAll( wrapper );
|
|
||||||
}
|
|
||||||
|
|
||||||
// bind the handle event callbacks and set the context to the widget instance
|
|
||||||
this._on( this.handle, {
|
|
||||||
"vmousedown": "_handleVMouseDown",
|
|
||||||
"keydown": "_handleKeydown",
|
|
||||||
"keyup": "_handleKeyup"
|
|
||||||
});
|
|
||||||
|
|
||||||
this.handle.bind( "vclick", false );
|
|
||||||
|
|
||||||
this._handleFormReset();
|
|
||||||
|
|
||||||
this.refresh( undefined, undefined, true );
|
|
||||||
},
|
|
||||||
|
|
||||||
_setOptions: function( options ) {
|
|
||||||
if ( options.theme !== undefined ) {
|
|
||||||
this._setTheme( options.theme );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( options.trackTheme !== undefined ) {
|
|
||||||
this._setTrackTheme( options.trackTheme );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( options.corners !== undefined ) {
|
|
||||||
this._setCorners( options.corners );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( options.mini !== undefined ) {
|
|
||||||
this._setMini( options.mini );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( options.highlight !== undefined ) {
|
|
||||||
this._setHighlight( options.highlight );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( options.disabled !== undefined ) {
|
|
||||||
this._setDisabled( options.disabled );
|
|
||||||
}
|
|
||||||
this._super( options );
|
|
||||||
},
|
|
||||||
|
|
||||||
_controlChange: function( event ) {
|
|
||||||
// if the user dragged the handle, the "change" event was triggered from inside refresh(); don't call refresh() again
|
|
||||||
if ( this._trigger( "controlchange", event ) === false ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if ( !this.mouseMoved ) {
|
|
||||||
this.refresh( this._value(), true );
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_controlKeyup: function(/* event */) { // necessary?
|
|
||||||
this.refresh( this._value(), true, true );
|
|
||||||
},
|
|
||||||
|
|
||||||
_controlBlur: function(/* event */) {
|
|
||||||
this.refresh( this._value(), true );
|
|
||||||
},
|
|
||||||
|
|
||||||
// it appears the clicking the up and down buttons in chrome on
|
|
||||||
// range/number inputs doesn't trigger a change until the field is
|
|
||||||
// blurred. Here we check thif the value has changed and refresh
|
|
||||||
_controlVMouseUp: function(/* event */) {
|
|
||||||
this._checkedRefresh();
|
|
||||||
},
|
|
||||||
|
|
||||||
// NOTE force focus on handle
|
|
||||||
_handleVMouseDown: function(/* event */) {
|
|
||||||
this.handle.focus();
|
|
||||||
},
|
|
||||||
|
|
||||||
_handleKeydown: function( event ) {
|
|
||||||
var index = this._value();
|
|
||||||
if ( this.options.disabled ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// In all cases prevent the default and mark the handle as active
|
|
||||||
switch ( event.keyCode ) {
|
|
||||||
case $.mobile.keyCode.HOME:
|
|
||||||
case $.mobile.keyCode.END:
|
|
||||||
case $.mobile.keyCode.PAGE_UP:
|
|
||||||
case $.mobile.keyCode.PAGE_DOWN:
|
|
||||||
case $.mobile.keyCode.UP:
|
|
||||||
case $.mobile.keyCode.RIGHT:
|
|
||||||
case $.mobile.keyCode.DOWN:
|
|
||||||
case $.mobile.keyCode.LEFT:
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
if ( !this._keySliding ) {
|
|
||||||
this._keySliding = true;
|
|
||||||
this.handle.addClass( "ui-state-active" ); /* TODO: We don't use this class for styling. Do we need to add it? */
|
|
||||||
}
|
|
||||||
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// move the slider according to the keypress
|
|
||||||
switch ( event.keyCode ) {
|
|
||||||
case $.mobile.keyCode.HOME:
|
|
||||||
this.refresh( this.min );
|
|
||||||
break;
|
|
||||||
case $.mobile.keyCode.END:
|
|
||||||
this.refresh( this.max );
|
|
||||||
break;
|
|
||||||
case $.mobile.keyCode.PAGE_UP:
|
|
||||||
case $.mobile.keyCode.UP:
|
|
||||||
case $.mobile.keyCode.RIGHT:
|
|
||||||
this.refresh( index + this.step );
|
|
||||||
break;
|
|
||||||
case $.mobile.keyCode.PAGE_DOWN:
|
|
||||||
case $.mobile.keyCode.DOWN:
|
|
||||||
case $.mobile.keyCode.LEFT:
|
|
||||||
this.refresh( index - this.step );
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}, // remove active mark
|
|
||||||
|
|
||||||
_handleKeyup: function(/* event */) {
|
|
||||||
if ( this._keySliding ) {
|
|
||||||
this._keySliding = false;
|
|
||||||
this.handle.removeClass( "ui-state-active" ); /* See comment above. */
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_sliderVMouseDown: function( event ) {
|
|
||||||
// NOTE: we don't do this in refresh because we still want to
|
|
||||||
// support programmatic alteration of disabled inputs
|
|
||||||
if ( this.options.disabled || !( event.which === 1 || event.which === 0 || event.which === undefined ) ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if ( this._trigger( "beforestart", event ) === false ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
this.dragging = true;
|
|
||||||
this.userModified = false;
|
|
||||||
this.mouseMoved = false;
|
|
||||||
|
|
||||||
if ( this.isToggleSwitch ) {
|
|
||||||
this.beforeStart = this.element[0].selectedIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.refresh( event );
|
|
||||||
this._trigger( "start" );
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
_sliderVMouseUp: function() {
|
|
||||||
if ( this.dragging ) {
|
|
||||||
this.dragging = false;
|
|
||||||
|
|
||||||
if ( this.isToggleSwitch ) {
|
|
||||||
// make the handle move with a smooth transition
|
|
||||||
this.handle.addClass( "ui-slider-handle-snapping" );
|
|
||||||
|
|
||||||
if ( this.mouseMoved ) {
|
|
||||||
// this is a drag, change the value only if user dragged enough
|
|
||||||
if ( this.userModified ) {
|
|
||||||
this.refresh( this.beforeStart === 0 ? 1 : 0 );
|
|
||||||
} else {
|
|
||||||
this.refresh( this.beforeStart );
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// this is just a click, change the value
|
|
||||||
this.refresh( this.beforeStart === 0 ? 1 : 0 );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.mouseMoved = false;
|
|
||||||
this._trigger( "stop" );
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_preventDocumentDrag: function( event ) {
|
|
||||||
// NOTE: we don't do this in refresh because we still want to
|
|
||||||
// support programmatic alteration of disabled inputs
|
|
||||||
if ( this._trigger( "drag", event ) === false) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if ( this.dragging && !this.options.disabled ) {
|
|
||||||
|
|
||||||
// this.mouseMoved must be updated before refresh() because it will be used in the control "change" event
|
|
||||||
this.mouseMoved = true;
|
|
||||||
|
|
||||||
if ( this.isToggleSwitch ) {
|
|
||||||
// make the handle move in sync with the mouse
|
|
||||||
this.handle.removeClass( "ui-slider-handle-snapping" );
|
|
||||||
}
|
|
||||||
|
|
||||||
this.refresh( event );
|
|
||||||
|
|
||||||
// only after refresh() you can calculate this.userModified
|
|
||||||
this.userModified = this.beforeStart !== this.element[0].selectedIndex;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_checkedRefresh: function() {
|
|
||||||
if ( this.value !== this._value() ) {
|
|
||||||
this.refresh( this._value() );
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_value: function() {
|
|
||||||
return this.isToggleSwitch ? this.element[0].selectedIndex : parseFloat( this.element.val() ) ;
|
|
||||||
},
|
|
||||||
|
|
||||||
_reset: function() {
|
|
||||||
this.refresh( undefined, false, true );
|
|
||||||
},
|
|
||||||
|
|
||||||
refresh: function( val, isfromControl, preventInputUpdate ) {
|
|
||||||
// NOTE: we don't return here because we want to support programmatic
|
|
||||||
// alteration of the input value, which should still update the slider
|
|
||||||
|
|
||||||
var self = this,
|
|
||||||
parentTheme = $.mobile.getAttribute( this.element[ 0 ], "theme" ),
|
|
||||||
theme = this.options.theme || parentTheme,
|
|
||||||
themeClass = theme ? " ui-btn-" + theme : "",
|
|
||||||
trackTheme = this.options.trackTheme || parentTheme,
|
|
||||||
trackThemeClass = trackTheme ? " ui-bar-" + trackTheme : " ui-bar-inherit",
|
|
||||||
cornerClass = this.options.corners ? " ui-corner-all" : "",
|
|
||||||
miniClass = this.options.mini ? " ui-mini" : "",
|
|
||||||
left, width, data, tol,
|
|
||||||
pxStep, percent,
|
|
||||||
control, isInput, optionElements, min, max, step,
|
|
||||||
newval, valModStep, alignValue, percentPerStep,
|
|
||||||
handlePercent, aPercent, bPercent,
|
|
||||||
valueChanged;
|
|
||||||
|
|
||||||
self.slider[0].className = [ this.isToggleSwitch ? "ui-slider ui-slider-switch ui-slider-track ui-shadow-inset" : "ui-slider-track ui-shadow-inset", trackThemeClass, cornerClass, miniClass ].join( "" );
|
|
||||||
if ( this.options.disabled || this.element.prop( "disabled" ) ) {
|
|
||||||
this.disable();
|
|
||||||
}
|
|
||||||
|
|
||||||
// set the stored value for comparison later
|
|
||||||
this.value = this._value();
|
|
||||||
if ( this.options.highlight && !this.isToggleSwitch && this.slider.find( ".ui-slider-bg" ).length === 0 ) {
|
|
||||||
this.valuebg = (function() {
|
|
||||||
var bg = document.createElement( "div" );
|
|
||||||
bg.className = "ui-slider-bg " + $.mobile.activeBtnClass;
|
|
||||||
return $( bg ).prependTo( self.slider );
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
this.handle.addClass( "ui-btn" + themeClass + " ui-shadow" );
|
|
||||||
|
|
||||||
control = this.element;
|
|
||||||
isInput = !this.isToggleSwitch;
|
|
||||||
optionElements = isInput ? [] : control.find( "option" );
|
|
||||||
min = isInput ? parseFloat( control.attr( "min" ) ) : 0;
|
|
||||||
max = isInput ? parseFloat( control.attr( "max" ) ) : optionElements.length - 1;
|
|
||||||
step = ( isInput && parseFloat( control.attr( "step" ) ) > 0 ) ? parseFloat( control.attr( "step" ) ) : 1;
|
|
||||||
|
|
||||||
if ( typeof val === "object" ) {
|
|
||||||
data = val;
|
|
||||||
// a slight tolerance helped get to the ends of the slider
|
|
||||||
tol = 8;
|
|
||||||
|
|
||||||
left = this.slider.offset().left;
|
|
||||||
width = this.slider.width();
|
|
||||||
pxStep = width/((max-min)/step);
|
|
||||||
if ( !this.dragging ||
|
|
||||||
data.pageX < left - tol ||
|
|
||||||
data.pageX > left + width + tol ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ( pxStep > 1 ) {
|
|
||||||
percent = ( ( data.pageX - left ) / width ) * 100;
|
|
||||||
} else {
|
|
||||||
percent = Math.round( ( ( data.pageX - left ) / width ) * 100 );
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if ( val == null ) {
|
|
||||||
val = isInput ? parseFloat( control.val() || 0 ) : control[0].selectedIndex;
|
|
||||||
}
|
|
||||||
percent = ( parseFloat( val ) - min ) / ( max - min ) * 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( isNaN( percent ) ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
newval = ( percent / 100 ) * ( max - min ) + min;
|
|
||||||
|
|
||||||
//from jQuery UI slider, the following source will round to the nearest step
|
|
||||||
valModStep = ( newval - min ) % step;
|
|
||||||
alignValue = newval - valModStep;
|
|
||||||
|
|
||||||
if ( Math.abs( valModStep ) * 2 >= step ) {
|
|
||||||
alignValue += ( valModStep > 0 ) ? step : ( -step );
|
|
||||||
}
|
|
||||||
|
|
||||||
percentPerStep = 100/((max-min)/step);
|
|
||||||
// Since JavaScript has problems with large floats, round
|
|
||||||
// the final value to 5 digits after the decimal point (see jQueryUI: #4124)
|
|
||||||
newval = parseFloat( alignValue.toFixed(5) );
|
|
||||||
|
|
||||||
if ( typeof pxStep === "undefined" ) {
|
|
||||||
pxStep = width / ( (max-min) / step );
|
|
||||||
}
|
|
||||||
if ( pxStep > 1 && isInput ) {
|
|
||||||
percent = ( newval - min ) * percentPerStep * ( 1 / step );
|
|
||||||
}
|
|
||||||
if ( percent < 0 ) {
|
|
||||||
percent = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( percent > 100 ) {
|
|
||||||
percent = 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( newval < min ) {
|
|
||||||
newval = min;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( newval > max ) {
|
|
||||||
newval = max;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.handle.css( "left", percent + "%" );
|
|
||||||
|
|
||||||
this.handle[0].setAttribute( "aria-valuenow", isInput ? newval : optionElements.eq( newval ).attr( "value" ) );
|
|
||||||
|
|
||||||
this.handle[0].setAttribute( "aria-valuetext", isInput ? newval : optionElements.eq( newval ).getEncodedText() );
|
|
||||||
|
|
||||||
this.handle[0].setAttribute( "title", isInput ? newval : optionElements.eq( newval ).getEncodedText() );
|
|
||||||
|
|
||||||
if ( this.valuebg ) {
|
|
||||||
this.valuebg.css( "width", percent + "%" );
|
|
||||||
}
|
|
||||||
|
|
||||||
// drag the label widths
|
|
||||||
if ( this._labels ) {
|
|
||||||
handlePercent = this.handle.width() / this.slider.width() * 100;
|
|
||||||
aPercent = percent && handlePercent + ( 100 - handlePercent ) * percent / 100;
|
|
||||||
bPercent = percent === 100 ? 0 : Math.min( handlePercent + 100 - aPercent, 100 );
|
|
||||||
|
|
||||||
this._labels.each(function() {
|
|
||||||
var ab = $( this ).hasClass( "ui-slider-label-a" );
|
|
||||||
$( this ).width( ( ab ? aPercent : bPercent ) + "%" );
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !preventInputUpdate ) {
|
|
||||||
valueChanged = false;
|
|
||||||
|
|
||||||
// update control"s value
|
|
||||||
if ( isInput ) {
|
|
||||||
valueChanged = parseFloat( control.val() ) !== newval;
|
|
||||||
control.val( newval );
|
|
||||||
} else {
|
|
||||||
valueChanged = control[ 0 ].selectedIndex !== newval;
|
|
||||||
control[ 0 ].selectedIndex = newval;
|
|
||||||
}
|
|
||||||
if ( this._trigger( "beforechange", val ) === false) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if ( !isfromControl && valueChanged ) {
|
|
||||||
control.trigger( "change" );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_setHighlight: function( value ) {
|
|
||||||
value = !!value;
|
|
||||||
if ( value ) {
|
|
||||||
this.options.highlight = !!value;
|
|
||||||
this.refresh();
|
|
||||||
} else if ( this.valuebg ) {
|
|
||||||
this.valuebg.remove();
|
|
||||||
this.valuebg = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_setTheme: function( value ) {
|
|
||||||
this.handle
|
|
||||||
.removeClass( "ui-btn-" + this.options.theme )
|
|
||||||
.addClass( "ui-btn-" + value );
|
|
||||||
|
|
||||||
var currentTheme = this.options.theme ? this.options.theme : "inherit",
|
|
||||||
newTheme = value ? value : "inherit";
|
|
||||||
|
|
||||||
this.control
|
|
||||||
.removeClass( "ui-body-" + currentTheme )
|
|
||||||
.addClass( "ui-body-" + newTheme );
|
|
||||||
},
|
|
||||||
|
|
||||||
_setTrackTheme: function( value ) {
|
|
||||||
var currentTrackTheme = this.options.trackTheme ? this.options.trackTheme : "inherit",
|
|
||||||
newTrackTheme = value ? value : "inherit";
|
|
||||||
|
|
||||||
this.slider
|
|
||||||
.removeClass( "ui-body-" + currentTrackTheme )
|
|
||||||
.addClass( "ui-body-" + newTrackTheme );
|
|
||||||
},
|
|
||||||
|
|
||||||
_setMini: function( value ) {
|
|
||||||
value = !!value;
|
|
||||||
if ( !this.isToggleSwitch && !this.isRangeslider ) {
|
|
||||||
this.slider.parent().toggleClass( "ui-mini", value );
|
|
||||||
this.element.toggleClass( "ui-mini", value );
|
|
||||||
}
|
|
||||||
this.slider.toggleClass( "ui-mini", value );
|
|
||||||
},
|
|
||||||
|
|
||||||
_setCorners: function( value ) {
|
|
||||||
this.slider.toggleClass( "ui-corner-all", value );
|
|
||||||
|
|
||||||
if ( !this.isToggleSwitch ) {
|
|
||||||
this.control.toggleClass( "ui-corner-all", value );
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_setDisabled: function( value ) {
|
|
||||||
value = !!value;
|
|
||||||
this.element.prop( "disabled", value );
|
|
||||||
this.slider
|
|
||||||
.toggleClass( "ui-state-disabled", value )
|
|
||||||
.attr( "aria-disabled", value );
|
|
||||||
|
|
||||||
this.element.toggleClass( "ui-state-disabled", value );
|
|
||||||
}
|
|
||||||
|
|
||||||
}, $.mobile.behaviors.formReset ) );
|
|
||||||
|
|
||||||
})( jQuery );
|
|
||||||
|
|
||||||
(function( $, undefined ) {
|
|
||||||
$.widget( "mobile.rangeslider", $.extend( {
|
|
||||||
|
|
||||||
options: {
|
|
||||||
theme: null,
|
|
||||||
trackTheme: null,
|
|
||||||
corners: true,
|
|
||||||
mini: false,
|
|
||||||
highlight: true
|
|
||||||
},
|
|
||||||
|
|
||||||
_create: function() {
|
|
||||||
var $el = this.element,
|
|
||||||
elClass = this.options.mini ? "ui-rangeslider ui-mini" : "ui-rangeslider",
|
|
||||||
_inputFirst = $el.find( "input" ).first(),
|
|
||||||
_inputLast = $el.find( "input" ).last(),
|
|
||||||
_label = $el.find( "label" ).first(),
|
|
||||||
_sliderWidgetFirst = $.data( _inputFirst.get( 0 ), "mobile-slider" ) ||
|
|
||||||
$.data( _inputFirst.slider().get( 0 ), "mobile-slider" ),
|
|
||||||
_sliderWidgetLast = $.data( _inputLast.get(0), "mobile-slider" ) ||
|
|
||||||
$.data( _inputLast.slider().get( 0 ), "mobile-slider" ),
|
|
||||||
_sliderFirst = _sliderWidgetFirst.slider,
|
|
||||||
_sliderLast = _sliderWidgetLast.slider,
|
|
||||||
firstHandle = _sliderWidgetFirst.handle,
|
|
||||||
_sliders = $( "<div class='ui-rangeslider-sliders' />" ).appendTo( $el );
|
|
||||||
|
|
||||||
_inputFirst.addClass( "ui-rangeslider-first" );
|
|
||||||
_inputLast.addClass( "ui-rangeslider-last" );
|
|
||||||
$el.addClass( elClass );
|
|
||||||
|
|
||||||
_sliderFirst.appendTo( _sliders );
|
|
||||||
_sliderLast.appendTo( _sliders );
|
|
||||||
_label.insertBefore( $el );
|
|
||||||
firstHandle.prependTo( _sliderLast );
|
|
||||||
|
|
||||||
$.extend( this, {
|
|
||||||
_inputFirst: _inputFirst,
|
|
||||||
_inputLast: _inputLast,
|
|
||||||
_sliderFirst: _sliderFirst,
|
|
||||||
_sliderLast: _sliderLast,
|
|
||||||
_label: _label,
|
|
||||||
_targetVal: null,
|
|
||||||
_sliderTarget: false,
|
|
||||||
_sliders: _sliders,
|
|
||||||
_proxy: false
|
|
||||||
});
|
|
||||||
|
|
||||||
this.refresh();
|
|
||||||
this._on( this.element.find( "input.ui-slider-input" ), {
|
|
||||||
"slidebeforestart": "_slidebeforestart",
|
|
||||||
"slidestop": "_slidestop",
|
|
||||||
"slidedrag": "_slidedrag",
|
|
||||||
"slidebeforechange": "_change",
|
|
||||||
"blur": "_change",
|
|
||||||
"keyup": "_change"
|
|
||||||
});
|
|
||||||
this._on({
|
|
||||||
"mousedown":"_change"
|
|
||||||
});
|
|
||||||
this._on( this.element.closest( "form" ), {
|
|
||||||
"reset":"_handleReset"
|
|
||||||
});
|
|
||||||
this._on( firstHandle, {
|
|
||||||
"vmousedown": "_dragFirstHandle"
|
|
||||||
});
|
|
||||||
},
|
|
||||||
_handleReset: function() {
|
|
||||||
var self = this;
|
|
||||||
//we must wait for the stack to unwind before updateing other wise sliders will not have updated yet
|
|
||||||
setTimeout( function() {
|
|
||||||
self._updateHighlight();
|
|
||||||
},0);
|
|
||||||
},
|
|
||||||
|
|
||||||
_dragFirstHandle: function( event ) {
|
|
||||||
//if the first handle is dragged send the event to the first slider
|
|
||||||
$.data( this._inputFirst.get(0), "mobile-slider" ).dragging = true;
|
|
||||||
$.data( this._inputFirst.get(0), "mobile-slider" ).refresh( event );
|
|
||||||
$.data( this._inputFirst.get(0), "mobile-slider" )._trigger( "start" );
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
_slidedrag: function( event ) {
|
|
||||||
var first = $( event.target ).is( this._inputFirst ),
|
|
||||||
otherSlider = ( first ) ? this._inputLast : this._inputFirst;
|
|
||||||
|
|
||||||
this._sliderTarget = false;
|
|
||||||
//if the drag was initiated on an extreme and the other handle is focused send the events to
|
|
||||||
//the closest handle
|
|
||||||
if ( ( this._proxy === "first" && first ) || ( this._proxy === "last" && !first ) ) {
|
|
||||||
$.data( otherSlider.get(0), "mobile-slider" ).dragging = true;
|
|
||||||
$.data( otherSlider.get(0), "mobile-slider" ).refresh( event );
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_slidestop: function( event ) {
|
|
||||||
var first = $( event.target ).is( this._inputFirst );
|
|
||||||
|
|
||||||
this._proxy = false;
|
|
||||||
//this stops dragging of the handle and brings the active track to the front
|
|
||||||
//this makes clicks on the track go the the last handle used
|
|
||||||
this.element.find( "input" ).trigger( "vmouseup" );
|
|
||||||
this._sliderFirst.css( "z-index", first ? 1 : "" );
|
|
||||||
},
|
|
||||||
|
|
||||||
_slidebeforestart: function( event ) {
|
|
||||||
this._sliderTarget = false;
|
|
||||||
//if the track is the target remember this and the original value
|
|
||||||
if ( $( event.originalEvent.target ).hasClass( "ui-slider-track" ) ) {
|
|
||||||
this._sliderTarget = true;
|
|
||||||
this._targetVal = $( event.target ).val();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_setOptions: function( options ) {
|
|
||||||
if ( options.theme !== undefined ) {
|
|
||||||
this._setTheme( options.theme );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( options.trackTheme !== undefined ) {
|
|
||||||
this._setTrackTheme( options.trackTheme );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( options.mini !== undefined ) {
|
|
||||||
this._setMini( options.mini );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( options.highlight !== undefined ) {
|
|
||||||
this._setHighlight( options.highlight );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( options.disabled !== undefined ) {
|
|
||||||
this._setDisabled( options.disabled );
|
|
||||||
}
|
|
||||||
|
|
||||||
this._super( options );
|
|
||||||
this.refresh();
|
|
||||||
},
|
|
||||||
|
|
||||||
refresh: function() {
|
|
||||||
var $el = this.element,
|
|
||||||
o = this.options;
|
|
||||||
|
|
||||||
if ( this._inputFirst.is( ":disabled" ) || this._inputLast.is( ":disabled" ) ) {
|
|
||||||
this.options.disabled = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
$el.find( "input" ).slider({
|
|
||||||
theme: o.theme,
|
|
||||||
trackTheme: o.trackTheme,
|
|
||||||
disabled: o.disabled,
|
|
||||||
corners: o.corners,
|
|
||||||
mini: o.mini,
|
|
||||||
highlight: o.highlight
|
|
||||||
}).slider( "refresh" );
|
|
||||||
this._updateHighlight();
|
|
||||||
},
|
|
||||||
|
|
||||||
_change: function( event ) {
|
|
||||||
if ( event.type === "keyup" ) {
|
|
||||||
this._updateHighlight();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
var self = this,
|
|
||||||
min = parseFloat( this._inputFirst.val(), 10 ),
|
|
||||||
max = parseFloat( this._inputLast.val(), 10 ),
|
|
||||||
first = $( event.target ).hasClass( "ui-rangeslider-first" ),
|
|
||||||
thisSlider = first ? this._inputFirst : this._inputLast,
|
|
||||||
otherSlider = first ? this._inputLast : this._inputFirst;
|
|
||||||
|
|
||||||
if ( ( this._inputFirst.val() > this._inputLast.val() && event.type === "mousedown" && !$(event.target).hasClass("ui-slider-handle")) ) {
|
|
||||||
thisSlider.blur();
|
|
||||||
} else if ( event.type === "mousedown" ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if ( min > max && !this._sliderTarget ) {
|
|
||||||
//this prevents min from being greater then max
|
|
||||||
thisSlider.val( first ? max: min ).slider( "refresh" );
|
|
||||||
this._trigger( "normalize" );
|
|
||||||
} else if ( min > max ) {
|
|
||||||
//this makes it so clicks on the target on either extreme go to the closest handle
|
|
||||||
thisSlider.val( this._targetVal ).slider( "refresh" );
|
|
||||||
|
|
||||||
//You must wait for the stack to unwind so first slider is updated before updating second
|
|
||||||
setTimeout( function() {
|
|
||||||
otherSlider.val( first ? min: max ).slider( "refresh" );
|
|
||||||
$.data( otherSlider.get(0), "mobile-slider" ).handle.focus();
|
|
||||||
self._sliderFirst.css( "z-index", first ? "" : 1 );
|
|
||||||
self._trigger( "normalize" );
|
|
||||||
}, 0 );
|
|
||||||
this._proxy = ( first ) ? "first" : "last";
|
|
||||||
}
|
|
||||||
//fixes issue where when both _sliders are at min they cannot be adjusted
|
|
||||||
if ( min === max ) {
|
|
||||||
$.data( thisSlider.get(0), "mobile-slider" ).handle.css( "z-index", 1 );
|
|
||||||
$.data( otherSlider.get(0), "mobile-slider" ).handle.css( "z-index", 0 );
|
|
||||||
} else {
|
|
||||||
$.data( otherSlider.get(0), "mobile-slider" ).handle.css( "z-index", "" );
|
|
||||||
$.data( thisSlider.get(0), "mobile-slider" ).handle.css( "z-index", "" );
|
|
||||||
}
|
|
||||||
|
|
||||||
this._updateHighlight();
|
|
||||||
|
|
||||||
if ( min >= max ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_updateHighlight: function() {
|
|
||||||
var min = parseInt( $.data( this._inputFirst.get(0), "mobile-slider" ).handle.get(0).style.left, 10 ),
|
|
||||||
max = parseInt( $.data( this._inputLast.get(0), "mobile-slider" ).handle.get(0).style.left, 10 ),
|
|
||||||
width = (max - min);
|
|
||||||
|
|
||||||
this.element.find( ".ui-slider-bg" ).css({
|
|
||||||
"margin-left": min + "%",
|
|
||||||
"width": width + "%"
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
_setTheme: function( value ) {
|
|
||||||
this._inputFirst.slider( "option", "theme", value );
|
|
||||||
this._inputLast.slider( "option", "theme", value );
|
|
||||||
},
|
|
||||||
|
|
||||||
_setTrackTheme: function( value ) {
|
|
||||||
this._inputFirst.slider( "option", "trackTheme", value );
|
|
||||||
this._inputLast.slider( "option", "trackTheme", value );
|
|
||||||
},
|
|
||||||
|
|
||||||
_setMini: function( value ) {
|
|
||||||
this._inputFirst.slider( "option", "mini", value );
|
|
||||||
this._inputLast.slider( "option", "mini", value );
|
|
||||||
this.element.toggleClass( "ui-mini", !!value );
|
|
||||||
},
|
|
||||||
|
|
||||||
_setHighlight: function( value ) {
|
|
||||||
this._inputFirst.slider( "option", "highlight", value );
|
|
||||||
this._inputLast.slider( "option", "highlight", value );
|
|
||||||
},
|
|
||||||
|
|
||||||
_setDisabled: function( value ) {
|
|
||||||
this._inputFirst.prop( "disabled", value );
|
|
||||||
this._inputLast.prop( "disabled", value );
|
|
||||||
},
|
|
||||||
|
|
||||||
_destroy: function() {
|
|
||||||
this._label.prependTo( this.element );
|
|
||||||
this.element.removeClass( "ui-rangeslider ui-mini" );
|
|
||||||
this._inputFirst.after( this._sliderFirst );
|
|
||||||
this._inputLast.after( this._sliderLast );
|
|
||||||
this._sliders.remove();
|
|
||||||
this.element.find( "input" ).removeClass( "ui-rangeslider-first ui-rangeslider-last" ).slider( "destroy" );
|
|
||||||
}
|
|
||||||
|
|
||||||
}, $.mobile.behaviors.formReset ) );
|
|
||||||
|
|
||||||
})( jQuery );
|
|
||||||
|
|
||||||
(function( $, undefined ) {
|
|
||||||
|
|
||||||
$.widget( "mobile.selectmenu", $.extend( {
|
$.widget( "mobile.selectmenu", $.extend( {
|
||||||
initSelector: "select:not( [data-role='slider'])",
|
initSelector: "select:not( [data-role='slider'])",
|
||||||
|
|
||||||
|
|
@ -9094,123 +8255,6 @@ $.widget( "mobile.selectmenu", $.extend( {
|
||||||
|
|
||||||
(function( $, undefined ) {
|
(function( $, undefined ) {
|
||||||
|
|
||||||
var popup;
|
|
||||||
|
|
||||||
function getPopup() {
|
|
||||||
if ( !popup ) {
|
|
||||||
popup = $( "<div></div>", {
|
|
||||||
"class": "ui-slider-popup ui-shadow ui-corner-all"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return popup.clone();
|
|
||||||
}
|
|
||||||
|
|
||||||
$.widget( "mobile.slider", $.mobile.slider, {
|
|
||||||
options: {
|
|
||||||
popupEnabled: false,
|
|
||||||
showValue: false
|
|
||||||
},
|
|
||||||
|
|
||||||
_create: function() {
|
|
||||||
this._super();
|
|
||||||
|
|
||||||
$.extend( this, {
|
|
||||||
_currentValue: null,
|
|
||||||
_popup: null,
|
|
||||||
_popupVisible: false
|
|
||||||
});
|
|
||||||
|
|
||||||
this._setOption( "popupEnabled", this.options.popupEnabled );
|
|
||||||
|
|
||||||
this._on( this.handle, { "vmousedown" : "_showPopup" } );
|
|
||||||
this._on( this.slider.add( this.document ), { "vmouseup" : "_hidePopup" } );
|
|
||||||
this._refresh();
|
|
||||||
},
|
|
||||||
|
|
||||||
// position the popup centered 5px above the handle
|
|
||||||
_positionPopup: function() {
|
|
||||||
var dstOffset = this.handle.offset();
|
|
||||||
|
|
||||||
this._popup.offset( {
|
|
||||||
left: dstOffset.left + ( this.handle.width() - this._popup.width() ) / 2,
|
|
||||||
top: dstOffset.top - this._popup.outerHeight() - 5
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
_setOption: function( key, value ) {
|
|
||||||
this._super( key, value );
|
|
||||||
|
|
||||||
if ( key === "showValue" ) {
|
|
||||||
this.handle.html( value && !this.options.mini ? this._value() : "" );
|
|
||||||
} else if ( key === "popupEnabled" ) {
|
|
||||||
if ( value && !this._popup ) {
|
|
||||||
this._popup = getPopup()
|
|
||||||
.addClass( "ui-body-" + ( this.options.theme || "a" ) )
|
|
||||||
.hide()
|
|
||||||
.insertBefore( this.element );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// show value on the handle and in popup
|
|
||||||
refresh: function() {
|
|
||||||
this._super.apply( this, arguments );
|
|
||||||
this._refresh();
|
|
||||||
},
|
|
||||||
|
|
||||||
_refresh: function() {
|
|
||||||
var o = this.options, newValue;
|
|
||||||
|
|
||||||
if ( o.popupEnabled ) {
|
|
||||||
// remove the title attribute from the handle (which is
|
|
||||||
// responsible for the annoying tooltip); NB we have
|
|
||||||
// to do it here as the jqm slider sets it every time
|
|
||||||
// the slider's value changes :(
|
|
||||||
this.handle.removeAttr( "title" );
|
|
||||||
}
|
|
||||||
|
|
||||||
newValue = this._value();
|
|
||||||
if ( newValue === this._currentValue ) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this._currentValue = newValue;
|
|
||||||
|
|
||||||
if ( o.popupEnabled && this._popup ) {
|
|
||||||
this._positionPopup();
|
|
||||||
this._popup.html( newValue );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( o.showValue && !this.options.mini ) {
|
|
||||||
this.handle.html( newValue );
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_showPopup: function() {
|
|
||||||
if ( this.options.popupEnabled && !this._popupVisible ) {
|
|
||||||
this.handle.html( "" );
|
|
||||||
this._popup.show();
|
|
||||||
this._positionPopup();
|
|
||||||
this._popupVisible = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_hidePopup: function() {
|
|
||||||
var o = this.options;
|
|
||||||
|
|
||||||
if ( o.popupEnabled && this._popupVisible ) {
|
|
||||||
if ( o.showValue && !o.mini ) {
|
|
||||||
this.handle.html( this._value() );
|
|
||||||
}
|
|
||||||
this._popup.hide();
|
|
||||||
this._popupVisible = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
})( jQuery );
|
|
||||||
|
|
||||||
(function( $, undefined ) {
|
|
||||||
|
|
||||||
var getAttr = $.mobile.getAttribute;
|
var getAttr = $.mobile.getAttribute;
|
||||||
|
|
||||||
$.widget( "mobile.listview", $.extend( {
|
$.widget( "mobile.listview", $.extend( {
|
||||||
|
|
|
||||||
|
|
@ -1021,72 +1021,6 @@ textarea.ui-input-text.ui-textinput-autogrow {
|
||||||
clip: rect(1px,1px,1px,1px);
|
clip: rect(1px,1px,1px,1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-rangeslider {
|
|
||||||
margin: .5em 0;
|
|
||||||
}
|
|
||||||
.ui-rangeslider:before,
|
|
||||||
.ui-rangeslider:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
.ui-rangeslider:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.ui-rangeslider .ui-slider-input.ui-rangeslider-last {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.ui-rangeslider .ui-rangeslider-sliders {
|
|
||||||
position: relative;
|
|
||||||
overflow: visible;
|
|
||||||
height: 30px;
|
|
||||||
margin: 0 68px;
|
|
||||||
}
|
|
||||||
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track {
|
|
||||||
position: absolute;
|
|
||||||
top: 6px;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track {
|
|
||||||
top: 8px;
|
|
||||||
}
|
|
||||||
.ui-rangeslider .ui-slider-track:first-child .ui-slider-bg {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
|
|
||||||
background-color: transparent;
|
|
||||||
background: none;
|
|
||||||
border-width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* this makes ie6 and ie7 set height to 0 to fix z-index problem */
|
|
||||||
html >/**/body .ui-rangeslider .ui-rangeslider-sliders .ui-slider-track:first-child {
|
|
||||||
height: 15px;
|
|
||||||
border-width: 1px;
|
|
||||||
}
|
|
||||||
html >/**/body .ui-rangeslider.ui-mini .ui-rangeslider-sliders .ui-slider-track:first-child {
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide the second label (the first is moved outside the div) */
|
|
||||||
div.ui-rangeslider label {
|
|
||||||
position: absolute !important;
|
|
||||||
height: 1px;
|
|
||||||
width: 1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(1px,1px,1px,1px);
|
|
||||||
}
|
|
||||||
.ui-field-contain .ui-rangeslider input.ui-slider-input,
|
|
||||||
.ui-field-contain .ui-rangeslider.ui-mini input.ui-slider-input,
|
|
||||||
.ui-field-contain .ui-rangeslider .ui-rangeslider-sliders,
|
|
||||||
.ui-field-contain .ui-rangeslider.ui-mini .ui-rangeslider-sliders {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.ui-select {
|
.ui-select {
|
||||||
margin-top: .5em;
|
margin-top: .5em;
|
||||||
margin-bottom: .5em; /* no shorthand for margin because it would override margin-right for inline selects */
|
margin-bottom: .5em; /* no shorthand for margin because it would override margin-right for inline selects */
|
||||||
|
|
@ -1226,192 +1160,6 @@ div.ui-rangeslider label {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
div.ui-slider {
|
|
||||||
height: 30px;
|
|
||||||
margin: .5em 0;
|
|
||||||
padding: 0;
|
|
||||||
-ms-touch-action: pan-y pinch-zoom double-tap-zoom;
|
|
||||||
}
|
|
||||||
div.ui-slider:before,
|
|
||||||
div.ui-slider:after {
|
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
div.ui-slider:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
input.ui-slider-input {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0;
|
|
||||||
padding: 4px;
|
|
||||||
width: 40px;
|
|
||||||
height: 20px;
|
|
||||||
line-height: 20px;
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
outline: 0;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
-webkit-box-sizing: content-box;
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
.ui-slider-input::-webkit-outer-spin-button,
|
|
||||||
.ui-slider-input::-webkit-inner-spin-button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.ui-slider-track {
|
|
||||||
position: relative;
|
|
||||||
overflow: visible;
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
height: 15px;
|
|
||||||
margin: 0 15px 0 68px;
|
|
||||||
top: 6px;
|
|
||||||
}
|
|
||||||
.ui-slider-track.ui-mini {
|
|
||||||
height: 12px;
|
|
||||||
top: 8px;
|
|
||||||
}
|
|
||||||
.ui-slider-track .ui-slider-bg {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
/* High level of specificity to override button margins in grids */
|
|
||||||
.ui-slider-track .ui-btn.ui-slider-handle {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
top: 50%;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
margin: -15px 0 0 -15px;
|
|
||||||
outline: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.ui-slider-track.ui-mini .ui-slider-handle {
|
|
||||||
height: 14px;
|
|
||||||
width: 14px;
|
|
||||||
margin: -8px 0 0 -8px;
|
|
||||||
}
|
|
||||||
select.ui-slider-switch {
|
|
||||||
position: absolute !important;
|
|
||||||
height: 1px;
|
|
||||||
width: 1px;
|
|
||||||
overflow: hidden;
|
|
||||||
clip: rect(1px,1px,1px,1px);
|
|
||||||
}
|
|
||||||
div.ui-slider-switch {
|
|
||||||
display: inline-block;
|
|
||||||
height: 32px;
|
|
||||||
width: 5.8em;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
/* reset the clearfix */
|
|
||||||
div.ui-slider-switch:before,
|
|
||||||
div.ui-slider-switch:after {
|
|
||||||
display: none;
|
|
||||||
clear: none;
|
|
||||||
}
|
|
||||||
div.ui-slider-switch.ui-mini {
|
|
||||||
height: 29px;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.ui-slider-inneroffset {
|
|
||||||
margin: 0 16px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.ui-slider-switch.ui-mini .ui-slider-inneroffset {
|
|
||||||
margin: 0 15px 0 14px;
|
|
||||||
}
|
|
||||||
.ui-slider-switch .ui-btn.ui-slider-handle {
|
|
||||||
margin: 1px 0 0 -15px;
|
|
||||||
}
|
|
||||||
.ui-slider-switch.ui-mini .ui-slider-handle {
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
margin: 1px 0 0 -13px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.ui-slider-handle-snapping {
|
|
||||||
-webkit-transition: left 70ms linear;
|
|
||||||
-moz-transition: left 70ms linear;
|
|
||||||
transition: left 70ms linear;
|
|
||||||
}
|
|
||||||
.ui-slider-switch .ui-slider-label {
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 16px;
|
|
||||||
top: 0;
|
|
||||||
line-height: 2;
|
|
||||||
min-height: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.ui-slider-switch.ui-mini .ui-slider-label {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.ui-slider-switch .ui-slider-label-a {
|
|
||||||
z-index: 1;
|
|
||||||
left: 0;
|
|
||||||
text-indent: -1.5em;
|
|
||||||
}
|
|
||||||
.ui-slider-switch .ui-slider-label-b {
|
|
||||||
z-index: 0;
|
|
||||||
right: 0;
|
|
||||||
text-indent: 1.5em;
|
|
||||||
}
|
|
||||||
/* The corner radii for ui-slider-switch/track can be specified in theme CSS. The bg and handle inherits. */
|
|
||||||
.ui-slider-track .ui-slider-bg,
|
|
||||||
.ui-slider-switch .ui-slider-label,
|
|
||||||
.ui-slider-switch .ui-slider-inneroffset,
|
|
||||||
.ui-slider-handle {
|
|
||||||
-webkit-border-radius: inherit;
|
|
||||||
border-radius: inherit;
|
|
||||||
}
|
|
||||||
.ui-field-contain div.ui-slider-switch {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
/* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
|
|
||||||
.ui-field-contain div.ui-slider-switch,
|
|
||||||
.ui-field-contain.ui-hide-label div.ui-slider-switch,
|
|
||||||
html .ui-popup .ui-field-contain div.ui-slider-switch {
|
|
||||||
display: inline-block;
|
|
||||||
width: 5.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* slider tooltip
|
|
||||||
-----------------------------------------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
.ui-slider-popup {
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
font-size: 36px;
|
|
||||||
padding-top: 14px;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-slider-popup {
|
|
||||||
position: absolute !important;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ui-slider-track .ui-btn.ui-slider-handle {
|
|
||||||
font-size: .9em;
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.ui-input-text,
|
.ui-input-text,
|
||||||
.ui-input-search {
|
.ui-input-search {
|
||||||
margin: .5em 0;
|
margin: .5em 0;
|
||||||
|
|
|
||||||
|
|
@ -350,13 +350,7 @@ html head + body .ui-btn.ui-btn-a.ui-btn-active,
|
||||||
html .ui-bar-a .ui-checkbox-on:after,
|
html .ui-bar-a .ui-checkbox-on:after,
|
||||||
html .ui-body-a .ui-checkbox-on:after,
|
html .ui-body-a .ui-checkbox-on:after,
|
||||||
html body .ui-group-theme-a .ui-checkbox-on:after,
|
html body .ui-group-theme-a .ui-checkbox-on:after,
|
||||||
.ui-btn.ui-checkbox-on.ui-btn-a:after,
|
.ui-btn.ui-checkbox-on.ui-btn-a:after {
|
||||||
/* Active slider track */
|
|
||||||
.ui-page-theme-a .ui-slider-track .ui-btn-active,
|
|
||||||
html .ui-bar-a .ui-slider-track .ui-btn-active,
|
|
||||||
html .ui-body-a .ui-slider-track .ui-btn-active,
|
|
||||||
html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
|
|
||||||
html body div.ui-slider-track.ui-body-a .ui-btn-active {
|
|
||||||
background-color: #3388cc /*{a-active-background-color}*/;
|
background-color: #3388cc /*{a-active-background-color}*/;
|
||||||
border-color: #3388cc /*{a-active-border}*/;
|
border-color: #3388cc /*{a-active-border}*/;
|
||||||
color: #fff /*{a-active-color}*/;
|
color: #fff /*{a-active-color}*/;
|
||||||
|
|
@ -514,13 +508,7 @@ html head + body .ui-btn.ui-btn-b.ui-btn-active,
|
||||||
html .ui-bar-b .ui-checkbox-on:after,
|
html .ui-bar-b .ui-checkbox-on:after,
|
||||||
html .ui-body-b .ui-checkbox-on:after,
|
html .ui-body-b .ui-checkbox-on:after,
|
||||||
html body .ui-group-theme-b .ui-checkbox-on:after,
|
html body .ui-group-theme-b .ui-checkbox-on:after,
|
||||||
.ui-btn.ui-checkbox-on.ui-btn-b:after,
|
.ui-btn.ui-checkbox-on.ui-btn-b:after {
|
||||||
/* Active slider track */
|
|
||||||
.ui-page-theme-b .ui-slider-track .ui-btn-active,
|
|
||||||
html .ui-bar-b .ui-slider-track .ui-btn-active,
|
|
||||||
html .ui-body-b .ui-slider-track .ui-btn-active,
|
|
||||||
html body .ui-group-theme-b .ui-slider-track .ui-btn-active,
|
|
||||||
html body div.ui-slider-track.ui-body-b .ui-btn-active {
|
|
||||||
background-color: #22aadd /*{b-active-background-color}*/;
|
background-color: #22aadd /*{b-active-background-color}*/;
|
||||||
border-color: #22aadd /*{b-active-border}*/;
|
border-color: #22aadd /*{b-active-border}*/;
|
||||||
color: #fff /*{b-active-color}*/;
|
color: #fff /*{b-active-color}*/;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue