ion.rangeSlider.js 83 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449
  1. // Ion.RangeSlider
  2. // version 2.3.0 Build: 381
  3. // © Denis Ineshin, 2018
  4. // https://github.com/IonDen
  5. //
  6. // Project page: http://ionden.com/a/plugins/ion.rangeSlider/en.html
  7. // GitHub page: https://github.com/IonDen/ion.rangeSlider
  8. //
  9. // Released under MIT licence:
  10. // http://ionden.com/a/plugins/licence-en.html
  11. // =====================================================================================================================
  12. ;(function(factory) {
  13. if (!jQuery && typeof define === "function" && define.amd) {
  14. define(["jquery"], function (jQuery) {
  15. return factory(jQuery, document, window, navigator);
  16. });
  17. } else if (!jQuery && typeof exports === "object") {
  18. factory(require("jquery"), document, window, navigator);
  19. } else {
  20. factory(jQuery, document, window, navigator);
  21. }
  22. } (function ($, document, window, navigator, undefined) {
  23. "use strict";
  24. // =================================================================================================================
  25. // Service
  26. var plugin_count = 0;
  27. // IE8 fix
  28. var is_old_ie = (function () {
  29. var n = navigator.userAgent,
  30. r = /msie\s\d+/i,
  31. v;
  32. if (n.search(r) > 0) {
  33. v = r.exec(n).toString();
  34. v = v.split(" ")[1];
  35. if (v < 9) {
  36. $("html").addClass("lt-ie9");
  37. return true;
  38. }
  39. }
  40. return false;
  41. } ());
  42. if (!Function.prototype.bind) {
  43. Function.prototype.bind = function bind(that) {
  44. var target = this;
  45. var slice = [].slice;
  46. if (typeof target != "function") {
  47. throw new TypeError();
  48. }
  49. var args = slice.call(arguments, 1),
  50. bound = function () {
  51. if (this instanceof bound) {
  52. var F = function(){};
  53. F.prototype = target.prototype;
  54. var self = new F();
  55. var result = target.apply(
  56. self,
  57. args.concat(slice.call(arguments))
  58. );
  59. if (Object(result) === result) {
  60. return result;
  61. }
  62. return self;
  63. } else {
  64. return target.apply(
  65. that,
  66. args.concat(slice.call(arguments))
  67. );
  68. }
  69. };
  70. return bound;
  71. };
  72. }
  73. if (!Array.prototype.indexOf) {
  74. Array.prototype.indexOf = function(searchElement, fromIndex) {
  75. var k;
  76. if (this == null) {
  77. throw new TypeError('"this" is null or not defined');
  78. }
  79. var O = Object(this);
  80. var len = O.length >>> 0;
  81. if (len === 0) {
  82. return -1;
  83. }
  84. var n = +fromIndex || 0;
  85. if (Math.abs(n) === Infinity) {
  86. n = 0;
  87. }
  88. if (n >= len) {
  89. return -1;
  90. }
  91. k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
  92. while (k < len) {
  93. if (k in O && O[k] === searchElement) {
  94. return k;
  95. }
  96. k++;
  97. }
  98. return -1;
  99. };
  100. }
  101. // =================================================================================================================
  102. // Template
  103. var base_html =
  104. '<span class="irs">' +
  105. '<span class="irs-line" tabindex="0"></span>' +
  106. '<span class="irs-min">0</span><span class="irs-max">1</span>' +
  107. '<span class="irs-from">0</span><span class="irs-to">0</span><span class="irs-single">0</span>' +
  108. '</span>' +
  109. '<span class="irs-grid"></span>';
  110. var single_html =
  111. '<span class="irs-bar irs-bar--single"></span>' +
  112. '<span class="irs-shadow shadow-single"></span>' +
  113. '<span class="irs-handle single"><i></i><i></i><i></i></span>';
  114. var double_html =
  115. '<span class="irs-bar"></span>' +
  116. '<span class="irs-shadow shadow-from"></span>' +
  117. '<span class="irs-shadow shadow-to"></span>' +
  118. '<span class="irs-handle from"><i></i><i></i><i></i></span>' +
  119. '<span class="irs-handle to"><i></i><i></i><i></i></span>';
  120. var disable_html =
  121. '<span class="irs-disable-mask"></span>';
  122. // =================================================================================================================
  123. // Core
  124. /**
  125. * Main plugin constructor
  126. *
  127. * @param input {Object} link to base input element
  128. * @param options {Object} slider config
  129. * @param plugin_count {Number}
  130. * @constructor
  131. */
  132. var IonRangeSlider = function (input, options, plugin_count) {
  133. this.VERSION = "2.3.0";
  134. this.input = input;
  135. this.plugin_count = plugin_count;
  136. this.current_plugin = 0;
  137. this.calc_count = 0;
  138. this.update_tm = 0;
  139. this.old_from = 0;
  140. this.old_to = 0;
  141. this.old_min_interval = null;
  142. this.raf_id = null;
  143. this.dragging = false;
  144. this.force_redraw = false;
  145. this.no_diapason = false;
  146. this.has_tab_index = true;
  147. this.is_key = false;
  148. this.is_update = false;
  149. this.is_start = true;
  150. this.is_finish = false;
  151. this.is_active = false;
  152. this.is_resize = false;
  153. this.is_click = false;
  154. options = options || {};
  155. // cache for links to all DOM elements
  156. this.$cache = {
  157. win: $(window),
  158. body: $(document.body),
  159. input: $(input),
  160. cont: null,
  161. rs: null,
  162. min: null,
  163. max: null,
  164. from: null,
  165. to: null,
  166. single: null,
  167. bar: null,
  168. line: null,
  169. s_single: null,
  170. s_from: null,
  171. s_to: null,
  172. shad_single: null,
  173. shad_from: null,
  174. shad_to: null,
  175. edge: null,
  176. grid: null,
  177. grid_labels: []
  178. };
  179. // storage for measure variables
  180. this.coords = {
  181. // left
  182. x_gap: 0,
  183. x_pointer: 0,
  184. // width
  185. w_rs: 0,
  186. w_rs_old: 0,
  187. w_handle: 0,
  188. // percents
  189. p_gap: 0,
  190. p_gap_left: 0,
  191. p_gap_right: 0,
  192. p_step: 0,
  193. p_pointer: 0,
  194. p_handle: 0,
  195. p_single_fake: 0,
  196. p_single_real: 0,
  197. p_from_fake: 0,
  198. p_from_real: 0,
  199. p_to_fake: 0,
  200. p_to_real: 0,
  201. p_bar_x: 0,
  202. p_bar_w: 0,
  203. // grid
  204. grid_gap: 0,
  205. big_num: 0,
  206. big: [],
  207. big_w: [],
  208. big_p: [],
  209. big_x: []
  210. };
  211. // storage for labels measure variables
  212. this.labels = {
  213. // width
  214. w_min: 0,
  215. w_max: 0,
  216. w_from: 0,
  217. w_to: 0,
  218. w_single: 0,
  219. // percents
  220. p_min: 0,
  221. p_max: 0,
  222. p_from_fake: 0,
  223. p_from_left: 0,
  224. p_to_fake: 0,
  225. p_to_left: 0,
  226. p_single_fake: 0,
  227. p_single_left: 0
  228. };
  229. /**
  230. * get and validate config
  231. */
  232. var $inp = this.$cache.input,
  233. val = $inp.prop("value"),
  234. config, config_from_data, prop;
  235. // default config
  236. config = {
  237. skin: "flat",
  238. type: "single",
  239. min: 10,
  240. max: 100,
  241. from: null,
  242. to: null,
  243. step: 1,
  244. min_interval: 0,
  245. max_interval: 0,
  246. drag_interval: false,
  247. values: [],
  248. p_values: [],
  249. from_fixed: false,
  250. from_min: null,
  251. from_max: null,
  252. from_shadow: false,
  253. to_fixed: false,
  254. to_min: null,
  255. to_max: null,
  256. to_shadow: false,
  257. prettify_enabled: true,
  258. prettify_separator: " ",
  259. prettify: null,
  260. force_edges: false,
  261. keyboard: true,
  262. grid: false,
  263. grid_margin: true,
  264. grid_num: 4,
  265. grid_snap: false,
  266. hide_min_max: false,
  267. hide_from_to: false,
  268. prefix: "",
  269. postfix: "",
  270. max_postfix: "",
  271. decorate_both: true,
  272. values_separator: " — ",
  273. input_values_separator: ";",
  274. disable: false,
  275. block: false,
  276. extra_classes: "",
  277. scope: null,
  278. onStart: null,
  279. onChange: null,
  280. onFinish: null,
  281. onUpdate: null
  282. };
  283. // check if base element is input
  284. if ($inp[0].nodeName !== "INPUT") {
  285. console && console.warn && console.warn("Base element should be <input>!", $inp[0]);
  286. }
  287. // config from data-attributes extends js config
  288. config_from_data = {
  289. skin: $inp.data("skin"),
  290. type: $inp.data("type"),
  291. min: $inp.data("min"),
  292. max: $inp.data("max"),
  293. from: $inp.data("from"),
  294. to: $inp.data("to"),
  295. step: $inp.data("step"),
  296. min_interval: $inp.data("minInterval"),
  297. max_interval: $inp.data("maxInterval"),
  298. drag_interval: $inp.data("dragInterval"),
  299. values: $inp.data("values"),
  300. from_fixed: $inp.data("fromFixed"),
  301. from_min: $inp.data("fromMin"),
  302. from_max: $inp.data("fromMax"),
  303. from_shadow: $inp.data("fromShadow"),
  304. to_fixed: $inp.data("toFixed"),
  305. to_min: $inp.data("toMin"),
  306. to_max: $inp.data("toMax"),
  307. to_shadow: $inp.data("toShadow"),
  308. prettify_enabled: $inp.data("prettifyEnabled"),
  309. prettify_separator: $inp.data("prettifySeparator"),
  310. force_edges: $inp.data("forceEdges"),
  311. keyboard: $inp.data("keyboard"),
  312. grid: $inp.data("grid"),
  313. grid_margin: $inp.data("gridMargin"),
  314. grid_num: $inp.data("gridNum"),
  315. grid_snap: $inp.data("gridSnap"),
  316. hide_min_max: $inp.data("hideMinMax"),
  317. hide_from_to: $inp.data("hideFromTo"),
  318. prefix: $inp.data("prefix"),
  319. postfix: $inp.data("postfix"),
  320. max_postfix: $inp.data("maxPostfix"),
  321. decorate_both: $inp.data("decorateBoth"),
  322. values_separator: $inp.data("valuesSeparator"),
  323. input_values_separator: $inp.data("inputValuesSeparator"),
  324. disable: $inp.data("disable"),
  325. block: $inp.data("block"),
  326. extra_classes: $inp.data("extraClasses"),
  327. };
  328. config_from_data.values = config_from_data.values && config_from_data.values.split(",");
  329. for (prop in config_from_data) {
  330. if (config_from_data.hasOwnProperty(prop)) {
  331. if (config_from_data[prop] === undefined || config_from_data[prop] === "") {
  332. delete config_from_data[prop];
  333. }
  334. }
  335. }
  336. // input value extends default config
  337. if (val !== undefined && val !== "") {
  338. val = val.split(config_from_data.input_values_separator || options.input_values_separator || ";");
  339. if (val[0] && val[0] == +val[0]) {
  340. val[0] = +val[0];
  341. }
  342. if (val[1] && val[1] == +val[1]) {
  343. val[1] = +val[1];
  344. }
  345. if (options && options.values && options.values.length) {
  346. config.from = val[0] && options.values.indexOf(val[0]);
  347. config.to = val[1] && options.values.indexOf(val[1]);
  348. } else {
  349. config.from = val[0] && +val[0];
  350. config.to = val[1] && +val[1];
  351. }
  352. }
  353. // js config extends default config
  354. $.extend(config, options);
  355. // data config extends config
  356. $.extend(config, config_from_data);
  357. this.options = config;
  358. // validate config, to be sure that all data types are correct
  359. this.update_check = {};
  360. this.validate();
  361. // default result object, returned to callbacks
  362. this.result = {
  363. input: this.$cache.input,
  364. slider: null,
  365. min: this.options.min,
  366. max: this.options.max,
  367. from: this.options.from,
  368. from_percent: 0,
  369. from_value: null,
  370. to: this.options.to,
  371. to_percent: 0,
  372. to_value: null
  373. };
  374. this.init();
  375. };
  376. IonRangeSlider.prototype = {
  377. /**
  378. * Starts or updates the plugin instance
  379. *
  380. * @param [is_update] {boolean}
  381. */
  382. init: function (is_update) {
  383. this.no_diapason = false;
  384. this.coords.p_step = this.convertToPercent(this.options.step, true);
  385. this.target = "base";
  386. this.toggleInput();
  387. this.append();
  388. this.setMinMax();
  389. if (is_update) {
  390. this.force_redraw = true;
  391. this.calc(true);
  392. // callbacks called
  393. this.callOnUpdate();
  394. } else {
  395. this.force_redraw = true;
  396. this.calc(true);
  397. // callbacks called
  398. this.callOnStart();
  399. }
  400. this.updateScene();
  401. },
  402. /**
  403. * Appends slider template to a DOM
  404. */
  405. append: function () {
  406. var container_html = '<span class="irs irs--' + this.options.skin + ' js-irs-' + this.plugin_count + ' ' + this.options.extra_classes + '"></span>';
  407. this.$cache.input.before(container_html);
  408. this.$cache.input.prop("readonly", true);
  409. this.$cache.cont = this.$cache.input.prev();
  410. this.result.slider = this.$cache.cont;
  411. this.$cache.cont.html(base_html);
  412. this.$cache.rs = this.$cache.cont.find(".irs");
  413. this.$cache.min = this.$cache.cont.find(".irs-min");
  414. this.$cache.max = this.$cache.cont.find(".irs-max");
  415. this.$cache.from = this.$cache.cont.find(".irs-from");
  416. this.$cache.to = this.$cache.cont.find(".irs-to");
  417. this.$cache.single = this.$cache.cont.find(".irs-single");
  418. this.$cache.line = this.$cache.cont.find(".irs-line");
  419. this.$cache.grid = this.$cache.cont.find(".irs-grid");
  420. if (this.options.type === "single") {
  421. this.$cache.cont.append(single_html);
  422. this.$cache.bar = this.$cache.cont.find(".irs-bar");
  423. this.$cache.edge = this.$cache.cont.find(".irs-bar-edge");
  424. this.$cache.s_single = this.$cache.cont.find(".single");
  425. this.$cache.from[0].style.visibility = "hidden";
  426. this.$cache.to[0].style.visibility = "hidden";
  427. this.$cache.shad_single = this.$cache.cont.find(".shadow-single");
  428. } else {
  429. this.$cache.cont.append(double_html);
  430. this.$cache.bar = this.$cache.cont.find(".irs-bar");
  431. this.$cache.s_from = this.$cache.cont.find(".from");
  432. this.$cache.s_to = this.$cache.cont.find(".to");
  433. this.$cache.shad_from = this.$cache.cont.find(".shadow-from");
  434. this.$cache.shad_to = this.$cache.cont.find(".shadow-to");
  435. this.setTopHandler();
  436. }
  437. if (this.options.hide_from_to) {
  438. this.$cache.from[0].style.display = "none";
  439. this.$cache.to[0].style.display = "none";
  440. this.$cache.single[0].style.display = "none";
  441. }
  442. this.appendGrid();
  443. if (this.options.disable) {
  444. this.appendDisableMask();
  445. this.$cache.input[0].disabled = true;
  446. } else {
  447. this.$cache.input[0].disabled = false;
  448. this.removeDisableMask();
  449. this.bindEvents();
  450. }
  451. // block only if not disabled
  452. if (!this.options.disable) {
  453. if (this.options.block) {
  454. this.appendDisableMask();
  455. } else {
  456. this.removeDisableMask();
  457. }
  458. }
  459. if (this.options.drag_interval) {
  460. this.$cache.bar[0].style.cursor = "ew-resize";
  461. }
  462. },
  463. /**
  464. * Determine which handler has a priority
  465. * works only for double slider type
  466. */
  467. setTopHandler: function () {
  468. var min = this.options.min,
  469. max = this.options.max,
  470. from = this.options.from,
  471. to = this.options.to;
  472. if (from > min && to === max) {
  473. this.$cache.s_from.addClass("type_last");
  474. } else if (to < max) {
  475. this.$cache.s_to.addClass("type_last");
  476. }
  477. },
  478. /**
  479. * Determine which handles was clicked last
  480. * and which handler should have hover effect
  481. *
  482. * @param target {String}
  483. */
  484. changeLevel: function (target) {
  485. switch (target) {
  486. case "single":
  487. this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_single_fake);
  488. this.$cache.s_single.addClass("state_hover");
  489. break;
  490. case "from":
  491. this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_from_fake);
  492. this.$cache.s_from.addClass("state_hover");
  493. this.$cache.s_from.addClass("type_last");
  494. this.$cache.s_to.removeClass("type_last");
  495. break;
  496. case "to":
  497. this.coords.p_gap = this.toFixed(this.coords.p_pointer - this.coords.p_to_fake);
  498. this.$cache.s_to.addClass("state_hover");
  499. this.$cache.s_to.addClass("type_last");
  500. this.$cache.s_from.removeClass("type_last");
  501. break;
  502. case "both":
  503. this.coords.p_gap_left = this.toFixed(this.coords.p_pointer - this.coords.p_from_fake);
  504. this.coords.p_gap_right = this.toFixed(this.coords.p_to_fake - this.coords.p_pointer);
  505. this.$cache.s_to.removeClass("type_last");
  506. this.$cache.s_from.removeClass("type_last");
  507. break;
  508. }
  509. },
  510. /**
  511. * Then slider is disabled
  512. * appends extra layer with opacity
  513. */
  514. appendDisableMask: function () {
  515. this.$cache.cont.append(disable_html);
  516. this.$cache.cont.addClass("irs-disabled");
  517. },
  518. /**
  519. * Then slider is not disabled
  520. * remove disable mask
  521. */
  522. removeDisableMask: function () {
  523. this.$cache.cont.remove(".irs-disable-mask");
  524. this.$cache.cont.removeClass("irs-disabled");
  525. },
  526. /**
  527. * Remove slider instance
  528. * and unbind all events
  529. */
  530. remove: function () {
  531. this.$cache.cont.remove();
  532. this.$cache.cont = null;
  533. this.$cache.line.off("keydown.irs_" + this.plugin_count);
  534. this.$cache.body.off("touchmove.irs_" + this.plugin_count);
  535. this.$cache.body.off("mousemove.irs_" + this.plugin_count);
  536. this.$cache.win.off("touchend.irs_" + this.plugin_count);
  537. this.$cache.win.off("mouseup.irs_" + this.plugin_count);
  538. if (is_old_ie) {
  539. this.$cache.body.off("mouseup.irs_" + this.plugin_count);
  540. this.$cache.body.off("mouseleave.irs_" + this.plugin_count);
  541. }
  542. this.$cache.grid_labels = [];
  543. this.coords.big = [];
  544. this.coords.big_w = [];
  545. this.coords.big_p = [];
  546. this.coords.big_x = [];
  547. cancelAnimationFrame(this.raf_id);
  548. },
  549. /**
  550. * bind all slider events
  551. */
  552. bindEvents: function () {
  553. if (this.no_diapason) {
  554. return;
  555. }
  556. this.$cache.body.on("touchmove.irs_" + this.plugin_count, this.pointerMove.bind(this));
  557. this.$cache.body.on("mousemove.irs_" + this.plugin_count, this.pointerMove.bind(this));
  558. this.$cache.win.on("touchend.irs_" + this.plugin_count, this.pointerUp.bind(this));
  559. this.$cache.win.on("mouseup.irs_" + this.plugin_count, this.pointerUp.bind(this));
  560. this.$cache.line.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  561. this.$cache.line.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  562. this.$cache.line.on("focus.irs_" + this.plugin_count, this.pointerFocus.bind(this));
  563. if (this.options.drag_interval && this.options.type === "double") {
  564. this.$cache.bar.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "both"));
  565. this.$cache.bar.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "both"));
  566. } else {
  567. this.$cache.bar.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  568. this.$cache.bar.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  569. }
  570. if (this.options.type === "single") {
  571. this.$cache.single.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "single"));
  572. this.$cache.s_single.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "single"));
  573. this.$cache.shad_single.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  574. this.$cache.single.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "single"));
  575. this.$cache.s_single.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "single"));
  576. this.$cache.edge.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  577. this.$cache.shad_single.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  578. } else {
  579. this.$cache.single.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, null));
  580. this.$cache.single.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, null));
  581. this.$cache.from.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "from"));
  582. this.$cache.s_from.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "from"));
  583. this.$cache.to.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "to"));
  584. this.$cache.s_to.on("touchstart.irs_" + this.plugin_count, this.pointerDown.bind(this, "to"));
  585. this.$cache.shad_from.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  586. this.$cache.shad_to.on("touchstart.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  587. this.$cache.from.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "from"));
  588. this.$cache.s_from.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "from"));
  589. this.$cache.to.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "to"));
  590. this.$cache.s_to.on("mousedown.irs_" + this.plugin_count, this.pointerDown.bind(this, "to"));
  591. this.$cache.shad_from.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  592. this.$cache.shad_to.on("mousedown.irs_" + this.plugin_count, this.pointerClick.bind(this, "click"));
  593. }
  594. if (this.options.keyboard) {
  595. this.$cache.line.on("keydown.irs_" + this.plugin_count, this.key.bind(this, "keyboard"));
  596. }
  597. if (is_old_ie) {
  598. this.$cache.body.on("mouseup.irs_" + this.plugin_count, this.pointerUp.bind(this));
  599. this.$cache.body.on("mouseleave.irs_" + this.plugin_count, this.pointerUp.bind(this));
  600. }
  601. },
  602. /**
  603. * Focus with tabIndex
  604. *
  605. * @param e {Object} event object
  606. */
  607. pointerFocus: function (e) {
  608. if (!this.target) {
  609. var x;
  610. var $handle;
  611. if (this.options.type === "single") {
  612. $handle = this.$cache.single;
  613. } else {
  614. $handle = this.$cache.from;
  615. }
  616. x = $handle.offset().left;
  617. x += ($handle.width() / 2) - 1;
  618. this.pointerClick("single", {preventDefault: function () {}, pageX: x});
  619. }
  620. },
  621. /**
  622. * Mousemove or touchmove
  623. * only for handlers
  624. *
  625. * @param e {Object} event object
  626. */
  627. pointerMove: function (e) {
  628. if (!this.dragging) {
  629. return;
  630. }
  631. var x = e.pageX || e.originalEvent.touches && e.originalEvent.touches[0].pageX;
  632. this.coords.x_pointer = x - this.coords.x_gap;
  633. this.calc();
  634. },
  635. /**
  636. * Mouseup or touchend
  637. * only for handlers
  638. *
  639. * @param e {Object} event object
  640. */
  641. pointerUp: function (e) {
  642. if (this.current_plugin !== this.plugin_count) {
  643. return;
  644. }
  645. if (this.is_active) {
  646. this.is_active = false;
  647. } else {
  648. return;
  649. }
  650. this.$cache.cont.find(".state_hover").removeClass("state_hover");
  651. this.force_redraw = true;
  652. if (is_old_ie) {
  653. $("*").prop("unselectable", false);
  654. }
  655. this.updateScene();
  656. this.restoreOriginalMinInterval();
  657. // callbacks call
  658. if ($.contains(this.$cache.cont[0], e.target) || this.dragging) {
  659. this.callOnFinish();
  660. }
  661. this.dragging = false;
  662. },
  663. /**
  664. * Mousedown or touchstart
  665. * only for handlers
  666. *
  667. * @param target {String|null}
  668. * @param e {Object} event object
  669. */
  670. pointerDown: function (target, e) {
  671. e.preventDefault();
  672. var x = e.pageX || e.originalEvent.touches && e.originalEvent.touches[0].pageX;
  673. if (e.button === 2) {
  674. return;
  675. }
  676. if (target === "both") {
  677. this.setTempMinInterval();
  678. }
  679. if (!target) {
  680. target = this.target || "from";
  681. }
  682. this.current_plugin = this.plugin_count;
  683. this.target = target;
  684. this.is_active = true;
  685. this.dragging = true;
  686. this.coords.x_gap = this.$cache.rs.offset().left;
  687. this.coords.x_pointer = x - this.coords.x_gap;
  688. this.calcPointerPercent();
  689. this.changeLevel(target);
  690. if (is_old_ie) {
  691. $("*").prop("unselectable", true);
  692. }
  693. this.$cache.line.trigger("focus");
  694. this.updateScene();
  695. },
  696. /**
  697. * Mousedown or touchstart
  698. * for other slider elements, like diapason line
  699. *
  700. * @param target {String}
  701. * @param e {Object} event object
  702. */
  703. pointerClick: function (target, e) {
  704. e.preventDefault();
  705. var x = e.pageX || e.originalEvent.touches && e.originalEvent.touches[0].pageX;
  706. if (e.button === 2) {
  707. return;
  708. }
  709. this.current_plugin = this.plugin_count;
  710. this.target = target;
  711. this.is_click = true;
  712. this.coords.x_gap = this.$cache.rs.offset().left;
  713. this.coords.x_pointer = +(x - this.coords.x_gap).toFixed();
  714. this.force_redraw = true;
  715. this.calc();
  716. this.$cache.line.trigger("focus");
  717. },
  718. /**
  719. * Keyborard controls for focused slider
  720. *
  721. * @param target {String}
  722. * @param e {Object} event object
  723. * @returns {boolean|undefined}
  724. */
  725. key: function (target, e) {
  726. if (this.current_plugin !== this.plugin_count || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) {
  727. return;
  728. }
  729. switch (e.which) {
  730. case 83: // W
  731. case 65: // A
  732. case 40: // DOWN
  733. case 37: // LEFT
  734. e.preventDefault();
  735. this.moveByKey(false);
  736. break;
  737. case 87: // S
  738. case 68: // D
  739. case 38: // UP
  740. case 39: // RIGHT
  741. e.preventDefault();
  742. this.moveByKey(true);
  743. break;
  744. }
  745. return true;
  746. },
  747. /**
  748. * Move by key
  749. *
  750. * @param right {boolean} direction to move
  751. */
  752. moveByKey: function (right) {
  753. var p = this.coords.p_pointer;
  754. var p_step = (this.options.max - this.options.min) / 100;
  755. p_step = this.options.step / p_step;
  756. if (right) {
  757. p += p_step;
  758. } else {
  759. p -= p_step;
  760. }
  761. this.coords.x_pointer = this.toFixed(this.coords.w_rs / 100 * p);
  762. this.is_key = true;
  763. this.calc();
  764. },
  765. /**
  766. * Set visibility and content
  767. * of Min and Max labels
  768. */
  769. setMinMax: function () {
  770. if (!this.options) {
  771. return;
  772. }
  773. if (this.options.hide_min_max) {
  774. this.$cache.min[0].style.display = "none";
  775. this.$cache.max[0].style.display = "none";
  776. return;
  777. }
  778. if (this.options.values.length) {
  779. this.$cache.min.html(this.decorate(this.options.p_values[this.options.min]));
  780. this.$cache.max.html(this.decorate(this.options.p_values[this.options.max]));
  781. } else {
  782. var min_pretty = this._prettify(this.options.min);
  783. var max_pretty = this._prettify(this.options.max);
  784. this.result.min_pretty = min_pretty;
  785. this.result.max_pretty = max_pretty;
  786. this.$cache.min.html(this.decorate(min_pretty, this.options.min));
  787. this.$cache.max.html(this.decorate(max_pretty, this.options.max));
  788. }
  789. this.labels.w_min = this.$cache.min.outerWidth(false);
  790. this.labels.w_max = this.$cache.max.outerWidth(false);
  791. },
  792. /**
  793. * Then dragging interval, prevent interval collapsing
  794. * using min_interval option
  795. */
  796. setTempMinInterval: function () {
  797. var interval = this.result.to - this.result.from;
  798. if (this.old_min_interval === null) {
  799. this.old_min_interval = this.options.min_interval;
  800. }
  801. this.options.min_interval = interval;
  802. },
  803. /**
  804. * Restore min_interval option to original
  805. */
  806. restoreOriginalMinInterval: function () {
  807. if (this.old_min_interval !== null) {
  808. this.options.min_interval = this.old_min_interval;
  809. this.old_min_interval = null;
  810. }
  811. },
  812. // =============================================================================================================
  813. // Calculations
  814. /**
  815. * All calculations and measures start here
  816. *
  817. * @param update {boolean=}
  818. */
  819. calc: function (update) {
  820. if (!this.options) {
  821. return;
  822. }
  823. this.calc_count++;
  824. if (this.calc_count === 10 || update) {
  825. this.calc_count = 0;
  826. this.coords.w_rs = this.$cache.rs.outerWidth(false);
  827. this.calcHandlePercent();
  828. }
  829. if (!this.coords.w_rs) {
  830. return;
  831. }
  832. this.calcPointerPercent();
  833. var handle_x = this.getHandleX();
  834. if (this.target === "both") {
  835. this.coords.p_gap = 0;
  836. handle_x = this.getHandleX();
  837. }
  838. if (this.target === "click") {
  839. this.coords.p_gap = this.coords.p_handle / 2;
  840. handle_x = this.getHandleX();
  841. if (this.options.drag_interval) {
  842. this.target = "both_one";
  843. } else {
  844. this.target = this.chooseHandle(handle_x);
  845. }
  846. }
  847. switch (this.target) {
  848. case "base":
  849. var w = (this.options.max - this.options.min) / 100,
  850. f = (this.result.from - this.options.min) / w,
  851. t = (this.result.to - this.options.min) / w;
  852. this.coords.p_single_real = this.toFixed(f);
  853. this.coords.p_from_real = this.toFixed(f);
  854. this.coords.p_to_real = this.toFixed(t);
  855. this.coords.p_single_real = this.checkDiapason(this.coords.p_single_real, this.options.from_min, this.options.from_max);
  856. this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max);
  857. this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max);
  858. this.coords.p_single_fake = this.convertToFakePercent(this.coords.p_single_real);
  859. this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real);
  860. this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real);
  861. this.target = null;
  862. break;
  863. case "single":
  864. if (this.options.from_fixed) {
  865. break;
  866. }
  867. this.coords.p_single_real = this.convertToRealPercent(handle_x);
  868. this.coords.p_single_real = this.calcWithStep(this.coords.p_single_real);
  869. this.coords.p_single_real = this.checkDiapason(this.coords.p_single_real, this.options.from_min, this.options.from_max);
  870. this.coords.p_single_fake = this.convertToFakePercent(this.coords.p_single_real);
  871. break;
  872. case "from":
  873. if (this.options.from_fixed) {
  874. break;
  875. }
  876. this.coords.p_from_real = this.convertToRealPercent(handle_x);
  877. this.coords.p_from_real = this.calcWithStep(this.coords.p_from_real);
  878. if (this.coords.p_from_real > this.coords.p_to_real) {
  879. this.coords.p_from_real = this.coords.p_to_real;
  880. }
  881. this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max);
  882. this.coords.p_from_real = this.checkMinInterval(this.coords.p_from_real, this.coords.p_to_real, "from");
  883. this.coords.p_from_real = this.checkMaxInterval(this.coords.p_from_real, this.coords.p_to_real, "from");
  884. this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real);
  885. break;
  886. case "to":
  887. if (this.options.to_fixed) {
  888. break;
  889. }
  890. this.coords.p_to_real = this.convertToRealPercent(handle_x);
  891. this.coords.p_to_real = this.calcWithStep(this.coords.p_to_real);
  892. if (this.coords.p_to_real < this.coords.p_from_real) {
  893. this.coords.p_to_real = this.coords.p_from_real;
  894. }
  895. this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max);
  896. this.coords.p_to_real = this.checkMinInterval(this.coords.p_to_real, this.coords.p_from_real, "to");
  897. this.coords.p_to_real = this.checkMaxInterval(this.coords.p_to_real, this.coords.p_from_real, "to");
  898. this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real);
  899. break;
  900. case "both":
  901. if (this.options.from_fixed || this.options.to_fixed) {
  902. break;
  903. }
  904. handle_x = this.toFixed(handle_x + (this.coords.p_handle * 0.001));
  905. this.coords.p_from_real = this.convertToRealPercent(handle_x) - this.coords.p_gap_left;
  906. this.coords.p_from_real = this.calcWithStep(this.coords.p_from_real);
  907. this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max);
  908. this.coords.p_from_real = this.checkMinInterval(this.coords.p_from_real, this.coords.p_to_real, "from");
  909. this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real);
  910. this.coords.p_to_real = this.convertToRealPercent(handle_x) + this.coords.p_gap_right;
  911. this.coords.p_to_real = this.calcWithStep(this.coords.p_to_real);
  912. this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max);
  913. this.coords.p_to_real = this.checkMinInterval(this.coords.p_to_real, this.coords.p_from_real, "to");
  914. this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real);
  915. break;
  916. case "both_one":
  917. if (this.options.from_fixed || this.options.to_fixed) {
  918. break;
  919. }
  920. var real_x = this.convertToRealPercent(handle_x),
  921. from = this.result.from_percent,
  922. to = this.result.to_percent,
  923. full = to - from,
  924. half = full / 2,
  925. new_from = real_x - half,
  926. new_to = real_x + half;
  927. if (new_from < 0) {
  928. new_from = 0;
  929. new_to = new_from + full;
  930. }
  931. if (new_to > 100) {
  932. new_to = 100;
  933. new_from = new_to - full;
  934. }
  935. this.coords.p_from_real = this.calcWithStep(new_from);
  936. this.coords.p_from_real = this.checkDiapason(this.coords.p_from_real, this.options.from_min, this.options.from_max);
  937. this.coords.p_from_fake = this.convertToFakePercent(this.coords.p_from_real);
  938. this.coords.p_to_real = this.calcWithStep(new_to);
  939. this.coords.p_to_real = this.checkDiapason(this.coords.p_to_real, this.options.to_min, this.options.to_max);
  940. this.coords.p_to_fake = this.convertToFakePercent(this.coords.p_to_real);
  941. break;
  942. }
  943. if (this.options.type === "single") {
  944. this.coords.p_bar_x = (this.coords.p_handle / 2);
  945. this.coords.p_bar_w = this.coords.p_single_fake;
  946. this.result.from_percent = this.coords.p_single_real;
  947. this.result.from = this.convertToValue(this.coords.p_single_real);
  948. this.result.from_pretty = this._prettify(this.result.from);
  949. if (this.options.values.length) {
  950. this.result.from_value = this.options.values[this.result.from];
  951. }
  952. } else {
  953. this.coords.p_bar_x = this.toFixed(this.coords.p_from_fake + (this.coords.p_handle / 2));
  954. this.coords.p_bar_w = this.toFixed(this.coords.p_to_fake - this.coords.p_from_fake);
  955. this.result.from_percent = this.coords.p_from_real;
  956. this.result.from = this.convertToValue(this.coords.p_from_real);
  957. this.result.from_pretty = this._prettify(this.result.from);
  958. this.result.to_percent = this.coords.p_to_real;
  959. this.result.to = this.convertToValue(this.coords.p_to_real);
  960. this.result.to_pretty = this._prettify(this.result.to);
  961. if (this.options.values.length) {
  962. this.result.from_value = this.options.values[this.result.from];
  963. this.result.to_value = this.options.values[this.result.to];
  964. }
  965. }
  966. this.calcMinMax();
  967. this.calcLabels();
  968. },
  969. /**
  970. * calculates pointer X in percent
  971. */
  972. calcPointerPercent: function () {
  973. if (!this.coords.w_rs) {
  974. this.coords.p_pointer = 0;
  975. return;
  976. }
  977. if (this.coords.x_pointer < 0 || isNaN(this.coords.x_pointer) ) {
  978. this.coords.x_pointer = 0;
  979. } else if (this.coords.x_pointer > this.coords.w_rs) {
  980. this.coords.x_pointer = this.coords.w_rs;
  981. }
  982. this.coords.p_pointer = this.toFixed(this.coords.x_pointer / this.coords.w_rs * 100);
  983. },
  984. convertToRealPercent: function (fake) {
  985. var full = 100 - this.coords.p_handle;
  986. return fake / full * 100;
  987. },
  988. convertToFakePercent: function (real) {
  989. var full = 100 - this.coords.p_handle;
  990. return real / 100 * full;
  991. },
  992. getHandleX: function () {
  993. var max = 100 - this.coords.p_handle,
  994. x = this.toFixed(this.coords.p_pointer - this.coords.p_gap);
  995. if (x < 0) {
  996. x = 0;
  997. } else if (x > max) {
  998. x = max;
  999. }
  1000. return x;
  1001. },
  1002. calcHandlePercent: function () {
  1003. if (this.options.type === "single") {
  1004. this.coords.w_handle = this.$cache.s_single.outerWidth(false);
  1005. } else {
  1006. this.coords.w_handle = this.$cache.s_from.outerWidth(false);
  1007. }
  1008. this.coords.p_handle = this.toFixed(this.coords.w_handle / this.coords.w_rs * 100);
  1009. },
  1010. /**
  1011. * Find closest handle to pointer click
  1012. *
  1013. * @param real_x {Number}
  1014. * @returns {String}
  1015. */
  1016. chooseHandle: function (real_x) {
  1017. if (this.options.type === "single") {
  1018. return "single";
  1019. } else {
  1020. var m_point = this.coords.p_from_real + ((this.coords.p_to_real - this.coords.p_from_real) / 2);
  1021. if (real_x >= m_point) {
  1022. return this.options.to_fixed ? "from" : "to";
  1023. } else {
  1024. return this.options.from_fixed ? "to" : "from";
  1025. }
  1026. }
  1027. },
  1028. /**
  1029. * Measure Min and Max labels width in percent
  1030. */
  1031. calcMinMax: function () {
  1032. if (!this.coords.w_rs) {
  1033. return;
  1034. }
  1035. this.labels.p_min = this.labels.w_min / this.coords.w_rs * 100;
  1036. this.labels.p_max = this.labels.w_max / this.coords.w_rs * 100;
  1037. },
  1038. /**
  1039. * Measure labels width and X in percent
  1040. */
  1041. calcLabels: function () {
  1042. if (!this.coords.w_rs || this.options.hide_from_to) {
  1043. return;
  1044. }
  1045. if (this.options.type === "single") {
  1046. this.labels.w_single = this.$cache.single.outerWidth(false);
  1047. this.labels.p_single_fake = this.labels.w_single / this.coords.w_rs * 100;
  1048. this.labels.p_single_left = this.coords.p_single_fake + (this.coords.p_handle / 2) - (this.labels.p_single_fake / 2);
  1049. this.labels.p_single_left = this.checkEdges(this.labels.p_single_left, this.labels.p_single_fake);
  1050. } else {
  1051. this.labels.w_from = this.$cache.from.outerWidth(false);
  1052. this.labels.p_from_fake = this.labels.w_from / this.coords.w_rs * 100;
  1053. this.labels.p_from_left = this.coords.p_from_fake + (this.coords.p_handle / 2) - (this.labels.p_from_fake / 2);
  1054. this.labels.p_from_left = this.toFixed(this.labels.p_from_left);
  1055. this.labels.p_from_left = this.checkEdges(this.labels.p_from_left, this.labels.p_from_fake);
  1056. this.labels.w_to = this.$cache.to.outerWidth(false);
  1057. this.labels.p_to_fake = this.labels.w_to / this.coords.w_rs * 100;
  1058. this.labels.p_to_left = this.coords.p_to_fake + (this.coords.p_handle / 2) - (this.labels.p_to_fake / 2);
  1059. this.labels.p_to_left = this.toFixed(this.labels.p_to_left);
  1060. this.labels.p_to_left = this.checkEdges(this.labels.p_to_left, this.labels.p_to_fake);
  1061. this.labels.w_single = this.$cache.single.outerWidth(false);
  1062. this.labels.p_single_fake = this.labels.w_single / this.coords.w_rs * 100;
  1063. 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);
  1064. this.labels.p_single_left = this.toFixed(this.labels.p_single_left);
  1065. this.labels.p_single_left = this.checkEdges(this.labels.p_single_left, this.labels.p_single_fake);
  1066. }
  1067. },
  1068. // =============================================================================================================
  1069. // Drawings
  1070. /**
  1071. * Main function called in request animation frame
  1072. * to update everything
  1073. */
  1074. updateScene: function () {
  1075. if (this.raf_id) {
  1076. cancelAnimationFrame(this.raf_id);
  1077. this.raf_id = null;
  1078. }
  1079. clearTimeout(this.update_tm);
  1080. this.update_tm = null;
  1081. if (!this.options) {
  1082. return;
  1083. }
  1084. this.drawHandles();
  1085. if (this.is_active) {
  1086. this.raf_id = requestAnimationFrame(this.updateScene.bind(this));
  1087. } else {
  1088. this.update_tm = setTimeout(this.updateScene.bind(this), 300);
  1089. }
  1090. },
  1091. /**
  1092. * Draw handles
  1093. */
  1094. drawHandles: function () {
  1095. this.coords.w_rs = this.$cache.rs.outerWidth(false);
  1096. if (!this.coords.w_rs) {
  1097. return;
  1098. }
  1099. if (this.coords.w_rs !== this.coords.w_rs_old) {
  1100. this.target = "base";
  1101. this.is_resize = true;
  1102. }
  1103. if (this.coords.w_rs !== this.coords.w_rs_old || this.force_redraw) {
  1104. this.setMinMax();
  1105. this.calc(true);
  1106. this.drawLabels();
  1107. if (this.options.grid) {
  1108. this.calcGridMargin();
  1109. this.calcGridLabels();
  1110. }
  1111. this.force_redraw = true;
  1112. this.coords.w_rs_old = this.coords.w_rs;
  1113. this.drawShadow();
  1114. }
  1115. if (!this.coords.w_rs) {
  1116. return;
  1117. }
  1118. if (!this.dragging && !this.force_redraw && !this.is_key) {
  1119. return;
  1120. }
  1121. if (this.old_from !== this.result.from || this.old_to !== this.result.to || this.force_redraw || this.is_key) {
  1122. this.drawLabels();
  1123. this.$cache.bar[0].style.left = this.coords.p_bar_x + "%";
  1124. this.$cache.bar[0].style.width = this.coords.p_bar_w + "%";
  1125. if (this.options.type === "single") {
  1126. this.$cache.bar[0].style.left = 0;
  1127. this.$cache.bar[0].style.width = this.coords.p_bar_w + this.coords.p_bar_x + "%";
  1128. this.$cache.s_single[0].style.left = this.coords.p_single_fake + "%";
  1129. this.$cache.single[0].style.left = this.labels.p_single_left + "%";
  1130. } else {
  1131. this.$cache.s_from[0].style.left = this.coords.p_from_fake + "%";
  1132. this.$cache.s_to[0].style.left = this.coords.p_to_fake + "%";
  1133. if (this.old_from !== this.result.from || this.force_redraw) {
  1134. this.$cache.from[0].style.left = this.labels.p_from_left + "%";
  1135. }
  1136. if (this.old_to !== this.result.to || this.force_redraw) {
  1137. this.$cache.to[0].style.left = this.labels.p_to_left + "%";
  1138. }
  1139. this.$cache.single[0].style.left = this.labels.p_single_left + "%";
  1140. }
  1141. this.writeToInput();
  1142. if ((this.old_from !== this.result.from || this.old_to !== this.result.to) && !this.is_start) {
  1143. this.$cache.input.trigger("change");
  1144. this.$cache.input.trigger("input");
  1145. }
  1146. this.old_from = this.result.from;
  1147. this.old_to = this.result.to;
  1148. // callbacks call
  1149. if (!this.is_resize && !this.is_update && !this.is_start && !this.is_finish) {
  1150. this.callOnChange();
  1151. }
  1152. if (this.is_key || this.is_click) {
  1153. this.is_key = false;
  1154. this.is_click = false;
  1155. this.callOnFinish();
  1156. }
  1157. this.is_update = false;
  1158. this.is_resize = false;
  1159. this.is_finish = false;
  1160. }
  1161. this.is_start = false;
  1162. this.is_key = false;
  1163. this.is_click = false;
  1164. this.force_redraw = false;
  1165. },
  1166. /**
  1167. * Draw labels
  1168. * measure labels collisions
  1169. * collapse close labels
  1170. */
  1171. drawLabels: function () {
  1172. if (!this.options) {
  1173. return;
  1174. }
  1175. var values_num = this.options.values.length;
  1176. var p_values = this.options.p_values;
  1177. var text_single;
  1178. var text_from;
  1179. var text_to;
  1180. var from_pretty;
  1181. var to_pretty;
  1182. if (this.options.hide_from_to) {
  1183. return;
  1184. }
  1185. if (this.options.type === "single") {
  1186. if (values_num) {
  1187. text_single = this.decorate(p_values[this.result.from]);
  1188. this.$cache.single.html(text_single);
  1189. } else {
  1190. from_pretty = this._prettify(this.result.from);
  1191. text_single = this.decorate(from_pretty, this.result.from);
  1192. this.$cache.single.html(text_single);
  1193. }
  1194. this.calcLabels();
  1195. if (this.labels.p_single_left < this.labels.p_min + 1) {
  1196. this.$cache.min[0].style.visibility = "hidden";
  1197. } else {
  1198. this.$cache.min[0].style.visibility = "visible";
  1199. }
  1200. if (this.labels.p_single_left + this.labels.p_single_fake > 100 - this.labels.p_max - 1) {
  1201. this.$cache.max[0].style.visibility = "hidden";
  1202. } else {
  1203. this.$cache.max[0].style.visibility = "visible";
  1204. }
  1205. } else {
  1206. if (values_num) {
  1207. if (this.options.decorate_both) {
  1208. text_single = this.decorate(p_values[this.result.from]);
  1209. text_single += this.options.values_separator;
  1210. text_single += this.decorate(p_values[this.result.to]);
  1211. } else {
  1212. text_single = this.decorate(p_values[this.result.from] + this.options.values_separator + p_values[this.result.to]);
  1213. }
  1214. text_from = this.decorate(p_values[this.result.from]);
  1215. text_to = this.decorate(p_values[this.result.to]);
  1216. this.$cache.single.html(text_single);
  1217. this.$cache.from.html(text_from);
  1218. this.$cache.to.html(text_to);
  1219. } else {
  1220. from_pretty = this._prettify(this.result.from);
  1221. to_pretty = this._prettify(this.result.to);
  1222. if (this.options.decorate_both) {
  1223. text_single = this.decorate(from_pretty, this.result.from);
  1224. text_single += this.options.values_separator;
  1225. text_single += this.decorate(to_pretty, this.result.to);
  1226. } else {
  1227. text_single = this.decorate(from_pretty + this.options.values_separator + to_pretty, this.result.to);
  1228. }
  1229. text_from = this.decorate(from_pretty, this.result.from);
  1230. text_to = this.decorate(to_pretty, this.result.to);
  1231. this.$cache.single.html(text_single);
  1232. this.$cache.from.html(text_from);
  1233. this.$cache.to.html(text_to);
  1234. }
  1235. this.calcLabels();
  1236. var min = Math.min(this.labels.p_single_left, this.labels.p_from_left),
  1237. single_left = this.labels.p_single_left + this.labels.p_single_fake,
  1238. to_left = this.labels.p_to_left + this.labels.p_to_fake,
  1239. max = Math.max(single_left, to_left);
  1240. if (this.labels.p_from_left + this.labels.p_from_fake >= this.labels.p_to_left) {
  1241. this.$cache.from[0].style.visibility = "hidden";
  1242. this.$cache.to[0].style.visibility = "hidden";
  1243. this.$cache.single[0].style.visibility = "visible";
  1244. if (this.result.from === this.result.to) {
  1245. if (this.target === "from") {
  1246. this.$cache.from[0].style.visibility = "visible";
  1247. } else if (this.target === "to") {
  1248. this.$cache.to[0].style.visibility = "visible";
  1249. } else if (!this.target) {
  1250. this.$cache.from[0].style.visibility = "visible";
  1251. }
  1252. this.$cache.single[0].style.visibility = "hidden";
  1253. max = to_left;
  1254. } else {
  1255. this.$cache.from[0].style.visibility = "hidden";
  1256. this.$cache.to[0].style.visibility = "hidden";
  1257. this.$cache.single[0].style.visibility = "visible";
  1258. max = Math.max(single_left, to_left);
  1259. }
  1260. } else {
  1261. this.$cache.from[0].style.visibility = "visible";
  1262. this.$cache.to[0].style.visibility = "visible";
  1263. this.$cache.single[0].style.visibility = "hidden";
  1264. }
  1265. if (min < this.labels.p_min + 1) {
  1266. this.$cache.min[0].style.visibility = "hidden";
  1267. } else {
  1268. this.$cache.min[0].style.visibility = "visible";
  1269. }
  1270. if (max > 100 - this.labels.p_max - 1) {
  1271. this.$cache.max[0].style.visibility = "hidden";
  1272. } else {
  1273. this.$cache.max[0].style.visibility = "visible";
  1274. }
  1275. }
  1276. },
  1277. /**
  1278. * Draw shadow intervals
  1279. */
  1280. drawShadow: function () {
  1281. var o = this.options,
  1282. c = this.$cache,
  1283. is_from_min = typeof o.from_min === "number" && !isNaN(o.from_min),
  1284. is_from_max = typeof o.from_max === "number" && !isNaN(o.from_max),
  1285. is_to_min = typeof o.to_min === "number" && !isNaN(o.to_min),
  1286. is_to_max = typeof o.to_max === "number" && !isNaN(o.to_max),
  1287. from_min,
  1288. from_max,
  1289. to_min,
  1290. to_max;
  1291. if (o.type === "single") {
  1292. if (o.from_shadow && (is_from_min || is_from_max)) {
  1293. from_min = this.convertToPercent(is_from_min ? o.from_min : o.min);
  1294. from_max = this.convertToPercent(is_from_max ? o.from_max : o.max) - from_min;
  1295. from_min = this.toFixed(from_min - (this.coords.p_handle / 100 * from_min));
  1296. from_max = this.toFixed(from_max - (this.coords.p_handle / 100 * from_max));
  1297. from_min = from_min + (this.coords.p_handle / 2);
  1298. c.shad_single[0].style.display = "block";
  1299. c.shad_single[0].style.left = from_min + "%";
  1300. c.shad_single[0].style.width = from_max + "%";
  1301. } else {
  1302. c.shad_single[0].style.display = "none";
  1303. }
  1304. } else {
  1305. if (o.from_shadow && (is_from_min || is_from_max)) {
  1306. from_min = this.convertToPercent(is_from_min ? o.from_min : o.min);
  1307. from_max = this.convertToPercent(is_from_max ? o.from_max : o.max) - from_min;
  1308. from_min = this.toFixed(from_min - (this.coords.p_handle / 100 * from_min));
  1309. from_max = this.toFixed(from_max - (this.coords.p_handle / 100 * from_max));
  1310. from_min = from_min + (this.coords.p_handle / 2);
  1311. c.shad_from[0].style.display = "block";
  1312. c.shad_from[0].style.left = from_min + "%";
  1313. c.shad_from[0].style.width = from_max + "%";
  1314. } else {
  1315. c.shad_from[0].style.display = "none";
  1316. }
  1317. if (o.to_shadow && (is_to_min || is_to_max)) {
  1318. to_min = this.convertToPercent(is_to_min ? o.to_min : o.min);
  1319. to_max = this.convertToPercent(is_to_max ? o.to_max : o.max) - to_min;
  1320. to_min = this.toFixed(to_min - (this.coords.p_handle / 100 * to_min));
  1321. to_max = this.toFixed(to_max - (this.coords.p_handle / 100 * to_max));
  1322. to_min = to_min + (this.coords.p_handle / 2);
  1323. c.shad_to[0].style.display = "block";
  1324. c.shad_to[0].style.left = to_min + "%";
  1325. c.shad_to[0].style.width = to_max + "%";
  1326. } else {
  1327. c.shad_to[0].style.display = "none";
  1328. }
  1329. }
  1330. },
  1331. /**
  1332. * Write values to input element
  1333. */
  1334. writeToInput: function () {
  1335. if (this.options.type === "single") {
  1336. if (this.options.values.length) {
  1337. this.$cache.input.prop("value", this.result.from_value);
  1338. } else {
  1339. this.$cache.input.prop("value", this.result.from);
  1340. }
  1341. this.$cache.input.data("from", this.result.from);
  1342. } else {
  1343. if (this.options.values.length) {
  1344. this.$cache.input.prop("value", this.result.from_value + this.options.input_values_separator + this.result.to_value);
  1345. } else {
  1346. this.$cache.input.prop("value", this.result.from + this.options.input_values_separator + this.result.to);
  1347. }
  1348. this.$cache.input.data("from", this.result.from);
  1349. this.$cache.input.data("to", this.result.to);
  1350. }
  1351. },
  1352. // =============================================================================================================
  1353. // Callbacks
  1354. callOnStart: function () {
  1355. this.writeToInput();
  1356. if (this.options.onStart && typeof this.options.onStart === "function") {
  1357. if (this.options.scope) {
  1358. this.options.onStart.call(this.options.scope, this.result);
  1359. } else {
  1360. this.options.onStart(this.result);
  1361. }
  1362. }
  1363. },
  1364. callOnChange: function () {
  1365. this.writeToInput();
  1366. if (this.options.onChange && typeof this.options.onChange === "function") {
  1367. if (this.options.scope) {
  1368. this.options.onChange.call(this.options.scope, this.result);
  1369. } else {
  1370. this.options.onChange(this.result);
  1371. }
  1372. }
  1373. },
  1374. callOnFinish: function () {
  1375. this.writeToInput();
  1376. if (this.options.onFinish && typeof this.options.onFinish === "function") {
  1377. if (this.options.scope) {
  1378. this.options.onFinish.call(this.options.scope, this.result);
  1379. } else {
  1380. this.options.onFinish(this.result);
  1381. }
  1382. }
  1383. },
  1384. callOnUpdate: function () {
  1385. this.writeToInput();
  1386. if (this.options.onUpdate && typeof this.options.onUpdate === "function") {
  1387. if (this.options.scope) {
  1388. this.options.onUpdate.call(this.options.scope, this.result);
  1389. } else {
  1390. this.options.onUpdate(this.result);
  1391. }
  1392. }
  1393. },
  1394. // =============================================================================================================
  1395. // Service methods
  1396. toggleInput: function () {
  1397. this.$cache.input.toggleClass("irs-hidden-input");
  1398. if (this.has_tab_index) {
  1399. this.$cache.input.prop("tabindex", -1);
  1400. } else {
  1401. this.$cache.input.removeProp("tabindex");
  1402. }
  1403. this.has_tab_index = !this.has_tab_index;
  1404. },
  1405. /**
  1406. * Convert real value to percent
  1407. *
  1408. * @param value {Number} X in real
  1409. * @param no_min {boolean=} don't use min value
  1410. * @returns {Number} X in percent
  1411. */
  1412. convertToPercent: function (value, no_min) {
  1413. var diapason = this.options.max - this.options.min,
  1414. one_percent = diapason / 100,
  1415. val, percent;
  1416. if (!diapason) {
  1417. this.no_diapason = true;
  1418. return 0;
  1419. }
  1420. if (no_min) {
  1421. val = value;
  1422. } else {
  1423. val = value - this.options.min;
  1424. }
  1425. percent = val / one_percent;
  1426. return this.toFixed(percent);
  1427. },
  1428. /**
  1429. * Convert percent to real values
  1430. *
  1431. * @param percent {Number} X in percent
  1432. * @returns {Number} X in real
  1433. */
  1434. convertToValue: function (percent) {
  1435. var min = this.options.min,
  1436. max = this.options.max,
  1437. min_decimals = min.toString().split(".")[1],
  1438. max_decimals = max.toString().split(".")[1],
  1439. min_length, max_length,
  1440. avg_decimals = 0,
  1441. abs = 0;
  1442. if (percent === 0) {
  1443. return this.options.min;
  1444. }
  1445. if (percent === 100) {
  1446. return this.options.max;
  1447. }
  1448. if (min_decimals) {
  1449. min_length = min_decimals.length;
  1450. avg_decimals = min_length;
  1451. }
  1452. if (max_decimals) {
  1453. max_length = max_decimals.length;
  1454. avg_decimals = max_length;
  1455. }
  1456. if (min_length && max_length) {
  1457. avg_decimals = (min_length >= max_length) ? min_length : max_length;
  1458. }
  1459. if (min < 0) {
  1460. abs = Math.abs(min);
  1461. min = +(min + abs).toFixed(avg_decimals);
  1462. max = +(max + abs).toFixed(avg_decimals);
  1463. }
  1464. var number = ((max - min) / 100 * percent) + min,
  1465. string = this.options.step.toString().split(".")[1],
  1466. result;
  1467. if (string) {
  1468. number = +number.toFixed(string.length);
  1469. } else {
  1470. number = number / this.options.step;
  1471. number = number * this.options.step;
  1472. number = +number.toFixed(0);
  1473. }
  1474. if (abs) {
  1475. number -= abs;
  1476. }
  1477. if (string) {
  1478. result = +number.toFixed(string.length);
  1479. } else {
  1480. result = this.toFixed(number);
  1481. }
  1482. if (result < this.options.min) {
  1483. result = this.options.min;
  1484. } else if (result > this.options.max) {
  1485. result = this.options.max;
  1486. }
  1487. return result;
  1488. },
  1489. /**
  1490. * Round percent value with step
  1491. *
  1492. * @param percent {Number}
  1493. * @returns percent {Number} rounded
  1494. */
  1495. calcWithStep: function (percent) {
  1496. var rounded = Math.round(percent / this.coords.p_step) * this.coords.p_step;
  1497. if (rounded > 100) {
  1498. rounded = 100;
  1499. }
  1500. if (percent === 100) {
  1501. rounded = 100;
  1502. }
  1503. return this.toFixed(rounded);
  1504. },
  1505. checkMinInterval: function (p_current, p_next, type) {
  1506. var o = this.options,
  1507. current,
  1508. next;
  1509. if (!o.min_interval) {
  1510. return p_current;
  1511. }
  1512. current = this.convertToValue(p_current);
  1513. next = this.convertToValue(p_next);
  1514. if (type === "from") {
  1515. if (next - current < o.min_interval) {
  1516. current = next - o.min_interval;
  1517. }
  1518. } else {
  1519. if (current - next < o.min_interval) {
  1520. current = next + o.min_interval;
  1521. }
  1522. }
  1523. return this.convertToPercent(current);
  1524. },
  1525. checkMaxInterval: function (p_current, p_next, type) {
  1526. var o = this.options,
  1527. current,
  1528. next;
  1529. if (!o.max_interval) {
  1530. return p_current;
  1531. }
  1532. current = this.convertToValue(p_current);
  1533. next = this.convertToValue(p_next);
  1534. if (type === "from") {
  1535. if (next - current > o.max_interval) {
  1536. current = next - o.max_interval;
  1537. }
  1538. } else {
  1539. if (current - next > o.max_interval) {
  1540. current = next + o.max_interval;
  1541. }
  1542. }
  1543. return this.convertToPercent(current);
  1544. },
  1545. checkDiapason: function (p_num, min, max) {
  1546. var num = this.convertToValue(p_num),
  1547. o = this.options;
  1548. if (typeof min !== "number") {
  1549. min = o.min;
  1550. }
  1551. if (typeof max !== "number") {
  1552. max = o.max;
  1553. }
  1554. if (num < min) {
  1555. num = min;
  1556. }
  1557. if (num > max) {
  1558. num = max;
  1559. }
  1560. return this.convertToPercent(num);
  1561. },
  1562. toFixed: function (num) {
  1563. num = num.toFixed(20);
  1564. return +num;
  1565. },
  1566. _prettify: function (num) {
  1567. if (!this.options.prettify_enabled) {
  1568. return num;
  1569. }
  1570. if (this.options.prettify && typeof this.options.prettify === "function") {
  1571. return this.options.prettify(num);
  1572. } else {
  1573. return this.prettify(num);
  1574. }
  1575. },
  1576. prettify: function (num) {
  1577. var n = num.toString();
  1578. return n.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1" + this.options.prettify_separator);
  1579. },
  1580. checkEdges: function (left, width) {
  1581. if (!this.options.force_edges) {
  1582. return this.toFixed(left);
  1583. }
  1584. if (left < 0) {
  1585. left = 0;
  1586. } else if (left > 100 - width) {
  1587. left = 100 - width;
  1588. }
  1589. return this.toFixed(left);
  1590. },
  1591. validate: function () {
  1592. var o = this.options,
  1593. r = this.result,
  1594. v = o.values,
  1595. vl = v.length,
  1596. value,
  1597. i;
  1598. if (typeof o.min === "string") o.min = +o.min;
  1599. if (typeof o.max === "string") o.max = +o.max;
  1600. if (typeof o.from === "string") o.from = +o.from;
  1601. if (typeof o.to === "string") o.to = +o.to;
  1602. if (typeof o.step === "string") o.step = +o.step;
  1603. if (typeof o.from_min === "string") o.from_min = +o.from_min;
  1604. if (typeof o.from_max === "string") o.from_max = +o.from_max;
  1605. if (typeof o.to_min === "string") o.to_min = +o.to_min;
  1606. if (typeof o.to_max === "string") o.to_max = +o.to_max;
  1607. if (typeof o.grid_num === "string") o.grid_num = +o.grid_num;
  1608. if (o.max < o.min) {
  1609. o.max = o.min;
  1610. }
  1611. if (vl) {
  1612. o.p_values = [];
  1613. o.min = 0;
  1614. o.max = vl - 1;
  1615. o.step = 1;
  1616. o.grid_num = o.max;
  1617. o.grid_snap = true;
  1618. for (i = 0; i < vl; i++) {
  1619. value = +v[i];
  1620. if (!isNaN(value)) {
  1621. v[i] = value;
  1622. value = this._prettify(value);
  1623. } else {
  1624. value = v[i];
  1625. }
  1626. o.p_values.push(value);
  1627. }
  1628. }
  1629. if (typeof o.from !== "number" || isNaN(o.from)) {
  1630. o.from = o.min;
  1631. }
  1632. if (typeof o.to !== "number" || isNaN(o.to)) {
  1633. o.to = o.max;
  1634. }
  1635. if (o.type === "single") {
  1636. if (o.from < o.min) o.from = o.min;
  1637. if (o.from > o.max) o.from = o.max;
  1638. } else {
  1639. if (o.from < o.min) o.from = o.min;
  1640. if (o.from > o.max) o.from = o.max;
  1641. if (o.to < o.min) o.to = o.min;
  1642. if (o.to > o.max) o.to = o.max;
  1643. if (this.update_check.from) {
  1644. if (this.update_check.from !== o.from) {
  1645. if (o.from > o.to) o.from = o.to;
  1646. }
  1647. if (this.update_check.to !== o.to) {
  1648. if (o.to < o.from) o.to = o.from;
  1649. }
  1650. }
  1651. if (o.from > o.to) o.from = o.to;
  1652. if (o.to < o.from) o.to = o.from;
  1653. }
  1654. if (typeof o.step !== "number" || isNaN(o.step) || !o.step || o.step < 0) {
  1655. o.step = 1;
  1656. }
  1657. if (typeof o.from_min === "number" && o.from < o.from_min) {
  1658. o.from = o.from_min;
  1659. }
  1660. if (typeof o.from_max === "number" && o.from > o.from_max) {
  1661. o.from = o.from_max;
  1662. }
  1663. if (typeof o.to_min === "number" && o.to < o.to_min) {
  1664. o.to = o.to_min;
  1665. }
  1666. if (typeof o.to_max === "number" && o.from > o.to_max) {
  1667. o.to = o.to_max;
  1668. }
  1669. if (r) {
  1670. if (r.min !== o.min) {
  1671. r.min = o.min;
  1672. }
  1673. if (r.max !== o.max) {
  1674. r.max = o.max;
  1675. }
  1676. if (r.from < r.min || r.from > r.max) {
  1677. r.from = o.from;
  1678. }
  1679. if (r.to < r.min || r.to > r.max) {
  1680. r.to = o.to;
  1681. }
  1682. }
  1683. if (typeof o.min_interval !== "number" || isNaN(o.min_interval) || !o.min_interval || o.min_interval < 0) {
  1684. o.min_interval = 0;
  1685. }
  1686. if (typeof o.max_interval !== "number" || isNaN(o.max_interval) || !o.max_interval || o.max_interval < 0) {
  1687. o.max_interval = 0;
  1688. }
  1689. if (o.min_interval && o.min_interval > o.max - o.min) {
  1690. o.min_interval = o.max - o.min;
  1691. }
  1692. if (o.max_interval && o.max_interval > o.max - o.min) {
  1693. o.max_interval = o.max - o.min;
  1694. }
  1695. },
  1696. decorate: function (num, original) {
  1697. var decorated = "",
  1698. o = this.options;
  1699. if (o.prefix) {
  1700. decorated += o.prefix;
  1701. }
  1702. decorated += num;
  1703. if (o.max_postfix) {
  1704. if (o.values.length && num === o.p_values[o.max]) {
  1705. decorated += o.max_postfix;
  1706. if (o.postfix) {
  1707. decorated += " ";
  1708. }
  1709. } else if (original === o.max) {
  1710. decorated += o.max_postfix;
  1711. if (o.postfix) {
  1712. decorated += " ";
  1713. }
  1714. }
  1715. }
  1716. if (o.postfix) {
  1717. decorated += o.postfix;
  1718. }
  1719. return decorated;
  1720. },
  1721. updateFrom: function () {
  1722. this.result.from = this.options.from;
  1723. this.result.from_percent = this.convertToPercent(this.result.from);
  1724. this.result.from_pretty = this._prettify(this.result.from);
  1725. if (this.options.values) {
  1726. this.result.from_value = this.options.values[this.result.from];
  1727. }
  1728. },
  1729. updateTo: function () {
  1730. this.result.to = this.options.to;
  1731. this.result.to_percent = this.convertToPercent(this.result.to);
  1732. this.result.to_pretty = this._prettify(this.result.to);
  1733. if (this.options.values) {
  1734. this.result.to_value = this.options.values[this.result.to];
  1735. }
  1736. },
  1737. updateResult: function () {
  1738. this.result.min = this.options.min;
  1739. this.result.max = this.options.max;
  1740. this.updateFrom();
  1741. this.updateTo();
  1742. },
  1743. // =============================================================================================================
  1744. // Grid
  1745. appendGrid: function () {
  1746. if (!this.options.grid) {
  1747. return;
  1748. }
  1749. var o = this.options,
  1750. i, z,
  1751. total = o.max - o.min,
  1752. big_num = o.grid_num,
  1753. big_p = 0,
  1754. big_w = 0,
  1755. small_max = 4,
  1756. local_small_max,
  1757. small_p,
  1758. small_w = 0,
  1759. result,
  1760. html = '';
  1761. this.calcGridMargin();
  1762. if (o.grid_snap) {
  1763. big_num = total / o.step;
  1764. }
  1765. if (big_num > 50) big_num = 50;
  1766. big_p = this.toFixed(100 / big_num);
  1767. if (big_num > 4) {
  1768. small_max = 3;
  1769. }
  1770. if (big_num > 7) {
  1771. small_max = 2;
  1772. }
  1773. if (big_num > 14) {
  1774. small_max = 1;
  1775. }
  1776. if (big_num > 28) {
  1777. small_max = 0;
  1778. }
  1779. for (i = 0; i < big_num + 1; i++) {
  1780. local_small_max = small_max;
  1781. big_w = this.toFixed(big_p * i);
  1782. if (big_w > 100) {
  1783. big_w = 100;
  1784. }
  1785. this.coords.big[i] = big_w;
  1786. small_p = (big_w - (big_p * (i - 1))) / (local_small_max + 1);
  1787. for (z = 1; z <= local_small_max; z++) {
  1788. if (big_w === 0) {
  1789. break;
  1790. }
  1791. small_w = this.toFixed(big_w - (small_p * z));
  1792. html += '<span class="irs-grid-pol small" style="left: ' + small_w + '%"></span>';
  1793. }
  1794. html += '<span class="irs-grid-pol" style="left: ' + big_w + '%"></span>';
  1795. result = this.convertToValue(big_w);
  1796. if (o.values.length) {
  1797. result = o.p_values[result];
  1798. } else {
  1799. result = this._prettify(result);
  1800. }
  1801. html += '<span class="irs-grid-text js-grid-text-' + i + '" style="left: ' + big_w + '%">' + result + '</span>';
  1802. }
  1803. this.coords.big_num = Math.ceil(big_num + 1);
  1804. this.$cache.cont.addClass("irs-with-grid");
  1805. this.$cache.grid.html(html);
  1806. this.cacheGridLabels();
  1807. },
  1808. cacheGridLabels: function () {
  1809. var $label, i,
  1810. num = this.coords.big_num;
  1811. for (i = 0; i < num; i++) {
  1812. $label = this.$cache.grid.find(".js-grid-text-" + i);
  1813. this.$cache.grid_labels.push($label);
  1814. }
  1815. this.calcGridLabels();
  1816. },
  1817. calcGridLabels: function () {
  1818. var i, label, start = [], finish = [],
  1819. num = this.coords.big_num;
  1820. for (i = 0; i < num; i++) {
  1821. this.coords.big_w[i] = this.$cache.grid_labels[i].outerWidth(false);
  1822. this.coords.big_p[i] = this.toFixed(this.coords.big_w[i] / this.coords.w_rs * 100);
  1823. this.coords.big_x[i] = this.toFixed(this.coords.big_p[i] / 2);
  1824. start[i] = this.toFixed(this.coords.big[i] - this.coords.big_x[i]);
  1825. finish[i] = this.toFixed(start[i] + this.coords.big_p[i]);
  1826. }
  1827. if (this.options.force_edges) {
  1828. if (start[0] < -this.coords.grid_gap) {
  1829. start[0] = -this.coords.grid_gap;
  1830. finish[0] = this.toFixed(start[0] + this.coords.big_p[0]);
  1831. this.coords.big_x[0] = this.coords.grid_gap;
  1832. }
  1833. if (finish[num - 1] > 100 + this.coords.grid_gap) {
  1834. finish[num - 1] = 100 + this.coords.grid_gap;
  1835. start[num - 1] = this.toFixed(finish[num - 1] - this.coords.big_p[num - 1]);
  1836. this.coords.big_x[num - 1] = this.toFixed(this.coords.big_p[num - 1] - this.coords.grid_gap);
  1837. }
  1838. }
  1839. this.calcGridCollision(2, start, finish);
  1840. this.calcGridCollision(4, start, finish);
  1841. for (i = 0; i < num; i++) {
  1842. label = this.$cache.grid_labels[i][0];
  1843. if (this.coords.big_x[i] !== Number.POSITIVE_INFINITY) {
  1844. label.style.marginLeft = -this.coords.big_x[i] + "%";
  1845. }
  1846. }
  1847. },
  1848. // Collisions Calc Beta
  1849. // TODO: Refactor then have plenty of time
  1850. calcGridCollision: function (step, start, finish) {
  1851. var i, next_i, label,
  1852. num = this.coords.big_num;
  1853. for (i = 0; i < num; i += step) {
  1854. next_i = i + (step / 2);
  1855. if (next_i >= num) {
  1856. break;
  1857. }
  1858. label = this.$cache.grid_labels[next_i][0];
  1859. if (finish[i] <= start[next_i]) {
  1860. label.style.visibility = "visible";
  1861. } else {
  1862. label.style.visibility = "hidden";
  1863. }
  1864. }
  1865. },
  1866. calcGridMargin: function () {
  1867. if (!this.options.grid_margin) {
  1868. return;
  1869. }
  1870. this.coords.w_rs = this.$cache.rs.outerWidth(false);
  1871. if (!this.coords.w_rs) {
  1872. return;
  1873. }
  1874. if (this.options.type === "single") {
  1875. this.coords.w_handle = this.$cache.s_single.outerWidth(false);
  1876. } else {
  1877. this.coords.w_handle = this.$cache.s_from.outerWidth(false);
  1878. }
  1879. this.coords.p_handle = this.toFixed(this.coords.w_handle / this.coords.w_rs * 100);
  1880. this.coords.grid_gap = this.toFixed((this.coords.p_handle / 2) - 0.1);
  1881. this.$cache.grid[0].style.width = this.toFixed(100 - this.coords.p_handle) + "%";
  1882. this.$cache.grid[0].style.left = this.coords.grid_gap + "%";
  1883. },
  1884. // =============================================================================================================
  1885. // Public methods
  1886. update: function (options) {
  1887. if (!this.input) {
  1888. return;
  1889. }
  1890. this.is_update = true;
  1891. this.options.from = this.result.from;
  1892. this.options.to = this.result.to;
  1893. this.update_check.from = this.result.from;
  1894. this.update_check.to = this.result.to;
  1895. this.options = $.extend(this.options, options);
  1896. this.validate();
  1897. this.updateResult(options);
  1898. this.toggleInput();
  1899. this.remove();
  1900. this.init(true);
  1901. },
  1902. reset: function () {
  1903. if (!this.input) {
  1904. return;
  1905. }
  1906. this.updateResult();
  1907. this.update();
  1908. },
  1909. destroy: function () {
  1910. if (!this.input) {
  1911. return;
  1912. }
  1913. this.toggleInput();
  1914. this.$cache.input.prop("readonly", false);
  1915. $.data(this.input, "ionRangeSlider", null);
  1916. this.remove();
  1917. this.input = null;
  1918. this.options = null;
  1919. }
  1920. };
  1921. $.fn.ionRangeSlider = function (options) {
  1922. return this.each(function() {
  1923. if (!$.data(this, "ionRangeSlider")) {
  1924. $.data(this, "ionRangeSlider", new IonRangeSlider(this, options, plugin_count++));
  1925. }
  1926. });
  1927. };
  1928. // =================================================================================================================
  1929. // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  1930. // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
  1931. // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
  1932. // MIT license
  1933. (function() {
  1934. var lastTime = 0;
  1935. var vendors = ['ms', 'moz', 'webkit', 'o'];
  1936. for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  1937. window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
  1938. window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
  1939. || window[vendors[x]+'CancelRequestAnimationFrame'];
  1940. }
  1941. if (!window.requestAnimationFrame)
  1942. window.requestAnimationFrame = function(callback, element) {
  1943. var currTime = new Date().getTime();
  1944. var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  1945. var id = window.setTimeout(function() { callback(currTime + timeToCall); },
  1946. timeToCall);
  1947. lastTime = currTime + timeToCall;
  1948. return id;
  1949. };
  1950. if (!window.cancelAnimationFrame)
  1951. window.cancelAnimationFrame = function(id) {
  1952. clearTimeout(id);
  1953. };
  1954. }());
  1955. }));