range.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. /*!
  2. * # Semantic UI 2.6.4 - Range
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. ;(function ( $, window, document, undefined ) {
  11. "use strict";
  12. $.fn.range = function(parameters) {
  13. var
  14. $allModules = $(this),
  15. offset = 10,
  16. query = arguments[0],
  17. methodInvoked = (typeof query == 'string'),
  18. queryArguments = [].slice.call(arguments, 1)
  19. ;
  20. $allModules
  21. .each(function() {
  22. var
  23. settings = ( $.isPlainObject(parameters) )
  24. ? $.extend(true, {}, $.fn.range.settings, parameters)
  25. : $.extend({}, $.fn.range.settings),
  26. namespace = settings.namespace,
  27. min = settings.min,
  28. max = settings.max,
  29. step = settings.step,
  30. start = settings.start,
  31. input = settings.input,
  32. eventNamespace = '.' + namespace,
  33. moduleNamespace = 'module-' + namespace,
  34. $module = $(this),
  35. element = this,
  36. instance = $module.data(moduleNamespace),
  37. inner,
  38. thumb,
  39. trackLeft,
  40. precision,
  41. module
  42. ;
  43. module = {
  44. initialize: function() {
  45. module.instantiate();
  46. module.sanitize();
  47. },
  48. instantiate: function() {
  49. instance = module;
  50. $module
  51. .data(moduleNamespace, module)
  52. ;
  53. $(element).html("<div class='inner'><div class='track'></div><div class='track-fill'></div><div class='thumb'></div></div>");
  54. inner = $(element).children('.inner')[0];
  55. thumb = $(element).find('.thumb')[0];
  56. trackLeft = $(element).find('.track-fill')[0];
  57. // find precision of step, used in calculating the value
  58. module.determinePrecision();
  59. // set start location
  60. module.setValuePosition(settings.start);
  61. // event listeners
  62. $(element).find('.track, .thumb, .inner').on('mousedown', function(event) {
  63. event.stopImmediatePropagation();
  64. event.preventDefault();
  65. $(this).closest(".range").trigger('mousedown', event);
  66. });
  67. $(element).find('.track, .thumb, .inner').on('touchstart', function(event) {
  68. event.stopImmediatePropagation();
  69. event.preventDefault();
  70. $(this).closest(".range").trigger('touchstart', event);
  71. });
  72. $(element).on('mousedown', function(event, originalEvent) {
  73. module.rangeMousedown(event, false, originalEvent);
  74. });
  75. $(element).on('touchstart', function(event, originalEvent) {
  76. module.rangeMousedown(event, true, originalEvent);
  77. });
  78. module.addVisibilityListener(element);
  79. },
  80. sanitize: function() {
  81. if (typeof settings.min != 'number') {
  82. settings.min = parseInt(settings.min) || 0;
  83. }
  84. if (typeof settings.max != 'number') {
  85. settings.max = parseInt(settings.max) || false;
  86. }
  87. if (typeof settings.start != 'number') {
  88. settings.start = parseInt(settings.start) || 0;
  89. }
  90. },
  91. determinePrecision: function() {
  92. var split = String(settings.step).split('.');
  93. var decimalPlaces;
  94. if(split.length == 2) {
  95. decimalPlaces = split[1].length;
  96. } else {
  97. decimalPlaces = 0;
  98. }
  99. precision = Math.pow(10, decimalPlaces);
  100. },
  101. determineValue: function(startPos, endPos, currentPos) {
  102. var ratio = (currentPos - startPos) / (endPos - startPos);
  103. var range = settings.max - settings.min;
  104. var difference = Math.round(ratio * range / step) * step;
  105. // Use precision to avoid ugly Javascript floating point rounding issues
  106. // (like 35 * .01 = 0.35000000000000003)
  107. difference = Math.round(difference * precision) / precision;
  108. return difference + settings.min;
  109. },
  110. determinePosition: function(value) {
  111. var ratio = (value - settings.min) / (settings.max - settings.min);
  112. return Math.round(ratio * $(inner).width()) + $(trackLeft).position().left - offset;
  113. },
  114. setValue: function(newValue, triggeredByUser) {
  115. if(typeof triggeredByUser === 'undefined') {
  116. triggeredByUser = true;
  117. }
  118. if(settings.input) {
  119. $(settings.input).val(newValue);
  120. }
  121. if(settings.onChange) {
  122. settings.onChange(newValue, {triggeredByUser: triggeredByUser});
  123. }
  124. },
  125. setPosition: function(value) {
  126. $(thumb).css({left: String(value) + 'px'});
  127. $(trackLeft).css({width: String(value + offset) + 'px'});
  128. },
  129. rangeMousedown: function(mdEvent, isTouch, originalEvent) {
  130. if( !$(element).hasClass('disabled') ) {
  131. mdEvent.preventDefault();
  132. var left = $(inner).offset().left;
  133. var right = left + $(inner).width();
  134. var pageX;
  135. if(isTouch) {
  136. pageX = originalEvent.originalEvent.touches[0].pageX;
  137. } else {
  138. pageX = (typeof mdEvent.pageX != 'undefined') ? mdEvent.pageX : originalEvent.pageX;
  139. }
  140. var value = module.determineValue(left, right, pageX);
  141. if(pageX >= left && pageX <= right) {
  142. module.setPosition(pageX - left - offset);
  143. module.setValue(value);
  144. }
  145. var rangeMousemove = function(mmEvent) {
  146. mmEvent.preventDefault();
  147. if(isTouch) {
  148. pageX = mmEvent.originalEvent.touches[0].pageX;
  149. } else {
  150. pageX = mmEvent.pageX;
  151. }
  152. value = module.determineValue(left, right, pageX);
  153. if(pageX >= left && pageX <= right) {
  154. if(value >= settings.min && value <= settings.max) {
  155. module.setPosition(pageX - left - offset);
  156. module.setValue(value);
  157. }
  158. }
  159. }
  160. var rangeMouseup = function(muEvent) {
  161. if(isTouch) {
  162. $(document).off('touchmove', rangeMousemove);
  163. $(document).off('touchend', rangeMouseup);
  164. } else {
  165. $(document).off('mousemove', rangeMousemove);
  166. $(document).off('mouseup', rangeMouseup);
  167. }
  168. }
  169. if(isTouch) {
  170. $(document).on('touchmove', rangeMousemove);
  171. $(document).on('touchend', rangeMouseup);
  172. }
  173. else {
  174. $(document).on('mousemove', rangeMousemove);
  175. $(document).on('mouseup', rangeMouseup);
  176. }
  177. }
  178. },
  179. setValuePosition: function(val, triggeredByUser) {
  180. if(typeof triggeredByUser === 'undefined') {
  181. triggeredByUser = true;
  182. }
  183. var position = module.determinePosition(val);
  184. module.setPosition(position);
  185. module.setValue(val, triggeredByUser);
  186. },
  187. invoke: function(query) {
  188. switch(query) {
  189. case 'set value':
  190. if(queryArguments.length > 0) {
  191. instance.setValuePosition(queryArguments[0], false);
  192. }
  193. break;
  194. }
  195. },
  196. addVisibilityListener: function(elem) {
  197. // Add a mutation observer (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
  198. // to detect when root invisible element is behing shown in order to initialize the thumb correctly
  199. // when position and offets are available (https://stackoverflow.com/a/5974377)
  200. var observer = new MutationObserver(function(mutationList) {
  201. if ($(elem).is(':visible')) {
  202. observer.disconnect(); // Avoid infinite recursion because « module.setValuePosition » will trigger this observer
  203. module.setValuePosition(settings.start);
  204. }
  205. });
  206. var closestHiddenParent = $(elem).parentsUntil(':visible');
  207. if (closestHiddenParent.length != 0) {
  208. observer.observe(closestHiddenParent[closestHiddenParent.length - 1], {attributes: true});
  209. }
  210. },
  211. };
  212. if(methodInvoked) {
  213. if(instance === undefined) {
  214. module.initialize();
  215. }
  216. module.invoke(query);
  217. }
  218. else {
  219. module.initialize();
  220. }
  221. })
  222. ;
  223. return this;
  224. };
  225. $.fn.range.settings = {
  226. name : 'Range',
  227. namespace : 'range',
  228. min : 0,
  229. max : false,
  230. step : 1,
  231. start : 0,
  232. input : false,
  233. onChange : function(value){},
  234. };
  235. })( jQuery, window, document );