You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2442 lines
81 KiB

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