ion.rangeSlider.js 78 KB

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