You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2449 lines
83 KiB
2449 lines
83 KiB
// Ion.RangeSlider |
|
// version 2.3.1 Build: 382 |
|
// © Denis Ineshin, 2019 |
|
// https://github.com/IonDen |
|
// |
|
// Project page: http://ionden.com/a/plugins/ion.rangeSlider/en.html |
|
// GitHub page: https://github.com/IonDen/ion.rangeSlider |
|
// |
|
// Released under MIT licence: |
|
// http://ionden.com/a/plugins/licence-en.html |
|
// ===================================================================================================================== |
|
|
|
;(function(factory) { |
|
if ((typeof jQuery === 'undefined' || !jQuery) && typeof define === "function" && define.amd) { |
|
define(["jquery"], function (jQuery) { |
|
return factory(jQuery, document, window, navigator); |
|
}); |
|
} else if ((typeof jQuery === 'undefined' || !jQuery) && typeof exports === "object") { |
|
factory(require("jquery"), document, window, navigator); |
|
} else { |
|
factory(jQuery, document, window, navigator); |
|
} |
|
} (function ($, document, window, navigator, undefined) { |
|
"use strict"; |
|
|
|
// ================================================================================================================= |
|
// Service |
|
|
|
var plugin_count = 0; |
|
|
|
// IE8 fix |
|
var is_old_ie = (function () { |
|
var n = navigator.userAgent, |
|
r = /msie\s\d+/i, |
|
v; |
|
if (n.search(r) > 0) { |
|
v = r.exec(n).toString(); |
|
v = v.split(" ")[1]; |
|
if (v < 9) { |
|
$("html").addClass("lt-ie9"); |
|
return true; |
|
} |
|
} |
|
return false; |
|
} ()); |
|
if (!Function.prototype.bind) { |
|
Function.prototype.bind = function bind(that) { |
|
|
|
var target = this; |
|
var slice = [].slice; |
|
|
|
if (typeof target != "function") { |
|
throw new TypeError(); |
|
} |
|
|
|
var args = slice.call(arguments, 1), |
|
bound = function () { |
|
|
|
if (this instanceof bound) { |
|
|
|
var F = function(){}; |
|
F.prototype = target.prototype; |
|
var self = new F(); |
|
|
|
var result = target.apply( |
|
self, |
|
args.concat(slice.call(arguments)) |
|
); |
|
if (Object(result) === result) { |
|
return result; |
|
} |
|
return self; |
|
|
|
} else { |
|
|
|
return target.apply( |
|
that, |
|
args.concat(slice.call(arguments)) |
|
); |
|
|
|
} |
|
|
|
}; |
|
|
|
return bound; |
|
}; |
|
} |
|
if (!Array.prototype.indexOf) { |
|
Array.prototype.indexOf = function(searchElement, fromIndex) { |
|
var k; |
|
if (this == null) { |
|
throw new TypeError('"this" is null or not defined'); |
|
} |
|
var O = Object(this); |
|
var len = O.length >>> 0; |
|
if (len === 0) { |
|
return -1; |
|
} |
|
var n = +fromIndex || 0; |
|
if (Math.abs(n) === Infinity) { |
|
n = 0; |
|
} |
|
if (n >= len) { |
|
return -1; |
|
} |
|
k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); |
|
while (k < len) { |
|
if (k in O && O[k] === searchElement) { |
|
return k; |
|
} |
|
k++; |
|
} |
|
return -1; |
|
}; |
|
} |
|
|
|
|
|
|
|
// ================================================================================================================= |
|
// Template |
|
|
|
var base_html = |
|
'<span class="irs">' + |
|
'<span class="irs-line" tabindex="0"></span>' + |
|
'<span class="irs-min">0</span><span class="irs-max">1</span>' + |
|
'<span class="irs-from">0</span><span class="irs-to">0</span><span class="irs-single">0</span>' + |
|
'</span>' + |
|
'<span class="irs-grid"></span>'; |
|
|
|
var single_html = |
|
'<span class="irs-bar irs-bar--single"></span>' + |
|
'<span class="irs-shadow shadow-single"></span>' + |
|
'<span class="irs-handle single"><i></i><i></i><i></i></span>'; |
|
|
|
var double_html = |
|
'<span class="irs-bar"></span>' + |
|
'<span class="irs-shadow shadow-from"></span>' + |
|
'<span class="irs-shadow shadow-to"></span>' + |
|
'<span class="irs-handle from"><i></i><i></i><i></i></span>' + |
|
'<span class="irs-handle to"><i></i><i></i><i></i></span>'; |
|
|
|
var disable_html = |
|
'<span class="irs-disable-mask"></span>'; |
|
|
|
|
|
|
|
// ================================================================================================================= |
|
// Core |
|
|
|
/** |
|
* Main plugin constructor |
|
* |
|
* @param input {Object} link to base input element |
|
* @param options {Object} slider config |
|
* @param plugin_count {Number} |
|
* @constructor |
|
*/ |
|
var IonRangeSlider = function (input, options, plugin_count) { |
|
this.VERSION = "2.3.1"; |
|
this.input = input; |
|
this.plugin_count = plugin_count; |
|
this.current_plugin = 0; |
|
this.calc_count = 0; |
|
this.update_tm = 0; |
|
this.old_from = 0; |
|
this.old_to = 0; |
|
this.old_min_interval = null; |
|
this.raf_id = null; |
|
this.dragging = false; |
|
this.force_redraw = false; |
|
this.no_diapason = false; |
|
this.has_tab_index = true; |
|
this.is_key = false; |
|
this.is_update = false; |
|
this.is_start = true; |
|
this.is_finish = false; |
|
this.is_active = false; |
|
this.is_resize = false; |
|
this.is_click = false; |
|
|
|
options = options || {}; |
|
|
|
// cache for links to all DOM elements |
|
this.$cache = { |
|
win: $(window), |
|
body: $(document.body), |
|
input: $(input), |
|
cont: null, |
|
rs: null, |
|
min: null, |
|
max: null, |
|
from: null, |
|
to: null, |
|
single: null, |
|
bar: null, |
|
line: null, |
|
s_single: null, |
|
s_from: null, |
|
s_to: null, |
|
shad_single: null, |
|
shad_from: null, |
|
shad_to: null, |
|
edge: null, |
|
grid: null, |
|
grid_labels: [] |
|
}; |
|
|
|
// storage for measure variables |
|
this.coords = { |
|
// left |
|
x_gap: 0, |
|
x_pointer: 0, |
|
|
|
// width |
|
w_rs: 0, |
|
w_rs_old: 0, |
|
w_handle: 0, |
|
|
|
// percents |
|
p_gap: 0, |
|
p_gap_left: 0, |
|
p_gap_right: 0, |
|
p_step: 0, |
|
p_pointer: 0, |
|
p_handle: 0, |
|
p_single_fake: 0, |
|
p_single_real: 0, |
|
p_from_fake: 0, |
|
p_from_real: 0, |
|
p_to_fake: 0, |
|
p_to_real: 0, |
|
p_bar_x: 0, |
|
p_bar_w: 0, |
|
|
|
// grid |
|
grid_gap: 0, |
|
big_num: 0, |
|
big: [], |
|
big_w: [], |
|
big_p: [], |
|
big_x: [] |
|
}; |
|
|
|
// storage for labels measure variables |
|
this.labels = { |
|
// width |
|
w_min: 0, |
|
w_max: 0, |
|
w_from: 0, |
|
w_to: 0, |
|
w_single: 0, |
|
|
|
// percents |
|
p_min: 0, |
|
p_max: 0, |
|
p_from_fake: 0, |
|
p_from_left: 0, |
|
p_to_fake: 0, |
|
p_to_left: 0, |
|
p_single_fake: 0, |
|
p_single_left: 0 |
|
}; |
|
|
|
|
|
|
|
/** |
|
* get and validate config |
|
*/ |
|
var $inp = this.$cache.input, |
|
val = $inp.prop("value"), |
|
config, config_from_data, prop; |
|
|
|
// default config |
|
config = { |
|
skin: "flat", |
|
type: "single", |
|
|
|
min: 10, |
|
max: 100, |
|
from: null, |
|
to: null, |
|
step: 1, |
|
|
|
min_interval: 0, |
|
max_interval: 0, |
|
drag_interval: false, |
|
|
|
values: [], |
|
p_values: [], |
|
|
|
from_fixed: false, |
|
from_min: null, |
|
from_max: null, |
|
from_shadow: false, |
|
|
|
to_fixed: false, |
|
to_min: null, |
|
to_max: null, |
|
to_shadow: false, |
|
|
|
prettify_enabled: true, |
|
prettify_separator: " ", |
|
prettify: null, |
|
|
|
force_edges: false, |
|
|
|
keyboard: true, |
|
|
|
grid: false, |
|
grid_margin: true, |
|
grid_num: 4, |
|
grid_snap: false, |
|
|
|
hide_min_max: false, |
|
hide_from_to: false, |
|
|
|
prefix: "", |
|
postfix: "", |
|
max_postfix: "", |
|
decorate_both: true, |
|
values_separator: " — ", |
|
|
|
input_values_separator: ";", |
|
|
|
disable: false, |
|
block: false, |
|
|
|
extra_classes: "", |
|
|
|
scope: null, |
|
onStart: null, |
|
onChange: null, |
|
onFinish: null, |
|
onUpdate: null |
|
}; |
|
|
|
|
|
// check if base element is input |
|
if ($inp[0].nodeName !== "INPUT") { |
|
console && console.warn && console.warn("Base element should be <input>!", $inp[0]); |
|
} |
|
|
|
|
|
// config from data-attributes extends js config |
|
config_from_data = { |
|
skin: $inp.data("skin"), |
|
type: $inp.data("type"), |
|
|
|
min: $inp.data("min"), |
|
max: $inp.data("max"), |
|
from: $inp.data("from"), |
|
to: $inp.data("to"), |
|
step: $inp.data("step"), |
|
|
|
min_interval: $inp.data("minInterval"), |
|
max_interval: $inp.data("maxInterval"), |
|
drag_interval: $inp.data("dragInterval"), |
|
|
|
values: $inp.data("values"), |
|
|
|
from_fixed: $inp.data("fromFixed"), |
|
from_min: $inp.data("fromMin"), |
|
from_max: $inp.data("fromMax"), |
|
from_shadow: $inp.data("fromShadow"), |
|
|
|
to_fixed: $inp.data("toFixed"), |
|
to_min: $inp.data("toMin"), |
|
to_max: $inp.data("toMax"), |
|
to_shadow: $inp.data("toShadow"), |
|
|
|
prettify_enabled: $inp.data("prettifyEnabled"), |
|
prettify_separator: $inp.data("prettifySeparator"), |
|
|
|
force_edges: $inp.data("forceEdges"), |
|
|
|
keyboard: $inp.data("keyboard"), |
|
|
|
grid: $inp.data("grid"), |
|
grid_margin: $inp.data("gridMargin"), |
|
grid_num: $inp.data("gridNum"), |
|
grid_snap: $inp.data("gridSnap"), |
|
|
|
hide_min_max: $inp.data("hideMinMax"), |
|
hide_from_to: $inp.data("hideFromTo"), |
|
|
|
prefix: $inp.data("prefix"), |
|
postfix: $inp.data("postfix"), |
|
max_postfix: $inp.data("maxPostfix"), |
|
decorate_both: $inp.data("decorateBoth"), |
|
values_separator: $inp.data("valuesSeparator"), |
|
|
|
input_values_separator: $inp.data("inputValuesSeparator"), |
|
|
|
disable: $inp.data("disable"), |
|
block: $inp.data("block"), |
|
|
|
extra_classes: $inp.data("extraClasses"), |
|
}; |
|
config_from_data.values = config_from_data.values && config_from_data.values.split(","); |
|
|
|
for (prop in config_from_data) { |
|
if (config_from_data.hasOwnProperty(prop)) { |
|
if (config_from_data[prop] === undefined || config_from_data[prop] === "") { |
|
delete config_from_data[prop]; |
|
} |
|
} |
|
} |
|
|
|
|
|
// input value extends default config |
|
if (val !== undefined && val !== "") { |
|
val = val.split(config_from_data.input_values_separator || options.input_values_separator || ";"); |
|
|
|
if (val[0] && val[0] == +val[0]) { |
|
val[0] = +val[0]; |
|
} |
|
if (val[1] && val[1] == +val[1]) { |
|
val[1] = +val[1]; |
|
} |
|
|
|
if (options && options.values && options.values.length) { |
|
config.from = val[0] && options.values.indexOf(val[0]); |
|
config.to = val[1] && options.values.indexOf(val[1]); |
|
} else { |
|
config.from = val[0] && +val[0]; |
|
config.to = val[1] && +val[1]; |
|
} |
|
} |
|
|
|
|
|
|
|
// js config extends default config |
|
$.extend(config, options); |
|
|
|
|
|
// data config extends config |
|
$.extend(config, config_from_data); |
|
this.options = config; |
|
|
|
|
|
|
|
// validate config, to be sure that all data types are correct |
|
this.update_check = {}; |
|
this.validate(); |
|
|
|
|
|
|
|
// default result object, returned to callbacks |
|
this.result = { |
|
input: this.$cache.input, |
|
slider: null, |
|
|
|
min: this.options.min, |
|
max: this.options.max, |
|
|
|
from: this.options.from, |
|
from_percent: 0, |
|
from_value: null, |
|
|
|
to: this.options.to, |
|
to_percent: 0, |
|
to_value: null |
|
}; |
|
|
|
|
|
|
|
this.init(); |
|
}; |
|
|
|
IonRangeSlider.prototype = { |
|
|
|
/** |
|
* Starts or updates the plugin instance |
|
* |
|
* @param [is_update] {boolean} |
|
*/ |
|
init: function (is_update) { |
|
this.no_diapason = false; |
|
this.coords.p_step = this.convertToPercent(this.options.step, true); |
|
|
|
this.target = "base"; |
|
|
|
this.toggleInput(); |
|
this.append(); |
|
this.setMinMax(); |
|
|
|
if (is_update) { |
|
this.force_redraw = true; |
|
this.calc(true); |
|
|
|
// callbacks called |
|
this.callOnUpdate(); |
|
} else { |
|
this.force_redraw = true; |
|
this.calc(true); |
|
|
|
// callbacks called |
|
this.callOnStart(); |
|
} |
|
|
|
this.updateScene(); |
|
}, |
|
|
|
/** |
|
* Appends slider template to a DOM |
|
*/ |
|
append: function () { |
|
var container_html = '<span class="irs irs--' + this.options.skin + ' js-irs-' + this.plugin_count + ' ' + this.options.extra_classes + '"></span>'; |
|
this.$cache.input.before(container_html); |
|
this.$cache.input.prop("readonly", true); |
|
this.$cache.cont = this.$cache.input.prev(); |
|
this.result.slider = this.$cache.cont; |
|
|
|
this.$cache.cont.html(base_html); |
|
this.$cache.rs = this.$cache.cont.find(".irs"); |
|
this.$cache.min = this.$cache.cont.find(".irs-min"); |
|
this.$cache.max = this.$cache.cont.find(".irs-max"); |
|
this.$cache.from = this.$cache.cont.find(".irs-from"); |
|
this.$cache.to = this.$cache.cont.find(".irs-to"); |
|
this.$cache.single = this.$cache.cont.find(".irs-single"); |
|
this.$cache.line = this.$cache.cont.find(".irs-line"); |
|
this.$cache.grid = this.$cache.cont.find(".irs-grid"); |
|
|
|
if (this.options.type === "single") { |
|
this.$cache.cont.append(single_html); |
|
this.$cache.bar = this.$cache.cont.find(".irs-bar"); |
|
this.$cache.edge = this.$cache.cont.find(".irs-bar-edge"); |
|
this.$cache.s_single = this.$cache.cont.find(".single"); |
|
this.$cache.from[0].style.visibility = "hidden"; |
|
this.$cache.to[0].style.visibility = "hidden"; |
|
this.$cache.shad_single = this.$cache.cont.find(".shadow-single"); |
|
} else { |
|
this.$cache.cont.append(double_html); |
|
this.$cache.bar = this.$cache.cont.find(".irs-bar"); |
|
this.$cache.s_from = this.$cache.cont.find(".from"); |
|
this.$cache.s_to = this.$cache.cont.find(".to"); |
|
this.$cache.shad_from = this.$cache.cont.find(".shadow-from"); |
|
this.$cache.shad_to = this.$cache.cont.find(".shadow-to"); |
|
|
|
this.setTopHandler(); |
|
} |
|
|
|
if (this.options.hide_from_to) { |
|
this.$cache.from[0].style.display = "none"; |
|
this.$cache.to[0].style.display = "none"; |
|
this.$cache.single[0].style.display = "none"; |
|
} |
|
|
|
this.appendGrid(); |
|
|
|
if (this.options.disable) { |
|
this.appendDisableMask(); |
|
this.$cache.input[0].disabled = true; |
|
} else { |
|
this.$cache.input[0].disabled = false; |
|
this.removeDisableMask(); |
|
this.bindEvents(); |
|
} |
|
|
|
// block only if not disabled |
|
if (!this.options.disable) { |
|
if (this.options.block) { |
|
this.appendDisableMask(); |
|
} else { |
|
this.removeDisableMask(); |
|
} |
|
} |
|
|
|
if (this.options.drag_interval) { |
|
this.$cache.bar[0].style.cursor = "ew-resize"; |
|
} |
|
}, |
|
|
|
/** |
|
* Determine which handler has a priority |
|
* works only for double slider type |
|
*/ |
|
setTopHandler: function () { |
|
var min = this.options.min, |
|
max = this.options.max, |
|
from = this.options.from, |
|
to = this.options.to; |
|
|
|
if (from > min && to === max) { |
|
this.$cache.s_from.addClass("type_last"); |
|
} else if (to < max) { |
|
this.$cache.s_to.addClass("type_last"); |
|
} |
|
}, |
|
|
|
/** |
|
* Determine which handles was clicked last |
|
* and which handler should have hover effect |
|
* |
|
* @param target {String} |
|
*/ |
|
changeLevel: function (target) { |
|
switch (target) { |
|
case "single": |
|
this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_single_fake); |
|
this.$cache.s_single.addClass("state_hover"); |
|
break; |
|
case "from": |
|
this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_from_fake); |
|
this.$cache.s_from.addClass("state_hover"); |
|
this.$cache.s_from.addClass("type_last"); |
|
this.$cache.s_to.removeClass("type_last"); |
|
break; |
|
case "to": |
|
this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_to_fake); |
|
this.$cache.s_to.addClass("state_hover"); |
|
this.$cache.s_to.addClass("type_last"); |
|
this.$cache.s_from.removeClass("type_last"); |
|
break; |
|
case "both": |
|
this.coords.p_gap_left = this.toFixed(this.coords.p_pointer - this.coords.p_from_fake); |
|
this.coords.p_gap_right = this.toFixed(this.coords.p_to_fake - this.coords.p_pointer); |
|
this.$cache.s_to.removeClass("type_last"); |
|
this.$cache.s_from.removeClass("type_last"); |
|
break; |
|
} |
|
}, |
|
|
|
/** |
|
* Then slider is disabled |
|
* appends extra layer with opacity |
|
*/ |
|
appendDisableMask: function () { |
|
this.$cache.cont.append(disable_html); |
|
this.$cache.cont.addClass("irs-disabled"); |
|
}, |
|
|
|
/** |
|
* Then slider is not disabled |
|
* remove disable mask |
|
*/ |
|
removeDisableMask: function () { |
|
this.$cache.cont.remove(".irs-disable-mask"); |
|
this.$cache.cont.removeClass("irs-disabled"); |
|
}, |
|
|
|
/** |
|
* Remove slider instance |
|
* and unbind all events |
|
*/ |
|
remove: function () { |
|
this.$cache.cont.remove(); |
|
this.$cache.cont = null; |
|
|
|
this.$cache.line.off("keydown.irs_" + this.plugin_count); |
|
|
|
this.$cache.body.off("touchmove.irs_" + this.plugin_count); |
|
this.$cache.body.off("mousemove.irs_" + this.plugin_count); |
|
|
|
this.$cache.win.off("touchend.irs_" + this.plugin_count); |
|
this.$cache.win.off("mouseup.irs_" + this.plugin_count); |
|
|
|
if (is_old_ie) { |
|
this.$cache.body.off("mouseup.irs_" + this.plugin_count); |
|
this.$cache.body.off("mouseleave.irs_" + this.plugin_count); |
|
} |
|
|
|
this.$cache.grid_labels = []; |
|
this.coords.big = []; |
|
this.coords.big_w = []; |
|
this.coords.big_p = []; |
|
this.coords.big_x = []; |
|
|
|
cancelAnimationFrame(this.raf_id); |
|
}, |
|
|
|
/** |
|
* bind all slider events |
|
*/ |
|
bindEvents: function () { |
|
if (this.no_diapason) { |
|
return; |
|
} |
|
|
|
this.$cache.body.on("touchmove.irs_" + this.plugin_count, this.pointerMove.bind(this)); |
|
this.$cache.body.on("mousemove.irs_" + this.plugin_count, this.pointerMove.bind(this)); |
|
|
|
this.$cache.win.on("touchend.irs_" + this.plugin_count, this.pointerUp.bind(this)); |
|
this.$cache.win.on("mouseup.irs_" + this.plugin_count, this.pointerUp.bind(this)); |
|
|
|
this.$cache.line.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
this.$cache.line.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
|
|
this.$cache.line.on("focus.irs_" + this.plugin_count, this.pointerFocus.bind(this)); |
|
|
|
if (this.options.drag_interval && this.options.type === "double") { |
|
this.$cache.bar.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "both")); |
|
this.$cache.bar.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "both")); |
|
} else { |
|
this.$cache.bar.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
this.$cache.bar.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
} |
|
|
|
if (this.options.type === "single") { |
|
this.$cache.single.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "single")); |
|
this.$cache.s_single.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "single")); |
|
this.$cache.shad_single.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
|
|
this.$cache.single.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "single")); |
|
this.$cache.s_single.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "single")); |
|
this.$cache.edge.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
this.$cache.shad_single.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
} else { |
|
this.$cache.single.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, null)); |
|
this.$cache.single.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, null)); |
|
|
|
this.$cache.from.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "from")); |
|
this.$cache.s_from.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "from")); |
|
this.$cache.to.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "to")); |
|
this.$cache.s_to.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "to")); |
|
this.$cache.shad_from.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
this.$cache.shad_to.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
|
|
this.$cache.from.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "from")); |
|
this.$cache.s_from.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "from")); |
|
this.$cache.to.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "to")); |
|
this.$cache.s_to.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "to")); |
|
this.$cache.shad_from.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
this.$cache.shad_to.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click")); |
|
} |
|
|
|
if (this.options.keyboard) { |
|
this.$cache.line.on("keydown.irs_" + this.plugin_count, this.key.bind(this, "keyboard")); |
|
} |
|
|
|
if (is_old_ie) { |
|
this.$cache.body.on("mouseup.irs_" + this.plugin_count, this.pointerUp.bind(this)); |
|
this.$cache.body.on("mouseleave.irs_" + this.plugin_count, this.pointerUp.bind(this)); |
|
} |
|
}, |
|
|
|
/** |
|
* Focus with tabIndex |
|
* |
|
* @param e {Object} event object |
|
*/ |
|
pointerFocus: function (e) { |
|
if (!this.target) { |
|
var x; |
|
var $handle; |
|
|
|
if (this.options.type === "single") { |
|
$handle = this.$cache.single; |
|
} else { |
|
$handle = this.$cache.from; |
|
} |
|
|
|
x = $handle.offset().left; |
|
x += ($handle.width() / 2) - 1; |
|
|
|
this.pointerClick("single", {preventDefault: function () {}, pageX: x}); |
|
} |
|
}, |
|
|
|
/** |
|
* Mousemove or touchmove |
|
* only for handlers |
|
* |
|
* @param e {Object} event object |
|
*/ |
|
pointerMove: function (e) { |
|
if (!this.dragging) { |
|
return; |
|
} |
|
|
|
var x = e.pageX || e.originalEvent.touches && e.originalEvent.touches[0].pageX; |
|
this.coords.x_pointer = x - this.coords.x_gap; |
|
|
|
this.calc(); |
|
}, |
|
|
|
/** |
|
* Mouseup or touchend |
|
* only for handlers |
|
* |
|
* @param e {Object} event object |
|
*/ |
|
pointerUp: function (e) { |
|
if (this.current_plugin !== this.plugin_count) { |
|
return; |
|
} |
|
|
|
if (this.is_active) { |
|
this.is_active = false; |
|
} else { |
|
return; |
|
} |
|
|
|
this.$cache.cont.find(".state_hover").removeClass("state_hover"); |
|
|
|
this.force_redraw = true; |
|
|
|
if (is_old_ie) { |
|
$("*").prop("unselectable", false); |
|
} |
|
|
|
this.updateScene(); |
|
this.restoreOriginalMinInterval(); |
|
|
|
// callbacks call |
|
if ($.contains(this.$cache.cont[0], e.target) || this.dragging) { |
|
this.callOnFinish(); |
|
} |
|
|
|
this.dragging = false; |
|
}, |
|
|
|
/** |
|
* Mousedown or touchstart |
|
* only for handlers |
|
* |
|
* @param target {String|null} |
|
* @param e {Object} event object |
|
*/ |
|
pointerDown: function (target, e) { |
|
e.preventDefault(); |
|
var x = e.pageX || e.originalEvent.touches && e.originalEvent.touches[0].pageX; |
|
if (e.button === 2) { |
|
return; |
|
} |
|
|
|
if (target === "both") { |
|
this.setTempMinInterval(); |
|
} |
|
|
|
if (!target) { |
|
target = this.target || "from"; |
|
} |
|
|
|
this.current_plugin = this.plugin_count; |
|
this.target = target; |
|
|
|
this.is_active = true; |
|
this.dragging = true; |
|
|
|
this.coords.x_gap = this.$cache.rs.offset().left; |
|
this.coords.x_pointer = x - this.coords.x_gap; |
|
|
|
this.calcPointerPercent(); |
|
this.changeLevel(target); |
|
|
|
if (is_old_ie) { |
|
$("*").prop("unselectable", true); |
|
} |
|
|
|
this.$cache.line.trigger("focus"); |
|
|
|
this.updateScene(); |
|
}, |
|
|
|
/** |
|
* Mousedown or touchstart |
|
* for other slider elements, like diapason line |
|
* |
|
* @param target {String} |
|
* @param e {Object} event object |
|
*/ |
|
pointerClick: function (target, e) { |
|
e.preventDefault(); |
|
var x = e.pageX || e.originalEvent.touches && e.originalEvent.touches[0].pageX; |
|
if (e.button === 2) { |
|
return; |
|
} |
|
|
|
this.current_plugin = this.plugin_count; |
|
this.target = target; |
|
|
|
this.is_click = true; |
|
this.coords.x_gap = this.$cache.rs.offset().left; |
|
this.coords.x_pointer = +(x - this.coords.x_gap).toFixed(); |
|
|
|
this.force_redraw = true; |
|
this.calc(); |
|
|
|
this.$cache.line.trigger("focus"); |
|
}, |
|
|
|
/** |
|
* Keyborard controls for focused slider |
|
* |
|
* @param target {String} |
|
* @param e {Object} event object |
|
* @returns {boolean|undefined} |
|
*/ |
|
key: function (target, e) { |
|
if (this.current_plugin !== this.plugin_count || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) { |
|
return; |
|
} |
|
|
|
switch (e.which) { |
|
case 83: // W |
|
case 65: // A |
|
case 40: // DOWN |
|
case 37: // LEFT |
|
e.preventDefault(); |
|
this.moveByKey(false); |
|
break; |
|
|
|
case 87: // S |
|
case 68: // D |
|
case 38: // UP |
|
case 39: // RIGHT |
|
e.preventDefault(); |
|
this.moveByKey(true); |
|
break; |
|
} |
|
|
|
return true; |
|
}, |
|
|
|
/** |
|
* Move by key |
|
* |
|
* @param right {boolean} direction to move |
|
*/ |
|
moveByKey: function (right) { |
|
var p = this.coords.p_pointer; |
|
var p_step = (this.options.max - this.options.min) / 100; |
|
p_step = this.options.step / p_step; |
|
|
|
if (right) { |
|
p += p_step; |
|
} else { |
|
p -= p_step; |
|
} |
|
|
|
this.coords.x_pointer = this.toFixed(this.coords.w_rs / 100 * p); |
|
this.is_key = true; |
|
this.calc(); |
|
}, |
|
|
|
/** |
|
* Set visibility and content |
|
* of Min and Max labels |
|
*/ |
|
setMinMax: function () { |
|
if (!this.options) { |
|
return; |
|
} |
|
|
|
if (this.options.hide_min_max) { |
|
this.$cache.min[0].style.display = "none"; |
|
this.$cache.max[0].style.display = "none"; |
|
return; |
|
} |
|
|
|
if (this.options.values.length) { |
|
this.$cache.min.html(this.decorate(this.options.p_values[this.options.min])); |
|
this.$cache.max.html(this.decorate(this.options.p_values[this.options.max])); |
|
} else { |
|
var min_pretty = this._prettify(this.options.min); |
|
var max_pretty = this._prettify(this.options.max); |
|
|
|
this.result.min_pretty = min_pretty; |
|
this.result.max_pretty = max_pretty; |
|
|
|
this.$cache.min.html(this.decorate(min_pretty, this.options.min)); |
|
this.$cache.max.html(this.decorate(max_pretty, this.options.max)); |
|
} |
|
|
|
this.labels.w_min = this.$cache.min.outerWidth(false); |
|
this.labels.w_max = this.$cache.max.outerWidth(false); |
|
}, |
|
|
|
/** |
|
* Then dragging interval, prevent interval collapsing |
|
* using min_interval option |
|
*/ |
|
setTempMinInterval: function () { |
|
var interval = this.result.to - this.result.from; |
|
|
|
if (this.old_min_interval === null) { |
|
this.old_min_interval = this.options.min_interval; |
|
} |
|
|
|
this.options.min_interval = interval; |
|
}, |
|
|
|
/** |
|
* Restore min_interval option to original |
|
*/ |
|
restoreOriginalMinInterval: function () { |
|
if (this.old_min_interval !== null) { |
|
this.options.min_interval = this.old_min_interval; |
|
this.old_min_interval = null; |
|
} |
|
}, |
|
|
|
|
|
|
|
// ============================================================================================================= |
|
// Calculations |
|
|
|
/** |
|
* All calculations and measures start here |
|
* |
|
* @param update {boolean=} |
|
*/ |
|
calc: function (update) { |
|
if (!this.options) { |
|
return; |
|
} |
|
|
|
this.calc_count++; |
|
|
|
if (this.calc_count === 10 || update) { |
|
this.calc_count = 0; |
|
this.coords.w_rs = this.$cache.rs.outerWidth(false); |
|
|
|
this.calcHandlePercent(); |
|
} |
|
|
|
if (!this.coords.w_rs) { |
|
return; |
|
} |
|
|
|
this.calcPointerPercent(); |
|
var handle_x = this.getHandleX(); |
|
|
|
|
|
if (this.target === "both") { |
|
this.coords.p_gap = 0; |
|
handle_x = this.getHandleX(); |
|
} |
|
|
|
if (this.target === "click") { |
|
this.coords.p_gap = this.coords.p_handle / 2; |
|
handle_x = this.getHandleX(); |
|
|
|
if (this.options.drag_interval) { |
|
this.target = "both_one"; |
|
} else { |
|
this.target = this.chooseHandle(handle_x); |
|
} |
|
} |
|
|
|
switch (this.target) { |
|
case "base": |
|
var w = (this.options.max - this.options.min) / 100, |
|
f = (this.result.from - this.options.min) / w, |
|
t = (this.result.to - this.options.min) / w; |
|
|
|
this.coords.p_single_real = this.toFixed(f); |
|
this.coords.p_from_real = this.toFixed(f); |
|
this.coords.p_to_real = this.toFixed(t); |
|
|
|
this.coords.p_single_real = this.checkDiapason(this.coords.p_single_real, this.options.from_min, this.options.from_max); |
|
this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max); |
|
this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max); |
|
|
|
this.coords.p_single_fake = this.convertToFakePercent(this.coords.p_single_real); |
|
this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real); |
|
this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real); |
|
|
|
this.target = null; |
|
|
|
break; |
|
|
|
case "single": |
|
if (this.options.from_fixed) { |
|
break; |
|
} |
|
|
|
this.coords.p_single_real = this.convertToRealPercent(handle_x); |
|
this.coords.p_single_real = this.calcWithStep(this.coords.p_single_real); |
|
this.coords.p_single_real = this.checkDiapason(this.coords.p_single_real, this.options.from_min, this.options.from_max); |
|
|
|
this.coords.p_single_fake = this.convertToFakePercent(this.coords.p_single_real); |
|
|
|
break; |
|
|
|
case "from": |
|
if (this.options.from_fixed) { |
|
break; |
|
} |
|
|
|
this.coords.p_from_real = this.convertToRealPercent(handle_x); |
|
this.coords.p_from_real = this.calcWithStep(this.coords.p_from_real); |
|
if (this.coords.p_from_real > this.coords.p_to_real) { |
|
this.coords.p_from_real = this.coords.p_to_real; |
|
} |
|
this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max); |
|
this.coords.p_from_real = this.checkMinInterval(this.coords.p_from_real, this.coords.p_to_real, "from"); |
|
this.coords.p_from_real = this.checkMaxInterval(this.coords.p_from_real, this.coords.p_to_real, "from"); |
|
|
|
this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real); |
|
|
|
break; |
|
|
|
case "to": |
|
if (this.options.to_fixed) { |
|
break; |
|
} |
|
|
|
this.coords.p_to_real = this.convertToRealPercent(handle_x); |
|
this.coords.p_to_real = this.calcWithStep(this.coords.p_to_real); |
|
if (this.coords.p_to_real < this.coords.p_from_real) { |
|
this.coords.p_to_real = this.coords.p_from_real; |
|
} |
|
this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max); |
|
this.coords.p_to_real = this.checkMinInterval(this.coords.p_to_real, this.coords.p_from_real, "to"); |
|
this.coords.p_to_real = this.checkMaxInterval(this.coords.p_to_real, this.coords.p_from_real, "to"); |
|
|
|
this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real); |
|
|
|
break; |
|
|
|
case "both": |
|
if (this.options.from_fixed || this.options.to_fixed) { |
|
break; |
|
} |
|
|
|
handle_x = this.toFixed(handle_x + (this.coords.p_handle * 0.001)); |
|
|
|
this.coords.p_from_real = this.convertToRealPercent(handle_x) - this.coords.p_gap_left; |
|
this.coords.p_from_real = this.calcWithStep(this.coords.p_from_real); |
|
this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max); |
|
this.coords.p_from_real = this.checkMinInterval(this.coords.p_from_real, this.coords.p_to_real, "from"); |
|
this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real); |
|
|
|
this.coords.p_to_real = this.convertToRealPercent(handle_x) + this.coords.p_gap_right; |
|
this.coords.p_to_real = this.calcWithStep(this.coords.p_to_real); |
|
this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max); |
|
this.coords.p_to_real = this.checkMinInterval(this.coords.p_to_real, this.coords.p_from_real, "to"); |
|
this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real); |
|
|
|
break; |
|
|
|
case "both_one": |
|
if (this.options.from_fixed || this.options.to_fixed) { |
|
break; |
|
} |
|
|
|
var real_x = this.convertToRealPercent(handle_x), |
|
from = this.result.from_percent, |
|
to = this.result.to_percent, |
|
full = to - from, |
|
half = full / 2, |
|
new_from = real_x - half, |
|
new_to = real_x + half; |
|
|
|
if (new_from < 0) { |
|
new_from = 0; |
|
new_to = new_from + full; |
|
} |
|
|
|
if (new_to > 100) { |
|
new_to = 100; |
|
new_from = new_to - full; |
|
} |
|
|
|
this.coords.p_from_real = this.calcWithStep(new_from); |
|
this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max); |
|
this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real); |
|
|
|
this.coords.p_to_real = this.calcWithStep(new_to); |
|
this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max); |
|
this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real); |
|
|
|
break; |
|
} |
|
|
|
if (this.options.type === "single") { |
|
this.coords.p_bar_x = (this.coords.p_handle / 2); |
|
this.coords.p_bar_w = this.coords.p_single_fake; |
|
|
|
this.result.from_percent = this.coords.p_single_real; |
|
this.result.from = this.convertToValue(this.coords.p_single_real); |
|
this.result.from_pretty = this._prettify(this.result.from); |
|
|
|
if (this.options.values.length) { |
|
this.result.from_value = this.options.values[this.result.from]; |
|
} |
|
} else { |
|
this.coords.p_bar_x = this.toFixed(this.coords.p_from_fake + (this.coords.p_handle / 2)); |
|
this.coords.p_bar_w = this.toFixed(this.coords.p_to_fake - this.coords.p_from_fake); |
|
|
|
this.result.from_percent = this.coords.p_from_real; |
|
this.result.from = this.convertToValue(this.coords.p_from_real); |
|
this.result.from_pretty = this._prettify(this.result.from); |
|
this.result.to_percent = this.coords.p_to_real; |
|
this.result.to = this.convertToValue(this.coords.p_to_real); |
|
this.result.to_pretty = this._prettify(this.result.to); |
|
|
|
if (this.options.values.length) { |
|
this.result.from_value = this.options.values[this.result.from]; |
|
this.result.to_value = this.options.values[this.result.to]; |
|
} |
|
} |
|
|
|
this.calcMinMax(); |
|
this.calcLabels(); |
|
}, |
|
|
|
|
|
/** |
|
* calculates pointer X in percent |
|
*/ |
|
calcPointerPercent: function () { |
|
if (!this.coords.w_rs) { |
|
this.coords.p_pointer = 0; |
|
return; |
|
} |
|
|
|
if (this.coords.x_pointer < 0 || isNaN(this.coords.x_pointer) ) { |
|
this.coords.x_pointer = 0; |
|
} else if (this.coords.x_pointer > this.coords.w_rs) { |
|
this.coords.x_pointer = this.coords.w_rs; |
|
} |
|
|
|
this.coords.p_pointer = this.toFixed(this.coords.x_pointer / this.coords.w_rs * 100); |
|
}, |
|
|
|
convertToRealPercent: function (fake) { |
|
var full = 100 - this.coords.p_handle; |
|
return fake / full * 100; |
|
}, |
|
|
|
convertToFakePercent: function (real) { |
|
var full = 100 - this.coords.p_handle; |
|
return real / 100 * full; |
|
}, |
|
|
|
getHandleX: function () { |
|
var max = 100 - this.coords.p_handle, |
|
x = this.toFixed(this.coords.p_pointer - this.coords.p_gap); |
|
|
|
if (x < 0) { |
|
x = 0; |
|
} else if (x > max) { |
|
x = max; |
|
} |
|
|
|
return x; |
|
}, |
|
|
|
calcHandlePercent: function () { |
|
if (this.options.type === "single") { |
|
this.coords.w_handle = this.$cache.s_single.outerWidth(false); |
|
} else { |
|
this.coords.w_handle = this.$cache.s_from.outerWidth(false); |
|
} |
|
|
|
this.coords.p_handle = this.toFixed(this.coords.w_handle / this.coords.w_rs * 100); |
|
}, |
|
|
|
/** |
|
* Find closest handle to pointer click |
|
* |
|
* @param real_x {Number} |
|
* @returns {String} |
|
*/ |
|
chooseHandle: function (real_x) { |
|
if (this.options.type === "single") { |
|
return "single"; |
|
} else { |
|
var m_point = this.coords.p_from_real + ((this.coords.p_to_real - this.coords.p_from_real) / 2); |
|
if (real_x >= m_point) { |
|
return this.options.to_fixed ? "from" : "to"; |
|
} else { |
|
return this.options.from_fixed ? "to" : "from"; |
|
} |
|
} |
|
}, |
|
|
|
/** |
|
* Measure Min and Max labels width in percent |
|
*/ |
|
calcMinMax: function () { |
|
if (!this.coords.w_rs) { |
|
return; |
|
} |
|
|
|
this.labels.p_min = this.labels.w_min / this.coords.w_rs * 100; |
|
this.labels.p_max = this.labels.w_max / this.coords.w_rs * 100; |
|
}, |
|
|
|
/** |
|
* Measure labels width and X in percent |
|
*/ |
|
calcLabels: function () { |
|
if (!this.coords.w_rs || this.options.hide_from_to) { |
|
return; |
|
} |
|
|
|
if (this.options.type === "single") { |
|
|
|
this.labels.w_single = this.$cache.single.outerWidth(false); |
|
this.labels.p_single_fake = this.labels.w_single / this.coords.w_rs * 100; |
|
this.labels.p_single_left = this.coords.p_single_fake + (this.coords.p_handle / 2) - (this.labels.p_single_fake / 2); |
|
this.labels.p_single_left = this.checkEdges(this.labels.p_single_left, this.labels.p_single_fake); |
|
|
|
} else { |
|
|
|
this.labels.w_from = this.$cache.from.outerWidth(false); |
|
this.labels.p_from_fake = this.labels.w_from / this.coords.w_rs * 100; |
|
this.labels.p_from_left = this.coords.p_from_fake + (this.coords.p_handle / 2) - (this.labels.p_from_fake / 2); |
|
this.labels.p_from_left = this.toFixed(this.labels.p_from_left); |
|
this.labels.p_from_left = this.checkEdges(this.labels.p_from_left, this.labels.p_from_fake); |
|
|
|
this.labels.w_to = this.$cache.to.outerWidth(false); |
|
this.labels.p_to_fake = this.labels.w_to / this.coords.w_rs * 100; |
|
this.labels.p_to_left = this.coords.p_to_fake + (this.coords.p_handle / 2) - (this.labels.p_to_fake / 2); |
|
this.labels.p_to_left = this.toFixed(this.labels.p_to_left); |
|
this.labels.p_to_left = this.checkEdges(this.labels.p_to_left, this.labels.p_to_fake); |
|
|
|
this.labels.w_single = this.$cache.single.outerWidth(false); |
|
this.labels.p_single_fake = this.labels.w_single / this.coords.w_rs * 100; |
|
this.labels.p_single_left = ((this.labels.p_from_left + this.labels.p_to_left + this.labels.p_to_fake) / 2) - (this.labels.p_single_fake / 2); |
|
this.labels.p_single_left = this.toFixed(this.labels.p_single_left); |
|
this.labels.p_single_left = this.checkEdges(this.labels.p_single_left, this.labels.p_single_fake); |
|
|
|
} |
|
}, |
|
|
|
|
|
|
|
// ============================================================================================================= |
|
// Drawings |
|
|
|
/** |
|
* Main function called in request animation frame |
|
* to update everything |
|
*/ |
|
updateScene: function () { |
|
if (this.raf_id) { |
|
cancelAnimationFrame(this.raf_id); |
|
this.raf_id = null; |
|
} |
|
|
|
clearTimeout(this.update_tm); |
|
this.update_tm = null; |
|
|
|
if (!this.options) { |
|
return; |
|
} |
|
|
|
this.drawHandles(); |
|
|
|
if (this.is_active) { |
|
this.raf_id = requestAnimationFrame(this.updateScene.bind(this)); |
|
} else { |
|
this.update_tm = setTimeout(this.updateScene.bind(this), 300); |
|
} |
|
}, |
|
|
|
/** |
|
* Draw handles |
|
*/ |
|
drawHandles: function () { |
|
this.coords.w_rs = this.$cache.rs.outerWidth(false); |
|
|
|
if (!this.coords.w_rs) { |
|
return; |
|
} |
|
|
|
if (this.coords.w_rs !== this.coords.w_rs_old) { |
|
this.target = "base"; |
|
this.is_resize = true; |
|
} |
|
|
|
if (this.coords.w_rs !== this.coords.w_rs_old || this.force_redraw) { |
|
this.setMinMax(); |
|
this.calc(true); |
|
this.drawLabels(); |
|
if (this.options.grid) { |
|
this.calcGridMargin(); |
|
this.calcGridLabels(); |
|
} |
|
this.force_redraw = true; |
|
this.coords.w_rs_old = this.coords.w_rs; |
|
this.drawShadow(); |
|
} |
|
|
|
if (!this.coords.w_rs) { |
|
return; |
|
} |
|
|
|
if (!this.dragging && !this.force_redraw && !this.is_key) { |
|
return; |
|
} |
|
|
|
if (this.old_from !== this.result.from || this.old_to !== this.result.to || this.force_redraw || this.is_key) { |
|
|
|
this.drawLabels(); |
|
|
|
this.$cache.bar[0].style.left = this.coords.p_bar_x + "%"; |
|
this.$cache.bar[0].style.width = this.coords.p_bar_w + "%"; |
|
|
|
if (this.options.type === "single") { |
|
this.$cache.bar[0].style.left = 0; |
|
this.$cache.bar[0].style.width = this.coords.p_bar_w + this.coords.p_bar_x + "%"; |
|
|
|
this.$cache.s_single[0].style.left = this.coords.p_single_fake + "%"; |
|
|
|
this.$cache.single[0].style.left = this.labels.p_single_left + "%"; |
|
} else { |
|
this.$cache.s_from[0].style.left = this.coords.p_from_fake + "%"; |
|
this.$cache.s_to[0].style.left = this.coords.p_to_fake + "%"; |
|
|
|
if (this.old_from !== this.result.from || this.force_redraw) { |
|
this.$cache.from[0].style.left = this.labels.p_from_left + "%"; |
|
} |
|
if (this.old_to !== this.result.to || this.force_redraw) { |
|
this.$cache.to[0].style.left = this.labels.p_to_left + "%"; |
|
} |
|
|
|
this.$cache.single[0].style.left = this.labels.p_single_left + "%"; |
|
} |
|
|
|
this.writeToInput(); |
|
|
|
if ((this.old_from !== this.result.from || this.old_to !== this.result.to) && !this.is_start) { |
|
this.$cache.input.trigger("change"); |
|
this.$cache.input.trigger("input"); |
|
} |
|
|
|
this.old_from = this.result.from; |
|
this.old_to = this.result.to; |
|
|
|
// callbacks call |
|
if (!this.is_resize && !this.is_update && !this.is_start && !this.is_finish) { |
|
this.callOnChange(); |
|
} |
|
if (this.is_key || this.is_click) { |
|
this.is_key = false; |
|
this.is_click = false; |
|
this.callOnFinish(); |
|
} |
|
|
|
this.is_update = false; |
|
this.is_resize = false; |
|
this.is_finish = false; |
|
} |
|
|
|
this.is_start = false; |
|
this.is_key = false; |
|
this.is_click = false; |
|
this.force_redraw = false; |
|
}, |
|
|
|
/** |
|
* Draw labels |
|
* measure labels collisions |
|
* collapse close labels |
|
*/ |
|
drawLabels: function () { |
|
if (!this.options) { |
|
return; |
|
} |
|
|
|
var values_num = this.options.values.length; |
|
var p_values = this.options.p_values; |
|
var text_single; |
|
var text_from; |
|
var text_to; |
|
var from_pretty; |
|
var to_pretty; |
|
|
|
if (this.options.hide_from_to) { |
|
return; |
|
} |
|
|
|
if (this.options.type === "single") { |
|
|
|
if (values_num) { |
|
text_single = this.decorate(p_values[this.result.from]); |
|
this.$cache.single.html(text_single); |
|
} else { |
|
from_pretty = this._prettify(this.result.from); |
|
|
|
text_single = this.decorate(from_pretty, this.result.from); |
|
this.$cache.single.html(text_single); |
|
} |
|
|
|
this.calcLabels(); |
|
|
|
if (this.labels.p_single_left < this.labels.p_min + 1) { |
|
this.$cache.min[0].style.visibility = "hidden"; |
|
} else { |
|
this.$cache.min[0].style.visibility = "visible"; |
|
} |
|
|
|
if (this.labels.p_single_left + this.labels.p_single_fake > 100 - this.labels.p_max - 1) { |
|
this.$cache.max[0].style.visibility = "hidden"; |
|
} else { |
|
this.$cache.max[0].style.visibility = "visible"; |
|
} |
|
|
|
} else { |
|
|
|
if (values_num) { |
|
|
|
if (this.options.decorate_both) { |
|
text_single = this.decorate(p_values[this.result.from]); |
|
text_single += this.options.values_separator; |
|
text_single += this.decorate(p_values[this.result.to]); |
|
} else { |
|
text_single = this.decorate(p_values[this.result.from] + this.options.values_separator + p_values[this.result.to]); |
|
} |
|
text_from = this.decorate(p_values[this.result.from]); |
|
text_to = this.decorate(p_values[this.result.to]); |
|
|
|
this.$cache.single.html(text_single); |
|
this.$cache.from.html(text_from); |
|
this.$cache.to.html(text_to); |
|
|
|
} else { |
|
from_pretty = this._prettify(this.result.from); |
|
to_pretty = this._prettify(this.result.to); |
|
|
|
if (this.options.decorate_both) { |
|
text_single = this.decorate(from_pretty, this.result.from); |
|
text_single += this.options.values_separator; |
|
text_single += this.decorate(to_pretty, this.result.to); |
|
} else { |
|
text_single = this.decorate(from_pretty + this.options.values_separator + to_pretty, this.result.to); |
|
} |
|
text_from = this.decorate(from_pretty, this.result.from); |
|
text_to = this.decorate(to_pretty, this.result.to); |
|
|
|
this.$cache.single.html(text_single); |
|
this.$cache.from.html(text_from); |
|
this.$cache.to.html(text_to); |
|
|
|
} |
|
|
|
this.calcLabels(); |
|
|
|
var min = Math.min(this.labels.p_single_left, this.labels.p_from_left), |
|
single_left = this.labels.p_single_left + this.labels.p_single_fake, |
|
to_left = this.labels.p_to_left + this.labels.p_to_fake, |
|
max = Math.max(single_left, to_left); |
|
|
|
if (this.labels.p_from_left + this.labels.p_from_fake >= this.labels.p_to_left) { |
|
this.$cache.from[0].style.visibility = "hidden"; |
|
this.$cache.to[0].style.visibility = "hidden"; |
|
this.$cache.single[0].style.visibility = "visible"; |
|
|
|
if (this.result.from === this.result.to) { |
|
if (this.target === "from") { |
|
this.$cache.from[0].style.visibility = "visible"; |
|
} else if (this.target === "to") { |
|
this.$cache.to[0].style.visibility = "visible"; |
|
} else if (!this.target) { |
|
this.$cache.from[0].style.visibility = "visible"; |
|
} |
|
this.$cache.single[0].style.visibility = "hidden"; |
|
max = to_left; |
|
} else { |
|
this.$cache.from[0].style.visibility = "hidden"; |
|
this.$cache.to[0].style.visibility = "hidden"; |
|
this.$cache.single[0].style.visibility = "visible"; |
|
max = Math.max(single_left, to_left); |
|
} |
|
} else { |
|
this.$cache.from[0].style.visibility = "visible"; |
|
this.$cache.to[0].style.visibility = "visible"; |
|
this.$cache.single[0].style.visibility = "hidden"; |
|
} |
|
|
|
if (min < this.labels.p_min + 1) { |
|
this.$cache.min[0].style.visibility = "hidden"; |
|
} else { |
|
this.$cache.min[0].style.visibility = "visible"; |
|
} |
|
|
|
if (max > 100 - this.labels.p_max - 1) { |
|
this.$cache.max[0].style.visibility = "hidden"; |
|
} else { |
|
this.$cache.max[0].style.visibility = "visible"; |
|
} |
|
|
|
} |
|
}, |
|
|
|
/** |
|
* Draw shadow intervals |
|
*/ |
|
drawShadow: function () { |
|
var o = this.options, |
|
c = this.$cache, |
|
|
|
is_from_min = typeof o.from_min === "number" && !isNaN(o.from_min), |
|
is_from_max = typeof o.from_max === "number" && !isNaN(o.from_max), |
|
is_to_min = typeof o.to_min === "number" && !isNaN(o.to_min), |
|
is_to_max = typeof o.to_max === "number" && !isNaN(o.to_max), |
|
|
|
from_min, |
|
from_max, |
|
to_min, |
|
to_max; |
|
|
|
if (o.type === "single") { |
|
if (o.from_shadow && (is_from_min || is_from_max)) { |
|
from_min = this.convertToPercent(is_from_min ? o.from_min : o.min); |
|
from_max = this.convertToPercent(is_from_max ? o.from_max : o.max) - from_min; |
|
from_min = this.toFixed(from_min - (this.coords.p_handle / 100 * from_min)); |
|
from_max = this.toFixed(from_max - (this.coords.p_handle / 100 * from_max)); |
|
from_min = from_min + (this.coords.p_handle / 2); |
|
|
|
c.shad_single[0].style.display = "block"; |
|
c.shad_single[0].style.left = from_min + "%"; |
|
c.shad_single[0].style.width = from_max + "%"; |
|
} else { |
|
c.shad_single[0].style.display = "none"; |
|
} |
|
} else { |
|
if (o.from_shadow && (is_from_min || is_from_max)) { |
|
from_min = this.convertToPercent(is_from_min ? o.from_min : o.min); |
|
from_max = this.convertToPercent(is_from_max ? o.from_max : o.max) - from_min; |
|
from_min = this.toFixed(from_min - (this.coords.p_handle / 100 * from_min)); |
|
from_max = this.toFixed(from_max - (this.coords.p_handle / 100 * from_max)); |
|
from_min = from_min + (this.coords.p_handle / 2); |
|
|
|
c.shad_from[0].style.display = "block"; |
|
c.shad_from[0].style.left = from_min + "%"; |
|
c.shad_from[0].style.width = from_max + "%"; |
|
} else { |
|
c.shad_from[0].style.display = "none"; |
|
} |
|
|
|
if (o.to_shadow && (is_to_min || is_to_max)) { |
|
to_min = this.convertToPercent(is_to_min ? o.to_min : o.min); |
|
to_max = this.convertToPercent(is_to_max ? o.to_max : o.max) - to_min; |
|
to_min = this.toFixed(to_min - (this.coords.p_handle / 100 * to_min)); |
|
to_max = this.toFixed(to_max - (this.coords.p_handle / 100 * to_max)); |
|
to_min = to_min + (this.coords.p_handle / 2); |
|
|
|
c.shad_to[0].style.display = "block"; |
|
c.shad_to[0].style.left = to_min + "%"; |
|
c.shad_to[0].style.width = to_max + "%"; |
|
} else { |
|
c.shad_to[0].style.display = "none"; |
|
} |
|
} |
|
}, |
|
|
|
|
|
|
|
/** |
|
* Write values to input element |
|
*/ |
|
writeToInput: function () { |
|
if (this.options.type === "single") { |
|
if (this.options.values.length) { |
|
this.$cache.input.prop("value", this.result.from_value); |
|
} else { |
|
this.$cache.input.prop("value", this.result.from); |
|
} |
|
this.$cache.input.data("from", this.result.from); |
|
} else { |
|
if (this.options.values.length) { |
|
this.$cache.input.prop("value", this.result.from_value + this.options.input_values_separator + this.result.to_value); |
|
} else { |
|
this.$cache.input.prop("value", this.result.from + this.options.input_values_separator + this.result.to); |
|
} |
|
this.$cache.input.data("from", this.result.from); |
|
this.$cache.input.data("to", this.result.to); |
|
} |
|
}, |
|
|
|
|
|
|
|
// ============================================================================================================= |
|
// Callbacks |
|
|
|
callOnStart: function () { |
|
this.writeToInput(); |
|
|
|
if (this.options.onStart && typeof this.options.onStart === "function") { |
|
if (this.options.scope) { |
|
this.options.onStart.call(this.options.scope, this.result); |
|
} else { |
|
this.options.onStart(this.result); |
|
} |
|
} |
|
}, |
|
callOnChange: function () { |
|
this.writeToInput(); |
|
|
|
if (this.options.onChange && typeof this.options.onChange === "function") { |
|
if (this.options.scope) { |
|
this.options.onChange.call(this.options.scope, this.result); |
|
} else { |
|
this.options.onChange(this.result); |
|
} |
|
} |
|
}, |
|
callOnFinish: function () { |
|
this.writeToInput(); |
|
|
|
if (this.options.onFinish && typeof this.options.onFinish === "function") { |
|
if (this.options.scope) { |
|
this.options.onFinish.call(this.options.scope, this.result); |
|
} else { |
|
this.options.onFinish(this.result); |
|
} |
|
} |
|
}, |
|
callOnUpdate: function () { |
|
this.writeToInput(); |
|
|
|
if (this.options.onUpdate && typeof this.options.onUpdate === "function") { |
|
if (this.options.scope) { |
|
this.options.onUpdate.call(this.options.scope, this.result); |
|
} else { |
|
this.options.onUpdate(this.result); |
|
} |
|
} |
|
}, |
|
|
|
|
|
|
|
|
|
// ============================================================================================================= |
|
// Service methods |
|
|
|
toggleInput: function () { |
|
this.$cache.input.toggleClass("irs-hidden-input"); |
|
|
|
if (this.has_tab_index) { |
|
this.$cache.input.prop("tabindex", -1); |
|
} else { |
|
this.$cache.input.removeProp("tabindex"); |
|
} |
|
|
|
this.has_tab_index = !this.has_tab_index; |
|
}, |
|
|
|
/** |
|
* Convert real value to percent |
|
* |
|
* @param value {Number} X in real |
|
* @param no_min {boolean=} don't use min value |
|
* @returns {Number} X in percent |
|
*/ |
|
convertToPercent: function (value, no_min) { |
|
var diapason = this.options.max - this.options.min, |
|
one_percent = diapason / 100, |
|
val, percent; |
|
|
|
if (!diapason) { |
|
this.no_diapason = true; |
|
return 0; |
|
} |
|
|
|
if (no_min) { |
|
val = value; |
|
} else { |
|
val = value - this.options.min; |
|
} |
|
|
|
percent = val / one_percent; |
|
|
|
return this.toFixed(percent); |
|
}, |
|
|
|
/** |
|
* Convert percent to real values |
|
* |
|
* @param percent {Number} X in percent |
|
* @returns {Number} X in real |
|
*/ |
|
convertToValue: function (percent) { |
|
var min = this.options.min, |
|
max = this.options.max, |
|
min_decimals = min.toString().split(".")[1], |
|
max_decimals = max.toString().split(".")[1], |
|
min_length, max_length, |
|
avg_decimals = 0, |
|
abs = 0; |
|
|
|
if (percent === 0) { |
|
return this.options.min; |
|
} |
|
if (percent === 100) { |
|
return this.options.max; |
|
} |
|
|
|
|
|
if (min_decimals) { |
|
min_length = min_decimals.length; |
|
avg_decimals = min_length; |
|
} |
|
if (max_decimals) { |
|
max_length = max_decimals.length; |
|
avg_decimals = max_length; |
|
} |
|
if (min_length && max_length) { |
|
avg_decimals = (min_length >= max_length) ? min_length : max_length; |
|
} |
|
|
|
if (min < 0) { |
|
abs = Math.abs(min); |
|
min = +(min + abs).toFixed(avg_decimals); |
|
max = +(max + abs).toFixed(avg_decimals); |
|
} |
|
|
|
var number = ((max - min) / 100 * percent) + min, |
|
string = this.options.step.toString().split(".")[1], |
|
result; |
|
|
|
if (string) { |
|
number = +number.toFixed(string.length); |
|
} else { |
|
number = number / this.options.step; |
|
number = number * this.options.step; |
|
|
|
number = +number.toFixed(0); |
|
} |
|
|
|
if (abs) { |
|
number -= abs; |
|
} |
|
|
|
if (string) { |
|
result = +number.toFixed(string.length); |
|
} else { |
|
result = this.toFixed(number); |
|
} |
|
|
|
if (result < this.options.min) { |
|
result = this.options.min; |
|
} else if (result > this.options.max) { |
|
result = this.options.max; |
|
} |
|
|
|
return result; |
|
}, |
|
|
|
/** |
|
* Round percent value with step |
|
* |
|
* @param percent {Number} |
|
* @returns percent {Number} rounded |
|
*/ |
|
calcWithStep: function (percent) { |
|
var rounded = Math.round(percent / this.coords.p_step) * this.coords.p_step; |
|
|
|
if (rounded > 100) { |
|
rounded = 100; |
|
} |
|
if (percent === 100) { |
|
rounded = 100; |
|
} |
|
|
|
return this.toFixed(rounded); |
|
}, |
|
|
|
checkMinInterval: function (p_current, p_next, type) { |
|
var o = this.options, |
|
current, |
|
next; |
|
|
|
if (!o.min_interval) { |
|
return p_current; |
|
} |
|
|
|
current = this.convertToValue(p_current); |
|
next = this.convertToValue(p_next); |
|
|
|
if (type === "from") { |
|
|
|
if (next - current < o.min_interval) { |
|
current = next - o.min_interval; |
|
} |
|
|
|
} else { |
|
|
|
if (current - next < o.min_interval) { |
|
current = next + o.min_interval; |
|
} |
|
|
|
} |
|
|
|
return this.convertToPercent(current); |
|
}, |
|
|
|
checkMaxInterval: function (p_current, p_next, type) { |
|
var o = this.options, |
|
current, |
|
next; |
|
|
|
if (!o.max_interval) { |
|
return p_current; |
|
} |
|
|
|
current = this.convertToValue(p_current); |
|
next = this.convertToValue(p_next); |
|
|
|
if (type === "from") { |
|
|
|
if (next - current > o.max_interval) { |
|
current = next - o.max_interval; |
|
} |
|
|
|
} else { |
|
|
|
if (current - next > o.max_interval) { |
|
current = next + o.max_interval; |
|
} |
|
|
|
} |
|
|
|
return this.convertToPercent(current); |
|
}, |
|
|
|
checkDiapason: function (p_num, min, max) { |
|
var num = this.convertToValue(p_num), |
|
o = this.options; |
|
|
|
if (typeof min !== "number") { |
|
min = o.min; |
|
} |
|
|
|
if (typeof max !== "number") { |
|
max = o.max; |
|
} |
|
|
|
if (num < min) { |
|
num = min; |
|
} |
|
|
|
if (num > max) { |
|
num = max; |
|
} |
|
|
|
return this.convertToPercent(num); |
|
}, |
|
|
|
toFixed: function (num) { |
|
num = num.toFixed(20); |
|
return +num; |
|
}, |
|
|
|
_prettify: function (num) { |
|
if (!this.options.prettify_enabled) { |
|
return num; |
|
} |
|
|
|
if (this.options.prettify && typeof this.options.prettify === "function") { |
|
return this.options.prettify(num); |
|
} else { |
|
return this.prettify(num); |
|
} |
|
}, |
|
|
|
prettify: function (num) { |
|
var n = num.toString(); |
|
return n.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1" + this.options.prettify_separator); |
|
}, |
|
|
|
checkEdges: function (left, width) { |
|
if (!this.options.force_edges) { |
|
return this.toFixed(left); |
|
} |
|
|
|
if (left < 0) { |
|
left = 0; |
|
} else if (left > 100 - width) { |
|
left = 100 - width; |
|
} |
|
|
|
return this.toFixed(left); |
|
}, |
|
|
|
validate: function () { |
|
var o = this.options, |
|
r = this.result, |
|
v = o.values, |
|
vl = v.length, |
|
value, |
|
i; |
|
|
|
if (typeof o.min === "string") o.min = +o.min; |
|
if (typeof o.max === "string") o.max = +o.max; |
|
if (typeof o.from === "string") o.from = +o.from; |
|
if (typeof o.to === "string") o.to = +o.to; |
|
if (typeof o.step === "string") o.step = +o.step; |
|
|
|
if (typeof o.from_min === "string") o.from_min = +o.from_min; |
|
if (typeof o.from_max === "string") o.from_max = +o.from_max; |
|
if (typeof o.to_min === "string") o.to_min = +o.to_min; |
|
if (typeof o.to_max === "string") o.to_max = +o.to_max; |
|
|
|
if (typeof o.grid_num === "string") o.grid_num = +o.grid_num; |
|
|
|
if (o.max < o.min) { |
|
o.max = o.min; |
|
} |
|
|
|
if (vl) { |
|
o.p_values = []; |
|
o.min = 0; |
|
o.max = vl - 1; |
|
o.step = 1; |
|
o.grid_num = o.max; |
|
o.grid_snap = true; |
|
|
|
for (i = 0; i < vl; i++) { |
|
value = +v[i]; |
|
|
|
if (!isNaN(value)) { |
|
v[i] = value; |
|
value = this._prettify(value); |
|
} else { |
|
value = v[i]; |
|
} |
|
|
|
o.p_values.push(value); |
|
} |
|
} |
|
|
|
if (typeof o.from !== "number" || isNaN(o.from)) { |
|
o.from = o.min; |
|
} |
|
|
|
if (typeof o.to !== "number" || isNaN(o.to)) { |
|
o.to = o.max; |
|
} |
|
|
|
if (o.type === "single") { |
|
|
|
if (o.from < o.min) o.from = o.min; |
|
if (o.from > o.max) o.from = o.max; |
|
|
|
} else { |
|
|
|
if (o.from < o.min) o.from = o.min; |
|
if (o.from > o.max) o.from = o.max; |
|
|
|
if (o.to < o.min) o.to = o.min; |
|
if (o.to > o.max) o.to = o.max; |
|
|
|
if (this.update_check.from) { |
|
|
|
if (this.update_check.from !== o.from) { |
|
if (o.from > o.to) o.from = o.to; |
|
} |
|
if (this.update_check.to !== o.to) { |
|
if (o.to < o.from) o.to = o.from; |
|
} |
|
|
|
} |
|
|
|
if (o.from > o.to) o.from = o.to; |
|
if (o.to < o.from) o.to = o.from; |
|
|
|
} |
|
|
|
if (typeof o.step !== "number" || isNaN(o.step) || !o.step || o.step < 0) { |
|
o.step = 1; |
|
} |
|
|
|
if (typeof o.from_min === "number" && o.from < o.from_min) { |
|
o.from = o.from_min; |
|
} |
|
|
|
if (typeof o.from_max === "number" && o.from > o.from_max) { |
|
o.from = o.from_max; |
|
} |
|
|
|
if (typeof o.to_min === "number" && o.to < o.to_min) { |
|
o.to = o.to_min; |
|
} |
|
|
|
if (typeof o.to_max === "number" && o.from > o.to_max) { |
|
o.to = o.to_max; |
|
} |
|
|
|
if (r) { |
|
if (r.min !== o.min) { |
|
r.min = o.min; |
|
} |
|
|
|
if (r.max !== o.max) { |
|
r.max = o.max; |
|
} |
|
|
|
if (r.from < r.min || r.from > r.max) { |
|
r.from = o.from; |
|
} |
|
|
|
if (r.to < r.min || r.to > r.max) { |
|
r.to = o.to; |
|
} |
|
} |
|
|
|
if (typeof o.min_interval !== "number" || isNaN(o.min_interval) || !o.min_interval || o.min_interval < 0) { |
|
o.min_interval = 0; |
|
} |
|
|
|
if (typeof o.max_interval !== "number" || isNaN(o.max_interval) || !o.max_interval || o.max_interval < 0) { |
|
o.max_interval = 0; |
|
} |
|
|
|
if (o.min_interval && o.min_interval > o.max - o.min) { |
|
o.min_interval = o.max - o.min; |
|
} |
|
|
|
if (o.max_interval && o.max_interval > o.max - o.min) { |
|
o.max_interval = o.max - o.min; |
|
} |
|
}, |
|
|
|
decorate: function (num, original) { |
|
var decorated = "", |
|
o = this.options; |
|
|
|
if (o.prefix) { |
|
decorated += o.prefix; |
|
} |
|
|
|
decorated += num; |
|
|
|
if (o.max_postfix) { |
|
if (o.values.length && num === o.p_values[o.max]) { |
|
decorated += o.max_postfix; |
|
if (o.postfix) { |
|
decorated += " "; |
|
} |
|
} else if (original === o.max) { |
|
decorated += o.max_postfix; |
|
if (o.postfix) { |
|
decorated += " "; |
|
} |
|
} |
|
} |
|
|
|
if (o.postfix) { |
|
decorated += o.postfix; |
|
} |
|
|
|
return decorated; |
|
}, |
|
|
|
updateFrom: function () { |
|
this.result.from = this.options.from; |
|
this.result.from_percent = this.convertToPercent(this.result.from); |
|
this.result.from_pretty = this._prettify(this.result.from); |
|
if (this.options.values) { |
|
this.result.from_value = this.options.values[this.result.from]; |
|
} |
|
}, |
|
|
|
updateTo: function () { |
|
this.result.to = this.options.to; |
|
this.result.to_percent = this.convertToPercent(this.result.to); |
|
this.result.to_pretty = this._prettify(this.result.to); |
|
if (this.options.values) { |
|
this.result.to_value = this.options.values[this.result.to]; |
|
} |
|
}, |
|
|
|
updateResult: function () { |
|
this.result.min = this.options.min; |
|
this.result.max = this.options.max; |
|
this.updateFrom(); |
|
this.updateTo(); |
|
}, |
|
|
|
|
|
// ============================================================================================================= |
|
// Grid |
|
|
|
appendGrid: function () { |
|
if (!this.options.grid) { |
|
return; |
|
} |
|
|
|
var o = this.options, |
|
i, z, |
|
|
|
total = o.max - o.min, |
|
big_num = o.grid_num, |
|
big_p = 0, |
|
big_w = 0, |
|
|
|
small_max = 4, |
|
local_small_max, |
|
small_p, |
|
small_w = 0, |
|
|
|
result, |
|
html = ''; |
|
|
|
|
|
|
|
this.calcGridMargin(); |
|
|
|
if (o.grid_snap) { |
|
big_num = total / o.step; |
|
} |
|
|
|
if (big_num > 50) big_num = 50; |
|
big_p = this.toFixed(100 / big_num); |
|
|
|
if (big_num > 4) { |
|
small_max = 3; |
|
} |
|
if (big_num > 7) { |
|
small_max = 2; |
|
} |
|
if (big_num > 14) { |
|
small_max = 1; |
|
} |
|
if (big_num > 28) { |
|
small_max = 0; |
|
} |
|
|
|
for (i = 0; i < big_num + 1; i++) { |
|
local_small_max = small_max; |
|
|
|
big_w = this.toFixed(big_p * i); |
|
|
|
if (big_w > 100) { |
|
big_w = 100; |
|
} |
|
this.coords.big[i] = big_w; |
|
|
|
small_p = (big_w - (big_p * (i - 1))) / (local_small_max + 1); |
|
|
|
for (z = 1; z <= local_small_max; z++) { |
|
if (big_w === 0) { |
|
break; |
|
} |
|
|
|
small_w = this.toFixed(big_w - (small_p * z)); |
|
|
|
html += '<span class="irs-grid-pol small" style="left: ' + small_w + '%"></span>'; |
|
} |
|
|
|
html += '<span class="irs-grid-pol" style="left: ' + big_w + '%"></span>'; |
|
|
|
result = this.convertToValue(big_w); |
|
if (o.values.length) { |
|
result = o.p_values[result]; |
|
} else { |
|
result = this._prettify(result); |
|
} |
|
|
|
html += '<span class="irs-grid-text js-grid-text-' + i + '" style="left: ' + big_w + '%">' + result + '</span>'; |
|
} |
|
this.coords.big_num = Math.ceil(big_num + 1); |
|
|
|
|
|
|
|
this.$cache.cont.addClass("irs-with-grid"); |
|
this.$cache.grid.html(html); |
|
this.cacheGridLabels(); |
|
}, |
|
|
|
cacheGridLabels: function () { |
|
var $label, i, |
|
num = this.coords.big_num; |
|
|
|
for (i = 0; i < num; i++) { |
|
$label = this.$cache.grid.find(".js-grid-text-" + i); |
|
this.$cache.grid_labels.push($label); |
|
} |
|
|
|
this.calcGridLabels(); |
|
}, |
|
|
|
calcGridLabels: function () { |
|
var i, label, start = [], finish = [], |
|
num = this.coords.big_num; |
|
|
|
for (i = 0; i < num; i++) { |
|
this.coords.big_w[i] = this.$cache.grid_labels[i].outerWidth(false); |
|
this.coords.big_p[i] = this.toFixed(this.coords.big_w[i] / this.coords.w_rs * 100); |
|
this.coords.big_x[i] = this.toFixed(this.coords.big_p[i] / 2); |
|
|
|
start[i] = this.toFixed(this.coords.big[i] - this.coords.big_x[i]); |
|
finish[i] = this.toFixed(start[i] + this.coords.big_p[i]); |
|
} |
|
|
|
if (this.options.force_edges) { |
|
if (start[0] < -this.coords.grid_gap) { |
|
start[0] = -this.coords.grid_gap; |
|
finish[0] = this.toFixed(start[0] + this.coords.big_p[0]); |
|
|
|
this.coords.big_x[0] = this.coords.grid_gap; |
|
} |
|
|
|
if (finish[num - 1] > 100 + this.coords.grid_gap) { |
|
finish[num - 1] = 100 + this.coords.grid_gap; |
|
start[num - 1] = this.toFixed(finish[num - 1] - this.coords.big_p[num - 1]); |
|
|
|
this.coords.big_x[num - 1] = this.toFixed(this.coords.big_p[num - 1] - this.coords.grid_gap); |
|
} |
|
} |
|
|
|
this.calcGridCollision(2, start, finish); |
|
this.calcGridCollision(4, start, finish); |
|
|
|
for (i = 0; i < num; i++) { |
|
label = this.$cache.grid_labels[i][0]; |
|
|
|
if (this.coords.big_x[i] !== Number.POSITIVE_INFINITY) { |
|
label.style.marginLeft = -this.coords.big_x[i] + "%"; |
|
} |
|
} |
|
}, |
|
|
|
// Collisions Calc Beta |
|
// TODO: Refactor then have plenty of time |
|
calcGridCollision: function (step, start, finish) { |
|
var i, next_i, label, |
|
num = this.coords.big_num; |
|
|
|
for (i = 0; i < num; i += step) { |
|
next_i = i + (step / 2); |
|
if (next_i >= num) { |
|
break; |
|
} |
|
|
|
label = this.$cache.grid_labels[next_i][0]; |
|
|
|
if (finish[i] <= start[next_i]) { |
|
label.style.visibility = "visible"; |
|
} else { |
|
label.style.visibility = "hidden"; |
|
} |
|
} |
|
}, |
|
|
|
calcGridMargin: function () { |
|
if (!this.options.grid_margin) { |
|
return; |
|
} |
|
|
|
this.coords.w_rs = this.$cache.rs.outerWidth(false); |
|
if (!this.coords.w_rs) { |
|
return; |
|
} |
|
|
|
if (this.options.type === "single") { |
|
this.coords.w_handle = this.$cache.s_single.outerWidth(false); |
|
} else { |
|
this.coords.w_handle = this.$cache.s_from.outerWidth(false); |
|
} |
|
this.coords.p_handle = this.toFixed(this.coords.w_handle / this.coords.w_rs * 100); |
|
this.coords.grid_gap = this.toFixed((this.coords.p_handle / 2) - 0.1); |
|
|
|
this.$cache.grid[0].style.width = this.toFixed(100 - this.coords.p_handle) + "%"; |
|
this.$cache.grid[0].style.left = this.coords.grid_gap + "%"; |
|
}, |
|
|
|
|
|
|
|
// ============================================================================================================= |
|
// Public methods |
|
|
|
update: function (options) { |
|
if (!this.input) { |
|
return; |
|
} |
|
|
|
this.is_update = true; |
|
|
|
this.options.from = this.result.from; |
|
this.options.to = this.result.to; |
|
this.update_check.from = this.result.from; |
|
this.update_check.to = this.result.to; |
|
|
|
this.options = $.extend(this.options, options); |
|
this.validate(); |
|
this.updateResult(options); |
|
|
|
this.toggleInput(); |
|
this.remove(); |
|
this.init(true); |
|
}, |
|
|
|
reset: function () { |
|
if (!this.input) { |
|
return; |
|
} |
|
|
|
this.updateResult(); |
|
this.update(); |
|
}, |
|
|
|
destroy: function () { |
|
if (!this.input) { |
|
return; |
|
} |
|
|
|
this.toggleInput(); |
|
this.$cache.input.prop("readonly", false); |
|
$.data(this.input, "ionRangeSlider", null); |
|
|
|
this.remove(); |
|
this.input = null; |
|
this.options = null; |
|
} |
|
}; |
|
|
|
$.fn.ionRangeSlider = function (options) { |
|
return this.each(function() { |
|
if (!$.data(this, "ionRangeSlider")) { |
|
$.data(this, "ionRangeSlider", new IonRangeSlider(this, options, plugin_count++)); |
|
} |
|
}); |
|
}; |
|
|
|
|
|
|
|
// ================================================================================================================= |
|
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ |
|
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating |
|
|
|
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel |
|
|
|
// MIT license |
|
|
|
(function() { |
|
var lastTime = 0; |
|
var vendors = ['ms', 'moz', 'webkit', 'o']; |
|
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { |
|
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; |
|
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] |
|
|| window[vendors[x]+'CancelRequestAnimationFrame']; |
|
} |
|
|
|
if (!window.requestAnimationFrame) |
|
window.requestAnimationFrame = function(callback, element) { |
|
var currTime = new Date().getTime(); |
|
var timeToCall = Math.max(0, 16 - (currTime - lastTime)); |
|
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, |
|
timeToCall); |
|
lastTime = currTime + timeToCall; |
|
return id; |
|
}; |
|
|
|
if (!window.cancelAnimationFrame) |
|
window.cancelAnimationFrame = function(id) { |
|
clearTimeout(id); |
|
}; |
|
}()); |
|
|
|
}));
|
|
|