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-scroller-debug.js 7.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. AUI.add('aui-scroller', function(A) {
  2. var L = A.Lang,
  3. isNumber = L.isNumber,
  4. isString = L.isString,
  5. BOUNDING_BOX = 'boundingBox',
  6. CLIENT_WIDTH = 'clientWidth',
  7. CONTENT_BOX = 'contentBox',
  8. DURATION = 'duration',
  9. EDGE_PROXIMITY = 'edgeProximity',
  10. HEIGHT = 'Height',
  11. LEFT = 'Left',
  12. OFFSET = 'offset',
  13. SCROLL = 'scroll',
  14. TOP = 'Top',
  15. WIDTH = 'Width',
  16. HORIZONTAL = 'horizontal',
  17. OFFSET_HEIGHT = OFFSET + HEIGHT,
  18. OFFSET_LEFT = OFFSET + LEFT,
  19. OFFSET_TOP = OFFSET + TOP,
  20. OFFSET_WIDTH = OFFSET + WIDTH,
  21. ORIENTATION = 'orientation',
  22. PX = 'px',
  23. SCROLL_HEIGHT = SCROLL + HEIGHT,
  24. SCROLLER = 'scroller',
  25. SCROLLCONTENT = 'scrollcontent',
  26. UNDERLINE = '_',
  27. VERTICAL = 'vertical',
  28. getCN = A.getClassName,
  29. CSS_HORIZONTAL = getCN(SCROLLER, HORIZONTAL),
  30. CSS_ITEM = getCN(SCROLLER, 'item'),
  31. CSS_VERTICAL = getCN(SCROLLER, VERTICAL);
  32. var Scroller = A.Component.create (
  33. {
  34. NAME: SCROLLER,
  35. ATTRS: {
  36. duration: {
  37. setter: function(value) {
  38. return value * 1000;
  39. },
  40. validator: isNumber,
  41. value: 0.1
  42. },
  43. edgeProximity: {
  44. value: 0.1
  45. },
  46. itemSelector: {
  47. value: '>*'
  48. },
  49. orientation: {
  50. validator: function(val) {
  51. return isString(val) && (val === HORIZONTAL || val === VERTICAL);
  52. },
  53. value: HORIZONTAL
  54. }
  55. },
  56. UI_ATTRS: [ORIENTATION],
  57. prototype: {
  58. nodeSelection: null,
  59. initializer: function() {
  60. var instance = this;
  61. var boundingBox = instance.get(BOUNDING_BOX);
  62. var contentBox = instance.get(CONTENT_BOX);
  63. instance._boundingBox = boundingBox;
  64. instance._contentBox = contentBox;
  65. instance._duration = instance.get(DURATION);
  66. instance._edgeProximity = instance.get(EDGE_PROXIMITY);
  67. instance._orientation = instance.get(ORIENTATION);
  68. instance.boundingBoxXY = instance._boundingBox.getXY();
  69. instance._boundingBoxEl = boundingBox.getDOM();
  70. instance._contentBoxEl = contentBox.getDOM();
  71. instance._setCoords(instance._orientation == HORIZONTAL);
  72. instance._updateNodeSelection();
  73. },
  74. bindUI: function() {
  75. var instance = this;
  76. instance.publish(
  77. SCROLLCONTENT,
  78. {
  79. defaultFn: instance._defaultScrollFn
  80. }
  81. );
  82. var contentBox = instance._contentBox;
  83. instance.after(['durationChange', 'edgeProximityChange'], instance._setPrivateAttr);
  84. contentBox.on('mouseenter', A.rbind(instance._updateDimensions, instance));
  85. contentBox.on('mousemove', A.rbind(instance._onMouseMove, instance, instance._boundingBox, instance._contentBox, instance._orientation));
  86. instance._boundingBox.on('focus', instance._onItemFocus, instance);
  87. instance._createAnimation();
  88. },
  89. _adjustToEdge: function(value) {
  90. var instance = this;
  91. var edgeProximity = instance._edgeProximity;
  92. var adjusted = value;
  93. if (edgeProximity) {
  94. value = Math.max(value, edgeProximity);
  95. value = Math.min(value, 1 - edgeProximity);
  96. value = value - edgeProximity;
  97. adjusted = value / (1 - (edgeProximity * 2));
  98. }
  99. return adjusted;
  100. },
  101. _animate: function(event) {
  102. var instance = this;
  103. var fx = instance._fx;
  104. var boundingBoxEl = instance._boundingBoxEl;
  105. var orientation = instance._orientation;
  106. var scroll = SCROLL + instance._coordTL;
  107. var coordXY = instance._coordXY.toLowerCase();
  108. var from = boundingBoxEl[scroll] || 0;
  109. var to = event[coordXY];
  110. fx.from = from;
  111. fx.to = to;
  112. fx.start();
  113. },
  114. _constrain: function(value, min, max) {
  115. var instance = this;
  116. return Math.max(Math.min(value, max), min);
  117. },
  118. _createAnimation: function() {
  119. var instance = this;
  120. var boundingBoxEl = instance._boundingBoxEl;
  121. var from = boundingBoxEl[SCROLL + instance._coordTL] || 0;
  122. var to = from;
  123. instance._fx = new A.SimpleAnim(
  124. {
  125. duration: instance._duration,
  126. from: from,
  127. intervalRate: 1,
  128. to: to,
  129. onTween: function(value) {
  130. boundingBoxEl[SCROLL + instance._coordTL] = value;
  131. }
  132. }
  133. );
  134. instance._throttleAnimate = instance._animate;
  135. },
  136. _defaultScrollFn: function(event) {
  137. var instance = this;
  138. instance._throttleAnimate(event);
  139. },
  140. _getPositionData: function(absoluteX, absoluteY) {
  141. var instance = this;
  142. var boundingBoxXY = instance.boundingBoxXY;
  143. var relativeMouseX = absoluteX - boundingBoxXY[0];
  144. var relativeMouseY = absoluteY - boundingBoxXY[1];
  145. var scaledX = relativeMouseX * instance.ratioX;
  146. var scaledY = relativeMouseY * instance.ratioY;
  147. var relativeX = instance._constrain(relativeMouseX / instance.boundingBoxWidth, 0, 1);
  148. var relativeY = instance._constrain(relativeMouseY / instance.boundingBoxHeight, 0, 1);
  149. relativeX = instance._adjustToEdge(relativeX);
  150. relativeY = instance._adjustToEdge(relativeY);
  151. var adjustedX = (instance.deltaX * relativeX);
  152. var adjustedY = (instance.deltaY * relativeY);
  153. return {
  154. x: adjustedX,
  155. y: adjustedY,
  156. scaledX: scaledX,
  157. scaledY: scaledY,
  158. relativeX: relativeMouseX,
  159. relativeY: relativeMouseY
  160. };
  161. },
  162. _onItemFocus: function(event) {
  163. var instance = this;
  164. instance._updateDimensions();
  165. var xy = event.target.getXY();
  166. var data = instance._getPositionData.apply(instance, xy);
  167. instance.fire(SCROLLCONTENT, data);
  168. instance._updatePrevXY(data.relativeX, data.relativeY);
  169. },
  170. _onMouseMove: function(event, boundingBox, contentBox, orientation) {
  171. var instance = this;
  172. var data = instance._getPositionData(event.pageX, event.pageY);
  173. instance.fire(SCROLLCONTENT, data);
  174. instance._updatePrevXY(data.relativeX, data.relativeY);
  175. },
  176. _setCoords: function(horizontal) {
  177. var instance = this;
  178. var coordTL = TOP;
  179. var coordXY = 'Y';
  180. if (horizontal) {
  181. coordTL = LEFT;
  182. coordXY = 'X';
  183. }
  184. instance._coordTL = coordTL;
  185. instance._coordXY = coordXY;
  186. },
  187. _setPrivateAttr: function(event) {
  188. var instance = this;
  189. instance[UNDERLINE + event.attrName] = event.newVal;
  190. },
  191. _updateDimensions: function(event) {
  192. var instance = this;
  193. var boundingBox = instance._boundingBox;
  194. var contentBox = instance._contentBox;
  195. var boundingBoxOffsetHeight = boundingBox.get(OFFSET_HEIGHT);
  196. var boundingBoxOffsetWidth = boundingBox.get(OFFSET_WIDTH);
  197. var contentBoxClientWidth = contentBox.get(CLIENT_WIDTH);
  198. var contentBoxScrollHeight = contentBox.get(SCROLL_HEIGHT);
  199. var deltaX = contentBoxClientWidth - boundingBoxOffsetWidth;
  200. var deltaY = contentBoxScrollHeight - boundingBoxOffsetHeight;
  201. instance.boundingBoxXY = boundingBox.getXY();
  202. instance.ratioX = deltaX / boundingBoxOffsetWidth;
  203. instance.ratioY = deltaY / boundingBoxOffsetHeight;
  204. instance.deltaX = deltaX;
  205. instance.deltaY = deltaY;
  206. instance.boundingBoxHeight = boundingBoxOffsetHeight;
  207. instance.boundingBoxWidth = boundingBoxOffsetWidth;
  208. instance.contentBoxHeight = contentBoxScrollHeight;
  209. instance.contentBoxWidth = contentBoxClientWidth;
  210. },
  211. _updatePrevXY: function(x, y) {
  212. var instance = this;
  213. instance._prevX = x;
  214. instance._prevY = y;
  215. },
  216. _uiSetOrientation: function(val) {
  217. var instance = this;
  218. var boundingBox = instance._boundingBox;
  219. var horizontal = (val === HORIZONTAL);
  220. boundingBox.toggleClass(CSS_HORIZONTAL, horizontal);
  221. boundingBox.toggleClass(CSS_VERTICAL, !horizontal);
  222. instance._setCoords(horizontal);
  223. instance._orientation = val;
  224. },
  225. _updateNodeSelection: function() {
  226. var instance = this;
  227. var itemSelector = instance.get('itemSelector');
  228. instance.nodeSelection = instance._contentBox.all(itemSelector).addClass(CSS_ITEM);
  229. },
  230. _prevX: 0,
  231. _prevY: 0
  232. }
  233. }
  234. );
  235. A.Scroller = Scroller;
  236. }, '@VERSION@' ,{requires:['aui-base','aui-simple-anim'], skinnable:true});