projects / sencha-touch.git / blame
| Commit | Line | Data |
|---|---|---|
| c4685c84 TL |
1 | /** |
| 2 | * @private | |
| 3 | */ | |
| 4 | Ext.define('Ext.fx.layout.card.Style', { | |
| 5 | ||
| 6 | extend: 'Ext.fx.layout.card.Abstract', | |
| 7 | ||
| 8 | requires: [ | |
| 9 | 'Ext.fx.Animation' | |
| 10 | ], | |
| 11 | ||
| 12 | config: { | |
| 13 | inAnimation: { | |
| 14 | before: { | |
| 15 | visibility: null | |
| 16 | }, | |
| 17 | preserveEndState: false, | |
| 18 | replacePrevious: true | |
| 19 | }, | |
| 20 | ||
| 21 | outAnimation: { | |
| 22 | preserveEndState: false, | |
| 23 | replacePrevious: true | |
| 24 | } | |
| 25 | }, | |
| 26 | ||
| 27 | constructor: function(config) { | |
| 28 | var inAnimation, outAnimation; | |
| 29 | ||
| 30 | this.initConfig(config); | |
| 31 | ||
| 32 | this.endAnimationCounter = 0; | |
| 33 | ||
| 34 | inAnimation = this.getInAnimation(); | |
| 35 | outAnimation = this.getOutAnimation(); | |
| 36 | ||
| 37 | inAnimation.on('animationend', 'incrementEnd', this); | |
| 38 | outAnimation.on('animationend', 'incrementEnd', this); | |
| 39 | }, | |
| 40 | ||
| 41 | updateDirection: function(direction) { | |
| 42 | this.getInAnimation().setDirection(direction); | |
| 43 | this.getOutAnimation().setDirection(direction); | |
| 44 | }, | |
| 45 | ||
| 46 | updateDuration: function(duration) { | |
| 47 | this.getInAnimation().setDuration(duration); | |
| 48 | this.getOutAnimation().setDuration(duration); | |
| 49 | }, | |
| 50 | ||
| 51 | updateReverse: function(reverse) { | |
| 52 | this.getInAnimation().setReverse(reverse); | |
| 53 | this.getOutAnimation().setReverse(reverse); | |
| 54 | }, | |
| 55 | ||
| 56 | incrementEnd: function() { | |
| 57 | this.endAnimationCounter++; | |
| 58 | ||
| 59 | if (this.endAnimationCounter > 1) { | |
| 60 | this.endAnimationCounter = 0; | |
| 61 | this.fireEvent('animationend', this); | |
| 62 | } | |
| 63 | }, | |
| 64 | ||
| 65 | applyInAnimation: function(animation, inAnimation) { | |
| 66 | return Ext.factory(animation, Ext.fx.Animation, inAnimation); | |
| 67 | }, | |
| 68 | ||
| 69 | applyOutAnimation: function(animation, outAnimation) { | |
| 70 | return Ext.factory(animation, Ext.fx.Animation, outAnimation); | |
| 71 | }, | |
| 72 | ||
| 73 | updateInAnimation: function(animation) { | |
| 74 | animation.setScope(this); | |
| 75 | }, | |
| 76 | ||
| 77 | updateOutAnimation: function(animation) { | |
| 78 | animation.setScope(this); | |
| 79 | }, | |
| 80 | ||
| 81 | onActiveItemChange: function(cardLayout, newItem, oldItem, options, controller) { | |
| 82 | var inAnimation = this.getInAnimation(), | |
| 83 | outAnimation = this.getOutAnimation(), | |
| 84 | inElement, outElement; | |
| 85 | ||
| 86 | if (newItem && oldItem && oldItem.isPainted()) { | |
| 87 | inElement = newItem.renderElement; | |
| 88 | outElement = oldItem.renderElement; | |
| 89 | ||
| 90 | inAnimation.setElement(inElement); | |
| 91 | outAnimation.setElement(outElement); | |
| 92 | ||
| 93 | outAnimation.setOnBeforeEnd(function(element, interrupted) { | |
| 94 | if (interrupted || Ext.Animator.hasRunningAnimations(element)) { | |
| 95 | controller.firingArguments[1] = null; | |
| 96 | controller.firingArguments[2] = null; | |
| 97 | } | |
| 98 | }); | |
| 99 | outAnimation.setOnEnd(function() { | |
| 100 | controller.resume(); | |
| 101 | }); | |
| 102 | ||
| 103 | inElement.dom.style.setProperty('visibility', 'hidden', 'important'); | |
| 104 | newItem.show(); | |
| 105 | ||
| 106 | Ext.Animator.run([outAnimation, inAnimation]); | |
| 107 | controller.pause(); | |
| 108 | } | |
| 109 | }, | |
| 110 | ||
| 111 | destroy: function () { | |
| 112 | Ext.destroy(this.getInAnimation(), this.getOutAnimation()); | |
| 113 | ||
| 114 | this.callParent(arguments); | |
| 115 | } | |
| 116 | }); |