|
@@ -25,16 +25,14 @@
|
|
|
|
|
|
|
|
var Slider = function (element, options) {
|
|
var Slider = function (element, options) {
|
|
|
var el = this.element = $(element).hide();
|
|
var el = this.element = $(element).hide();
|
|
|
- var origWidth = $(element)[0].style.width;
|
|
|
|
|
-
|
|
|
|
|
var updateSlider = false;
|
|
var updateSlider = false;
|
|
|
var parent = this.element.parent();
|
|
var parent = this.element.parent();
|
|
|
|
|
|
|
|
-
|
|
|
|
|
- if (parent.hasClass('slider') === true) {
|
|
|
|
|
|
|
+ if (parent.hasClass("slider") === true) {
|
|
|
updateSlider = true;
|
|
updateSlider = true;
|
|
|
this.picker = parent;
|
|
this.picker = parent;
|
|
|
- } else {
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
this.picker = $('<div class="slider">' +
|
|
this.picker = $('<div class="slider">' +
|
|
|
'<div class="slider-track">' +
|
|
'<div class="slider-track">' +
|
|
|
'<div class="slider-selection"></div>' +
|
|
'<div class="slider-selection"></div>' +
|
|
@@ -52,59 +50,59 @@
|
|
|
.append(this.element);
|
|
.append(this.element);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- this.id = this.element.data('slider-id') || options.id;
|
|
|
|
|
|
|
+ this.id = this.element.data("slider-id") || options.id;
|
|
|
if (this.id) {
|
|
if (this.id) {
|
|
|
this.picker[0].id = this.id;
|
|
this.picker[0].id = this.id;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- if (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch) {
|
|
|
|
|
|
|
+ if (("ontouchstart" in window) || window.DocumentTouch && document instanceof window.DocumentTouch) {
|
|
|
this.touchCapable = true;
|
|
this.touchCapable = true;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- var tooltip = this.element.data('slider-tooltip') || options.tooltip;
|
|
|
|
|
|
|
+ var tooltip = this.element.data("slider-tooltip") || options.tooltip;
|
|
|
|
|
|
|
|
- this.tooltip = this.picker.find('#tooltip');
|
|
|
|
|
- this.tooltipInner = this.tooltip.find('input.tooltip-inner');
|
|
|
|
|
|
|
+ this.tooltip = this.picker.find("#tooltip");
|
|
|
|
|
+ this.tooltipInner = this.tooltip.find("input.tooltip-inner");
|
|
|
|
|
|
|
|
- this.tooltip_start = this.picker.find('#tooltip_start');
|
|
|
|
|
- this.tooltipInner_start = this.tooltip_start.find('input.tooltip-inner');
|
|
|
|
|
|
|
+ this.tooltip_start = this.picker.find("#tooltip_start");
|
|
|
|
|
+ this.tooltipInner_start = this.tooltip_start.find("input.tooltip-inner");
|
|
|
|
|
|
|
|
- this.tooltip_end = this.picker.find('#tooltip_end');
|
|
|
|
|
- this.tooltipInner_end = this.tooltip_end.find('input.tooltip-inner');
|
|
|
|
|
|
|
+ this.tooltip_end = this.picker.find("#tooltip_end");
|
|
|
|
|
+ this.tooltipInner_end = this.tooltip_end.find("input.tooltip-inner");
|
|
|
|
|
|
|
|
- this.tooltip_min = this.picker.find('#tooltip_min');
|
|
|
|
|
- this.tooltipInner_min = this.tooltip_min.find('input.tooltip-inner');
|
|
|
|
|
|
|
+ this.tooltip_min = this.picker.find("#tooltip_min");
|
|
|
|
|
+ this.tooltipInner_min = this.tooltip_min.find("input.tooltip-inner");
|
|
|
|
|
|
|
|
- this.tooltip_max = this.picker.find('#tooltip_max');
|
|
|
|
|
- this.tooltipInner_max = this.tooltip_max.find('input.tooltip-inner');
|
|
|
|
|
|
|
+ this.tooltip_max = this.picker.find("#tooltip_max");
|
|
|
|
|
+ this.tooltipInner_max = this.tooltip_max.find("input.tooltip-inner");
|
|
|
|
|
|
|
|
- this.tooltip_step = this.picker.find('#tooltip_step');
|
|
|
|
|
- this.tooltipInner_step = this.tooltip_step.find('input.tooltip-inner');
|
|
|
|
|
|
|
+ this.tooltip_step = this.picker.find("#tooltip_step");
|
|
|
|
|
+ this.tooltipInner_step = this.tooltip_step.find("input.tooltip-inner");
|
|
|
|
|
|
|
|
if (updateSlider === true) {
|
|
if (updateSlider === true) {
|
|
|
// Reset classes
|
|
// Reset classes
|
|
|
- this.picker.removeClass('slider-horizontal');
|
|
|
|
|
- this.picker.removeClass('slider-vertical');
|
|
|
|
|
- this.tooltip.removeClass('hide');
|
|
|
|
|
- this.tooltip_start.removeClass('hide');
|
|
|
|
|
- this.tooltip_end.removeClass('hide');
|
|
|
|
|
- this.tooltip_min.removeClass('hide');
|
|
|
|
|
- this.tooltip_max.removeClass('hide');
|
|
|
|
|
- this.tooltip_step.removeClass('hide');
|
|
|
|
|
|
|
+ this.picker.removeClass("slider-horizontal");
|
|
|
|
|
+ this.picker.removeClass("slider-vertical");
|
|
|
|
|
+ this.tooltip.removeClass("hide");
|
|
|
|
|
+ this.tooltip_start.removeClass("hide");
|
|
|
|
|
+ this.tooltip_end.removeClass("hide");
|
|
|
|
|
+ this.tooltip_min.removeClass("hide");
|
|
|
|
|
+ this.tooltip_max.removeClass("hide");
|
|
|
|
|
+ this.tooltip_step.removeClass("hide");
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
this.picker
|
|
this.picker
|
|
|
- .addClass('slider-horizontal')
|
|
|
|
|
- this.picker.width(this.element.parents(".card-widget").innerWidth() - 30);
|
|
|
|
|
- this.stylePos = 'left';
|
|
|
|
|
- this.mousePos = 'pageX';
|
|
|
|
|
- this.sizePos = 'offsetWidth';
|
|
|
|
|
- this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px';
|
|
|
|
|
- this.tooltip_start.addClass('top')[0].style.top = '-30px';
|
|
|
|
|
- this.tooltip_end.addClass('top')[0].style.top = '-30px';
|
|
|
|
|
- this.tooltip_min.addClass('top')[0].style.top = '18px';
|
|
|
|
|
- this.tooltip_max.addClass('top')[0].style.top = '18px';
|
|
|
|
|
- this.tooltip_step.addClass('top')[0].style.top = '18px';
|
|
|
|
|
|
|
+ .addClass("slider-horizontal")
|
|
|
|
|
+ this.picker.width(Math.min(this.element.parents(".card-widget").innerWidth() - 30, 250));
|
|
|
|
|
+ this.stylePos = "left";
|
|
|
|
|
+ this.mousePos = "pageX";
|
|
|
|
|
+ this.sizePos = "offsetWidth";
|
|
|
|
|
+ this.tooltip.addClass("top")[0].style.top = -this.tooltip.outerHeight() - 14 + "px";
|
|
|
|
|
+ this.tooltip_start.addClass("top")[0].style.top = "-30px";
|
|
|
|
|
+ this.tooltip_end.addClass("top")[0].style.top = "-30px";
|
|
|
|
|
+ this.tooltip_min.addClass("top")[0].style.top = "18px";
|
|
|
|
|
+ this.tooltip_max.addClass("top")[0].style.top = "18px";
|
|
|
|
|
+ this.tooltip_step.addClass("top")[0].style.top = "18px";
|
|
|
|
|
|
|
|
this.tooltipInner_start.on({
|
|
this.tooltipInner_start.on({
|
|
|
blur: $.proxy(this.blur, this, 0),
|
|
blur: $.proxy(this.blur, this, 0),
|
|
@@ -138,21 +136,21 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
var self = this;
|
|
var self = this;
|
|
|
- $.each(['min',
|
|
|
|
|
- 'max',
|
|
|
|
|
- 'step',
|
|
|
|
|
- 'precision',
|
|
|
|
|
- 'value',
|
|
|
|
|
- 'start',
|
|
|
|
|
- 'end',
|
|
|
|
|
- 'reversed',
|
|
|
|
|
- 'handle'
|
|
|
|
|
|
|
+ $.each(["min",
|
|
|
|
|
+ "max",
|
|
|
|
|
+ "step",
|
|
|
|
|
+ "precision",
|
|
|
|
|
+ "value",
|
|
|
|
|
+ "start",
|
|
|
|
|
+ "end",
|
|
|
|
|
+ "reversed",
|
|
|
|
|
+ "handle"
|
|
|
], function (i, attr) {
|
|
], function (i, attr) {
|
|
|
- if (typeof el.data('slider-' + attr) !== 'undefined') {
|
|
|
|
|
- self[attr] = el.data('slider-' + attr);
|
|
|
|
|
- } else if (typeof options[attr] !== 'undefined') {
|
|
|
|
|
|
|
+ if (typeof el.data("slider-" + attr) !== "undefined") {
|
|
|
|
|
+ self[attr] = el.data("slider-" + attr);
|
|
|
|
|
+ } else if (typeof options[attr] !== "undefined") {
|
|
|
self[attr] = options[attr];
|
|
self[attr] = options[attr];
|
|
|
- } else if (typeof el.prop(attr) !== 'undefined') {
|
|
|
|
|
|
|
+ } else if (typeof el.prop(attr) !== "undefined") {
|
|
|
self[attr] = el.prop(attr);
|
|
self[attr] = el.prop(attr);
|
|
|
} else {
|
|
} else {
|
|
|
self[attr] = 0; // to prevent empty string issues in calculations in IE
|
|
self[attr] = 0; // to prevent empty string issues in calculations in IE
|
|
@@ -163,34 +161,34 @@
|
|
|
this.range = true;
|
|
this.range = true;
|
|
|
|
|
|
|
|
|
|
|
|
|
- this.selection = this.element.data('slider-selection') || options.selection;
|
|
|
|
|
- this.selectionEl = this.picker.find('.slider-selection');
|
|
|
|
|
- if (this.selection === 'none') {
|
|
|
|
|
- this.selectionEl.addClass('hide');
|
|
|
|
|
|
|
+ this.selection = this.element.data("slider-selection") || options.selection;
|
|
|
|
|
+ this.selectionEl = this.picker.find(".slider-selection");
|
|
|
|
|
+ if (this.selection === "none") {
|
|
|
|
|
+ this.selectionEl.addClass("hide");
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
this.selectionElStyle = this.selectionEl[0].style;
|
|
this.selectionElStyle = this.selectionEl[0].style;
|
|
|
|
|
|
|
|
- this.handle1 = this.picker.find('.slider-handle:first');
|
|
|
|
|
|
|
+ this.handle1 = this.picker.find(".slider-handle:first");
|
|
|
this.handle1Stype = this.handle1[0].style;
|
|
this.handle1Stype = this.handle1[0].style;
|
|
|
|
|
|
|
|
- this.handle2 = this.picker.find('.slider-handle:last');
|
|
|
|
|
|
|
+ this.handle2 = this.picker.find(".slider-handle:last");
|
|
|
this.handle2Stype = this.handle2[0].style;
|
|
this.handle2Stype = this.handle2[0].style;
|
|
|
|
|
|
|
|
if (updateSlider === true) {
|
|
if (updateSlider === true) {
|
|
|
// Reset classes
|
|
// Reset classes
|
|
|
- this.handle1.removeClass('round triangle');
|
|
|
|
|
- this.handle2.removeClass('round triangle hide');
|
|
|
|
|
|
|
+ this.handle1.removeClass("round triangle");
|
|
|
|
|
+ this.handle2.removeClass("round triangle hide");
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
switch (this.handle) {
|
|
switch (this.handle) {
|
|
|
- case 'round':
|
|
|
|
|
- this.handle1.addClass('round');
|
|
|
|
|
- this.handle2.addClass('round');
|
|
|
|
|
|
|
+ case "round":
|
|
|
|
|
+ this.handle1.addClass("round");
|
|
|
|
|
+ this.handle2.addClass("round");
|
|
|
break;
|
|
break;
|
|
|
- case 'triangle':
|
|
|
|
|
- this.handle1.addClass('triangle');
|
|
|
|
|
- this.handle2.addClass('triangle');
|
|
|
|
|
|
|
+ case "triangle":
|
|
|
|
|
+ this.handle1.addClass("triangle");
|
|
|
|
|
+ this.handle2.addClass("triangle");
|
|
|
break;
|
|
break;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -221,11 +219,11 @@
|
|
|
mousedown: $.proxy(this.mousedown, this)
|
|
mousedown: $.proxy(this.mousedown, this)
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- if (tooltip === 'hide') {
|
|
|
|
|
- this.tooltip.addClass('hide');
|
|
|
|
|
- this.tooltip_start.addClass('hide');
|
|
|
|
|
- this.tooltip_end.addClass('hide');
|
|
|
|
|
- } else if (tooltip === 'always') {
|
|
|
|
|
|
|
+ if (tooltip === "hide") {
|
|
|
|
|
+ this.tooltip.addClass("hide");
|
|
|
|
|
+ this.tooltip_start.addClass("hide");
|
|
|
|
|
+ this.tooltip_end.addClass("hide");
|
|
|
|
|
+ } else if (tooltip === "always") {
|
|
|
this.showTooltip();
|
|
this.showTooltip();
|
|
|
this.alwaysShowTooltip = true;
|
|
this.alwaysShowTooltip = true;
|
|
|
} else {
|
|
} else {
|
|
@@ -244,13 +242,13 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
this.enabled = options.enabled &&
|
|
this.enabled = options.enabled &&
|
|
|
- (this.element.data('slider-enabled') === undefined || this.element.data('slider-enabled') === true);
|
|
|
|
|
|
|
+ (this.element.data("slider-enabled") === undefined || this.element.data("slider-enabled") === true);
|
|
|
if (this.enabled) {
|
|
if (this.enabled) {
|
|
|
this.enable();
|
|
this.enable();
|
|
|
} else {
|
|
} else {
|
|
|
this.disable();
|
|
this.disable();
|
|
|
}
|
|
}
|
|
|
- this.natural_arrow_keys = this.element.data('slider-natural_arrow_keys') || options.natural_arrow_keys;
|
|
|
|
|
|
|
+ this.natural_arrow_keys = this.element.data("slider-natural_arrow_keys") || options.natural_arrow_keys;
|
|
|
this.layout();
|
|
this.layout();
|
|
|
|
|
|
|
|
var _self = this;
|
|
var _self = this;
|
|
@@ -271,13 +269,13 @@
|
|
|
|
|
|
|
|
showTooltip: function () {
|
|
showTooltip: function () {
|
|
|
if (this.tooltip_split === false) {
|
|
if (this.tooltip_split === false) {
|
|
|
- this.tooltip.addClass('in');
|
|
|
|
|
|
|
+ this.tooltip.addClass("in");
|
|
|
} else {
|
|
} else {
|
|
|
- this.tooltip_start.addClass('in');
|
|
|
|
|
- this.tooltip_end.addClass('in');
|
|
|
|
|
- this.tooltip_min.addClass('in');
|
|
|
|
|
- this.tooltip_max.addClass('in');
|
|
|
|
|
- this.tooltip_step.addClass('in');
|
|
|
|
|
|
|
+ this.tooltip_start.addClass("in");
|
|
|
|
|
+ this.tooltip_end.addClass("in");
|
|
|
|
|
+ this.tooltip_min.addClass("in");
|
|
|
|
|
+ this.tooltip_max.addClass("in");
|
|
|
|
|
+ this.tooltip_step.addClass("in");
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
this.over = true;
|
|
this.over = true;
|
|
@@ -285,12 +283,12 @@
|
|
|
|
|
|
|
|
hideTooltip: function () {
|
|
hideTooltip: function () {
|
|
|
if (this.inDrag === false && this.alwaysShowTooltip !== true) {
|
|
if (this.inDrag === false && this.alwaysShowTooltip !== true) {
|
|
|
- this.tooltip.removeClass('in');
|
|
|
|
|
- this.tooltip_start.removeClass('in');
|
|
|
|
|
- this.tooltip_end.removeClass('in');
|
|
|
|
|
- this.tooltip_min.removeClass('in');
|
|
|
|
|
- this.tooltip_max.removeClass('in');
|
|
|
|
|
- this.tooltip_step.removeClass('in');
|
|
|
|
|
|
|
+ this.tooltip.removeClass("in");
|
|
|
|
|
+ this.tooltip_start.removeClass("in");
|
|
|
|
|
+ this.tooltip_end.removeClass("in");
|
|
|
|
|
+ this.tooltip_min.removeClass("in");
|
|
|
|
|
+ this.tooltip_max.removeClass("in");
|
|
|
|
|
+ this.tooltip_step.removeClass("in");
|
|
|
}
|
|
}
|
|
|
this.over = false;
|
|
this.over = false;
|
|
|
},
|
|
},
|
|
@@ -298,7 +296,7 @@
|
|
|
layout: function () {
|
|
layout: function () {
|
|
|
var positionPercentages;
|
|
var positionPercentages;
|
|
|
|
|
|
|
|
- this.picker.width(this.element.parents(".card-widget").innerWidth() - 30);
|
|
|
|
|
|
|
+ this.picker.width(Math.min(this.element.parents(".card-widget").innerWidth() - 30, 250));
|
|
|
this.size = this.picker[0][this.sizePos];
|
|
this.size = this.picker[0][this.sizePos];
|
|
|
|
|
|
|
|
if (this.reversed) {
|
|
if (this.reversed) {
|
|
@@ -307,11 +305,11 @@
|
|
|
positionPercentages = [ this.percentage[0], this.percentage[1] ];
|
|
positionPercentages = [ this.percentage[0], this.percentage[1] ];
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- this.handle1Stype[this.stylePos] = positionPercentages[0] + '%';
|
|
|
|
|
- this.handle2Stype[this.stylePos] = positionPercentages[1] + '%';
|
|
|
|
|
|
|
+ this.handle1Stype[this.stylePos] = positionPercentages[0] + "%";
|
|
|
|
|
+ this.handle2Stype[this.stylePos] = positionPercentages[1] + "%";
|
|
|
|
|
|
|
|
- this.selectionElStyle.left = Math.min(positionPercentages[0], positionPercentages[1]) + '%';
|
|
|
|
|
- this.selectionElStyle.width = Math.abs(positionPercentages[0] - positionPercentages[1]) + '%';
|
|
|
|
|
|
|
+ this.selectionElStyle.left = Math.min(positionPercentages[0], positionPercentages[1]) + "%";
|
|
|
|
|
+ this.selectionElStyle.width = Math.abs(positionPercentages[0] - positionPercentages[1]) + "%";
|
|
|
|
|
|
|
|
this.tooltip_min.addClass("bottom");
|
|
this.tooltip_min.addClass("bottom");
|
|
|
this.tooltip_max.addClass("bottom");
|
|
this.tooltip_max.addClass("bottom");
|
|
@@ -321,7 +319,7 @@
|
|
|
this.tooltipInner.val(
|
|
this.tooltipInner.val(
|
|
|
this.formatter(this.value[0]) + this.tooltip_separator + this.formatter(this.value[1])
|
|
this.formatter(this.value[0]) + this.tooltip_separator + this.formatter(this.value[1])
|
|
|
);
|
|
);
|
|
|
- this.tooltip[0].style[this.stylePos] = this.size * (positionPercentages[0] + (positionPercentages[1] - positionPercentages[0]) / 2) / 100 - (this.tooltip.outerWidth() / 2) + 'px';
|
|
|
|
|
|
|
+ this.tooltip[0].style[this.stylePos] = this.size * (positionPercentages[0] + (positionPercentages[1] - positionPercentages[0]) / 2) / 100 - (this.tooltip.outerWidth() / 2) + "px";
|
|
|
|
|
|
|
|
this.tooltipInner_start.val(
|
|
this.tooltipInner_start.val(
|
|
|
this.formatter(this.value[0])
|
|
this.formatter(this.value[0])
|
|
@@ -340,18 +338,18 @@
|
|
|
this.formatter(this.step)
|
|
this.formatter(this.step)
|
|
|
);
|
|
);
|
|
|
|
|
|
|
|
- this.tooltip_start[0].style[this.stylePos] = this.size * ( (positionPercentages[0]) / 100) - (this.tooltip_start.outerWidth() / 2) + 'px';
|
|
|
|
|
- this.tooltip_end[0].style[this.stylePos] = this.size * ( (positionPercentages[1]) / 100) - (this.tooltip_end.outerWidth() / 2) + 'px';
|
|
|
|
|
|
|
+ this.tooltip_start[0].style[this.stylePos] = this.size * ( (positionPercentages[0]) / 100) - (this.tooltip_start.outerWidth() / 2) + "px";
|
|
|
|
|
+ this.tooltip_end[0].style[this.stylePos] = this.size * ( (positionPercentages[1]) / 100) - (this.tooltip_end.outerWidth() / 2) + "px";
|
|
|
|
|
|
|
|
- this.tooltip_min[0].style[this.stylePos] = -(this.tooltip_min.outerWidth() / 2) + 'px';
|
|
|
|
|
- this.tooltip_max[0].style[this.stylePos] = this.size - (this.tooltip_max.outerWidth() / 2) + 'px';
|
|
|
|
|
- this.tooltip_step[0].style[this.stylePos] = this.size/2 - (this.tooltip_max.outerWidth() / 2) + 'px';
|
|
|
|
|
|
|
+ this.tooltip_min[0].style[this.stylePos] = -(this.tooltip_min.outerWidth() / 2) + "px";
|
|
|
|
|
+ this.tooltip_max[0].style[this.stylePos] = this.size - (this.tooltip_max.outerWidth() / 2) + "px";
|
|
|
|
|
+ this.tooltip_step[0].style[this.stylePos] = this.size/2 - (this.tooltip_max.outerWidth() / 2) + "px";
|
|
|
|
|
|
|
|
} else {
|
|
} else {
|
|
|
this.tooltipInner.val(
|
|
this.tooltipInner.val(
|
|
|
this.formatter(this.value[0])
|
|
this.formatter(this.value[0])
|
|
|
);
|
|
);
|
|
|
- this.tooltip[0].style[this.stylePos] = this.size * positionPercentages[0] / 100 - (this.tooltip.outerWidth() / 2) + 'px';
|
|
|
|
|
|
|
+ this.tooltip[0].style[this.stylePos] = this.size * positionPercentages[0] / 100 - (this.tooltip.outerWidth() / 2) + "px";
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
|
|
@@ -378,7 +376,7 @@
|
|
|
return false;
|
|
return false;
|
|
|
}
|
|
}
|
|
|
// Touch: Get the original event:
|
|
// Touch: Get the original event:
|
|
|
- if (this.touchCapable && ev.type === 'touchstart') {
|
|
|
|
|
|
|
+ if (this.touchCapable && ev.type === "touchstart") {
|
|
|
ev = ev.originalEvent;
|
|
ev = ev.originalEvent;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -424,11 +422,11 @@
|
|
|
this.inDrag = true;
|
|
this.inDrag = true;
|
|
|
var val = this.calculateValue();
|
|
var val = this.calculateValue();
|
|
|
this.element.trigger({
|
|
this.element.trigger({
|
|
|
- type: 'slideStart',
|
|
|
|
|
|
|
+ type: "slideStart",
|
|
|
value: val
|
|
value: val
|
|
|
})
|
|
})
|
|
|
- .data('value', val)
|
|
|
|
|
- .prop('value', val);
|
|
|
|
|
|
|
+ .data("value", val)
|
|
|
|
|
+ .prop("value", val);
|
|
|
this.setAdditionalValues();
|
|
this.setAdditionalValues();
|
|
|
this.setValue(val);
|
|
this.setValue(val);
|
|
|
return true;
|
|
return true;
|
|
@@ -487,22 +485,22 @@
|
|
|
var val = this.calculateValue();
|
|
var val = this.calculateValue();
|
|
|
|
|
|
|
|
this.element.trigger({
|
|
this.element.trigger({
|
|
|
- type: 'slideStart',
|
|
|
|
|
|
|
+ type: "slideStart",
|
|
|
value: val
|
|
value: val
|
|
|
})
|
|
})
|
|
|
- .data('value', val)
|
|
|
|
|
- .prop('value', val);
|
|
|
|
|
|
|
+ .data("value", val)
|
|
|
|
|
+ .prop("value", val);
|
|
|
|
|
|
|
|
this.setAdditionalValues();
|
|
this.setAdditionalValues();
|
|
|
this.setValue(val, true);
|
|
this.setValue(val, true);
|
|
|
|
|
|
|
|
this.element
|
|
this.element
|
|
|
.trigger({
|
|
.trigger({
|
|
|
- type: 'slideStop',
|
|
|
|
|
|
|
+ type: "slideStop",
|
|
|
value: val
|
|
value: val
|
|
|
})
|
|
})
|
|
|
- .data('value', val)
|
|
|
|
|
- .prop('value', val);
|
|
|
|
|
|
|
+ .data("value", val)
|
|
|
|
|
+ .prop("value", val);
|
|
|
return false;
|
|
return false;
|
|
|
},
|
|
},
|
|
|
|
|
|
|
@@ -511,7 +509,7 @@
|
|
|
return false;
|
|
return false;
|
|
|
}
|
|
}
|
|
|
// Touch: Get the original event:
|
|
// Touch: Get the original event:
|
|
|
- if (this.touchCapable && ev.type === 'touchmove') {
|
|
|
|
|
|
|
+ if (this.touchCapable && ev.type === "touchmove") {
|
|
|
ev = ev.originalEvent;
|
|
ev = ev.originalEvent;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -562,10 +560,10 @@
|
|
|
var val = this.calculateValue();
|
|
var val = this.calculateValue();
|
|
|
this.layout();
|
|
this.layout();
|
|
|
this.element
|
|
this.element
|
|
|
- .data('value', val)
|
|
|
|
|
- .prop('value', val)
|
|
|
|
|
|
|
+ .data("value", val)
|
|
|
|
|
+ .prop("value", val)
|
|
|
.trigger({
|
|
.trigger({
|
|
|
- type: 'slideStop',
|
|
|
|
|
|
|
+ type: "slideStop",
|
|
|
value: val
|
|
value: val
|
|
|
});
|
|
});
|
|
|
return false;
|
|
return false;
|
|
@@ -620,7 +618,7 @@
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
getPercentage: function (ev) {
|
|
getPercentage: function (ev) {
|
|
|
- if (this.touchCapable && (ev.type === 'touchstart' || ev.type === 'touchmove')) {
|
|
|
|
|
|
|
+ if (this.touchCapable && (ev.type === "touchstart" || ev.type === "touchmove")) {
|
|
|
ev = ev.touches[0];
|
|
ev = ev.touches[0];
|
|
|
}
|
|
}
|
|
|
var percentage = (ev[this.mousePos] - this.offset[this.stylePos]) * 100 / this.size;
|
|
var percentage = (ev[this.mousePos] - this.offset[this.stylePos]) * 100 / this.size;
|
|
@@ -658,8 +656,8 @@
|
|
|
} else {
|
|
} else {
|
|
|
this.value = this.applyPrecision(this.value);
|
|
this.value = this.applyPrecision(this.value);
|
|
|
this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
|
|
this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
|
|
|
- this.handle2.addClass('hide');
|
|
|
|
|
- if (this.selection === 'after') {
|
|
|
|
|
|
|
+ this.handle2.addClass("hide");
|
|
|
|
|
+ if (this.selection === "after") {
|
|
|
this.value[1] = this.max;
|
|
this.value[1] = this.max;
|
|
|
} else {
|
|
} else {
|
|
|
this.value[1] = this.min;
|
|
this.value[1] = this.min;
|
|
@@ -684,7 +682,7 @@
|
|
|
var slideEventValue = this.range ? this.value : this.value[0];
|
|
var slideEventValue = this.range ? this.value : this.value[0];
|
|
|
this.element
|
|
this.element
|
|
|
.trigger({
|
|
.trigger({
|
|
|
- 'type': 'slide',
|
|
|
|
|
|
|
+ 'type': "slide",
|
|
|
'value': slideEventValue,
|
|
'value': slideEventValue,
|
|
|
'min': this.min,
|
|
'min': this.min,
|
|
|
'max': this.max,
|
|
'max': this.max,
|
|
@@ -692,17 +690,17 @@
|
|
|
'end': this.end,
|
|
'end': this.end,
|
|
|
'step': this.step
|
|
'step': this.step
|
|
|
})
|
|
})
|
|
|
- .data('value', this.value)
|
|
|
|
|
- .prop('value', this.value);
|
|
|
|
|
|
|
+ .data("value", this.value)
|
|
|
|
|
+ .prop("value", this.value);
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
validateInputValue: function (val) {
|
|
validateInputValue: function (val) {
|
|
|
- if (typeof val === 'number') {
|
|
|
|
|
|
|
+ if (typeof val === "number") {
|
|
|
return val;
|
|
return val;
|
|
|
} else if (val instanceof Array) {
|
|
} else if (val instanceof Array) {
|
|
|
$.each(val, function (i, input) {
|
|
$.each(val, function (i, input) {
|
|
|
- if (typeof input !== 'number') {
|
|
|
|
|
|
|
+ if (typeof input !== "number") {
|
|
|
throw new Error(ErrorMsgs.formatInvalidInputErrorMsg(input));
|
|
throw new Error(ErrorMsgs.formatInvalidInputErrorMsg(input));
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
@@ -717,23 +715,23 @@
|
|
|
this.handle2.off();
|
|
this.handle2.off();
|
|
|
this.element.off().show().insertBefore(this.picker);
|
|
this.element.off().show().insertBefore(this.picker);
|
|
|
this.picker.off().remove();
|
|
this.picker.off().remove();
|
|
|
- $(this.element).removeData('slider');
|
|
|
|
|
|
|
+ $(this.element).removeData("slider");
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
disable: function () {
|
|
disable: function () {
|
|
|
this.enabled = false;
|
|
this.enabled = false;
|
|
|
this.handle1.removeAttr("tabindex");
|
|
this.handle1.removeAttr("tabindex");
|
|
|
this.handle2.removeAttr("tabindex");
|
|
this.handle2.removeAttr("tabindex");
|
|
|
- this.picker.addClass('slider-disabled');
|
|
|
|
|
- this.element.trigger('slideDisabled');
|
|
|
|
|
|
|
+ this.picker.addClass("slider-disabled");
|
|
|
|
|
+ this.element.trigger("slideDisabled");
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
enable: function () {
|
|
enable: function () {
|
|
|
this.enabled = true;
|
|
this.enabled = true;
|
|
|
this.handle1.attr("tabindex", 0);
|
|
this.handle1.attr("tabindex", 0);
|
|
|
this.handle2.attr("tabindex", 0);
|
|
this.handle2.attr("tabindex", 0);
|
|
|
- this.picker.removeClass('slider-disabled');
|
|
|
|
|
- this.element.trigger('slideEnabled');
|
|
|
|
|
|
|
+ this.picker.removeClass("slider-disabled");
|
|
|
|
|
+ this.element.trigger("slideEnabled");
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
toggle: function () {
|
|
toggle: function () {
|
|
@@ -772,7 +770,7 @@
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
$.fn.slider = function (option) {
|
|
$.fn.slider = function (option) {
|
|
|
- if (typeof option === 'string' && option !== 'refresh') {
|
|
|
|
|
|
|
+ if (typeof option === "string" && option !== "refresh") {
|
|
|
var args = Array.prototype.slice.call(arguments, 1);
|
|
var args = Array.prototype.slice.call(arguments, 1);
|
|
|
return invokePublicMethod.call(this, option, args);
|
|
return invokePublicMethod.call(this, option, args);
|
|
|
} else {
|
|
} else {
|
|
@@ -796,7 +794,7 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function retrieveSliderObjectFromElement(element) {
|
|
function retrieveSliderObjectFromElement(element) {
|
|
|
- var sliderObject = $(element).data('slider');
|
|
|
|
|
|
|
+ var sliderObject = $(element).data("slider");
|
|
|
if (sliderObject && sliderObject instanceof Slider) {
|
|
if (sliderObject && sliderObject instanceof Slider) {
|
|
|
return sliderObject;
|
|
return sliderObject;
|
|
|
} else {
|
|
} else {
|
|
@@ -808,8 +806,8 @@
|
|
|
var $this = $(this);
|
|
var $this = $(this);
|
|
|
$this.each(function () {
|
|
$this.each(function () {
|
|
|
var $this = $(this),
|
|
var $this = $(this),
|
|
|
- slider = $this.data('slider'),
|
|
|
|
|
- options = typeof opts === 'object' && opts;
|
|
|
|
|
|
|
+ slider = $this.data("slider"),
|
|
|
|
|
+ options = typeof opts === "object" && opts;
|
|
|
|
|
|
|
|
// If slider already exists, use its attributes
|
|
// If slider already exists, use its attributes
|
|
|
// as options so slider refreshes properly
|
|
// as options so slider refreshes properly
|
|
@@ -821,7 +819,7 @@
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- $this.data('slider', (new Slider(this, $.extend({}, $.fn.slider.defaults, options))));
|
|
|
|
|
|
|
+ $this.data("slider", (new Slider(this, $.extend({}, $.fn.slider.defaults, options))));
|
|
|
});
|
|
});
|
|
|
return $this;
|
|
return $this;
|
|
|
}
|
|
}
|
|
@@ -833,12 +831,12 @@
|
|
|
precision: 0,
|
|
precision: 0,
|
|
|
value: 5,
|
|
value: 5,
|
|
|
range: false,
|
|
range: false,
|
|
|
- selection: 'before',
|
|
|
|
|
- tooltip: 'show',
|
|
|
|
|
- tooltip_separator: ':',
|
|
|
|
|
|
|
+ selection: "before",
|
|
|
|
|
+ tooltip: "show",
|
|
|
|
|
+ tooltip_separator: ":",
|
|
|
tooltip_split: false,
|
|
tooltip_split: false,
|
|
|
natural_arrow_keys: false,
|
|
natural_arrow_keys: false,
|
|
|
- handle: 'round',
|
|
|
|
|
|
|
+ handle: "round",
|
|
|
reversed: false,
|
|
reversed: false,
|
|
|
enabled: true,
|
|
enabled: true,
|
|
|
formatter: function (value) {
|
|
formatter: function (value) {
|