[extjs.git] / extjs / modern / modern / src / viewport / Default.js

/**\r
 * @private\r
 * Base class for iOS and Android viewports.\r
 */\r
Ext.define('Ext.viewport.Default', {\r
    extend: 'Ext.Container',\r
\r
    xtype: 'viewport',\r
\r
    PORTRAIT: 'portrait',\r
\r
    LANDSCAPE: 'landscape',\r
\r
    requires: [\r
        'Ext.GlobalEvents',\r
        'Ext.LoadMask',\r
        'Ext.layout.Card',\r
        'Ext.util.InputBlocker'\r
    ],\r
\r
    /**\r
     * @event ready\r
     * Fires when the Viewport is in the DOM and ready.\r
     * @param {Ext.Viewport} this\r
     */\r
\r
    /**\r
     * @event maximize\r
     * Fires when the Viewport is maximized.\r
     * @param {Ext.Viewport} this\r
     */\r
\r
    /**\r
     * @event orientationchange\r
     * Fires when the Viewport orientation has changed.\r
     * @param {Ext.Viewport} this\r
     * @param {String} newOrientation The new orientation.\r
     * @param {Number} width The width of the Viewport.\r
     * @param {Number} height The height of the Viewport.\r
     */\r
\r
    config: {\r
        /**\r
         * @private\r
         */\r
        autoMaximize: false,\r
\r
        /**\r
         * @private\r
         *\r
         * Auto blur the focused element when touching on a non-input. This is used to work around Android bugs\r
         * where the virtual keyboard is not hidden when tapping outside an input.\r
         */\r
        autoBlurInput: true,\r
\r
        /**\r
         * @cfg {Boolean} preventPanning\r
         * Whether or not to always prevent default panning behavior of the\r
         * browser's viewport.\r
         * @accessor\r
         */\r
        preventPanning: true,\r
\r
        /**\r
         * @cfg {Boolean} preventZooming\r
         * `true` to attempt to stop zooming when you double tap on the screen on mobile devices,\r
         * typically HTC devices with HTC Sense UI.\r
         * @accessor\r
         */\r
        preventZooming: false,\r
\r
        /**\r
         * @cfg\r
         * @private\r
         */\r
        autoRender: true,\r
\r
        /**\r
         * @cfg {Object/String} layout Configuration for this Container's layout. Example:\r
         *\r
         *     Ext.create('Ext.Container', {\r
         *         layout: {\r
         *             type: 'hbox',\r
         *             align: 'middle'\r
         *         },\r
         *         items: [\r
         *             {\r
         *                 xtype: 'panel',\r
         *                 flex: 1,\r
         *                 style: 'background-color: red;'\r
         *             },\r
         *             {\r
         *                 xtype: 'panel',\r
         *                 flex: 2,\r
         *                 style: 'background-color: green'\r
         *             }\r
         *         ]\r
         *     });\r
         *\r
         * See the [layouts guide](#!/guides/layouts) for more information.\r
         *\r
         * @accessor\r
         */\r
        layout: 'card',\r
\r
        /**\r
         * @cfg\r
         * @private\r
         */\r
        width: '100%',\r
\r
        /**\r
         * @cfg\r
         * @private\r
         */\r
        height: '100%',\r
\r
        useBodyElement: true,\r
\r
        /**\r
         * An object of all the menus on this viewport.\r
         * @private\r
         */\r
        menus: {}\r
    },\r
\r
    /**\r
     * @property {Boolean} isReady\r
     * `true` if the DOM is ready.\r
     */\r
    isReady: false,\r
\r
    isViewport: true,\r
\r
    isMaximizing: false,\r
\r
    id: 'ext-viewport',\r
\r
    isInputRegex: /^(input|textarea|select|a)$/i,\r
\r
    isInteractiveWebComponentRegEx: /^(audio|video)$/i,\r
\r
    focusedElement: null,\r
\r
    /**\r
     * @private\r
     */\r
    fullscreenItemCls: Ext.baseCSSPrefix + 'fullscreen',\r
\r
    constructor: function(config) {\r
        var me = this,\r
            bind = Ext.Function.bind,\r
            Component = Ext.Component,\r
            DomScroller = Ext.scroll.DomScroller;\r
\r
        // By default document.body is monitored by a special DomScroller singleton so that\r
        // the global scroll event fires when the document scrolls.\r
        // A Viewport's Scroller will take over from this one.\r
        if (DomScroller.document) {\r
            DomScroller.document = DomScroller.document.destroy();\r
        }\r
\r
        me.doPreventPanning = bind(me.doPreventPanning, me);\r
        me.doPreventZooming = bind(me.doPreventZooming, me);\r
        me.doBlurInput = bind(me.doBlurInput, me);\r
\r
        me.maximizeOnEvents = [\r
          'ready',\r
          'orientationchange'\r
        ];\r
\r
      // set default devicePixelRatio if it is not explicitly defined\r
        window.devicePixelRatio = window.devicePixelRatio || 1;\r
\r
        me.callParent([config]);\r
\r
        me.orientation = me.determineOrientation();\r
        me.windowWidth = me.getWindowWidth();\r
        me.windowHeight = me.getWindowHeight();\r
        me.windowOuterHeight = me.getWindowOuterHeight();\r
\r
        me.stretchHeights = me.stretchHeights || {};\r
\r
        // Android is handled separately\r
        if (!Ext.os.is.Android || Ext.browser.is.ChromeMobile) {\r
            if (me.supportsOrientation()) {\r
                me.addWindowListener('orientationchange', bind(me.onOrientationChange, me));\r
            } else {\r
                me.addWindowListener('resize', bind(me.onResize, me));\r
            }\r
        }\r
\r
        document.addEventListener('focus', bind(me.onElementFocus, me), true);\r
        document.addEventListener('blur', bind(me.onElementBlur, me), true);\r
\r
        Ext.onDocumentReady(me.onDomReady, me);\r
\r
        if (!Component.on) {\r
            Ext.util.Observable.observe(Component);\r
        }\r
\r
        Component.on('fullscreen', 'onItemFullscreenChange', me);\r
\r
        return me;\r
    },\r
\r
    initialize: function() {\r
        var me = this;\r
\r
        me.addMeta('apple-mobile-web-app-capable', 'yes');\r
        me.addMeta('apple-touch-fullscreen', 'yes');\r
\r
        me.callParent();\r
    },\r
\r
    initInheritedState: function (inheritedState, inheritedStateInner) {\r
        var me = this,\r
            root = Ext.rootInheritedState;\r
\r
        if (inheritedState !== root) {\r
            // We need to go at this again but with the rootInheritedState object. Let\r
            // any derived class poke on the proper object!\r
            me.initInheritedState(me.inheritedState = root,\r
                me.inheritedStateInner = Ext.Object.chain(root));\r
        } else {\r
            me.callParent([inheritedState, inheritedStateInner]);\r
        }\r
    },\r
\r
    onAppLaunch: function() {\r
        var me = this;\r
        if (!me.isReady) {\r
            me.onDomReady();\r
        }\r
    },\r
\r
    onDomReady: function() {\r
        var me = this;\r
\r
        if (me.isReady) {\r
            return;\r
        }\r
\r
        me.isReady = true;\r
        me.updateSize();\r
        me.onReady();\r
        me.fireEvent('ready', me);\r
        Ext.GlobalEvents.fireEvent('viewportready', me);\r
    },\r
\r
    onReady: function() {\r
        if (this.getAutoRender()) {\r
            this.render();\r
        }\r
        if (Ext.browser.name === 'ChromeiOS') {\r
            this.setHeight('-webkit-calc(100% - ' + ((window.outerHeight - window.innerHeight) / 2) + 'px)');\r
        }\r
    },\r
\r
    onElementFocus: function(e) {\r
        this.focusedElement = e.target;\r
    },\r
\r
    onElementBlur: function() {\r
        this.focusedElement = null;\r
    },\r
\r
    render: function() {\r
        if (!this.rendered) {\r
            var body = Ext.getBody(),\r
                clsPrefix = Ext.baseCSSPrefix,\r
                classList = [],\r
                osEnv = Ext.os,\r
                osName = osEnv.name.toLowerCase(),\r
                browserName = Ext.browser.name.toLowerCase(),\r
                osMajorVersion = osEnv.version.getMajor(),\r
                orientation = this.getOrientation(),\r
                theme;\r
\r
            this.renderTo(body);\r
\r
            classList.push(clsPrefix + osEnv.deviceType.toLowerCase());\r
\r
            if (osEnv.is.iPad) {\r
                classList.push(clsPrefix + 'ipad');\r
            }\r
\r
            classList.push(clsPrefix + osName);\r
            classList.push(clsPrefix + browserName);\r
\r
            if (osMajorVersion) {\r
                classList.push(clsPrefix + osName + '-' + osMajorVersion);\r
            }\r
\r
            if (osEnv.is.BlackBerry) {\r
                classList.push(clsPrefix + 'bb');\r
                if (Ext.browser.userAgent.match(/Kbd/gi)) {\r
                    classList.push(clsPrefix + 'bb-keyboard');\r
                }\r
            }\r
\r
            if (Ext.browser.is.WebKit) {\r
                classList.push(clsPrefix + 'webkit');\r
            }\r
\r
            if (Ext.browser.is.Standalone) {\r
                classList.push(clsPrefix + 'standalone');\r
            }\r
\r
            if (Ext.browser.is.AndroidStock) {\r
                classList.push(clsPrefix + 'android-stock');\r
            }\r
\r
            if (Ext.browser.is.GoogleGlass) {\r
                classList.push(clsPrefix + 'google-glass');\r
            }\r
\r
            classList.push(clsPrefix + orientation);\r
\r
            body.addCls(classList);\r
\r
            theme = Ext.theme;\r
            if (theme && theme.getDocCls) {\r
                // hook for theme overrides to add css classes to the <html> element\r
                Ext.fly(document.documentElement).addCls(theme.getDocCls());\r
            }\r
        }\r
    },\r
\r
    updateAutoBlurInput: function(autoBlurInput) {\r
        var touchstart = Ext.feature.has.TouchEvents ? 'touchstart' : 'mousedown';\r
        this.toggleWindowListener(autoBlurInput, touchstart, this.doBlurInput, false);\r
    },\r
\r
    applyAutoMaximize: function(autoMaximize) {\r
        return Ext.browser.is.WebView ? false : autoMaximize;\r
    },\r
\r
    updateAutoMaximize: function(autoMaximize) {\r
        var me = this;\r
\r
        if (autoMaximize) {\r
            me.on('ready', 'doAutoMaximizeOnReady', me, { single: true });\r
            me.on('orientationchange', 'doAutoMaximizeOnOrientationChange', me);\r
        } else {\r
            me.un('ready', 'doAutoMaximizeOnReady', me);\r
            me.un('orientationchange', 'doAutoMaximizeOnOrientationChange', me);\r
        }\r
    },\r
\r
    updatePreventPanning: function(preventPanning) {\r
        this.toggleWindowListener(preventPanning, 'touchmove', this.doPreventPanning, false);\r
    },\r
\r
    updatePreventZooming: function(preventZooming) {\r
        var touchstart = Ext.feature.has.TouchEvents ? 'touchstart' : 'mousedown';\r
        this.toggleWindowListener(preventZooming, touchstart, this.doPreventZooming, false);\r
    },\r
\r
    doAutoMaximizeOnReady: function() {\r
        var me = this;\r
\r
        me.isMaximizing = true;\r
\r
        me.on('maximize', function() {\r
            me.isMaximizing = false;\r
\r
            me.updateSize();\r
\r
            me.fireEvent('ready', me);\r
        }, me, { single: true });\r
\r
        me.maximize();\r
    },\r
\r
    doAutoMaximizeOnOrientationChange: function() {\r
        var me = this;\r
\r
        me.isMaximizing = true;\r
\r
        me.on('maximize', function() {\r
            me.isMaximizing = false;\r
\r
            me.updateSize();\r
        }, me, { single: true });\r
\r
        me.maximize();\r
    },\r
\r
    doBlurInput: function(e) {\r
        var target = e.target,\r
            focusedElement = this.focusedElement;\r
        //In IE9/10 browser window loses focus and becomes inactive if focused element is <body>. So we shouldn't call blur for <body>\r
        // In FF, the focusedElement can be the document which doesn't have a blur method\r
        if (focusedElement && focusedElement.blur && focusedElement.nodeName.toUpperCase() != 'BODY' && !this.isInputRegex.test(target.tagName)) {\r
            delete this.focusedElement;\r
            focusedElement.blur();\r
        }\r
    },\r
\r
    doPreventPanning: function(e) {\r
        var target = e.target, \r
            touch;\r
\r
        // If we have an interaction on a WebComponent we need to check the actual shadow dom element selected\r
        // to determine if it is an input before preventing default behavior\r
        // Side effect to this is if the shadow input does not do anything with 'touchmove' the user could pan\r
        // the screen.\r
        if (this.isInteractiveWebComponentRegEx.test(target.tagName) && e.touches && e.touches.length > 0) {\r
            touch = e.touches[0];\r
            if (touch && touch.target && this.isInputRegex.test(touch.target.tagName)) {\r
                return;\r
            }\r
        }\r
\r
        if (target && target.nodeType === 1 && !this.isInputRegex.test(target.tagName)) {\r
            e.preventDefault();\r
        }\r
    },\r
\r
    doPreventZooming: function(e) {\r
        // Don't prevent right mouse event\r
        if ('button' in e && e.button !== 0) {\r
            return;\r
        }\r
\r
        var target = e.target, \r
            inputRe = this.isInputRegex,\r
            touch;\r
\r
        if (this.isInteractiveWebComponentRegEx.test(target.tagName) && e.touches && e.touches.length > 0) {\r
            touch = e.touches[0];\r
            if (touch && touch.target && inputRe.test(touch.target.tagName)) {\r
                return;\r
            }\r
        }\r
\r
        if (target && target.nodeType === 1 && !inputRe.test(target.tagName)) {\r
            e.preventDefault();\r
        }\r
    },\r
\r
    addWindowListener: function(eventName, fn, capturing) {\r
        window.addEventListener(eventName, fn, Boolean(capturing));\r
    },\r
\r
    removeWindowListener: function(eventName, fn, capturing) {\r
        window.removeEventListener(eventName, fn, Boolean(capturing));\r
    },\r
\r
    supportsOrientation: function() {\r
        return Ext.feature.has.Orientation;\r
    },\r
\r
    onResize: function() {\r
        var me = this,\r
            oldWidth = me.windowWidth,\r
            oldHeight = me.windowHeight,\r
            width = me.getWindowWidth(),\r
            height = me.getWindowHeight(),\r
            currentOrientation = me.getOrientation(),\r
            newOrientation = me.determineOrientation();\r
\r
        // Determine orientation change via resize. BOTH width AND height much change, otherwise\r
        // this is a keyboard popping up.\r
        if ((oldWidth !== width && oldHeight !== height) && currentOrientation !== newOrientation) {\r
            me.fireOrientationChangeEvent(newOrientation, currentOrientation);\r
        }\r
    },\r
\r
    onOrientationChange: function() {\r
        var currentOrientation = this.getOrientation(),\r
            newOrientation = this.determineOrientation();\r
\r
        if (newOrientation !== currentOrientation) {\r
            this.fireOrientationChangeEvent(newOrientation, currentOrientation);\r
        }\r
    },\r
\r
    fireOrientationChangeEvent: function(newOrientation, oldOrientation) {\r
        var me = this,\r
            clsPrefix = Ext.baseCSSPrefix;\r
\r
        Ext.getBody().replaceCls(clsPrefix + oldOrientation, clsPrefix + newOrientation);\r
\r
        me.orientation = newOrientation;\r
\r
        me.updateSize();\r
        me.fireEvent('orientationchange', me, newOrientation, me.windowWidth, me.windowHeight);\r
    },\r
\r
    updateSize: function(width, height) {\r
        var me = this;\r
\r
        me.windowWidth = width !== undefined ? width : me.getWindowWidth();\r
        me.windowHeight = height !== undefined ? height : me.getWindowHeight();\r
\r
        return me;\r
    },\r
\r
    waitUntil: function(condition, onSatisfied, onTimeout, delay, timeoutDuration) {\r
        if (!delay) {\r
            delay = 50;\r
        }\r
\r
        if (!timeoutDuration) {\r
            timeoutDuration = 2000;\r
        }\r
\r
        var scope = this,\r
            elapse = 0;\r
\r
        Ext.defer(function repeat() {\r
            elapse += delay;\r
\r
            if (condition.call(scope) === true) {\r
                if (onSatisfied) {\r
                    onSatisfied.call(scope);\r
                }\r
            }\r
            else {\r
                if (elapse >= timeoutDuration) {\r
                    if (onTimeout) {\r
                        onTimeout.call(scope);\r
                    }\r
                }\r
                else {\r
                    Ext.defer(repeat, delay);\r
                }\r
            }\r
        }, delay);\r
    },\r
\r
    maximize: function() {\r
        this.fireMaximizeEvent();\r
    },\r
\r
    fireMaximizeEvent: function() {\r
        this.updateSize();\r
        this.fireEvent('maximize', this);\r
    },\r
\r
    updateHeight: function(height, oldHeight) {\r
        Ext.getBody().setHeight(height);\r
        this.callParent([height, oldHeight]);\r
    },\r
\r
    updateWidth: function(width, oldWidth) {\r
        Ext.getBody().setWidth(width);\r
        this.callParent([width, oldWidth]);\r
    },\r
\r
    scrollToTop: function() {\r
        window.scrollTo(0, -1);\r
    },\r
\r
    /**\r
     * Retrieves the document width.\r
     * @return {Number} width in pixels.\r
     */\r
    getWindowWidth: function() {\r
        return window.innerWidth;\r
    },\r
\r
    /**\r
     * Retrieves the document height.\r
     * @return {Number} height in pixels.\r
     */\r
    getWindowHeight: function() {\r
        return window.innerHeight;\r
    },\r
\r
    getWindowOuterHeight: function() {\r
        return window.outerHeight;\r
    },\r
\r
    getWindowOrientation: function() {\r
        return window.orientation;\r
    },\r
\r
    /**\r
     * Returns the current orientation.\r
     * @return {String} `portrait` or `landscape`\r
     */\r
    getOrientation: function() {\r
        return this.orientation;\r
    },\r
\r
    getSize: function() {\r
        return {\r
            width: this.windowWidth,\r
            height: this.windowHeight\r
        };\r
    },\r
\r
    determineOrientation: function() {\r
        var me = this,\r
            portrait = me.PORTRAIT,\r
            landscape = me.LANDSCAPE;\r
\r
        if (!Ext.os.is.Android && me.supportsOrientation()) {\r
            if (me.getWindowOrientation() % 180 === 0) {\r
                return portrait;\r
            }\r
\r
            return landscape;\r
        }\r
        else {\r
            if (me.getWindowHeight() >= me.getWindowWidth()) {\r
                return portrait;\r
            }\r
\r
            return landscape;\r
        }\r
    },\r
\r
    onItemFullscreenChange: function(item) {\r
        item.addCls(this.fullscreenItemCls);\r
        this.add(item);\r
    },\r
\r
    /**\r
     * Sets a menu for a given side of the Viewport.\r
     *\r
     * Adds functionality to show the menu by swiping from the side of the screen from the given side.\r
     *\r
     * If a menu is already set for a given side, it will be removed.\r
     *\r
     * Available sides are: `left`, `right`, `top`, and `bottom`.\r
     *\r
     * @param {Ext.Menu/Object} menu The menu instance or config to assign to the viewport.\r
     * @param {Object} config The configuration for the menu.\r
     * @param {String} config.side The side to put the menu on.\r
     * @param {Boolean} config.cover True to cover the viewport content. Defaults to `true`.\r
     *\r
     * @return {Ext.Menu} The menu.\r
     */\r
    setMenu: function(menu, config) {\r
        config = config || {};\r
\r
        var me = this,\r
            side = config.side,\r
            menus;\r
\r
        // Temporary workaround for body shifting issue\r
        if (Ext.os.is.iOS && !me.hasiOSOrientationFix) {\r
            me.hasiOSOrientationFix = true;\r
            me.on('orientationchange', function() {\r
                window.scrollTo(0, 0);\r
            }, me);\r
        }\r
\r
        //<debug>\r
        if (!menu) {\r
            Ext.Logger.error("You must specify a side to dock the menu.");\r
        }\r
\r
        if (!side) {\r
            Ext.Logger.error("You must specify a side to dock the menu.");\r
        }\r
\r
        if (['left', 'right', 'top', 'bottom'].indexOf(side) == -1) {\r
            Ext.Logger.error("You must specify a valid side (left, right, top or botom) to dock the menu.");\r
        }\r
        //</debug>\r
\r
        menus = me.getMenus();\r
\r
        if (!menus) {\r
            menus = {};\r
        }\r
\r
        if (!me.addedSwipeListener) {\r
            me.attachSwipeListeners();\r
            me.addedSwipeListener = true;\r
        }\r
\r
        // If we have a menu cfg and no type was passed, we need to\r
        // setup the type. This template method exists to defer\r
        // for subclasses\r
        if (!menu.isComponent) {\r
            if (!menu.xclass && !menu.xtype) {\r
                menu = me.getMenuCfg(menu, side);\r
            }\r
            menu = Ext.create(menu);\r
        }\r
\r
        menus[side] = menu;\r
        menu.$reveal = Boolean(config.reveal);\r
        menu.$cover = config.cover !== false && !menu.$reveal;\r
        menu.$side = side;\r
\r
        me.fixMenuSize(menu, side);\r
\r
        if (side == 'left') {\r
            menu.setLeft(0);\r
            menu.setRight(null);\r
            menu.setTop(0);\r
            menu.setBottom(0);\r
        } else if (side == 'right') {\r
            menu.setLeft(null);\r
            menu.setRight(0);\r
            menu.setTop(0);\r
            menu.setBottom(0);\r
        } else if (side == 'top') {\r
            menu.setLeft(0);\r
            menu.setRight(0);\r
            menu.setTop(0);\r
            menu.setBottom(null);\r
        } else if (side == 'bottom') {\r
            menu.setLeft(0);\r
            menu.setRight(0);\r
            menu.setTop(null);\r
            menu.setBottom(0);\r
        }\r
\r
        me.setMenus(menus);\r
\r
        return menu;\r
    },\r
\r
    attachSwipeListeners: function() {\r
        var me = this;\r
\r
        me.element.on({\r
            tap: me.onTap,\r
            swipestart: me.onSwipeStart,\r
            edgeswipestart: me.onEdgeSwipeStart,\r
            edgeswipe: me.onEdgeSwipe,\r
            edgeswipeend: me.onEdgeSwipeEnd,\r
            scope: me\r
        });\r
    },\r
\r
    getMenuCfg: function(menu, side) {\r
        return Ext.apply({\r
            xtype: 'menu'\r
        }, menu);\r
    },\r
\r
    /**\r
     * Removes a menu from a specified side.\r
     * @param {String} side The side to remove the menu from\r
     */\r
    removeMenu: function(side) {\r
        var menus = this.getMenus() || {},\r
            menu = menus[side];\r
\r
        if (menu) {\r
            this.hideMenu(side);\r
        }\r
        delete menus[side];\r
        this.setMenus(menus);\r
    },\r
\r
    /**\r
     * @private\r
     * Changes the sizing of the specified menu so that it displays correctly when shown.\r
     */\r
    fixMenuSize: function(menu, side) {\r
        if (side == 'top' || side == 'bottom') {\r
            menu.setWidth('100%');\r
        } else if (side == 'left' || side == 'right') {\r
            menu.setHeight('100%');\r
        }\r
    },\r
\r
    /**\r
     * Shows a menu specified by the menu's side.\r
     * @param {String} side The side which the menu is placed.\r
     */\r
    showMenu: function(side) {\r
        var me = this,\r
            menus = me.getMenus(),\r
            menu = menus[side],\r
            before, after,\r
            viewportBefore, viewportAfter, size;\r
\r
        if (!menu || menu.isAnimating) {\r
            return;\r
        }\r
\r
        me.hideOtherMenus(side);\r
\r
        before = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        after = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        viewportBefore = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        viewportAfter = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        if (menu.$reveal) {\r
            Ext.getBody().insertFirst(menu.element);\r
        } else {\r
            Ext.Viewport.add(menu);\r
        }\r
\r
        menu.show();\r
        menu.addCls('x-' + side);\r
\r
        size = (side == 'left' || side == 'right') ? menu.element.getWidth() : menu.element.getHeight();\r
\r
        if (side == 'left') {\r
            before.translateX = -size;\r
            viewportAfter.translateX = size;\r
        } else if (side == 'right') {\r
            before.translateX = size;\r
            viewportAfter.translateX = -size;\r
        } else if (side == 'top') {\r
            before.translateY = -size;\r
            viewportAfter.translateY = size;\r
        } else if (side == 'bottom') {\r
            before.translateY = size;\r
            viewportAfter.translateY = -size;\r
        }\r
\r
        if (menu.$reveal) {\r
            if (Ext.browser.getPreferredTranslationMethod() != 'scrollposition') {\r
                menu.translate(0, 0);\r
            }\r
        } else {\r
            menu.translate(before.translateX, before.translateY);\r
        }\r
\r
        if (menu.$cover) {\r
            menu.getTranslatable().on('animationend', function() {\r
                menu.isAnimating = false;\r
            }, me, {\r
                single: true\r
            });\r
\r
            menu.translate(after.translateX, after.translateY, {\r
                preserveEndState: true,\r
                duration: 200\r
            });\r
\r
        } else {\r
            me.translate(viewportBefore.translateX, viewportBefore.translateY);\r
\r
\r
            me.getTranslatable().on('animationend', function() {\r
                menu.isAnimating = false;\r
            }, me, {\r
                single: true\r
            });\r
\r
            me.translate(viewportAfter.translateX, viewportAfter.translateY, {\r
                preserveEndState: true,\r
                duration: 200\r
            });\r
        }\r
\r
        // Make the menu as animating\r
        menu.isAnimating = true;\r
    },\r
\r
    /**\r
     * Hides a menu specified by the menu's side.\r
     * @param {String} side The side which the menu is placed.\r
     */\r
    hideMenu: function(side, animate) {\r
        var me = this,\r
            menus = this.getMenus(),\r
            menu = menus[side],\r
            after, viewportAfter,\r
            size;\r
\r
        animate = animate !== false;\r
\r
        if (!menu || (menu.isHidden() || menu.isAnimating)) {\r
            return;\r
        }\r
\r
        after = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        viewportAfter = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        size = (side == 'left' || side == 'right') ? menu.element.getWidth() : menu.element.getHeight();\r
\r
        if (side == 'left') {\r
            after.translateX = -size;\r
        } else if (side == 'right') {\r
            after.translateX = size;\r
        } else if (side == 'top') {\r
            after.translateY = -size;\r
        } else if (side == 'bottom') {\r
            after.translateY = size;\r
        }\r
\r
        if (menu.$cover) {\r
            if (animate) {\r
                menu.getTranslatable().on('animationend', function() {\r
                    menu.isAnimating = false;\r
                    menu.hide();\r
                }, me, {\r
                    single: true\r
                });\r
\r
                menu.translate(after.translateX, after.translateY, {\r
                    preserveEndState: true,\r
                    duration: 200\r
                });\r
            } else {\r
                menu.translate(after.translateX, after.translateY);\r
                menu.hide()\r
            }\r
        } else {\r
            if (animate) {\r
                me.getTranslatable().on('animationend', function() {\r
                    menu.isAnimating = false;\r
                    menu.hide();\r
                }, me, {\r
                    single: true\r
                });\r
\r
                me.translate(viewportAfter.translateX, viewportAfter.translateY, {\r
                    preserveEndState: true,\r
                    duration: 200\r
                });\r
            } else {\r
                me.translate(viewportAfter.translateX, viewportAfter.translateY);\r
                menu.hide();\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Hides all visible menus.\r
     */\r
    hideAllMenus: function(animation) {\r
        var menus = this.getMenus(),\r
            side;\r
\r
        for (side in menus) {\r
            this.hideMenu(side, animation);\r
        }\r
    },\r
\r
    /**\r
     * Hides all menus except for the side specified\r
     * @param {String} side         Side(s) not to hide\r
     * @param {String} animation    Animation to hide with\r
     */\r
    hideOtherMenus: function(side, animation){\r
        var menus = this.getMenus(),\r
            menu;\r
\r
        for (menu in menus) {\r
            if (side !== menu) {\r
                this.hideMenu(menu, animation);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * Toggles the menu specified by side\r
     * @param {String} side The side which the menu is placed.\r
     */\r
    toggleMenu: function(side) {\r
        var menus = this.getMenus(), \r
            menu;\r
\r
        if (menus[side]) {\r
            menu = menus[side];\r
            if (menu.isHidden()) {\r
                this.showMenu(side);\r
            } else {\r
                this.hideMenu(side);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    sideForDirection: function(direction) {\r
        if (direction === 'left') {\r
            return 'right';\r
        } else if (direction === 'right') {\r
            return 'left';\r
        } else if (direction == 'up') {\r
            return 'bottom';\r
        } else if (direction == 'down') {\r
            return 'top';\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    sideForSwipeDirection: function(direction) {\r
        if (direction == 'up') {\r
            return  'top';\r
        } else if (direction == 'down') {\r
            return 'bottom';\r
        }\r
        return direction;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onTap: function(e) {\r
        // this.hideAllMenus();\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onSwipeStart: function(e) {\r
        var side = this.sideForSwipeDirection(e.direction);\r
        this.hideMenu(side);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onEdgeSwipeStart: function(e) {\r
        var me = this,\r
            side = me.sideForDirection(e.direction),\r
            menus = me.getMenus(),\r
            menu = menus[side],\r
            menuSide, checkMenu, size,\r
            after, viewportAfter,\r
            transformStyleName, setTransform;\r
\r
        if (!menu || !menu.isHidden()) {\r
            return;\r
        }\r
\r
        for (menuSide in menus) {\r
            checkMenu = menus[menuSide];\r
            if (checkMenu.isHidden() !== false) {\r
                return;\r
            }\r
        }\r
\r
        me.$swiping = true;\r
\r
        me.hideAllMenus(false);\r
\r
        // show the menu first so we can calculate the size\r
        if (menu.$reveal) {\r
            Ext.getBody().insertFirst(menu.element);\r
        } else {\r
            Ext.Viewport.add(menu);\r
        }\r
        menu.show();\r
\r
        size = (side == 'left' || side == 'right') ? menu.element.getWidth() : menu.element.getHeight();\r
\r
        after = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        viewportAfter = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        if (side == 'left') {\r
            after.translateX = -size;\r
        } else if (side == 'right') {\r
            after.translateX = size;\r
        } else if (side == 'top') {\r
            after.translateY = -size;\r
        } else if (side == 'bottom') {\r
            after.translateY = size;\r
        }\r
\r
        transformStyleName = 'webkitTransform' in document.createElement('div').style ? 'webkitTransform' : 'transform';\r
        setTransform = menu.element.dom.style[transformStyleName];\r
\r
        if (setTransform) {\r
            menu.element.dom.style[transformStyleName] = '';\r
        }\r
\r
        if (menu.$reveal) {\r
            if (Ext.browser.getPreferredTranslationMethod() != 'scrollposition') {\r
                menu.translate(0, 0);\r
            }\r
        } else {\r
            menu.translate(after.translateX, after.translateY);\r
        }\r
\r
        if (!menu.$cover) {\r
            if (setTransform) {\r
                me.innerElement.dom.style[transformStyleName] = '';\r
            }\r
\r
            me.translate(viewportAfter.translateX, viewportAfter.translateY);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onEdgeSwipe: function(e) {\r
        var me = this,\r
            side = me.sideForDirection(e.direction),\r
            menu = me.getMenus()[side],\r
            size, after, viewportAfter,\r
            movement, viewportMovement;\r
\r
        if (!menu || !me.$swiping) {\r
            return;\r
        }\r
\r
        size = (side == 'left' || side == 'right') ? menu.element.getWidth() : menu.element.getHeight();\r
        movement = Math.min(e.distance - size, 0);\r
        viewportMovement = Math.min(e.distance, size);\r
\r
        after = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        viewportAfter = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        if (side == 'left') {\r
            after.translateX = movement;\r
            viewportAfter.translateX = viewportMovement;\r
        } else if (side == 'right') {\r
            after.translateX = -movement;\r
            viewportAfter.translateX = -viewportMovement;\r
        } else if (side == 'top') {\r
            after.translateY = movement;\r
            viewportAfter.translateY = viewportMovement;\r
        } else if (side == 'bottom') {\r
            after.translateY = -movement;\r
            viewportAfter.translateY = -viewportMovement;\r
        }\r
\r
        if (menu.$cover) {\r
            menu.translate(after.translateX, after.translateY);\r
        } else {\r
            me.translate(viewportAfter.translateX, viewportAfter.translateY);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onEdgeSwipeEnd: function(e) {\r
        var me = this,\r
            side = me.sideForDirection(e.direction),\r
            menu = me.getMenus()[side],\r
            shouldRevert = false,\r
            size, velocity, movement, viewportMovement,\r
            after, viewportAfter;\r
\r
        if (!menu) {\r
            return;\r
        }\r
\r
        size = (side == 'left' || side == 'right') ? menu.element.getWidth() : menu.element.getHeight();\r
        velocity = (e.flick) ? e.flick.velocity : 0;\r
\r
        // check if continuing in the right direction\r
        if (side == 'right') {\r
            if (velocity.x > 0) {\r
                shouldRevert = true;\r
            }\r
        } else if (side == 'left') {\r
            if (velocity.x < 0) {\r
                shouldRevert = true;\r
            }\r
        } else if (side == 'top') {\r
            if (velocity.y < 0) {\r
                shouldRevert = true;\r
            }\r
        } else if (side == 'bottom') {\r
            if (velocity.y > 0) {\r
                shouldRevert = true;\r
            }\r
        }\r
\r
        movement = shouldRevert ? size : 0;\r
        viewportMovement = shouldRevert ? 0 : -size;\r
\r
        after = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        viewportAfter = {\r
            translateX: 0,\r
            translateY: 0\r
        };\r
\r
        if (side == 'left') {\r
            after.translateX = -movement;\r
            viewportAfter.translateX = -viewportMovement;\r
        } else if (side == 'right') {\r
            after.translateX = movement;\r
            viewportAfter.translateX = viewportMovement;\r
        } else if (side == 'top') {\r
            after.translateY = -movement;\r
            viewportAfter.translateY = -viewportMovement;\r
        } else if (side == 'bottom') {\r
            after.translateY = movement;\r
            viewportAfter.translateY = viewportMovement;\r
        }\r
\r
        // Move the viewport if cover is not enabled\r
        if (menu.$cover) {\r
            menu.getTranslatable().on('animationend', function() {\r
                if (shouldRevert) {\r
                    menu.hide();\r
                }\r
            }, me, {\r
                single: true\r
            });\r
\r
            menu.translate(after.translateX, after.translateY, {\r
                preserveEndState: true,\r
                duration: 200\r
            });\r
\r
        } else {\r
            me.getTranslatable().on('animationend', function() {\r
                if (shouldRevert) {\r
                    menu.hide();\r
                }\r
            }, me, {\r
                single: true\r
            });\r
\r
            me.translate(viewportAfter.translateX, viewportAfter.translateY, {\r
                preserveEndState: true,\r
                duration: 200\r
            });\r
        }\r
\r
        me.$swiping = false;\r
    },\r
\r
    privates: {\r
        addMeta: function(name, content) {\r
            var meta = document.createElement('meta');\r
\r
            meta.setAttribute('name', name);\r
            meta.setAttribute('content', content);\r
            Ext.getHead().append(meta);\r
        },\r
\r
        doAddListener: function(eventName, fn, scope, options, order, caller, manager) {\r
            var me = this;\r
            if (eventName === 'ready' && me.isReady && !me.isMaximizing) {\r
                fn.call(scope);\r
                return me;\r
            }\r
\r
            me.callParent([eventName, fn, scope, options, order, caller, manager]);\r
        },\r
\r
        toggleWindowListener: function(on, eventName, fn, capturing) {\r
            if (on) {\r
                this.addWindowListener(eventName, fn, capturing);\r
            } else {\r
                this.removeWindowListener(eventName, fn, capturing);\r
            }\r
        }\r
    }\r
});\r