add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / navigation / Bar.js

/**\r
 * This component is used in {@link Ext.navigation.View} to control animations in the toolbar. You should never need to\r
 * interact with the component directly, unless you are subclassing it.\r
 * @private\r
 */\r
Ext.define('Ext.navigation.Bar', {\r
    extend: 'Ext.TitleBar',\r
\r
    requires: [\r
        'Ext.Button',\r
        'Ext.Spacer'\r
    ],\r
\r
    /**\r
     * @private\r
     */\r
    isToolbar: true,\r
\r
    config: {\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        baseCls: Ext.baseCSSPrefix + 'toolbar',\r
\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        cls: Ext.baseCSSPrefix + 'navigation-bar',\r
\r
        /**\r
         * @cfg {String} ui\r
         * Style options for Toolbar. Either 'light' or 'dark'.\r
         * @accessor\r
         */\r
        ui: 'dark',\r
\r
        /**\r
         * @cfg {String} title\r
         * The title of the toolbar. You should NEVER set this, it is used internally. You set the title of the\r
         * navigation bar by giving a navigation views children a title configuration.\r
         * @private\r
         * @accessor\r
         */\r
        title: null,\r
\r
        /**\r
         * @cfg\r
         * @hide\r
         * @accessor\r
         */\r
        defaultType: 'button',\r
\r
        /**\r
         * @cfg\r
         * @ignore\r
         * @accessor\r
         */\r
        layout: {\r
            type: 'hbox'\r
        },\r
\r
        /**\r
         * @cfg {Array/Object} items The child items to add to this NavigationBar. The {@link #cfg-defaultType} of\r
         * a NavigationBar is {@link Ext.Button}, so you do not need to specify an `xtype` if you are adding\r
         * buttons.\r
         *\r
         * You can also give items a `align` configuration which will align the item to the `left` or `right` of\r
         * the NavigationBar.\r
         * @hide\r
         * @accessor\r
         */\r
\r
        /**\r
         * @cfg {String} defaultBackButtonText\r
         * The text to be displayed on the back button if:\r
         * a) The previous view does not have a title\r
         * b) The {@link #useTitleForBackButtonText} configuration is true.\r
         * @private\r
         * @accessor\r
         */\r
        defaultBackButtonText: 'Back',\r
\r
        /**\r
         * @cfg {Object} animation\r
         * @private\r
         * @accessor\r
         */\r
        animation: {\r
            duration: 300\r
        },\r
\r
        /**\r
         * @cfg {Boolean} useTitleForBackButtonText\r
         * Set to false if you always want to display the {@link #defaultBackButtonText} as the text\r
         * on the back button. True if you want to use the previous views title.\r
         * @private\r
         * @accessor\r
         */\r
        useTitleForBackButtonText: null,\r
\r
        /**\r
         * @cfg {Ext.navigation.View} view A reference to the navigation view this bar is linked to.\r
         * @private\r
         * @accessor\r
         */\r
        view: null,\r
\r
        /**\r
         * @cfg {Boolean} androidAnimation Optionally enable CSS transforms on Android 2\r
         * for NavigationBar animations.  Note that this may cause flickering if the\r
         * NavigationBar is hidden.\r
         * @accessor\r
         */\r
        android2Transforms: false,\r
\r
        /**\r
         * @cfg {Ext.Button/Object} backButton The configuration for the back button\r
         * @private\r
         * @accessor\r
         */\r
        backButton: {\r
            align: 'left',\r
            ui: 'back',\r
            hidden: true\r
        }\r
    },\r
\r
    /**\r
     * @event back\r
     * Fires when the back button was tapped.\r
     * @param {Ext.navigation.Bar} this This bar\r
     */\r
\r
    constructor: function (config) {\r
        config = config || {};\r
\r
        if (!config.items) {\r
            config.items = [];\r
        }\r
\r
        this.backButtonStack = [];\r
        this.activeAnimations = [];\r
\r
        this.callParent([config]);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    applyBackButton: function (config) {\r
        return Ext.factory(config, Ext.Button, this.getBackButton());\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateBackButton: function (newBackButton, oldBackButton) {\r
        if (oldBackButton) {\r
            this.remove(oldBackButton);\r
        }\r
\r
        if (newBackButton) {\r
            this.add(newBackButton);\r
\r
            newBackButton.on({\r
                scope: this,\r
                tap: this.onBackButtonTap\r
            });\r
        }\r
    },\r
\r
    onBackButtonTap: function () {\r
        this.fireEvent('back', this);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    updateView: function (newView) {\r
        var me = this,\r
            backButton, innerItems, i, backButtonText, item, title, titleText;\r
\r
        // Need to have items initialized before getting the backButton\r
        me.getItems();\r
        backButton = me.getBackButton();\r
\r
        if (newView) {\r
            //update the back button stack with the current inner items of the view\r
            innerItems = newView.getInnerItems();\r
            for (i = 0; i < innerItems.length; i++) {\r
                item = innerItems[i];\r
                title = (item.getTitle) ? item.getTitle() : item.config.title;\r
\r
                me.backButtonStack.push(title || '&nbsp;');\r
            }\r
\r
            titleText = me.getTitleText();\r
\r
            if (titleText === undefined) {\r
                titleText = '';\r
            }\r
\r
            me.setTitle(titleText);\r
\r
            backButtonText = me.getBackButtonText();\r
            if (backButtonText) {\r
                backButton.setText(backButtonText);\r
                backButton.show();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onViewAdd: function (view, item) {\r
        var me = this,\r
            backButtonStack = me.backButtonStack,\r
            hasPrevious, title;\r
\r
        me.endAnimation();\r
\r
        title = (item.getTitle) ? item.getTitle() : item.config.title;\r
\r
        backButtonStack.push(title || '&nbsp;');\r
        hasPrevious = backButtonStack.length > 1;\r
\r
        me.doChangeView(view, hasPrevious, false);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onViewRemove: function (view) {\r
        var me = this,\r
            backButtonStack = me.backButtonStack,\r
            hasPrevious;\r
\r
        me.endAnimation();\r
        backButtonStack.pop();\r
        hasPrevious = backButtonStack.length > 1;\r
\r
        me.doChangeView(view, hasPrevious, true);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    doChangeView: function (view, hasPrevious, reverse) {\r
        var me = this,\r
            leftBox = me.leftBox,\r
            leftBoxElement = leftBox.element,\r
            titleComponent = me.titleComponent,\r
            titleElement = titleComponent.element,\r
            backButton = me.getBackButton(),\r
            titleText = me.getTitleText(),\r
            backButtonText = me.getBackButtonText(),\r
            animation = me.getAnimation() && view.getLayout().getAnimation(),\r
            animated = animation && animation.isAnimation && view.isPainted(),\r
            properties, leftGhost, titleGhost, leftProps, titleProps;\r
\r
        if (animated) {\r
            leftGhost = me.createProxy(leftBox.element);\r
            leftBoxElement.setStyle('opacity', '0');\r
            backButton.setText(backButtonText);\r
            backButton[hasPrevious ? 'show' : 'hide']();\r
\r
            titleGhost = me.createProxy(titleComponent.element.getParent());\r
            titleElement.setStyle('opacity', '0');\r
            me.setTitle(titleText);\r
\r
            properties = me.measureView(leftGhost, titleGhost, reverse);\r
            leftProps = properties.left;\r
            titleProps = properties.title;\r
\r
            me.isAnimating = true;\r
            me.animate(leftBoxElement, leftProps.element);\r
            me.animate(titleElement, titleProps.element, function () {\r
                titleElement.setLeft(properties.titleLeft);\r
                me.isAnimating = false;\r
                me.refreshTitlePosition();\r
            });\r
\r
            me.animate(leftGhost.ghost, leftProps.ghost);\r
            me.animate(titleGhost.ghost, titleProps.ghost, function () {\r
                leftGhost.ghost.destroy();\r
                titleGhost.ghost.destroy();\r
            });\r
        }\r
        else {\r
            if (hasPrevious) {\r
                backButton.setText(backButtonText);\r
                backButton.show();\r
            }\r
            else {\r
                backButton.hide();\r
            }\r
            me.setTitle(titleText);\r
        }\r
    },\r
\r
    /**\r
     * Calculates and returns the position values needed for the back button when you are pushing a title.\r
     * @private\r
     */\r
    measureView: function (oldLeft, oldTitle, reverse) {\r
        var me = this,\r
            barElement = me.element,\r
            newLeftElement = me.leftBox.element,\r
            titleElement = me.titleComponent.element,\r
            minOffset = Math.min(barElement.getWidth() / 3, 200),\r
            newLeftWidth = newLeftElement.getWidth(),\r
            barX = barElement.getX(),\r
            barWidth = barElement.getWidth(),\r
            titleX = titleElement.getX(),\r
            titleLeft = titleElement.getLeft(true),\r
            titleWidth = titleElement.getWidth(),\r
            oldLeftX = oldLeft.x,\r
            oldLeftWidth = oldLeft.width,\r
            oldLeftLeft = oldLeft.left,\r
            newOffset, oldOffset, leftAnims, titleAnims, omega, theta;\r
\r
        theta = barX - oldLeftX - oldLeftWidth;\r
        if (reverse) {\r
            newOffset = theta;\r
            oldOffset = Math.min(titleX - oldLeftWidth, minOffset);\r
        } else {\r
            oldOffset = theta;\r
            newOffset = Math.min(titleX - barX, minOffset);\r
        }\r
\r
        leftAnims = {\r
            element: {\r
                from: {\r
                    transform: {\r
                        translateX: newOffset\r
                    },\r
                    opacity: 0\r
                },\r
                to: {\r
                    transform: {\r
                        translateX: 0\r
                    },\r
                    opacity: 1\r
                }\r
            },\r
            ghost: {\r
                to: {\r
                    transform: {\r
                        translateX: oldOffset\r
                    },\r
                    opacity: 0\r
                }\r
            }\r
        };\r
\r
        theta = barX - titleX + newLeftWidth;\r
        if ((oldLeftLeft + titleWidth) > titleX) {\r
            omega = barX - titleX - titleWidth;\r
        }\r
\r
        if (reverse) {\r
            titleElement.setLeft(0);\r
\r
            oldOffset = barX + barWidth - titleX - titleWidth;\r
\r
            if (omega !== undefined) {\r
                newOffset = omega;\r
            } else {\r
                newOffset = theta;\r
            }\r
        } else {\r
            newOffset = barX + barWidth - titleX - titleWidth;\r
\r
            if (omega !== undefined) {\r
                oldOffset = omega;\r
            } else {\r
                oldOffset = theta;\r
            }\r
\r
            newOffset = Math.max(titleLeft, newOffset);\r
        }\r
\r
        titleAnims = {\r
            element: {\r
                from: {\r
                    transform: {\r
                        translateX: newOffset\r
                    },\r
                    opacity: 0\r
                },\r
                to: {\r
                    transform: {\r
                        translateX: titleLeft\r
                    },\r
                    opacity: 1\r
                }\r
            },\r
            ghost: {\r
                to: {\r
                    transform: {\r
                        translateX: oldOffset\r
                    },\r
                    opacity: 0\r
                }\r
            }\r
        };\r
\r
        return {\r
            left: leftAnims,\r
            title: titleAnims,\r
            titleLeft: titleLeft\r
        };\r
    },\r
\r
    /**\r
     * Helper method used to animate elements.\r
     * You pass it an element, objects for the from and to positions an option onEnd callback called when the animation is over.\r
     * Normally this method is passed configurations returned from the methods such as #measureTitle(true) etc.\r
     * It is called from the #pushLeftBoxAnimated, #pushTitleAnimated, #popBackButtonAnimated and #popTitleAnimated\r
     * methods.\r
     *\r
     * If the current device is Android, it will use top/left to animate.\r
     * If it is anything else, it will use transform.\r
     * @private\r
     */\r
    animate: function (element, config, callback) {\r
        var me = this,\r
            animation;\r
\r
        //reset the left of the element\r
        element.setLeft(0);\r
\r
        config = Ext.apply(config, {\r
            element: element,\r
            easing: 'ease-in-out',\r
            duration: me.getAnimation().duration || 250,\r
            preserveEndState: true\r
        });\r
\r
        animation = new Ext.fx.Animation(config);\r
        animation.on('animationend', function () {\r
            if (callback) {\r
                callback.call(me);\r
            }\r
        }, me);\r
\r
        Ext.Animator.run(animation);\r
        me.activeAnimations.push(animation);\r
    },\r
\r
    endAnimation: function () {\r
        var activeAnimations = this.activeAnimations,\r
            animation, i, ln;\r
\r
        if (activeAnimations) {\r
            ln = activeAnimations.length;\r
            for (i = 0; i < ln; i++) {\r
                animation = activeAnimations[i];\r
                if (animation.isAnimating) {\r
                    animation.stopAnimation();\r
                }\r
                else {\r
                    animation.destroy();\r
                }\r
            }\r
            this.activeAnimations = [];\r
        }\r
    },\r
\r
    refreshTitlePosition: function () {\r
        if (!this.isAnimating) {\r
            this.callParent();\r
        }\r
    },\r
\r
    /**\r
     * Returns the text needed for the current back button at anytime.\r
     * @private\r
     */\r
    getBackButtonText: function () {\r
        var text = this.backButtonStack[this.backButtonStack.length - 2],\r
            useTitleForBackButtonText = this.getUseTitleForBackButtonText();\r
\r
        if (!useTitleForBackButtonText) {\r
            if (text) {\r
                text = this.getDefaultBackButtonText();\r
            }\r
        }\r
\r
        return text;\r
    },\r
\r
    /**\r
     * Returns the text needed for the current title at anytime.\r
     * @private\r
     */\r
    getTitleText: function () {\r
        return this.backButtonStack[this.backButtonStack.length - 1];\r
    },\r
\r
    /**\r
     * Handles removing back button stacks from this bar\r
     * @private\r
     */\r
    beforePop: function (count) {\r
        count--;\r
        for (var i = 0; i < count; i++) {\r
            this.backButtonStack.pop();\r
        }\r
    },\r
\r
    /**\r
     * We override the hidden method because we don't want to remove it from the view using display:none. Instead we just position it off\r
     * the screen, much like the navigation bar proxy. This means that all animations, pushing, popping etc. all still work when if you hide/show\r
     * this bar at any time.\r
     * @private\r
     */\r
    updateHidden: function (hidden) {\r
        if (!hidden) {\r
            this.element.setStyle({\r
                position: 'relative',\r
                top: 'auto',\r
                left: 'auto',\r
                width: 'auto'\r
            });\r
        } else {\r
            this.element.setStyle({\r
                position: 'absolute',\r
                top: '-1000px',\r
                left: '-1000px',\r
                width: this.element.getWidth() + 'px'\r
            });\r
        }\r
    },\r
\r
    /**\r
     * Creates a proxy element of the passed element, and positions it in the same position, using absolute positioning.\r
     * The createNavigationBarProxy method uses this to create proxies of the backButton and the title elements.\r
     * @private\r
     */\r
    createProxy: function (element) {\r
        var ghost, x, y, left, width;\r
\r
        ghost = element.dom.cloneNode(true);\r
        ghost.id = element.id + '-proxy';\r
\r
        //insert it into the toolbar\r
        element.getParent().dom.appendChild(ghost);\r
\r
        //set the x/y\r
        ghost = Ext.get(ghost);\r
        x = element.getX();\r
        y = element.getY();\r
        left = element.getLeft(true);\r
        width = element.getWidth();\r
        ghost.setStyle('position', 'absolute');\r
        ghost.setX(x);\r
        ghost.setY(y);\r
        ghost.setHeight(element.getHeight());\r
        ghost.setWidth(width);\r
\r
        return {\r
            x: x,\r
            y: y,\r
            left: left,\r
            width: width,\r
            ghost: ghost\r
        };\r
    }\r
});\r