src/src/fx/layout/card/Scroll.js

   1 /**
   2  * @private
   3  */
   4 Ext.define('Ext.fx.layout.card.Scroll', {
   5     extend: 'Ext.fx.layout.card.Abstract',
   6
   7     requires: [
   8         'Ext.fx.easing.Linear'
   9     ],
  10
  11     alias: 'fx.layout.card.scroll',
  12
  13     config: {
  14         duration: 150
  15     },
  16
  17     constructor: function(config) {
  18         this.initConfig(config);
  19     },
  20
  21     getEasing: function() {
  22         var easing = this.easing;
  23
  24         if (!easing) {
  25             this.easing = easing = new Ext.fx.easing.Linear();
  26         }
  27
  28         return easing;
  29     },
  30
  31     updateDuration: function(duration) {
  32         this.getEasing().setDuration(duration);
  33     },
  34
  35     onActiveItemChange: function(cardLayout, newItem, oldItem, options, controller) {
  36         var direction = this.getDirection(),
  37             easing = this.getEasing(),
  38             containerElement, inElement, outElement, containerWidth, containerHeight, reverse;
  39
  40         if (newItem && oldItem) {
  41             if (this.isAnimating) {
  42                 this.stopAnimation();
  43             }
  44
  45             newItem.setWidth('100%');
  46             newItem.setHeight('100%');
  47
  48             containerElement = this.getLayout().container.innerElement;
  49             containerWidth = containerElement.getWidth();
  50             containerHeight = containerElement.getHeight();
  51
  52             inElement = newItem.renderElement;
  53             outElement = oldItem.renderElement;
  54
  55             this.oldItem = oldItem;
  56             this.newItem = newItem;
  57             this.currentEventController = controller;
  58             this.containerElement = containerElement;
  59             this.isReverse = reverse = this.getReverse();
  60
  61             newItem.show();
  62
  63             if (direction == 'right') {
  64                 direction = 'left';
  65                 this.isReverse = reverse = !reverse;
  66             }
  67             else if (direction == 'down') {
  68                 direction = 'up';
  69                 this.isReverse = reverse = !reverse;
  70             }
  71
  72             if (direction == 'left') {
  73                 if (reverse) {
  74                     easing.setConfig({
  75                         startValue: containerWidth,
  76                         endValue: 0
  77                     });
  78
  79                     containerElement.dom.scrollLeft = containerWidth;
  80                     outElement.setLeft(containerWidth);
  81                 }
  82                 else {
  83                     easing.setConfig({
  84                         startValue: 0,
  85                         endValue: containerWidth
  86                     });
  87
  88                     inElement.setLeft(containerWidth);
  89                 }
  90             }
  91             else {
  92                 if (reverse) {
  93                     easing.setConfig({
  94                         startValue: containerHeight,
  95                         endValue: 0
  96                     });
  97
  98                     containerElement.dom.scrollTop = containerHeight;
  99                     outElement.setTop(containerHeight);
 100                 }
 101                 else {
 102                     easing.setConfig({
 103                         startValue: 0,
 104                         endValue: containerHeight
 105                     });
 106
 107                     inElement.setTop(containerHeight);
 108                 }
 109             }
 110
 111             this.startAnimation();
 112
 113             controller.pause();
 114         }
 115     },
 116
 117     startAnimation: function() {
 118         this.isAnimating = true;
 119         this.getEasing().setStartTime(Date.now());
 120         Ext.AnimationQueue.start(this.doAnimationFrame, this);
 121     },
 122
 123     doAnimationFrame: function() {
 124         var easing = this.getEasing(),
 125             direction = this.getDirection(),
 126             scroll = 'scrollTop',
 127             value;
 128
 129         if (direction == 'left' || direction == 'right') {
 130             scroll = 'scrollLeft';
 131         }
 132
 133         if (easing.isEnded) {
 134             this.stopAnimation();
 135         }
 136         else {
 137             value = easing.getValue();
 138             this.containerElement.dom[scroll] = value;
 139         }
 140     },
 141
 142     stopAnimation: function() {
 143         var me = this,
 144             direction = me.getDirection(),
 145             scroll = 'setTop',
 146             oldItem = me.oldItem,
 147             newItem = me.newItem;
 148
 149         if (direction == 'left' || direction == 'right') {
 150             scroll = 'setLeft';
 151         }
 152
 153         me.currentEventController.resume();
 154
 155         if (me.isReverse && oldItem && oldItem.renderElement && oldItem.renderElement.dom) {
 156             oldItem.renderElement[scroll](null);
 157         }
 158         else if (newItem && newItem.renderElement && newItem.renderElement.dom) {
 159             newItem.renderElement[scroll](null);
 160         }
 161
 162         Ext.AnimationQueue.stop(this.doAnimationFrame, this);
 163         me.isAnimating = false;
 164         me.fireEvent('animationend', me);
 165     }
 166 });