checkbox.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. // Generated by CoffeeScript 2.0.0-beta4
  2. (function() {
  3. // ------------------------------------------------------------------------
  4. // 變數與常數設置
  5. // ------------------------------------------------------------------------
  6. // 模組名稱。
  7. var ClassName, EVENT_NAMESPACE, Error, Event, MODULE_NAMESPACE, NAME, Selector, Settings;
  8. NAME = 'checkbox';
  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. onChange: () => {},
  23. // 當核取方塊被勾選時所呼叫的函式。
  24. onChecked: () => {},
  25. // 當核取方塊被取消勾選時所呼叫的函式。
  26. onUnchecked: () => {},
  27. // 當核取方塊被勾選時所呼叫的函式,如果這個函式回傳 `false` 將會阻止勾選動作。
  28. beforeChecked: () => {
  29. return true;
  30. },
  31. // 當核取方塊被取消勾選時所呼叫的函式,如果這個函式回傳 `false` 將會阻止取消勾選動作。
  32. beforeUnchecked: () => {
  33. return true;
  34. },
  35. // 當核取方塊被啟用時所呼叫的函式。
  36. onEnable: () => {},
  37. // 當核取方塊被停用時所呼叫的函式。
  38. onDisable: () => {}
  39. };
  40. // 事件名稱。
  41. Event = {
  42. CHECKED: `checked${EVENT_NAMESPACE}`,
  43. UNCHECKED: `unchecked${EVENT_NAMESPACE}`,
  44. BEFORE_CHECKED: `beforeChecked${EVENT_NAMESPACE}`,
  45. BEFORE_UNCHECKED: `beforeUnchecked${EVENT_NAMESPACE}`,
  46. ENABLE: `enable${EVENT_NAMESPACE}`,
  47. DISABLE: `disable${EVENT_NAMESPACE}`,
  48. CHANGE: `change${EVENT_NAMESPACE}`,
  49. CLICK: `click${EVENT_NAMESPACE}`
  50. };
  51. // 樣式名稱。
  52. ClassName = {
  53. DISABLED: 'disabled',
  54. RADIO: 'radio'
  55. };
  56. // 選擇器名稱。
  57. Selector = {
  58. INPUT: 'input',
  59. INPUT_RADIO: 'input[type="radio"]',
  60. INPUT_CHECKBOX: 'input[type="checkbox"]',
  61. INPUT_RADIO_NAME: (name) => {
  62. return `input[type='radio'][name='${name}']`;
  63. }
  64. };
  65. // 錯誤訊息。
  66. Error = {};
  67. // ------------------------------------------------------------------------
  68. // 模組註冊
  69. // ------------------------------------------------------------------------
  70. ts.register({NAME, MODULE_NAMESPACE, Error, Settings}, ({$allModules, $this, element, debug, settings}) => {
  71. var $input, inputElement, module;
  72. // ------------------------------------------------------------------------
  73. // 區域變數
  74. // ------------------------------------------------------------------------
  75. $input = $this.find(Selector.INPUT);
  76. inputElement = $input.get();
  77. // ------------------------------------------------------------------------
  78. // 模組定義
  79. // ------------------------------------------------------------------------
  80. return module = {
  81. toggle: () => {
  82. debug('切換核取方塊', element);
  83. if (module.is.checked() && module.is.checkbox()) {
  84. return module.uncheck();
  85. } else {
  86. return module.check();
  87. }
  88. },
  89. check: () => {
  90. debug('勾選核取方塊', element);
  91. if (!module.trigger.beforeChecked()) {
  92. return;
  93. }
  94. if (module.is.radio()) {
  95. module.uncheckAll();
  96. }
  97. module.trigger.check();
  98. return module.set.checked(true);
  99. },
  100. uncheck: () => {
  101. debug('取消勾選核取方塊', element);
  102. if (!module.trigger.beforeUnchecked()) {
  103. return;
  104. }
  105. module.trigger.uncheck();
  106. return module.set.checked(false);
  107. },
  108. uncheckAll: (name) => {
  109. return ts(Selector.INPUT_RADIO_NAME(module.get.name())).each(function() {
  110. return ts(this).parent().checkbox('uncheck');
  111. });
  112. },
  113. disable: () => {
  114. debug('停用核取方塊', element);
  115. module.trigger.disable();
  116. return module.set.disable(true);
  117. },
  118. enable: () => {
  119. debug('啟用核取方塊', element);
  120. module.trigger.enable();
  121. return module.set.disable(false);
  122. },
  123. set: {
  124. checked: (bool) => {
  125. return $input.prop('checked', bool);
  126. },
  127. disable: (bool) => {
  128. if (bool) {
  129. $this.addClass(ClassName.DISABLED);
  130. } else {
  131. $this.removeClass(ClassName.DISABLED);
  132. }
  133. return $input.prop('disabled', bool);
  134. }
  135. },
  136. is: {
  137. disable: () => {
  138. return $input.prop('disabled');
  139. },
  140. enable: () => {
  141. return !$input.prop('disabled');
  142. },
  143. checked: () => {
  144. return $input.prop('checked');
  145. },
  146. unchecked: () => {
  147. return !$input.prop('checked');
  148. },
  149. radio: () => {
  150. return $this.hasClass(ClassName.RADIO);
  151. },
  152. checkbox: () => {
  153. return !$this.hasClass(ClassName.RADIO);
  154. }
  155. },
  156. get: {
  157. name: () => {
  158. return $input.attr('name');
  159. }
  160. },
  161. trigger: {
  162. check: () => {
  163. return $this.trigger(Event.CHECKED, inputElement).trigger(Event.CHANGE, inputElement);
  164. },
  165. uncheck: () => {
  166. return $this.trigger(Event.UNCHECKED, inputElement).trigger(Event.CHANGE, inputElement);
  167. },
  168. disable: () => {
  169. return $this.trigger(Event.DISABLE, inputElement);
  170. },
  171. enable: () => {
  172. return $this.trigger(Event.ENABLE, inputElement);
  173. },
  174. beforeChecked: () => {
  175. debug('發生 BEFORE_CHECKED 事件', element, inputElement);
  176. return settings.beforeChecked.call(inputElement);
  177. },
  178. beforeUnchecked: () => {
  179. debug('發生 BEFORE_UNCHECKED 事件', element, inputElement);
  180. return settings.beforeUnchecked.call(inputElement);
  181. }
  182. },
  183. bind: {
  184. events: () => {
  185. $this.on(Event.CLICK, () => {
  186. debug('發生 CLICK 事件', element);
  187. if (module.is.enable()) {
  188. return module.toggle();
  189. }
  190. });
  191. $this.on(Event.CHECKED, (event, context) => {
  192. debug('發生 CHECKED 事件', element);
  193. return settings.onChecked.call(context, event);
  194. });
  195. $this.on(Event.UNCHECKED, (event, context) => {
  196. debug('發生 UNCHECKED 事件', element);
  197. return settings.onUnchecked.call(context, event);
  198. });
  199. $this.on(Event.ENABLE, (event, context) => {
  200. debug('發生 ENABLE 事件', element);
  201. return settings.onEnable.call(context, event);
  202. });
  203. $this.on(Event.DISABLE, (event, context) => {
  204. debug('發生 DISABLE 事件', element);
  205. return settings.onDisable.call(context, event);
  206. });
  207. return $this.on(Event.CHANGE, (event, context) => {
  208. debug('發生 CHANGE 事件', element);
  209. return settings.onChange.call(context, event);
  210. });
  211. }
  212. },
  213. // ------------------------------------------------------------------------
  214. // 基礎方法
  215. // ------------------------------------------------------------------------
  216. initialize: () => {
  217. debug('初始化核取方塊', element);
  218. return module.bind.events();
  219. },
  220. instantiate: () => {
  221. return debug('實例化核取方塊', element);
  222. },
  223. refresh: () => {
  224. $input = $this.find(Selector.INPUT);
  225. inputElement = $input.get();
  226. return $allModules;
  227. },
  228. destroy: () => {
  229. debug('摧毀核取方塊', element);
  230. $this.removeData(MODULE_NAMESPACE).off(EVENT_NAMESPACE);
  231. return $allModules;
  232. }
  233. };
  234. });
  235. }).call(this);