import Sencha Touch 2.4.2 source

[sencha-touch.git] / src / src / fx / layout / card / ScrollCover.js

/**
 * @private
 */
Ext.define('Ext.fx.layout.card.ScrollCover', {
    extend: 'Ext.fx.layout.card.Scroll',

    alias: 'fx.layout.card.scrollcover',

    onActiveItemChange: function(cardLayout, inItem, outItem, options, controller) {
        var containerElement, containerSize, xy, animConfig,
            inTranslate, outTranslate;

        this.lastController = controller;
        this.inItem = inItem;

        if (inItem && outItem) {
            containerElement = this.getLayout().container.innerElement;

            containerSize = containerElement.getSize();
            xy = this.calculateXY(containerSize);
            animConfig = {
                easing: this.getEasing(),
                duration: this.getDuration()
            };

            inItem.renderElement.dom.style.setProperty('visibility', 'hidden', 'important');
            inTranslate = inItem.setTranslatable(true).getTranslatable();
            outTranslate = outItem.setTranslatable(true).getTranslatable();

            outTranslate.translate({ x: 0, y: 0});
//            outItem.setTranslate(null);
            inTranslate.translate({ x: xy.left, y: xy.top});
            inTranslate.getWrapper().dom.style.setProperty('z-index', '100', 'important');
            inItem.show();

            inTranslate.on({
                animationstart: 'onInAnimationStart',
                animationend: 'onInAnimationEnd',
                scope: this
            });
            inTranslate.translateAnimated({ x: 0, y: 0}, animConfig);

            controller.pause();
        }
    },

    onInAnimationStart: function() {
        this.inItem.renderElement.dom.style.removeProperty('visibility');
    },

    onInAnimationEnd: function() {
        this.inItem.getTranslatable().getWrapper().dom.style.removeProperty('z-index'); // Remove this when we can remove translatable
//        this.inItem.setTranslatable(null);
        this.lastController.resume();
    }
});