/** * @private */Ext.define('Ext.fx.layout.card.Scroll', { extend: 'Ext.fx.layout.card.Abstract', requires: [ 'Ext.fx.easing.Linear' ], alias: 'fx.layout.card.scroll', config: { duration: 150 }, constructor: function(config) { this.initConfig(config); }, getEasing: function() { var easing = this.easing; if (!easing) { this.easing = easing = new Ext.fx.easing.Linear(); } return easing; }, updateDuration: function(duration) { this.getEasing().setDuration(duration); }, onActiveItemChange: function(cardLayout, newItem, oldItem, controller) { var direction = this.getDirection(), easing = this.getEasing(), containerElement, inElement, outElement, containerWidth, containerHeight, reverse; if (newItem && oldItem) { if (this.isAnimating) { this.stopAnimation(); } newItem.setWidth('100%'); newItem.setHeight('100%'); containerElement = this.getLayout().container.innerElement; containerWidth = containerElement.getWidth(); containerHeight = containerElement.getHeight(); inElement = newItem.renderElement; outElement = oldItem.renderElement; this.oldItem = oldItem; this.newItem = newItem; this.containerElement = containerElement; this.currentEventController = controller; this.isReverse = reverse = this.getReverse(); newItem.show(); if (direction == 'right') { direction = 'left'; this.isReverse = reverse = !reverse; } else if (direction == 'down') { direction = 'up'; this.isReverse = reverse = !reverse; } if (direction == 'left') { if (reverse) { easing.setConfig({ startValue: containerWidth, endValue: 0 }); containerElement.dom.scrollLeft = containerWidth; outElement.setLeft(containerWidth); } else { easing.setConfig({ startValue: 0, endValue: containerWidth }); inElement.setLeft(containerWidth); } } else { if (reverse) { easing.setConfig({ startValue: containerHeight, endValue: 0 }); containerElement.dom.scrollTop = containerHeight; outElement.setTop(containerHeight); } else { easing.setConfig({ startValue: 0, endValue: containerHeight }); inElement.setTop(containerHeight); } } this.startAnimation(); controller.pause(); } }, startAnimation: function() { this.isAnimating = true; this.getEasing().setStartTime(Date.now()); Ext.AnimationQueue.start(this.doAnimationFrame, this); }, doAnimationFrame: function() { var easing = this.getEasing(), direction = this.getDirection(), scroll = 'scrollTop', value; if (direction == 'left' || direction == 'right') { scroll = 'scrollLeft'; } if (easing.isEnded) { this.stopAnimation(); } else { value = easing.getValue(); this.containerElement.dom[scroll] = value; } }, stopAnimation: function() { var me = this, direction = me.getDirection(), scroll = 'setTop', oldItem = me.oldItem, newItem = me.newItem; if (direction == 'left' || direction == 'right') { scroll = 'setLeft'; } me.currentEventController.resume(); if (me.isReverse && oldItem && oldItem.renderElement && oldItem.renderElement.dom) { oldItem.renderElement[scroll](null); } else if (newItem && newItem.renderElement && newItem.renderElement.dom) { newItem.renderElement[scroll](null); } Ext.AnimationQueue.stop(this.doAnimationFrame, this); me.isAnimating = false; me.fireEvent('animationend', me); }});