slider.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. // Generated by CoffeeScript 2.0.0-beta4
  2. (function() {
  3. // ------------------------------------------------------------------------
  4. // 變數與常數設置
  5. // ------------------------------------------------------------------------
  6. // 模組名稱。
  7. var Attribute, ClassName, EVENT_NAMESPACE, Error, Event, MODULE_NAMESPACE, NAME, Property, Selector, Settings;
  8. NAME = 'slider';
  9. // 模組事件鍵名。
  10. EVENT_NAMESPACE = `.${NAME}`;
  11. // 模組命名空間。
  12. MODULE_NAMESPACE = `module-${NAME}`;
  13. // 模組設定。
  14. Settings = {
  15. // 消音所有提示,甚至是錯誤訊息。
  16. silent: false,
  17. // 顯示除錯訊息。
  18. debug: true,
  19. // 監聽 DOM 結構異動並自動重整快取。
  20. observeChanges: true,
  21. // 允許的最小值。
  22. min: false,
  23. // 允許的最大值。
  24. max: false,
  25. // 起始值。
  26. value: false,
  27. // 每階的數值變更階層。
  28. step: false,
  29. // 軌道。
  30. track: {
  31. // 背景顏色。
  32. color: '#e9e9e9'
  33. },
  34. // 進度條。
  35. progressBar: {
  36. // 背景顏色。
  37. color: 'rgb(150, 150, 150)'
  38. },
  39. // 當數值更改時所會呼叫的回呼函式。
  40. onChange: () => {},
  41. // 當數值正在進行改變時所會呼叫的回呼函式。
  42. onInput: () => {}
  43. };
  44. // 屬性。
  45. Property = {
  46. MIN: 'min',
  47. MAX: 'max',
  48. STEP: 'step',
  49. VALUE: 'value',
  50. DISABLED: 'disabled'
  51. };
  52. // 標籤。
  53. Attribute = {
  54. VALUE: 'value'
  55. };
  56. // 事件名稱。
  57. Event = {
  58. CHANGE: `change${EVENT_NAMESPACE}`,
  59. INPUT: `input${EVENT_NAMESPACE}`
  60. };
  61. // 樣式名稱。
  62. ClassName = {};
  63. // 選擇器名稱。
  64. Selector = {
  65. SLIDER: 'input[type=range]'
  66. };
  67. // 錯誤訊息。
  68. Error = {};
  69. // ------------------------------------------------------------------------
  70. // 模組註冊
  71. // ------------------------------------------------------------------------
  72. ts.register({NAME, MODULE_NAMESPACE, Error, Settings}, ({$allModules, $this, element, debug, settings}) => {
  73. var $slider, module;
  74. // ------------------------------------------------------------------------
  75. // 區域變數
  76. // ------------------------------------------------------------------------
  77. $slider = ts();
  78. // ------------------------------------------------------------------------
  79. // 模組定義
  80. // ------------------------------------------------------------------------
  81. return module = {
  82. set: {
  83. value: (value) => {
  84. $slider.val(value);
  85. return module.set.progress();
  86. },
  87. min: (value) => {
  88. return $slider.prop(Property.MIN, value);
  89. },
  90. max: (value) => {
  91. return $slider.prop(Property.MAX, value);
  92. },
  93. step: (value) => {
  94. return $slider.prop(Property.STEP, value);
  95. },
  96. progress: () => {
  97. var value;
  98. value = (module.get.value() - module.get.min()) / (module.get.max() - module.get.min());
  99. if (value === Number.POSITIVE_INFINITY || isNaN(value)) {
  100. value = module.get.value() / 100;
  101. }
  102. return $slider.css('background-image', `-webkit-gradient(linear, left top, right top, color-stop(${value}, ${settings.progressBar.color}), color-stop(${value}, ${settings.track.color}))`);
  103. }
  104. },
  105. get: {
  106. min: () => {
  107. return $slider.prop(Property.MIN);
  108. },
  109. max: () => {
  110. return $slider.prop(Property.MAX);
  111. },
  112. step: () => {
  113. return $slider.prop(Property.STEP);
  114. },
  115. value: () => {
  116. return $slider.val();
  117. }
  118. },
  119. enable: () => {
  120. $slider.prop(Property.DISABLED, false);
  121. return $allModules;
  122. },
  123. disable: () => {
  124. $slider.prop(Property.DISABLED, true);
  125. return $allModules;
  126. },
  127. bind: {
  128. events: () => {
  129. $this.on(Event.CHANGE, (event) => {
  130. debug('發生 CHANGE 事件', $slider.get());
  131. module.set.progress();
  132. return settings.onChange.call($slider.get(), event, module.get.value());
  133. });
  134. return $this.on(Event.INPUT, (event) => {
  135. debug('發生 INPUT 事件', $slider.get());
  136. module.set.progress();
  137. return settings.onInput.call($slider.get(), event, module.get.value());
  138. });
  139. }
  140. },
  141. // ------------------------------------------------------------------------
  142. // 基礎方法
  143. // ------------------------------------------------------------------------
  144. initialize: () => {
  145. debug('初始化滑桿', element);
  146. $slider = $this.find(Selector.SLIDER);
  147. module.bind.events();
  148. if (settings.value) {
  149. module.set.value(settings.value);
  150. }
  151. if (settings.min) {
  152. module.set.min(settings.min);
  153. }
  154. if (settings.max) {
  155. module.set.max(settings.max);
  156. }
  157. if (settings.step) {
  158. module.set.step(settings.step);
  159. }
  160. return module.set.progress();
  161. },
  162. instantiate: () => {
  163. return debug('實例化滑桿', element);
  164. },
  165. refresh: () => {
  166. var $content, $title;
  167. $title = $this.find(Selector.TITLE);
  168. $content = $this.find(Selector.CONTENT);
  169. return $allModules;
  170. },
  171. destroy: () => {
  172. debug('摧毀滑桿', element);
  173. $this.removeData(MODULE_NAMESPACE).off(EVENT_NAMESPACE);
  174. return $allModules;
  175. }
  176. };
  177. });
  178. }).call(this);