/** * @private * Base class for iOS and Android viewports. */Ext.define('Ext.viewport.Default', function() { var TOP = 1, RIGHT = 2, BOTTOM = 4, LEFT = 8, sideMap = { top: TOP, right: RIGHT, bottom: BOTTOM, left: LEFT }, oppositeSide = { "1": BOTTOM, "2": LEFT, "4": TOP, "8": RIGHT }, oppositeSideNames = { left: 'right', right: 'left', top: 'bottom', bottom: 'top', up: 'bottom', down: 'top' }; return { extend: 'Ext.Container', xtype: 'viewport', PORTRAIT: 'portrait', LANDSCAPE: 'landscape', requires: [ 'Ext.GlobalEvents', 'Ext.layout.Card', 'Ext.util.InputBlocker' ], nameHolder: true, /** * @event ready * Fires when the Viewport is in the DOM and ready. * @param {Ext.Viewport} this */ /** * @event maximize * Fires when the Viewport is maximized. * @param {Ext.Viewport} this */ /** * @event orientationchange * Fires when the Viewport orientation has changed. * @param {Ext.Viewport} this * @param {String} newOrientation The new orientation. * @param {Number} width The width of the Viewport. * @param {Number} height The height of the Viewport. */ config: { /** * @private */ autoMaximize: false, /** * @private * * Auto blur the focused element when touching on a non-input. This is used to work around Android bugs * where the virtual keyboard is not hidden when tapping outside an input. */ autoBlurInput: true, /** * @cfg {Boolean} preventZooming * `true` to attempt to stop zooming when you double tap on the screen on mobile devices, * typically HTC devices with HTC Sense UI. * @accessor */ preventZooming: false, /** * @cfg * @private */ autoRender: true, /** * @cfg {Object/String} layout Configuration for this Container's layout. Example: * * Ext.create('Ext.Container', { * layout: { * type: 'hbox', * align: 'middle' * }, * items: [ * { * xtype: 'panel', * flex: 1, * style: 'background-color: red;' * }, * { * xtype: 'panel', * flex: 2, * style: 'background-color: green' * } * ] * }); * * @accessor */ layout: 'card', /** * @cfg * @private */ width: '100%', /** * @cfg * @private */ height: '100%', /** * An object of all the menus on this viewport. * @private */ menus: {}, /** * @private */ orientation: null, /** * @cfg {Number} swipeThreshold * The minimum distance an edge swipe must traverse in order to trigger showing * an edge menu. * * Note that reversing an edge swipe gesture back towards the edge aborts showing * that side's edge menu. */ swipeThreshold: 30 }, classCls: Ext.baseCSSPrefix + 'viewport', getTemplate: function() { var template = this.callParent(); // Used in legacy browser that do not support matchMedia. Hidden element is used for checking of orientation if (!Ext.feature.has.MatchMedia) { template.unshift({ reference: 'orientationElement', className: Ext.baseCSSPrefix + 'orientation-inspector', children: [{ className: Ext.baseCSSPrefix + 'orientation-inspector-landscape' }] }); } return template; }, /** * @property {Boolean} isReady * `true` if the DOM is ready. */ isReady: false, isViewport: true, isMaximizing: false, id: 'ext-viewport', isInputRegex: /^(input|textarea|select|a)$/i, isInteractiveWebComponentRegEx: /^(audio|video)$/i, notScalableRe: /user-scalable=no/, focusable: false, focusEl: null, ariaEl: null, allSidesCls: [ Ext.baseCSSPrefix + 'top', Ext.baseCSSPrefix + 'right', Ext.baseCSSPrefix + 'bottom', Ext.baseCSSPrefix + 'left' ], sideClsMap: { top: Ext.baseCSSPrefix + 'top', right: Ext.baseCSSPrefix + 'right', bottom: Ext.baseCSSPrefix + 'bottom', left: Ext.baseCSSPrefix + 'left' }, hasViewportCls: Ext.baseCSSPrefix + 'has-viewport', fixedCls: Ext.baseCSSPrefix + 'fixed-viewport', /** * @private */ fullscreenItemCls: Ext.baseCSSPrefix + 'fullscreen', constructor: function(config) { var me = this, scroller; me.doPreventPanning = me.doPreventPanning.bind(me); me.doPreventZooming = me.doPreventZooming.bind(me); me.maximizeOnEvents = [ 'ready', 'orientationchange' ]; // set default devicePixelRatio if it is not explicitly defined window.devicePixelRatio = window.devicePixelRatio || 1; me.callParent([config]); me.updateSize(); me.windowOuterHeight = me.getWindowOuterHeight(); // The global scroller is our scroller. // We must provide a non-scrolling one if we are not configured to scroll, // otherwise the deferred ready listener in Scroller will create // one with scroll: true scroller = me.getScrollable(); if (!scroller) { scroller = Ext.getViewportScroller().setConfig({ x: false, y: false }); scroller.component = me; } Ext.setViewportScroller(scroller); // The body has to be overflow:hidden Ext.getBody().setStyle('overflow', 'hidden'); Ext.get(document.documentElement).addCls(me.hasViewportCls); me.stretchHeights = me.stretchHeights || {}; if (Ext.feature.has.OrientationChange) { me.addWindowListener('orientationchange', me.onOrientationChange.bind(me)); } if (!Ext.os.is.iOS || !me.isScalable()) { Ext.get(document.documentElement).addCls(me.fixedCls); } // Tale over firing the resize event to sync the Viewport first, then fire the event. Ext.GlobalEvents.on('resize', 'onWindowResize', me, { priority: 1000 }); Ext.onDocumentReady(me.onDomReady, me); return me; }, initialize: function() { var me = this; me.addMeta('apple-mobile-web-app-capable', 'yes'); me.addMeta('apple-touch-fullscreen', 'yes'); me.callParent(); }, getRefItems: function(deep) { var menus = this.getMenus(), result = this.callParent([deep]), side, menu; for (side in menus) { menu = menus[side]; if (menu) { Ext.Array.include(result, menu); } } return result; }, initInheritedState: function (inheritedState, inheritedStateInner) { var me = this, root = Ext.rootInheritedState; if (inheritedState !== root) { // We need to go at this again but with the rootInheritedState object. Let // any derived class poke on the proper object! me.initInheritedState(me.inheritedState = root, me.inheritedStateInner = Ext.Object.chain(root)); } else { me.callParent([inheritedState, inheritedStateInner]); } }, onAppLaunch: function() { var me = this; if (!me.isReady) { me.onDomReady(); } }, onDomReady: function() { var me = this; if (me.isReady) { return; } me.isReady = true; me.updateSize(); me.onReady(); me.fireEvent('ready', me); Ext.GlobalEvents.fireEvent('viewportready', me); }, onReady: function() { if (this.getAutoRender()) { this.render(); } }, render: function() { var me = this, body = Ext.getBody(); if (!me.rendered) { // Render ourself *before* any existing floatRoot so that floateds // are always on top. me.callParent([body, Ext.floatRoot]); me.setOrientation(me.determineOrientation()); Ext.getBody().addCls(Ext.baseCSSPrefix + me.getOrientation()); } }, applyAutoMaximize: function(autoMaximize) { return Ext.browser.is.WebView ? false : autoMaximize; }, updateAutoMaximize: function(autoMaximize) { var me = this; if (autoMaximize) { me.on('ready', 'doAutoMaximizeOnReady', me, { single: true }); me.on('orientationchange', 'doAutoMaximizeOnOrientationChange', me); } else { me.un('ready', 'doAutoMaximizeOnReady', me); me.un('orientationchange', 'doAutoMaximizeOnOrientationChange', me); } }, updatePreventPanning: function(preventPanning) { this.toggleWindowListener(preventPanning, 'touchmove', this.doPreventPanning, false); }, updatePreventZooming: function(preventZooming) { var touchstart = Ext.feature.has.TouchEvents ? 'touchstart' : 'mousedown'; this.toggleWindowListener(preventZooming, touchstart, this.doPreventZooming, false); }, doAutoMaximizeOnReady: function() { var me = this; me.isMaximizing = true; me.on('maximize', function() { me.isMaximizing = false; me.updateSize(); me.fireEvent('ready', me); }, me, { single: true }); me.maximize(); }, doAutoMaximizeOnOrientationChange: function() { var me = this; me.isMaximizing = true; me.on('maximize', function() { me.isMaximizing = false; me.updateSize(); }, me, { single: true }); me.maximize(); }, doPreventPanning: function(e) { var target = e.target, touch; // If we have an interaction on a WebComponent we need to check the actual shadow dom element selected // to determine if it is an input before preventing default behavior // Side effect to this is if the shadow input does not do anything with 'touchmove' the user could pan // the screen. if (this.isInteractiveWebComponentRegEx.test(target.tagName) && e.touches && e.touches.length > 0) { touch = e.touches[0]; if (touch && touch.target && this.isInputRegex.test(touch.target.tagName)) { return; } } if (target && target.nodeType === 1 && !this.isInputRegex.test(target.tagName)) { e.preventDefault(); } }, doPreventZooming: function(e) { // Don't prevent right mouse event if ('button' in e && e.button !== 0) { return; } var target = e.target, inputRe = this.isInputRegex, touch; if (this.isInteractiveWebComponentRegEx.test(target.tagName) && e.touches && e.touches.length > 0) { touch = e.touches[0]; if (touch && touch.target && inputRe.test(touch.target.tagName)) { return; } } if (target && target.nodeType === 1 && !inputRe.test(target.tagName)) { e.preventDefault(); } }, addWindowListener: function(eventName, fn, capturing) { window.addEventListener(eventName, fn, Boolean(capturing)); }, removeWindowListener: function(eventName, fn, capturing) { window.removeEventListener(eventName, fn, Boolean(capturing)); }, supportsOrientation: function() { return Ext.feature.has.Orientation; }, supportsMatchMedia: function() { return Ext.feature.has.MatchMedia; }, onOrientationChange: function() { this.setOrientation(this.determineOrientation()); }, determineOrientation: function() { var me = this, orientationElement = me.orientationElement, nativeOrientation, visible; // First attempt will be to use Native Orientation information if (me.supportsOrientation()) { nativeOrientation = me.getWindowOrientation(); // 90 || -90 || 270 is landscape if (Math.abs(nativeOrientation) === 90 || nativeOrientation === 270) { return me.LANDSCAPE; } else { return me.PORTRAIT; } // Second attempt will be to use MatchMedia and a media query } else if (me.supportsMatchMedia()) { return window.matchMedia('(orientation : landscape)').matches ? me.LANDSCAPE : me.PORTRAIT; // Fall back on hidden element with media query attached to it (media query in Base Theme) } else if (orientationElement) { visible = orientationElement.first().isVisible(); return visible ? me.LANDSCAPE : me.PORTRAIT; } return null; }, updateOrientation: function(newValue, oldValue) { if (oldValue) { this.fireOrientationChangeEvent(newValue, oldValue); } }, fireOrientationChangeEvent: function(newOrientation, oldOrientation) { var me = this, newSize = me.updateSize(); Ext.getBody().replaceCls(Ext.baseCSSPrefix + oldOrientation, Ext.baseCSSPrefix + newOrientation); me.fireEvent('orientationchange', me, newOrientation, newSize.width, newSize.height); }, onWindowResize: function(width, height) { var me = this, oldWidth = me.lastSize.width, oldHeight = me.lastSize.height; me.updateSize(width, height); // On devices that do not support native orientation we use resize. // orientationchange events are only dispatched when there is an actual change in orientation value // so in cases on devices with orientation change events, the setter is called an extra time, but stopped after me.setOrientation(me.determineOrientation()); // Only fire the event if we have actually resized. if (width != null) { me.fireEvent('resize', this, width, height, oldWidth, oldHeight); } }, updateSize: function(width, height) { var lastSize = this.lastSize; lastSize.width = width !== undefined ? width : this.getWindowWidth(); lastSize.height = height !== undefined ? height : this.getWindowHeight(); return lastSize; }, waitUntil: function(condition, onSatisfied, onTimeout, delay, timeoutDuration) { if (!delay) { delay = 50; } if (!timeoutDuration) { timeoutDuration = 2000; } var scope = this, elapse = 0; Ext.defer(function repeat() { elapse += delay; if (condition.call(scope) === true) { if (onSatisfied) { onSatisfied.call(scope); } } else { if (elapse >= timeoutDuration) { if (onTimeout) { onTimeout.call(scope); } } else { Ext.defer(repeat, delay); } } }, delay); }, maximize: function() { this.fireMaximizeEvent(); }, fireMaximizeEvent: function() { this.updateSize(); this.fireEvent('maximize', this); }, updateHeight: function(height, oldHeight) { Ext.getBody().setHeight(height); this.callParent([height, oldHeight]); }, updateWidth: function(width, oldWidth) { Ext.getBody().setWidth(width); this.callParent([width, oldWidth]); }, scrollToTop: function() { window.scrollTo(0, -1); }, /** * Retrieves the document width. * @return {Number} width in pixels. */ getWindowWidth: function() { return window.innerWidth; }, /** * Retrieves the document height. * @return {Number} height in pixels. */ getWindowHeight: function() { return window.innerHeight; }, getWindowOuterHeight: function() { return window.outerHeight; }, getWindowOrientation: function() { return window.orientation; }, getSize: function() { return this.lastSize; }, setItemFullScreen: function(item) { item.addCls(this.fullscreenItemCls); item.setTop(0); item.setRight(0); item.setBottom(0); item.setLeft(0); this.add(item); }, /** * Sets a menu for a given side of the Viewport. * * Adds functionality to show the menu by swiping from the side of the screen from the given side. * * If a menu is already set for a given side, it will be replaced by the passed menu. * * Available sides are: `left`, `right`, `top`, and `bottom`. * * **Note:** The `cover` and `reveal` animation configs are mutually exclusive. * Include only one animation config or omit both to default to `cover`. * * @param {Ext.Menu/Object} menu The menu instance or config to assign to the viewport. * @param {Object} config The configuration for the menu. * @param {'top'/'bottom'/'left'/'right'} config.side The side to put the menu on. * @param {Boolean} config.cover True to cover the viewport content. Defaults to `true`. * @param {Boolean} config.reveal True to push the menu alongside the viewport * content. Defaults to `false`. * * @return {Ext.Menu} The menu set for the passed side. */ setMenu: function(menu, config) { config = config || {}; //<debug> if (config.reveal && config.cover) { Ext.raise('[Ext.Viewport] setMenu(): Only one of reveal or cover allowed in config'); } //</debug> var me = this, side, menus, oldMenu; // Temporary workaround for body shifting issue if (Ext.os.is.iOS && !me.hasiOSOrientationFix) { me.hasiOSOrientationFix = true; me.on('orientationchange', function() { window.scrollTo(0, 0); }, me); } //<debug> if (!menu) { Ext.raise("You must specify a menu configuration."); } //</debug> menus = me.getMenus(); if (!me.addedSwipeListener) { me.attachSwipeListeners(); me.addedSwipeListener = true; } // Either create the menu, or reconfigure a passed instance // according to the config settings for side, cover, and reveal. menu = me.configureMenu(menu, config); side = menu.getSide(); // We we already have a menu for this side, ensure it's hidden // and reconfgure it using setConfig which will either use // the config in the default situation, that the menu is a Sheet, // or update the private property. oldMenu = menus[side]; if (oldMenu && !oldMenu.destroyed && oldMenu !== menu) { me.hideMenu(side); oldMenu.setSide(null); } menus[side] = menu; me.setMenus(menus); return menu; }, attachSwipeListeners: function() { var me = this; me.element.on({ tap: me.onTap, swipestart: me.onSwipeStart, edgeswipestart: me.onEdgeSwipeStart, edgeswipe: me.onEdgeSwipe, edgeswipeend: me.onEdgeSwipeEnd, scope: me }); }, configureMenu: function(menu, config) { // We may be creating or reconfiguring a menu here. // If reconfiguring, only change configs that are present in the passed config. var isInstanced = menu.isComponent, // If an instance is being reconfigured, and the config is silent about // reveal, cover, or side, we must use the instance's current setting. reveal = isInstanced && !('reveal' in config) ? menu.getReveal() : !!config.reveal, cover = (isInstanced && !('cover' in config) ? menu.getCover() : config.cover) !== false && !reveal, side = isInstanced && !('side' in config) ? menu.getSide() : config.side, wasFloated; //<debug> if (!side) { Ext.raise("You must specify a side to dock the menu."); } if (!sideMap[side]) { Ext.raise("You must specify a valid side (left, right, top or bottom) to dock the menu."); } //</debug> // Upgrade the config object to have the correct configurations as defaulted // in from the existing instance if it is an instance. config = { hideAnimation: null, showAnimation: null, hidden: true, floated: cover, zIndex : cover ? null : 5, reveal: reveal, cover: cover, side: side }; config[oppositeSideNames[side]] = null; if (isInstanced) { wasFloated = menu.getFloated(); // Flipping modes - the menu has to be derendered. if (config.floated !== wasFloated) { if (menu.rendered) { // If menu was covering the viewport, then it was a floated child // just remove it non-destructively. It will be derendered and lose // its parent reference. if (wasFloated) { this.remove(menu, false); } // If we're in the non-standard menu insertion mode, we need to derender. // Floated setRender(false) does unwrap the component from its floatWrap. else { menu.el.dom.parentNode.removeChild(menu.el.dom); menu.setRendered(false); } } // Clear down old positioning menu.setConfig({ top: null, right: null, bottom: null, left: null }); } // Reconfigure instance according to config. // Use strict: false because if the menu is not an instance of Sheet, // the reveal, cover and side configs are merely private properties. menu.setConfig(config, null, { strict: false }); } else { config.xtype = 'actionsheet'; menu = Ext.create(Ext.apply(config, menu)); } // Update the positioning configs *after* the floatedness has been fully setttled // If applied during configuration, these imply positioned, and *not* floated. config = { left: 0, right: 0, top: 0, bottom: 0 }; config[oppositeSideNames[side]] = null; menu.setConfig(config); menu.toggleCls(menu.floatingCls, !menu.getFloated()); menu.removeCls(this.getLayout().itemCls); menu.toggleCls(Ext.baseCSSPrefix + 'menu-cover', cover); menu.toggleCls(Ext.baseCSSPrefix + 'menu-reveal', reveal); menu.replaceCls(this.allSidesCls, this.sideClsMap[side]); menu.isViewportMenu = true; return menu; }, /** * Removes a menu from a specified side. * @param {'top'/'bottom'/'left'/'right'} side The side to remove the menu from * @param {Boolean} animation Pass `true` to animate the menu out of view */ removeMenu: function(side, animation) { var me = this, menus = me.getMenus() || {}, menu = menus[side]; if (menu) { me.hideMenu(side, animation); menu.removeCls(me.sideClsMap[side]); } delete menus[side]; me.setMenus(menus); }, /** * Shows the menu that has been {@link #method!setMenu set} on the passed side. * * If no menu has been set on the passed side, nothing hapens. * @param {'top'/'bottom'/'left'/'right'} side The side to show the menu for. */ showMenu: function(side) { var me = this, sideValue = sideMap[side], menu = me.getMenus()[side], viewportAfter = { translateX: 0, translateY: 0 }, size; if (!menu || !menu.isHidden()) { return; } // Ensures Menu is rendered, and positioned for animation me.beforeMenuAnimate(menu); size = menu.element.measure(sideValue & (LEFT | RIGHT) ? 'w' : 'h'); if (sideValue === LEFT) { viewportAfter.translateX = size; } else if (sideValue === RIGHT) { viewportAfter.translateX = -size; } else if (sideValue === TOP) { viewportAfter.translateY = size; } else if (sideValue === BOTTOM) { viewportAfter.translateY = -size; } // Menu always animates in. Animate to an unstranslated state. menu.translate(0, 0, { duration: 200 }); // Viewport only animates out of its way if menu is not not floated. if (!menu.getFloated()) { me.translate(viewportAfter.translateX, viewportAfter.translateY, { duration: 200 }); } }, /** * Hides a menu specified by the menu's side. * @param {'top'/'bottom'/'left'/'right'} side The side which the menu is placed. * @param {Boolean} animate if false, the menu will be hidden without animation. */ hideMenu: function(side, animate) { var me = this, sideValue = sideMap[side], menu = me.getMenus()[side], after = { translateX: 0, translateY: 0 }, size; animate = animate !== false; if (!menu || menu.isHidden()) { return; } size = menu.element.measure(sideValue & (LEFT | RIGHT) ? 'w' : 'h'); if (sideValue === LEFT) { after.translateX = -size; } else if (sideValue === RIGHT) { after.translateX = size; } else if (sideValue === TOP) { after.translateY = -size; } else if (sideValue === BOTTOM) { after.translateY = size; } // Animate menu out of view if told to if (animate) { menu.revertFocus(); menu.translate(after.translateX, after.translateY, { duration: 200, callback: function () { if (!menu.destroyed) { menu.translate(0, 0); menu.setHidden(true); } } }); } // Otherwise hide it immediately else { menu.getTranslatable().stopAnimation(); menu.setHidden(true); } // Viewport only has to move back into place if menu is not not floated // Return it to an unstranslated state if (!menu.getFloated()) { me.translate(0, 0, animate ? { duration: 200 } : null); } }, /** * Hides all visible menus. */ hideAllMenus: function(animation) { var menus = this.getMenus(), side; for (side in menus) { this.hideMenu(side, animation); } }, /** * Hides all menus except for the side specified * @param {'top'/'bottom'/'left'/'right'} side Side not to hide. * @param {Boolean} animate if false, the menu will be hidden without animation. */ hideOtherMenus: function(side, animate){ var menus = this.getMenus(), menu; for (menu in menus) { if (side !== menu) { this.hideMenu(menu, animate); } } }, /** * Toggles the menu specified by side * @param {'top'/'bottom'/'left'/'right'} side The side which the menu is placed. */ toggleMenu: function(side) { var menus = this.getMenus(), menu; if (menus[side]) { menu = menus[side]; menu.setDisplayed(menu.isHidden()); } }, applyScrollable: function (scrollable) { return this.callParent([ scrollable, Ext.getViewportScroller() ]); }, doDestroy: function() { var me = this, docEl = Ext.get(document.documentElement), scroller = me._scrollable; docEl.removeCls(me.hasViewportCls); docEl.removeCls(me.fixedCls); // We acquired usage of the global body scroller through our applyScrollable. // Just relinquish it here and allow it to live on. if (scroller) { // Return the body scroller to default; X and Y scrolling scroller.setConfig({ x: true, y: true }); me._scrollable = null; } Ext.un('resize', 'onWindowResize', me); me.callParent(); Ext.Viewport = null; }, privates: { addMeta: function(name, content) { var meta = document.createElement('meta'); meta.setAttribute('name', name); meta.setAttribute('content', content); Ext.getHead().append(meta); }, /** * Sets up the before conditions to begin animating a menu into view * whether from {@link #method!showMenu}, or {@link #method!beginEdgeSwipe} * @param {Ext.Sheet} menu The menu to setup the animation. * @private */ beforeMenuAnimate: function(menu) { var me = this, side = menu.getSide(), sideValue = sideMap[side], before = { translateX: 0, translateY: 0 }, size, modal; me.hideOtherMenus(side); // Ensure the menu is in place as a floated child, or programatically render it. if (menu.getFloated()) { me.add(menu); } else { // We're going off the reservation by programatically adding to the document body // Usually onAdded does this stuff. We must render the menu and its modal mask. Ext.getBody().insertFirst(menu.element); if (!menu.rendered) { menu.setRendered(true); } modal = menu.getModal(); if (modal) { Ext.getBody().insertFirst(modal.element); if (!modal.rendered) { modal.setRendered(true); } } // Must initialize the translatable config to be able to animate me.translate(0, 0); } menu.removeCls(me.getLayout().itemCls); // Now show the edge menu through the normal component show pathway // which will fire the expected template methods and events. menu.show(false, { side: null }); size = menu.element.measure(sideValue & (LEFT | RIGHT) ? 'w' : 'h'); if (sideValue === LEFT) { before.translateX = -size; } else if (sideValue === RIGHT) { before.translateX = size; } else if (sideValue === TOP) { before.translateY = -size; } else if (sideValue === BOTTOM) { before.translateY = size; } menu.translate(before.translateX, before.translateY); }, doAddListener: function(eventName, fn, scope, options, order, caller, manager) { var me = this; if (eventName === 'ready' && me.isReady && !me.isMaximizing) { fn.call(scope); return me; } me.callParent([eventName, fn, scope, options, order, caller, manager]); }, /** * Returns true if the user can zoom the viewport * @private */ isScalable: function () { var me = this, metas = document.querySelectorAll('meta[name="viewport"]'), // if there are multiple viewport tags the last one wins. meta = metas.length && metas[metas.length - 1], scalable = true, content; if (meta) { content = meta.getAttribute('content'); scalable = !(content && me.notScalableRe.test(content)); } return scalable; }, /** * @private */ onTap: function(e) { // this.hideAllMenus(); }, /** * @private */ onSwipeStart: function(e) { var side = this.sideForSwipeDirection(e.direction), menu = this.getMenus()[side]; // preventing menu scrolling from being captured as viewport swiping if (menu && !menu.owns(e)) { this.hideMenu(side); } }, /** * @private */ onEdgeSwipeStart: function(e) { var me = this, menus = me.getMenus(), menu = menus[oppositeSideNames[e.direction]], menuSide, checkMenu; if (!menu || !menu.isHidden()) { return; } // Claim the gesture to prevent viewport panning. e.claimGesture(); for (menuSide in menus) { checkMenu = menus[menuSide]; if (checkMenu.isVisible()) { return; } } me.$swiping = true; // Ensures Menu is rendered, and positioned for animation me.beforeMenuAnimate(menu); }, /** * @private */ onEdgeSwipe: function(e) { var me = this, side = me.sideForDirection(e.direction), menu = me.getMenus()[oppositeSideNames[e.direction]], size, after, viewportAfter, movement, viewportMovement; if (!menu || !me.$swiping) { return; } // Claim the gesture to prevent viewport panning. e.claimGesture(); // See if the swipe has been reversed if (e.distance !== me.lastSwipeDistance) { me.reverseSwiping = e.distance < me.lastSwipeDistance; } me.lastSwipeDistance = e.distance; size = menu.element.measure(side & (LEFT | RIGHT) ? 'w' : 'h'); movement = Math.min(e.distance - size, 0); viewportMovement = Math.min(e.distance, size); after = { translateX: 0, translateY: 0 }; viewportAfter = { translateX: 0, translateY: 0 }; if (side === LEFT) { after.translateX = movement; viewportAfter.translateX = viewportMovement; } else if (side === RIGHT) { after.translateX = -movement; viewportAfter.translateX = -viewportMovement; } else if (side === TOP) { after.translateY = movement; viewportAfter.translateY = viewportMovement; } else if (side === BOTTOM) { after.translateY = -movement; viewportAfter.translateY = -viewportMovement; } menu.translate(after.translateX, after.translateY); // Viewport only animates out of its way if menu is not not floated. if (!menu.getFloated()) { me.translate(viewportAfter.translateX, viewportAfter.translateY); } }, /** * @private */ onEdgeSwipeEnd: function(e) { var me = this, side = me.sideForDirection(e.direction), menu = me.getMenus()[oppositeSideNames[e.direction]], shouldRevert = me.reverseSwiping || (e.distance < me.getSwipeThreshold()), after = { translateX: 0, translateY: 0 }, viewportAfter = { translateX: 0, translateY: 0 }, size, velocity, movement, viewportMovement; if (!menu) { return; } size = menu.element.measure(side & (LEFT | RIGHT) ? 'w' : 'h'); velocity = (e.flick) ? e.flick.velocity : 0; // check if continuing in the right direction if (side === RIGHT) { if (velocity.x > 0) { shouldRevert = true; } } else if (side === LEFT) { if (velocity.x < 0) { shouldRevert = true; } } else if (side === TOP) { if (velocity.y < 0) { shouldRevert = true; } } else if (side === BOTTOM) { if (velocity.y > 0) { shouldRevert = true; } } movement = shouldRevert ? size : 0; viewportMovement = shouldRevert ? 0 : -size; if (side === LEFT) { after.translateX = -movement; viewportAfter.translateX = -viewportMovement; } else if (side === RIGHT) { after.translateX = movement; viewportAfter.translateX = viewportMovement; } else if (side === TOP) { after.translateY = -movement; viewportAfter.translateY = -viewportMovement; } else if (side === BOTTOM) { after.translateY = movement; viewportAfter.translateY = viewportMovement; } // Menu always animates in (or out if reverting) menu.translate(after.translateX, after.translateY, { duration: 200, callback: function() { if (shouldRevert) { menu.setHidden(true); } } }); // Viewport only animates out of menu's way if menu is not not floated. if (!menu.getFloated()) { me.translate(viewportAfter.translateX, viewportAfter.translateY, { duration: 200 }); } me.$swiping = false; }, /** * @private */ sideForDirection: function(direction) { if (direction === 'up') { direction = 'top'; } else if (direction === 'down') { direction = 'bottom'; } return oppositeSide[sideMap[direction]]; }, /** * @private */ sideForSwipeDirection: function(direction) { if (direction === 'up') { return 'top'; } else if (direction === 'down') { return 'bottom'; } return direction; }, toggleWindowListener: function(on, eventName, fn, capturing) { if (on) { this.addWindowListener(eventName, fn, capturing); } else { this.removeWindowListener(eventName, fn, capturing); } } } };});