bootstrap-slider.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902
  1. // Licensed to Cloudera, Inc. under one
  2. // or more contributor license agreements. See the NOTICE file
  3. // distributed with this work for additional information
  4. // regarding copyright ownership. Cloudera, Inc. licenses this file
  5. // to you under the Apache License, Version 2.0 (the
  6. // "License"); you may not use this file except in compliance
  7. // with the License. You may obtain a copy of the License at
  8. //
  9. // http://www.apache.org/licenses/LICENSE-2.0
  10. //
  11. // Unless required by applicable law or agreed to in writing, software
  12. // distributed under the License is distributed on an "AS IS" BASIS,
  13. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. // See the License for the specific language governing permissions and
  15. // limitations under the License.
  16. (function ($) {
  17. var ErrorMsgs = {
  18. formatInvalidInputErrorMsg: function (input) {
  19. return "Invalid input value '" + input + "' passed in";
  20. },
  21. callingContextNotSliderInstance: "Calling context element does not have instance of Slider bound to it. Check your code to make sure the JQuery object returned from the call to the slider() initializer is calling the method"
  22. };
  23. var Slider = function (element, options) {
  24. var el = this.element = $(element).hide();
  25. var updateSlider = false;
  26. var parent = this.element.parent();
  27. if (parent.hasClass("slider") === true) {
  28. updateSlider = true;
  29. this.picker = parent;
  30. }
  31. else {
  32. this.picker = $('<div class="slider">' +
  33. '<div class="slider-track">' +
  34. '<div class="slider-selection"></div>' +
  35. '<div class="slider-handle"></div>' +
  36. '<div class="slider-handle"></div>' +
  37. '</div>' +
  38. '<div id="tooltip" class="tooltip"><div class="tooltip-arrow"></div><input type="text" class="tooltip-inner" /></div>' +
  39. '<div id="tooltip_start" class="tooltip"><div class="tooltip-arrow"></div><input type="text" class="tooltip-inner" /></div>' +
  40. '<div id="tooltip_end" class="tooltip"><div class="tooltip-arrow"></div><input type="text" class="tooltip-inner" /></div>' +
  41. '<div id="tooltip_min" class="tooltip"><div class="tooltip-arrow"></div><input type="text" class="tooltip-inner" /></div>' +
  42. '<div id="tooltip_max" class="tooltip"><div class="tooltip-arrow"></div><input type="text" class="tooltip-inner" /></div>' +
  43. '<div id="tooltip_step" class="tooltip"><input type="text" class="tooltip-inner" style="border-width: 2px!important" /></div>' +
  44. '</div>')
  45. .insertBefore(this.element)
  46. .append(this.element);
  47. }
  48. this.id = this.element.data("slider-id") || options.id;
  49. if (this.id) {
  50. this.picker[0].id = this.id;
  51. }
  52. if (("ontouchstart" in window) || window.DocumentTouch && document instanceof window.DocumentTouch) {
  53. this.touchCapable = true;
  54. }
  55. var tooltip = this.element.data("slider-tooltip") || options.tooltip;
  56. this.tooltip = this.picker.find("#tooltip");
  57. this.tooltipInner = this.tooltip.find("input.tooltip-inner");
  58. this.tooltip_start = this.picker.find("#tooltip_start");
  59. this.tooltipInner_start = this.tooltip_start.find("input.tooltip-inner");
  60. this.tooltip_end = this.picker.find("#tooltip_end");
  61. this.tooltipInner_end = this.tooltip_end.find("input.tooltip-inner");
  62. this.tooltip_min = this.picker.find("#tooltip_min");
  63. this.tooltipInner_min = this.tooltip_min.find("input.tooltip-inner");
  64. this.tooltip_max = this.picker.find("#tooltip_max");
  65. this.tooltipInner_max = this.tooltip_max.find("input.tooltip-inner");
  66. this.tooltip_step = this.picker.find("#tooltip_step");
  67. this.tooltipInner_step = this.tooltip_step.find("input.tooltip-inner");
  68. if (updateSlider === true) {
  69. // Reset classes
  70. this.picker.removeClass("slider-horizontal");
  71. this.picker.removeClass("slider-vertical");
  72. this.tooltip.removeClass("hide");
  73. this.tooltip_start.removeClass("hide");
  74. this.tooltip_end.removeClass("hide");
  75. this.tooltip_min.removeClass("hide");
  76. this.tooltip_max.removeClass("hide");
  77. this.tooltip_step.removeClass("hide");
  78. }
  79. this.picker
  80. .addClass("slider-horizontal")
  81. this.picker.width(Math.min(this.element.parents(".card-widget").innerWidth() - 60, 250));
  82. this.stylePos = "left";
  83. this.mousePos = "pageX";
  84. this.sizePos = "offsetWidth";
  85. this.tooltip.addClass("top")[0].style.top = -this.tooltip.outerHeight() - 14 + "px";
  86. this.tooltip_start.addClass("top")[0].style.top = "-30px";
  87. this.tooltip_end.addClass("top")[0].style.top = "-30px";
  88. this.tooltip_min.addClass("top")[0].style.top = "18px";
  89. this.tooltip_max.addClass("top")[0].style.top = "18px";
  90. this.tooltip_step.addClass("top")[0].style.top = "18px";
  91. this.tooltipInner_start.on({
  92. blur: $.proxy(this.blur, this, 0),
  93. focus: $.proxy(this.focus, this, 0),
  94. keydown: $.proxy(this.inputKeydown, this, 0)
  95. });
  96. this.tooltipInner_end.on({
  97. blur: $.proxy(this.blur, this, 0),
  98. focus: $.proxy(this.focus, this, 0),
  99. keydown: $.proxy(this.inputKeydown, this, 0)
  100. });
  101. this.tooltipInner_min.on({
  102. blur: $.proxy(this.blur, this, 0),
  103. focus: $.proxy(this.focus, this, 0),
  104. keydown: $.proxy(this.inputKeydown, this, 0)
  105. });
  106. this.tooltipInner_max.on({
  107. blur: $.proxy(this.blur, this, 0),
  108. focus: $.proxy(this.focus, this, 0),
  109. keydown: $.proxy(this.inputKeydown, this, 0)
  110. });
  111. this.tooltipInner_step.on({
  112. blur: $.proxy(this.blur, this, 0),
  113. focus: $.proxy(this.focus, this, 0),
  114. keydown: $.proxy(this.inputKeydown, this, 0)
  115. });
  116. var self = this;
  117. $.each([
  118. "type",
  119. "min",
  120. "max",
  121. "step",
  122. "precision",
  123. "value",
  124. "start",
  125. "end",
  126. "reversed",
  127. "handle"
  128. ], function (i, attr) {
  129. if (typeof el.data("slider-" + attr) !== "undefined") {
  130. self[attr] = el.data("slider-" + attr);
  131. }
  132. else if (typeof options[attr] !== "undefined") {
  133. self[attr] = options[attr];
  134. }
  135. else if (typeof el.prop(attr) !== "undefined") {
  136. self[attr] = el.prop(attr);
  137. }
  138. else {
  139. self[attr] = 0; // to prevent empty string issues in calculations in IE
  140. }
  141. });
  142. this.value = [this.start, this.end];
  143. this.range = true;
  144. this.selection = this.element.data("slider-selection") || options.selection;
  145. this.selectionEl = this.picker.find(".slider-selection");
  146. if (this.selection === "none") {
  147. this.selectionEl.addClass("hide");
  148. }
  149. this.selectionElStyle = this.selectionEl[0].style;
  150. this.handle1 = this.picker.find(".slider-handle:first");
  151. this.handle1Stype = this.handle1[0].style;
  152. this.handle2 = this.picker.find(".slider-handle:last");
  153. this.handle2Stype = this.handle2[0].style;
  154. if (updateSlider === true) {
  155. // Reset classes
  156. this.handle1.removeClass("round triangle");
  157. this.handle2.removeClass("round triangle hide");
  158. }
  159. switch (this.handle) {
  160. case "round":
  161. this.handle1.addClass("round");
  162. this.handle2.addClass("round");
  163. break;
  164. case "triangle":
  165. this.handle1.addClass("triangle");
  166. this.handle2.addClass("triangle");
  167. break;
  168. }
  169. this.offset = this.picker.offset();
  170. this.size = this.picker[0][this.sizePos];
  171. this.formatter = options.formatter;
  172. this.stepFormatter = options.stepFormatter;
  173. this.reverseFormatter = options.reverseFormatter;
  174. this.reverseStepFormatter = options.reverseStepFormatter;
  175. this.tooltip_separator = options.tooltip_separator;
  176. this.tooltip_split = options.tooltip_split;
  177. this.setValue(this.value);
  178. this.handle1.on({
  179. keydown: $.proxy(this.keydown, this, 0)
  180. });
  181. this.handle2.on({
  182. keydown: $.proxy(this.keydown, this, 1)
  183. });
  184. if (this.touchCapable) {
  185. // Touch: Bind touch events:
  186. this.picker.on({
  187. touchstart: $.proxy(this.mousedown, this)
  188. });
  189. }
  190. // Bind mouse events:
  191. this.picker.find(".slider-track").on({
  192. mousedown: $.proxy(this.mousedown, this)
  193. });
  194. if (tooltip === "hide") {
  195. this.tooltip.addClass("hide");
  196. this.tooltip_start.addClass("hide");
  197. this.tooltip_end.addClass("hide");
  198. }
  199. else if (tooltip === "always") {
  200. this.showTooltip();
  201. this.alwaysShowTooltip = true;
  202. }
  203. else {
  204. this.picker.on({
  205. mouseenter: $.proxy(this.showTooltip, this),
  206. mouseleave: $.proxy(this.hideTooltip, this)
  207. });
  208. this.handle1.on({
  209. focus: $.proxy(this.showTooltip, this),
  210. blur: $.proxy(this.hideTooltip, this)
  211. });
  212. this.handle2.on({
  213. focus: $.proxy(this.showTooltip, this),
  214. blur: $.proxy(this.hideTooltip, this)
  215. });
  216. }
  217. this.enabled = options.enabled && (this.element.data("slider-enabled") === undefined || this.element.data("slider-enabled") === true);
  218. if (this.enabled) {
  219. this.enable();
  220. }
  221. else {
  222. this.disable();
  223. }
  224. this.natural_arrow_keys = this.element.data("slider-natural_arrow_keys") || options.natural_arrow_keys;
  225. this.layout();
  226. var _self = this;
  227. var _resizeTimeout = -1;
  228. $(window).on("resize", function(){
  229. window.clearTimeout(_resizeTimeout);
  230. _resizeTimeout = window.setTimeout(function(){
  231. _self.layout();
  232. }, 300);
  233. });
  234. };
  235. Slider.prototype = {
  236. constructor: Slider,
  237. over: false,
  238. inDrag: false,
  239. showTooltip: function () {
  240. if (this.tooltip_split === false) {
  241. this.tooltip.addClass("in");
  242. }
  243. else {
  244. this.tooltip_start.addClass("in");
  245. this.tooltip_end.addClass("in");
  246. this.tooltip_min.addClass("in");
  247. this.tooltip_max.addClass("in");
  248. this.tooltip_step.addClass("in");
  249. }
  250. this.over = true;
  251. },
  252. hideTooltip: function () {
  253. if (this.inDrag === false && this.alwaysShowTooltip !== true) {
  254. this.tooltip.removeClass("in");
  255. this.tooltip_start.removeClass("in");
  256. this.tooltip_end.removeClass("in");
  257. this.tooltip_min.removeClass("in");
  258. this.tooltip_max.removeClass("in");
  259. this.tooltip_step.removeClass("in");
  260. }
  261. this.over = false;
  262. },
  263. layout: function () {
  264. var positionPercentages;
  265. this.picker.width(Math.min(this.element.parents(".card-widget").innerWidth() - 60, 250));
  266. this.size = this.picker[0][this.sizePos];
  267. if (this.reversed) {
  268. positionPercentages = [ 100 - this.percentage[0], this.percentage[1] ];
  269. }
  270. else {
  271. positionPercentages = [ this.percentage[0], this.percentage[1] ];
  272. }
  273. this.handle1Stype[this.stylePos] = positionPercentages[0] + "%";
  274. this.handle2Stype[this.stylePos] = positionPercentages[1] + "%";
  275. this.selectionElStyle.left = Math.min(positionPercentages[0], positionPercentages[1]) + "%";
  276. this.selectionElStyle.width = Math.abs(positionPercentages[0] - positionPercentages[1]) + "%";
  277. this.tooltip_min.addClass("bottom");
  278. this.tooltip_max.addClass("bottom");
  279. this.tooltip_step.addClass("bottom");
  280. if (this.range) {
  281. this.tooltipInner.val(
  282. this.formatter(this.value[0]) + this.tooltip_separator + this.formatter(this.value[1])
  283. );
  284. this.tooltip[0].style[this.stylePos] = this.size * (positionPercentages[0] + (positionPercentages[1] - positionPercentages[0]) / 2) / 100 - (this.tooltip.outerWidth() / 2) + "px";
  285. this.tooltipInner_start.val(
  286. this.formatter(this.value[0])
  287. );
  288. this.tooltipInner_end.val(
  289. this.formatter(this.value[1])
  290. );
  291. this.tooltipInner_min.val(
  292. this.formatter(this.min)
  293. );
  294. this.tooltipInner_max.val(
  295. this.formatter(this.max)
  296. );
  297. this.tooltipInner_step.val(
  298. this.stepFormatter(this.step)
  299. );
  300. this.tooltip_start[0].style[this.stylePos] = this.size * ( (positionPercentages[0]) / 100) - (this.tooltip_start.outerWidth() / 2) + "px";
  301. this.tooltip_end[0].style[this.stylePos] = this.size * ( (positionPercentages[1]) / 100) - (this.tooltip_end.outerWidth() / 2) + "px";
  302. this.tooltip_min[0].style[this.stylePos] = -(this.tooltip_min.outerWidth() / 2) + "px";
  303. this.tooltip_max[0].style[this.stylePos] = this.size - (this.tooltip_max.outerWidth() / 2) + "px";
  304. this.tooltip_step[0].style[this.stylePos] = this.size/2 - (this.tooltip_max.outerWidth() / 2) + "px";
  305. }
  306. else {
  307. this.tooltipInner.val(
  308. this.formatter(this.value[0])
  309. );
  310. this.tooltip[0].style[this.stylePos] = this.size * positionPercentages[0] / 100 - (this.tooltip.outerWidth() / 2) + "px";
  311. }
  312. },
  313. blur: function (idx, ev) {
  314. this.value[0] = this.reverseFormatter(this.tooltipInner_start.val());
  315. this.value[1] = this.reverseFormatter(this.tooltipInner_end.val());
  316. this.setAdditionalValues();
  317. this.setValue(this.value, true, true);
  318. },
  319. focus: function (idx, ev) {
  320. $(".slider .tooltip").css("zIndex", 10);
  321. $(ev.target).parent().css("zIndex", 20);
  322. },
  323. inputKeydown: function (idx, ev) {
  324. if (ev.which == 13) {
  325. this.blur(ev);
  326. }
  327. },
  328. mousedown: function (ev) {
  329. if (!this.isEnabled()) {
  330. return false;
  331. }
  332. // Touch: Get the original event:
  333. if (this.touchCapable && ev.type === "touchstart") {
  334. ev = ev.originalEvent;
  335. }
  336. this.triggerFocusOnHandle();
  337. this.offset = this.picker.offset();
  338. this.size = this.picker[0][this.sizePos];
  339. var percentage = this.getPercentage(ev);
  340. if (this.range) {
  341. var diff1 = Math.abs(this.percentage[0] - percentage);
  342. var diff2 = Math.abs(this.percentage[1] - percentage);
  343. this.dragged = (diff1 < diff2) ? 0 : 1;
  344. }
  345. else {
  346. this.dragged = 0;
  347. }
  348. $(".slider .tooltip").css("zIndex", 10);
  349. if (this.dragged == 0){
  350. $("#tooltip_start").css("zIndex", 20);
  351. }
  352. else {
  353. $("#tooltip_end").css("zIndex", 20);
  354. }
  355. this.percentage[this.dragged] = this.reversed ? 100 - percentage : percentage;
  356. this.layout();
  357. if (this.touchCapable) {
  358. // Touch: Bind touch events:
  359. $(document).on({
  360. touchmove: $.proxy(this.mousemove, this),
  361. touchend: $.proxy(this.mouseup, this)
  362. });
  363. }
  364. // Bind mouse events:
  365. $(document).on({
  366. mousemove: $.proxy(this.mousemove, this),
  367. mouseup: $.proxy(this.mouseup, this)
  368. });
  369. this.inDrag = true;
  370. var val = this.calculateValue();
  371. this.element.trigger({
  372. type: "slideStart",
  373. value: val
  374. })
  375. .data("value", val)
  376. .prop("value", val);
  377. this.setAdditionalValues();
  378. this.setValue(val);
  379. return true;
  380. },
  381. triggerFocusOnHandle: function (handleIdx) {
  382. if (handleIdx === 0) {
  383. this.handle1.focus();
  384. }
  385. if (handleIdx === 1) {
  386. this.handle2.focus();
  387. }
  388. },
  389. keydown: function (handleIdx, ev) {
  390. if (!this.isEnabled()) {
  391. return false;
  392. }
  393. var dir;
  394. switch (ev.which) {
  395. case 37: // left
  396. case 40: // down
  397. dir = -1;
  398. break;
  399. case 39: // right
  400. case 38: // up
  401. dir = 1;
  402. break;
  403. }
  404. if (!dir) {
  405. return;
  406. }
  407. // use natural arrow keys instead of from min to max
  408. if (this.natural_arrow_keys) {
  409. if (this.reversed) {
  410. dir = dir * -1;
  411. }
  412. }
  413. var oneStepValuePercentageChange = dir * this.percentage[2];
  414. var percentage = this.percentage[handleIdx] + oneStepValuePercentageChange;
  415. if (percentage > 100) {
  416. percentage = 100;
  417. }
  418. else if (percentage < 0) {
  419. percentage = 0;
  420. }
  421. this.dragged = handleIdx;
  422. this.adjustPercentageForRangeSliders(percentage);
  423. this.percentage[this.dragged] = percentage;
  424. this.layout();
  425. var val = this.calculateValue();
  426. this.element.trigger({
  427. type: "slideStart",
  428. value: val
  429. })
  430. .data("value", val)
  431. .prop("value", val);
  432. this.setAdditionalValues();
  433. this.setValue(val, true);
  434. this.element
  435. .trigger({
  436. type: "slideStop",
  437. value: val
  438. })
  439. .data("value", val)
  440. .prop("value", val);
  441. return false;
  442. },
  443. mousemove: function (ev) {
  444. if (!this.isEnabled()) {
  445. return false;
  446. }
  447. // Touch: Get the original event:
  448. if (this.touchCapable && ev.type === "touchmove") {
  449. ev = ev.originalEvent;
  450. }
  451. var percentage = this.getPercentage(ev);
  452. this.adjustPercentageForRangeSliders(percentage);
  453. this.percentage[this.dragged] = this.reversed ? 100 - percentage : percentage;
  454. this.layout();
  455. var val = this.calculateValue();
  456. this.setAdditionalValues();
  457. this.setValue(val, true);
  458. return false;
  459. },
  460. adjustPercentageForRangeSliders: function (percentage) {
  461. if (this.range) {
  462. if (this.dragged === 0 && this.percentage[1] < percentage) {
  463. this.percentage[0] = this.percentage[1];
  464. this.dragged = 1;
  465. }
  466. else if (this.dragged === 1 && this.percentage[0] > percentage) {
  467. this.percentage[1] = this.percentage[0];
  468. this.dragged = 0;
  469. }
  470. }
  471. },
  472. mouseup: function () {
  473. if (!this.isEnabled()) {
  474. return false;
  475. }
  476. if (this.touchCapable) {
  477. // Touch: Unbind touch event handlers:
  478. $(document).off({
  479. touchmove: this.mousemove,
  480. touchend: this.mouseup
  481. });
  482. }
  483. // Unbind mouse event handlers:
  484. $(document).off({
  485. mousemove: this.mousemove,
  486. mouseup: this.mouseup
  487. });
  488. this.inDrag = false;
  489. if (this.over === false) {
  490. this.hideTooltip();
  491. }
  492. var val = this.calculateValue();
  493. this.layout();
  494. this.element
  495. .data("value", val)
  496. .prop("value", val)
  497. .trigger({
  498. type: "slideStop",
  499. value: val
  500. });
  501. return false;
  502. },
  503. calculateValue: function () {
  504. var val;
  505. if (this.range) {
  506. val = [this.min, this.max];
  507. if (this.percentage[0] !== 0) {
  508. val[0] = (Math.max(this.min, this.min + Math.round((this.diff * this.percentage[0] / 100) / this.step) * this.step));
  509. val[0] = this.applyPrecision(val[0]);
  510. }
  511. if (this.percentage[1] !== 100) {
  512. val[1] = (Math.min(this.max, this.min + Math.round((this.diff * this.percentage[1] / 100) / this.step) * this.step));
  513. val[1] = this.applyPrecision(val[1]);
  514. }
  515. this.value = val;
  516. }
  517. else {
  518. val = (this.min + Math.round((this.diff * this.percentage[0] / 100) / this.step) * this.step);
  519. if (val < this.min) {
  520. val = this.min;
  521. }
  522. else if (val > this.max) {
  523. val = this.max;
  524. }
  525. val = parseFloat(val);
  526. val = this.applyPrecision(val);
  527. this.value = [val, this.value[1]];
  528. }
  529. return val;
  530. },
  531. applyPrecision: function (val) {
  532. var precision = this.precision || this.getNumDigitsAfterDecimalPlace(this.step);
  533. return this.applyToFixedAndParseFloat(val, precision);
  534. },
  535. /*
  536. Credits to Mike Samuel for the following method!
  537. Source: http://stackoverflow.com/questions/10454518/javascript-how-to-retrieve-the-number-of-decimals-of-a-string-number
  538. */
  539. getNumDigitsAfterDecimalPlace: function (num) {
  540. var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
  541. if (!match) {
  542. return 0;
  543. }
  544. return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
  545. },
  546. applyToFixedAndParseFloat: function (num, toFixedInput) {
  547. var truncatedNum = num.toFixed(toFixedInput);
  548. return parseFloat(truncatedNum);
  549. },
  550. getPercentage: function (ev) {
  551. if (this.touchCapable && (ev.type === "touchstart" || ev.type === "touchmove")) {
  552. ev = ev.touches[0];
  553. }
  554. var percentage = (ev[this.mousePos] - this.offset[this.stylePos]) * 100 / this.size;
  555. percentage = Math.round(percentage / this.percentage[2]) * this.percentage[2];
  556. return Math.max(0, Math.min(100, percentage));
  557. },
  558. getValue: function () {
  559. if (this.range) {
  560. return this.value;
  561. }
  562. return this.value[0];
  563. },
  564. setAdditionalValues: function() {
  565. this.min = this.reverseFormatter(this.tooltipInner_min.val());
  566. this.max = this.reverseFormatter(this.tooltipInner_max.val());
  567. this.start = this.reverseFormatter(this.tooltipInner_start.val());
  568. this.end = this.reverseFormatter(this.tooltipInner_end.val());
  569. this.step = this.reverseStepFormatter(this.tooltipInner_step.val());
  570. },
  571. setValue: function (val, triggerSlideEvent, triggerSlideStopEvent) {
  572. if (!val) {
  573. val = 0;
  574. }
  575. this.value = this.validateInputValue(val);
  576. if (this.range) {
  577. this.value[0] = this.applyPrecision(this.value[0]);
  578. this.value[1] = this.applyPrecision(this.value[1]);
  579. this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0]));
  580. this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1]));
  581. }
  582. else {
  583. this.value = this.applyPrecision(this.value);
  584. this.value = [ Math.max(this.min, Math.min(this.max, this.value))];
  585. this.handle2.addClass("hide");
  586. if (this.selection === "after") {
  587. this.value[1] = this.max;
  588. }
  589. else {
  590. this.value[1] = this.min;
  591. }
  592. }
  593. this.diff = this.max - this.min;
  594. if (this.diff > 0) {
  595. this.percentage = [
  596. (this.value[0] - this.min) * 100 / this.diff,
  597. (this.value[1] - this.min) * 100 / this.diff,
  598. this.step * 100 / this.diff
  599. ];
  600. }
  601. else {
  602. this.percentage = [0, 0, 100];
  603. }
  604. this.layout();
  605. if (triggerSlideEvent === true) {
  606. var slideEventValue = this.range ? this.value : this.value[0];
  607. this.element
  608. .trigger({
  609. 'type': "slide",
  610. 'value': slideEventValue,
  611. 'min': this.min,
  612. 'max': this.max,
  613. 'start': this.start,
  614. 'end': this.end,
  615. 'step': this.step
  616. })
  617. .data("value", this.value)
  618. .prop("value", this.value);
  619. }
  620. if (triggerSlideStopEvent === true) {
  621. var slideEventValue = this.range ? this.value : this.value[0];
  622. this.element
  623. .trigger({
  624. 'type': "slideStop",
  625. 'value': slideEventValue,
  626. 'min': this.min,
  627. 'max': this.max,
  628. 'start': this.start,
  629. 'end': this.end,
  630. 'step': this.step
  631. })
  632. .data("value", this.value)
  633. .prop("value", this.value);
  634. }
  635. },
  636. validateInputValue: function (val) {
  637. if (typeof val === "number") {
  638. return val;
  639. }
  640. else if (val instanceof Array) {
  641. $.each(val, function (i, input) {
  642. if (typeof input !== "number") {
  643. throw new Error(ErrorMsgs.formatInvalidInputErrorMsg(input));
  644. }
  645. });
  646. return val;
  647. }
  648. else {
  649. throw new Error(ErrorMsgs.formatInvalidInputErrorMsg(val));
  650. }
  651. },
  652. destroy: function () {
  653. this.handle1.off();
  654. this.handle2.off();
  655. this.element.off().show().insertBefore(this.picker);
  656. this.picker.off().remove();
  657. $(this.element).removeData("slider");
  658. },
  659. disable: function () {
  660. this.enabled = false;
  661. this.handle1.removeAttr("tabindex");
  662. this.handle2.removeAttr("tabindex");
  663. this.picker.addClass("slider-disabled");
  664. this.element.trigger("slideDisabled");
  665. },
  666. enable: function () {
  667. this.enabled = true;
  668. this.handle1.attr("tabindex", 0);
  669. this.handle2.attr("tabindex", 0);
  670. this.picker.removeClass("slider-disabled");
  671. this.element.trigger("slideEnabled");
  672. },
  673. toggle: function () {
  674. if (this.enabled) {
  675. this.disable();
  676. }
  677. else {
  678. this.enable();
  679. }
  680. },
  681. isEnabled: function () {
  682. return this.enabled;
  683. },
  684. setAttribute: function (attribute, value) {
  685. this[attribute] = value;
  686. },
  687. getAttribute: function (attribute) {
  688. return this[attribute];
  689. }
  690. };
  691. var publicMethods = {
  692. getValue: Slider.prototype.getValue,
  693. setValue: Slider.prototype.setValue,
  694. setAttribute: Slider.prototype.setAttribute,
  695. getAttribute: Slider.prototype.getAttribute,
  696. destroy: Slider.prototype.destroy,
  697. disable: Slider.prototype.disable,
  698. enable: Slider.prototype.enable,
  699. toggle: Slider.prototype.toggle,
  700. isEnabled: Slider.prototype.isEnabled,
  701. redraw: Slider.prototype.layout
  702. };
  703. $.fn.slider = function (option) {
  704. if (typeof option === "string" && option !== "refresh") {
  705. var args = Array.prototype.slice.call(arguments, 1);
  706. return invokePublicMethod.call(this, option, args);
  707. }
  708. else {
  709. return createNewSliderInstance.call(this, option);
  710. }
  711. };
  712. function invokePublicMethod(methodName, args) {
  713. if (publicMethods[methodName]) {
  714. var sliderObject = retrieveSliderObjectFromElement(this);
  715. var result = publicMethods[methodName].apply(sliderObject, args);
  716. if (typeof result === "undefined") {
  717. return $(this);
  718. }
  719. else {
  720. return result;
  721. }
  722. }
  723. else {
  724. throw new Error("method '" + methodName + "()' does not exist for slider.");
  725. }
  726. }
  727. function retrieveSliderObjectFromElement(element) {
  728. var sliderObject = $(element).data("slider");
  729. if (sliderObject && sliderObject instanceof Slider) {
  730. return sliderObject;
  731. }
  732. else {
  733. throw new Error(ErrorMsgs.callingContextNotSliderInstance);
  734. }
  735. }
  736. function createNewSliderInstance(opts) {
  737. var $this = $(this);
  738. $this.each(function () {
  739. var $this = $(this),
  740. slider = $this.data("slider"),
  741. options = typeof opts === "object" && opts;
  742. // If slider already exists, use its attributes
  743. // as options so slider refreshes properly
  744. if (slider && !options) {
  745. options = {};
  746. $.each($.fn.slider.defaults, function (key) {
  747. options[key] = slider[key];
  748. });
  749. }
  750. $this.data("slider", (new Slider(this, $.extend({}, $.fn.slider.defaults, options))));
  751. });
  752. return $this;
  753. }
  754. $.fn.slider.defaults = {
  755. type: "number",
  756. min: 0,
  757. max: 10,
  758. step: 1,
  759. precision: 0,
  760. value: 5,
  761. range: false,
  762. selection: "before",
  763. tooltip: "show",
  764. tooltip_separator: ":",
  765. tooltip_split: false,
  766. natural_arrow_keys: false,
  767. handle: "round",
  768. reversed: false,
  769. enabled: true,
  770. formatter: function (value) {
  771. return value;
  772. },
  773. stepFormatter: function (value) {
  774. return value;
  775. },
  776. reverseFormatter: function (value) {
  777. return value*1;
  778. },
  779. reverseStepFormatter: function (value) {
  780. return value*1;
  781. }
  782. };
  783. $.fn.slider.Constructor = Slider;
  784. })(window.jQuery);