Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

aui-state-interaction-debug.js 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. AUI.add('aui-state-interaction', function(A) {
  2. var Lang = A.Lang,
  3. isBoolean = Lang.isBoolean,
  4. isString = Lang.isString,
  5. getClassName = A.getClassName,
  6. STATE = 'state',
  7. CSS_STATE_DEFAULT = getClassName(STATE, 'default'),
  8. CSS_STATE_HOVER = getClassName(STATE, 'hover'),
  9. CSS_STATE_ACTIVE = getClassName(STATE, 'active');
  10. var StateInteraction = A.Component.create(
  11. {
  12. NAME: 'stateinteraction',
  13. NS: 'StateInteraction',
  14. ATTRS: {
  15. active: {
  16. value: false
  17. },
  18. activeState: {
  19. value: true,
  20. validator: isBoolean
  21. },
  22. bubbleTarget: {
  23. value: null
  24. },
  25. classNames: {
  26. value: {}
  27. },
  28. 'default': {
  29. value: false
  30. },
  31. defaultState: {
  32. value: true,
  33. validator: isBoolean
  34. },
  35. hover: {
  36. value: false
  37. },
  38. hoverState: {
  39. value: true,
  40. validator: isBoolean
  41. },
  42. node: {
  43. value: null
  44. }
  45. },
  46. EXTENDS: A.Plugin.Base,
  47. constructor: function(config) {
  48. var host = config.host;
  49. var node = host;
  50. if (A.Widget && host instanceof A.Widget) {
  51. node = host.get('contentBox');
  52. }
  53. config.node = node;
  54. StateInteraction.superclass.constructor.apply(this, arguments);
  55. },
  56. prototype: {
  57. initializer: function() {
  58. var instance = this;
  59. var activeClass = instance.get('classNames.active');
  60. var defaultClass = instance.get('classNames.default');
  61. var hoverClass = instance.get('classNames.hover');
  62. instance._CSS_STATES = {
  63. active: isString(activeClass) ? activeClass : CSS_STATE_ACTIVE,
  64. 'default': isString(defaultClass) ? defaultClass : CSS_STATE_DEFAULT,
  65. hover: isString(hoverClass) ? hoverClass : CSS_STATE_HOVER
  66. };
  67. if (instance.get('defaultState')) {
  68. instance.get('node').addClass(instance._CSS_STATES['default']);
  69. }
  70. instance._createEvents();
  71. instance._attachInteractionEvents();
  72. },
  73. _attachInteractionEvents: function() {
  74. var instance = this;
  75. var node = instance.get('node');
  76. node.on('click', instance._fireEvents, instance);
  77. node.on('mouseenter', A.rbind(instance._fireEvents, instance, 'mouseover'));
  78. node.on('mouseleave', A.rbind(instance._fireEvents, instance, 'mouseout'));
  79. instance.after('activeChange', instance._uiSetState);
  80. instance.after('hoverChange', instance._uiSetState);
  81. instance.after('defaultChange', instance._uiSetState);
  82. },
  83. _fireEvents: function(event, officialType) {
  84. var instance = this;
  85. var bubbleTarget = instance.get('bubbleTarget');
  86. officialType = officialType || event.type;
  87. if (bubbleTarget) {
  88. bubbleTarget.fire(officialType);
  89. }
  90. return instance.fire(officialType);
  91. },
  92. _createEvents: function() {
  93. var instance = this;
  94. var bubbleTarget = instance.get('bubbleTarget');
  95. if (bubbleTarget) {
  96. instance.addTarget(bubbleTarget);
  97. }
  98. instance.publish(
  99. 'click',
  100. {
  101. defaultFn: instance._defClickFn,
  102. emitFacade: true
  103. }
  104. );
  105. instance.publish(
  106. 'mouseout',
  107. {
  108. defaultFn: instance._defMouseOutFn,
  109. emitFacade: true
  110. }
  111. );
  112. instance.publish(
  113. 'mouseover',
  114. {
  115. defaultFn: instance._defMouseOverFn,
  116. emitFacade: true
  117. }
  118. );
  119. },
  120. _defClickFn: function(event) {
  121. var instance = this;
  122. instance.set('active', !instance.get('active'));
  123. },
  124. _defMouseOutFn: function() {
  125. var instance = this;
  126. instance.set('hover', false);
  127. },
  128. _defMouseOverFn: function() {
  129. var instance = this;
  130. instance.set('hover', true);
  131. },
  132. _uiSetState: function(event) {
  133. var instance = this;
  134. var attrName = event.attrName;
  135. if (instance.get(attrName + 'State')) {
  136. var action = 'addClass';
  137. if (!event.newVal) {
  138. action = 'removeClass';
  139. }
  140. instance.get('node')[action](instance._CSS_STATES[attrName]);
  141. }
  142. }
  143. }
  144. }
  145. );
  146. A.namespace('Plugin').StateInteraction = StateInteraction;
  147. }, '@VERSION@' ,{skinnable:false, requires:['aui-base','plugin']});