dimmer.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  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 = 'dimmer';
  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. closable: false,
  23. // 當出現時會呼叫的回呼函式。
  24. onShow: () => {},
  25. // 當隱藏時會呼叫的回呼函式。
  26. onHide: () => {},
  27. // 當出現或隱藏時會呼叫的回呼函式。
  28. onChange: () => {},
  29. // 當淡化幕自動產生時所要追加的樣式類別,例如 `inverted`。
  30. variation: ''
  31. };
  32. // 事件名稱。
  33. Event = {
  34. SHOW: `SHOW${EVENT_NAMESPACE}`,
  35. HIDE: `HIDE${EVENT_NAMESPACE}`,
  36. CHANGE: `CHANGE${EVENT_NAMESPACE}`,
  37. CLICK: `click${EVENT_NAMESPACE}`
  38. };
  39. // 樣式名稱。
  40. ClassName = {
  41. ACTIVE: 'active',
  42. ANIMATING: 'animating',
  43. DIMMER: 'dimmer',
  44. TS_DIMMER: 'ts dimmer'
  45. };
  46. // 選擇器名稱。
  47. Selector = {
  48. DIMMER: ':scope > .ts.dimmer'
  49. };
  50. // 錯誤訊息。
  51. Error = {};
  52. // ------------------------------------------------------------------------
  53. // 模組註冊
  54. // ------------------------------------------------------------------------
  55. ts.register({NAME, MODULE_NAMESPACE, Error, Settings}, ({$allModules, $this, element, debug, settings}) => {
  56. var $dimmer, module;
  57. // ------------------------------------------------------------------------
  58. // 區域變數
  59. // ------------------------------------------------------------------------
  60. $dimmer = void 0;
  61. // ------------------------------------------------------------------------
  62. // 模組定義
  63. // ------------------------------------------------------------------------
  64. return module = {
  65. show: () => {
  66. debug('顯示淡化幕', element);
  67. if (module.is.active()) {
  68. return;
  69. }
  70. $this.trigger(Event.SHOW, element);
  71. $this.trigger(Event.CHANGE, element);
  72. return module.set.active(true);
  73. },
  74. hide: () => {
  75. debug('隱藏淡化幕', element);
  76. if (module.is.hidden()) {
  77. return;
  78. }
  79. $this.trigger(Event.HIDE, element);
  80. $this.trigger(Event.CHANGE, element);
  81. return module.set.active(false);
  82. },
  83. toggle: () => {
  84. debug('切換淡化幕', element);
  85. if (module.is.active()) {
  86. return module.hide();
  87. } else {
  88. return module.show();
  89. }
  90. },
  91. create: () => {
  92. if (module.has.dimmer()) {
  93. return;
  94. }
  95. ts('<div>').addClass(`${ClassName.TS_DIMMER} ${settings.variation}`).prependTo($this);
  96. module.refresh();
  97. return $dimmer.repaint();
  98. },
  99. is: {
  100. dimmer: () => {
  101. return $this.hasClass(ClassName.DIMMER);
  102. },
  103. active: () => {
  104. return $dimmer.hasClass(ClassName.ACTIVE);
  105. },
  106. hidden: () => {
  107. return !$dimmer.hasClass(ClassName.ACTIVE);
  108. },
  109. animating: () => {
  110. return $dimmer.hasClass(ClassName.ANIMATING);
  111. }
  112. },
  113. set: {
  114. active: (bool) => {
  115. if (bool) {
  116. return $dimmer.addClass(ClassName.ACTIVE);
  117. } else {
  118. return $dimmer.removeClass(ClassName.ACTIVE);
  119. }
  120. }
  121. },
  122. get: {
  123. dimmer: () => {
  124. return $dimmer.get();
  125. }
  126. },
  127. has: {
  128. dimmer: () => {
  129. return $this.find(Selector.DIMMER).length !== 0;
  130. }
  131. },
  132. bind: {
  133. events: () => {
  134. $this.on(Event.SHOW, (event, context) => {
  135. debug("發生 SHOW 事件", context);
  136. return settings.onShow.call(context, event);
  137. });
  138. $this.on(Event.HIDE, (event, context) => {
  139. debug("發生 HIDE 事件", context);
  140. return settings.onHide.call(context, event);
  141. });
  142. return $this.on(Event.CHANGE, (event, context) => {
  143. debug("發生 CHANGE 事件", context);
  144. return settings.onChange.call(context, event);
  145. });
  146. }
  147. },
  148. // ------------------------------------------------------------------------
  149. // 基礎方法
  150. // ------------------------------------------------------------------------
  151. initialize: () => {
  152. debug('初始化淡化幕', element);
  153. module.bind.events();
  154. if (!module.is.dimmer() && !module.has.dimmer()) {
  155. module.create();
  156. }
  157. return module.refresh();
  158. },
  159. instantiate: () => {
  160. return debug('實例化淡化幕', element);
  161. },
  162. refresh: () => {
  163. $dimmer = $this.hasClass(ClassName.DIMMER) ? $this : $this.find(Selector.DIMMER);
  164. return $allModules;
  165. },
  166. destroy: () => {
  167. debug('摧毀淡化幕', element);
  168. $this.removeData(MODULE_NAMESPACE).off(EVENT_NAMESPACE);
  169. return $allModules;
  170. }
  171. };
  172. });
  173. }).call(this);