/** * @class Ext.scroll.TouchScroller * @private * Momentum scrolling is one of the most important parts of the user experience on touch-screen * devices. Depending on the device and browser, Ext JS will select one of several different * scrolling implementations for best performance. * * Scroller settings can be changed using the {@link Ext.Container#scrollable scrollable} * configuration on {@link Ext.Component}. Here is a simple example of how to adjust the * scroller settings when using a Component (or anything that extends it). * * @example * Ext.create('Ext.Component', { * renderTo: Ext.getBody(), * height: 100, * width: 100, * // this component is scrollable vertically but not horizontally * scrollable: 'y', * html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis lorem et magna tempus fermentum.' * }); */Ext.define('Ext.scroll.TouchScroller', { extend: 'Ext.scroll.Scroller', alias: 'scroller.touch', requires: [ 'Ext.fx.easing.BoundMomentum', 'Ext.fx.easing.EaseOut', 'Ext.util.Translatable', 'Ext.scroll.Indicator', 'Ext.GlobalEvents' ], isTouchScroller: true, config: { /** * @cfg autoRefresh * @private */ autoRefresh: true, /** * @cfg bounceEasing * @private */ bounceEasing: { duration: 400 }, /** * @cfg * @private */ elementSize: undefined, indicators: true, /** * @cfg fps * @private */ fps: 'auto', /** * @cfg maxAbsoluteVelocity * @private */ maxAbsoluteVelocity: 6, /** * @cfg {Object} momentumEasing * @inheritdoc * The default value is: * * { * momentum: { * acceleration: 30, * friction: 0.5 * }, * bounce: { * acceleration: 30, * springTension: 0.3 * } * } * * Note that supplied object will be recursively merged with the default object. For example, you can simply * pass this to change the momentum acceleration only: * * { * momentum: { * acceleration: 10 * } * } */ momentumEasing: { momentum: { acceleration: 30, friction: 0.5 }, bounce: { acceleration: 30, springTension: 0.3 }, minVelocity: 1 }, /** * @cfg outOfBoundRestrictFactor * @private */ outOfBoundRestrictFactor: 0.5, /** * @cfg {Ext.dom.Element} * @private * The element that wraps the content of {@link #element} and is translated in * response to user interaction. If not configured, one will be automatically * generated. */ innerElement: null, size: undefined, /** * @cfg * @private */ slotSnapEasing: { duration: 150 }, /** * @cfg {Number/Object} slotSnapSize * The size of each slot to snap to in 'px', can be either an object with `x` and `y` values, i.e: * * { * x: 50, * y: 100 * } * * or a number value to be used for both directions. For example, a value of `50` will be treated as: * * { * x: 50, * y: 50 * } * * @accessor */ slotSnapSize: { x: 0, y: 0 }, /** * @cfg slotSnapOffset * @private */ slotSnapOffset: { x: 0, y: 0 }, /** * @cfg startMomentumResetTime * @private */ startMomentumResetTime: 300, /** * @cfg translatable * @private */ translatable: { translationMethod: 'auto', useWrapper: false }, /** * @cfg refreshOnIdle * @private */ refreshOnIdle: true }, cls: Ext.baseCSSPrefix + 'scroll-container', scrollerCls: Ext.baseCSSPrefix + 'scroll-scroller', dragStartTime: 0, dragEndTime: 0, isDragging: false, isAnimating: false, isMouseEvent: { mousedown: 1, mousemove: 1, mouseup: 1 }, listenerMap: { touchstart: 'onTouchStart', touchmove: 'onTouchMove', dragstart: 'onDragStart', drag: 'onDrag', dragend: 'onDragEnd' }, refreshCounter: 0, constructor: function(config) { var me = this, onEvent = 'onEvent'; me.elementListeners = { touchstart: onEvent, touchmove: onEvent, dragstart: onEvent, drag: onEvent, dragend: onEvent, scope: me }; me.minPosition = { x: 0, y: 0 }; me.startPosition = { x: 0, y: 0 }; me.position = { x: 0, y: 0 }; me.velocity = { x: 0, y: 0 }; me.isAxisEnabledFlags = { x: false, y: false }; me.flickStartPosition = { x: 0, y: 0 }; me.flickStartTime = { x: 0, y: 0 }; me.lastDragPosition = { x: 0, y: 0 }; me.dragDirection = { x: 0, y: 0}; me.callParent([config]); me.refreshAxes(); }, applyRefreshOnIdle: function(refreshOnIdle, oldRefreshOnIdle) { var me = this; if (refreshOnIdle) { Ext.GlobalEvents.on('idle', me.onIdle, me); } else if (oldRefreshOnIdle) { Ext.GlobalEvents.un('idle', me.onIdle, me); } return refreshOnIdle; }, applyBounceEasing: function(easing) { var defaultClass = Ext.fx.easing.EaseOut; return { x: Ext.factory(easing, defaultClass), y: Ext.factory(easing, defaultClass) }; }, applyElementSize: function(size) { var el = this.getElement(), dom, x, y; if (!el) { return null; } dom = el.dom; if (!dom) { return; } if (size == null) { // null or undefined x = dom.clientWidth; y = dom.clientHeight; } else { x = size.x; y = size.y; } return { x: x, y: y }; }, applyIndicators: function(indicators, oldIndicators) { var me = this, xIndicator, yIndicator, x, y; if (indicators) { if (indicators === true) { xIndicator = yIndicator = {}; } else { x = indicators.x; y = indicators.y; if (x || y) { // handle an object with x/y keys for configuring the indicators // individually. undfined/null/true are all the same, only false // can prevent the indicator from being created xIndicator = (x == null || x === true) ? {} : x; yIndicator = (x == null || y === true) ? {} : y; } else { // not an object with x/y keys, handle as a single indicators config // that applies to both axes xIndicator = yIndicator = indicators; } } if (oldIndicators) { if (xIndicator) { oldIndicators.x.setConfig(xIndicator); } else { oldIndicators.x.destroy(); oldIndicators.x = null; } if (yIndicator) { oldIndicators.y.setConfig(yIndicator); } else { oldIndicators.y.destroy(); oldIndicators.y = null; } indicators = oldIndicators; } else { indicators = { x: null, y: null }; // Indicators begin fade out 100ms after we request a hide. // This is so that if the user stabs and swipes repeatedly // the indicators remain until they quit. if (xIndicator) { indicators.x = new Ext.scroll.Indicator(Ext.applyIf({ axis: 'x', scroller: me, hideDelay: 100 }, xIndicator)); } if (yIndicator) { indicators.y = new Ext.scroll.Indicator(Ext.applyIf({ axis: 'y', scroller: me, hideDelay: 100 }, yIndicator)); } } } else if (oldIndicators) { oldIndicators.x = oldIndicators.y = Ext.destroy(oldIndicators.x, oldIndicators.y); } return indicators; }, applyMomentumEasing: function(easing) { var defaultClass = Ext.fx.easing.BoundMomentum; return { x: Ext.factory(easing, defaultClass), y: Ext.factory(easing, defaultClass) }; }, applyInnerElement: function(innerElement) { if (innerElement) { if (!innerElement.isElement) { innerElement = Ext.get(innerElement); } } //<debug> if (this.isConfiguring && !innerElement) { Ext.Error.raise("Cannot create Ext.scroll.TouchScroller instance with null innerElement"); } //</debug> return innerElement; }, applySize: function(size, oldSize) { var el, dom, scrollerDom, x, y; if (size == null) { // null or undefined el = this.getElement(); if (!el) { return null; } dom = el.dom; scrollerDom = this.getInnerElement().dom; // using scrollWidth/scrollHeight instead of offsetWidth/offsetHeight ensures // that the size includes any contained absolutely positioned items x = Math.max(scrollerDom.scrollWidth, dom.clientWidth); y = Math.max(scrollerDom.scrollHeight, dom.clientHeight); } else if (typeof size === 'number') { x = size; y = size; } else { x = size.x; y = size.y; } if (oldSize && oldSize.x === x && oldSize.y === y) { size = undefined; } else { size = { x: x, y: y }; } return size; }, applySlotSnapOffset: function(snapOffset) { if (typeof snapOffset === 'number') { return { x: snapOffset, y: snapOffset }; } return snapOffset; }, applySlotSnapSize: function(snapSize) { if (typeof snapSize === 'number') { return { x: snapSize, y: snapSize }; } return snapSize; }, applySlotSnapEasing: function(easing) { var defaultClass = Ext.fx.easing.EaseOut; return { x: Ext.factory(easing, defaultClass), y: Ext.factory(easing, defaultClass) }; }, applyTranslatable: function(config, translatable) { return Ext.factory(config, Ext.util.Translatable, translatable); }, destroy: function() { var me = this, element = me.getElement(), innerElement = me.getInnerElement(), sizeMonitors = me.sizeMonitors; if (sizeMonitors) { sizeMonitors.element.destroy(); sizeMonitors.container.destroy(); } if (element && !element.isDestroyed) { element.removeCls(me.cls); } if (innerElement && !innerElement.isDestroyed) { innerElement.removeCls(me.scrollerCls); } if (me._isWrapped) { if (!element.isDestroyed) { me.unwrapContent(); } innerElement.destroy(); if (me.FixedHBoxStretching) { innerElement.parent().destroy(); } } me.setElement(null); me.setInnerElement(null); Ext.GlobalEvents.un('idle', me.onIdle, me); Ext.destroy(me.getTranslatable()); me.callParent(arguments); }, getPosition: function() { return this.position; }, refresh: function(immediate, /* private */ options) { ++this.refreshCounter; if (immediate) { this.doRefresh(options); } }, setSize: function(size) { // We need to capture the passed value here. In applySize, we still need // to calculate the value so the scroller can function, however if we're // in touchScroll mode we don't want to spacer to show unless we've given // an explicit size. This allows us to make that determination. this.passedSize = size; this.callParent([size]); }, updateAutoRefresh: function(autoRefresh) { this.toggleResizeListeners(autoRefresh); }, updateBounceEasing: function(easing) { this.getTranslatable().setEasingX(easing.x).setEasingY(easing.y); }, updateElementSize: function() { if (!this.isConfiguring) { // to avoid multiple calls to refreshAxes() during initialization we will // call it once after initConfig has finished. this.refreshAxes(); } }, updateDisabled: function(disabled) { // attachment of listeners is handled by updateElement during initial config if (!this.isConfiguring) { if (disabled) { this.detachListeners(); } else { this.attachListeners(); } } }, updateElement: function(element, oldElement) { var me = this, // first check if the user configured a innerElement innerElement = me.getInnerElement(), fixedHBoxStretching = this.FixedHBoxStretching, listeners; if (!innerElement) { // if no configured scroller element, check if the first child has the // scrollerCls, if so we can assume that the user already wrapped the content // in a scrollerEl (this is true of both Ext and Touch Components). innerElement = element.dom.firstChild; if (fixedHBoxStretching && innerElement) { innerElement = innerElement.dom.firstChild; } if (!innerElement || innerElement.nodeType !== 1 || !Ext.fly(innerElement).hasCls(me.scrollerCls)) { // no scrollerEl found, generate one now innerElement = me.wrapContent(element); } me.setInnerElement(innerElement); } if (!fixedHBoxStretching) { element.addCls(me.cls); } if (me.isConfiguring) { if (!me.getTranslatable().isScrollParent) { // Not using DOM scrolling, clear overflow styles. element.dom.style.overflowX = element.dom.style.overflowY = ''; // If using full virtual scrolling attach a mousewheel listener for moving // the scroll position. Otherwise we use native scrolling when interacting // using the mouse and so do not want to override the native behavior listeners = me.elementListeners; listeners.mousewheel = 'onMouseWheel'; listeners.scroll = { fn: 'onElementScroll', delegated: false, scope: me }; } } if (!me.getDisabled()) { me.attachListeners(); } if (!me.isConfiguring) { // setting element after initial construction of Scroller // sync up configs that depend on element if (me.getAutoRefresh()) { me.toggleResizeListeners(true); } // setting null size and elementSize will cause them to be updated from the DOM me.setSize(null); me.setElementSize(null); } }, updateFps: function(fps) { if (fps !== 'auto') { this.getTranslatable().setFps(fps); } }, updateMaxUserPosition: function() { this.snapToBoundary(); }, updateMinUserPosition: function() { this.snapToBoundary(); }, updateInnerElement: function(innerElement) { if (innerElement) { innerElement.addCls(this.scrollerCls); } this.getTranslatable().setElement(innerElement); }, updateSize: function(size, oldSize) { var me = this, passedSize = me.passedSize; if (!me.isConfiguring) { // Base class keeps the spacer el sized to "stretch" a DOM scroll range. if (Ext.supports.touchScroll === 1) { // See the setSize override. if (passedSize == null) { size = passedSize; } me.callParent([size, oldSize]); } // to avoid multiple calls to refreshAxes() during initialization we will // call it once after initConfig has finished. me.refreshAxes(); } }, updateTranslatable: function(translatable) { translatable.setElement(this.getInnerElement()); translatable.on({ animationframe: 'onAnimationFrame', animationend: 'onAnimationEnd', scope: this }); }, updateX: function() { if (!this.isConfiguring) { // to avoid multiple calls to refreshAxes() during initialization we will // call it once after initConfig has finished. this.refreshAxes(); } }, updateY: function() { if (!this.isConfiguring) { // to avoid multiple calls to refreshAxes() during initialization we will // call it once after initConfig has finished. this.refreshAxes(); } }, privates: { attachListeners: function() { this.getElement().on(this.elementListeners); }, constrainX: function(x) { return Math.min(this.getMaxPosition().x, Math.max(x, 0)); }, constrainY: function(y) { return Math.min(this.getMaxPosition().y, Math.max(y, 0)); }, // overridden in RTL mode to swap min/max momentum values convertEasingConfig: function(config) { return config; }, detachListeners: function() { this.getElement().un(this.elementListeners); }, // private doRefresh: function(options) { var me = this, size, elementSize; if (me.refreshCounter && me.getElement()) { me.stopAnimation(); me.getTranslatable().refresh(); if (options) { // refresh called due to resize handler on element or innerElement. // Do not bother to read the DOM to determine sizing info, just set the size // given by the resize handler size = options.size; elementSize = options.elementSize; if (size) { me.setSize(size); } if (elementSize) { me.setElementSize(elementSize); } } else { // calling doRefresh() without options will cause both size and // elementSize to be measured from the DOM. me.setSize(null); me.setElementSize(null); } me.fireEvent('refresh', me); me.refreshCounter = 0; } }, doScrollTo: function(x, y, animation, /* private */ allowOverscroll) { var me = this, isDragging = me.isDragging, fireScrollCallback; if (me.isDestroyed || !me.getElement()) { return me; } // Normally the scroll position is constrained to the max scroll position, but // during a drag operation or during reflectio the scroller is allowed to overscroll. allowOverscroll = allowOverscroll || me.isDragging; var translatable = me.getTranslatable(), position = me.position, positionChanged = false, translationX, translationY; if (!isDragging || me.isAxisEnabled('x')) { if (isNaN(x) || typeof x !== 'number') { x = position.x; } else { if (!allowOverscroll) { x = me.constrainX(x); } if (position.x !== x) { position.x = x; positionChanged = true; } } translationX = me.convertX(-x); } if (!isDragging || me.isAxisEnabled('y')) { if (isNaN(y) || typeof y !== 'number') { y = position.y; } else { if (!allowOverscroll) { y = me.constrainY(y); } if (position.y !== y) { position.y = y; positionChanged = true; } } translationY = -y; } if (positionChanged) { if (animation) { // We need a callback to fire it after the animation fireScrollCallback = function() { me.onScroll(); }; // If they passed a boolean, create an object to hold the callback. if (animation === true) { animation = { callback: fireScrollCallback }; } // They want a callback, so we need to create a sequence on it. else if (animation.callback) { animation.callback = Ext.Function.createSequence(animation.callback, fireScrollCallback); } // We can just use the callback for our own purpose else { animation.callback = fireScrollCallback; } translatable.translateAnimated(translationX, translationY, animation); } else { translatable.translate(translationX, translationY); me.onScroll(); } } return me; }, /** * @private */ getAnimationEasing: function(axis, e) { if (!this.isAxisEnabled(axis)) { return null; } var me = this, currentPosition = me.position[axis], minPosition = me.getMinUserPosition()[axis], maxPosition = me.getMaxUserPosition()[axis], maxAbsVelocity = me.getMaxAbsoluteVelocity(), boundValue = null, dragEndTime = me.dragEndTime, velocity = e.flick.velocity[axis], isX = axis === 'x', easingConfig, easing; if (currentPosition < minPosition) { boundValue = minPosition; } else if (currentPosition > maxPosition) { boundValue = maxPosition; } if (isX) { currentPosition = me.convertX(currentPosition); boundValue = me.convertX(boundValue); } // Out of bound, to be pulled back if (boundValue !== null) { easing = me.getBounceEasing()[axis]; easing.setConfig({ startTime: dragEndTime, startValue: -currentPosition, endValue: -boundValue }); return easing; } if (velocity === 0) { return null; } if (velocity < -maxAbsVelocity) { velocity = -maxAbsVelocity; } else if (velocity > maxAbsVelocity) { velocity = maxAbsVelocity; } if (Ext.browser.is.IE) { velocity *= 2; } easing = me.getMomentumEasing()[axis]; easingConfig = { startTime: dragEndTime, startValue: -currentPosition, startVelocity: velocity * 1.5, minMomentumValue: -maxPosition, maxMomentumValue: 0 }; if (isX) { me.convertEasingConfig(easingConfig); } easing.setConfig(easingConfig); return easing; }, /** * @private * @return {Number/null} */ getSnapPosition: function(axis) { var me = this, snapSize = me.getSlotSnapSize()[axis], snapPosition = null, position, snapOffset, maxPosition, mod; if (snapSize !== 0 && me.isAxisEnabled(axis)) { position = me.position[axis]; snapOffset = me.getSlotSnapOffset()[axis]; maxPosition = me.getMaxUserPosition()[axis]; mod = Math.floor((position - snapOffset) % snapSize); if (mod !== 0) { if (position !== maxPosition) { if (Math.abs(mod) > snapSize / 2) { snapPosition = Math.min(maxPosition, position + ((mod > 0) ? snapSize - mod : mod - snapSize)); } else { snapPosition = position - mod; } } else { snapPosition = position - mod; } } } return snapPosition; }, hideIndicators: function() { var me = this, indicators = me.getIndicators(), xIndicator, yIndicator; if (indicators) { if (me.isAxisEnabled('x')) { xIndicator = indicators.x; if (xIndicator) { xIndicator.hide(); } } if (me.isAxisEnabled('y')) { yIndicator = indicators.y; if (yIndicator) { yIndicator.hide(); } } } }, /** * Returns `true` if a specified axis is enabled. * @private * @param {String} axis The axis to check (`x` or `y`). * @return {Boolean} `true` if the axis is enabled. */ isAxisEnabled: function(axis) { this.getX(); this.getY(); return this.isAxisEnabledFlags[axis]; }, onAnimationEnd: function() { this.snapToBoundary(); this.onScrollEnd(); }, onAnimationFrame: function(translatable, x, y) { var position = this.position; position.x = this.convertX(-x); position.y = -y; this.onScroll(); }, onAxisDrag: function(axis, delta) { if (!this.isAxisEnabled(axis)) { return; } var me = this, flickStartPosition = me.flickStartPosition, flickStartTime = me.flickStartTime, lastDragPosition = me.lastDragPosition, dragDirection = me.dragDirection, old = me.position[axis], min = me.getMinUserPosition()[axis], max = me.getMaxUserPosition()[axis], start = me.startPosition[axis], last = lastDragPosition[axis], current = start - delta, lastDirection = dragDirection[axis], restrictFactor = me.getOutOfBoundRestrictFactor(), startMomentumResetTime = me.getStartMomentumResetTime(), now = Ext.Date.now(), distance; if (current < min) { current *= restrictFactor; } else if (current > max) { distance = current - max; current = max + distance * restrictFactor; } if (current > last) { dragDirection[axis] = 1; } else if (current < last) { dragDirection[axis] = -1; } if ((lastDirection !== 0 && (dragDirection[axis] !== lastDirection)) || (now - flickStartTime[axis]) > startMomentumResetTime) { flickStartPosition[axis] = old; flickStartTime[axis] = now; } lastDragPosition[axis] = current; }, // In "hybrid" touch scroll mode where the TouchScroller is used to control the // scroll position of a naturally overflowing element, we need to sync the scroll // position of the TouchScroller when the element is scrolled onDomScroll: function() { var me = this, dom, position, x, y; if (me.getTranslatable().isScrollParent) { dom = me.getScrollElement().dom; position = me.position; position.x = x = dom.scrollLeft; position.y = y = dom.scrollTop; me.getTranslatable().translate(-x, -y); } // If, in CSS translation scrolling mode (mode 2), we ever encounter a DOM scroll // event, it must be a browser's autoscroll in response to focusing. We MUST // undo this action because in mode 2 scrolling, the DOM must never scroll. // https://sencha.jira.com/browse/EXTJS-18959 if (Ext.supports.touchScroll === 2) { dom = dom || me.getScrollElement().dom; dom.scrollTop = dom.scrollLeft = 0; return; } me.callParent(); }, onDrag: function(e) { var me = this, lastDragPosition = me.lastDragPosition; if (!me.isDragging) { return; } me.onAxisDrag('x', me.convertX(e.deltaX)); me.onAxisDrag('y', e.deltaY); me.doScrollTo(lastDragPosition.x, lastDragPosition.y); }, onDragEnd: function(e) { var me = this, easingX, easingY; if (!me.isDragging) { return; } me.dragEndTime = Ext.Date.now(); me.onDrag(e); me.isDragging = false; easingX = me.getAnimationEasing('x', e); easingY = me.getAnimationEasing('y', e); if (easingX || easingY) { me.getTranslatable().animate(easingX, easingY); } else { me.onScrollEnd(); } }, onDragStart: function(e) { var me = this, absDeltaX = e.absDeltaX, absDeltaY = e.absDeltaY, startPosition = me.startPosition, flickStartPosition = me.flickStartPosition, flickStartTime = me.flickStartTime, lastDragPosition = me.lastDragPosition, currentPosition = me.position, dragDirection = me.dragDirection, x = currentPosition.x, y = currentPosition.y, now = Ext.Date.now(), horizontal = me.getX(), vertical = me.getY(); if (me.getDirectionLock() && !(horizontal && vertical)) { if ((horizontal && absDeltaX > absDeltaY) || (vertical && absDeltaY > absDeltaX)) { e.stopPropagation(); } else { return; } } lastDragPosition.x = x; lastDragPosition.y = y; flickStartPosition.x = x; flickStartPosition.y = y; startPosition.x = x; startPosition.y = y; flickStartTime.x = now; flickStartTime.y = now; dragDirection.x = 0; dragDirection.y = 0; me.dragStartTime = now; me.isDragging = true; me.onScrollStart(); }, onElementResize: function(element, info) { this.refresh(true, { elementSize: { x: info.width, y: info.height } }); }, onElementScroll: function(event, targetEl) { targetEl.scrollTop = targetEl.scrollLeft = 0; }, onEvent: function(e) { // use browserEvent to get the "real" type of DOM event that was fired, not a // potentially translated (or recognized) type var me = this, browserEvent = e.browserEvent; if ((!me.self.isTouching || me.isTouching) && // prevents nested scrolling // prevents scrolling in response to mouse input on multi-input devices // such as windows 8 laptops with touch screens. // Don't bother checking the event type if we are on a device that uses // full virtual scrolling (!isScrollParent) // TODO: this should be handled by the event system once EXTJSIV-12840 // is implemented ((!me.getTranslatable().isScrollParent) || (!me.isMouseEvent[browserEvent.type] && browserEvent.pointerType !== 'mouse')) && (me.getY() || me.getX())) { me[me.listenerMap[e.type]](e); } }, onIdle: function() { this.doRefresh(); }, onInnerElementResize: function(element, info) { this.refresh(true, { size: { x: info.width, y: info.height } }); }, onMouseWheel: function(e) { var me = this, delta = e.getWheelDeltas(), deltaX = -delta.x, deltaY = -delta.y, position = me.position, maxPosition = me.getMaxUserPosition(), minPosition = me.getMinUserPosition(), max = Math.max, min = Math.min, positionX = max(min(position.x + deltaX, maxPosition.x), minPosition.x), positionY = max(min(position.y + deltaY, maxPosition.y), minPosition.y); deltaX = positionX - position.x; deltaY = positionY - position.y; if (!deltaX && !deltaY) { return; } e.stopEvent(); me.onScrollStart(); me.scrollBy(deltaX, deltaY); me.onScroll(); me.onScrollEnd(); }, onPartnerScrollEnd: function() { this.hideIndicators(); }, onPartnerScrollStart: function() { this.showIndicators(); }, onScroll: function() { var me = this, position = me.position, x = position.x, y = position.y, indicators = me.getIndicators(), xIndicator, yIndicator; if (indicators) { if (me.isAxisEnabled('x')) { xIndicator = indicators.x; if (xIndicator) { xIndicator.setValue(x); } } if (me.isAxisEnabled('y')) { yIndicator = indicators.y; if (yIndicator) { yIndicator.setValue(y); } } } me.fireScroll(x, y); }, onScrollEnd: function() { var me = this, position = me.position; me.hideIndicators(); if (!me.isTouching && !me.snapToSlot()) { me.fireScrollEnd(position.x, position.y); } me.isScrolling = Ext.isScrolling = false; }, onScrollStart: function() { var me = this, position = me.position; me.showIndicators(); me.isScrolling = Ext.isScrolling = true; me.fireScrollStart(position.x, position.y); }, onTouchEnd: function() { var me = this; me.isTouching = me.self.isTouching = false; if (!me.isDragging && me.snapToSlot()) { me.onScrollStart(); } }, onTouchMove: function(e) { // Prevents the page from scrolling while an element is being scrolled using // the TouchScroller. Only needed when inside a page that does not use a // Viewport, since the Viewport already prevents default behavior of touchmove e.preventDefault(); }, onTouchStart: function() { var me = this; Ext.getDoc().on({ touchend: 'onTouchEnd', scope: me, single: true }); me.stopAnimation(); me.isTouching = me.self.isTouching = true; }, refreshAxes: function() { var me = this, flags = me.isAxisEnabledFlags, size = me.getSize(), elementSize = me.getElementSize(), indicators = me.getIndicators(), maxX, maxY, x, y, xIndicator, yIndicator; if (!size || !elementSize) { return; } maxX = Math.max(0, size.x - elementSize.x); maxY = Math.max(0, size.y - elementSize.y); x = me.getX(); y = me.getY(); me.setMaxPosition({ x: maxX, y: maxY }); if (x === true || x === 'auto') { // auto scroll - axis is only enabled if the content is overflowing in the // same direction flags.x = !!maxX; } else if (x === false) { flags.x = false; xIndicator = indicators && indicators.x; if (xIndicator) { // hide the x indicator if the x axis is disabled, just in case we // are refreshing during a scroll xIndicator.hide(); } } else if (x === 'scroll') { flags.x = true; } if (y === true || y === 'auto') { // auto scroll - axis is only enabled if the content is overflowing in the // same direction flags.y = !!maxY; } else if (y === false) { flags.y = false; yIndicator = indicators && indicators.y; if (yIndicator) { // hide the y indicator if the y axis is disabled, just in case we // are refreshing during a scroll yIndicator.hide(); } } else if (y === 'scroll') { flags.y = true; } me.setMaxUserPosition({ x: flags.x ? maxX : 0, y: flags.y ? maxY : 0 }); // If we are using regular DOM ovberflow scrolling, sync the element styles. if (Ext.supports.touchScroll === 1) { me.initXStyle(); me.initYStyle(); } }, showIndicators: function() { var me = this, indicators = me.getIndicators(), xIndicator, yIndicator; if (indicators) { if (me.isAxisEnabled('x')) { xIndicator = indicators.x; if (xIndicator) { xIndicator.show(); } } if (me.isAxisEnabled('y')) { yIndicator = indicators.y; if (yIndicator) { yIndicator.show(); } } } }, snapToBoundary: function() { if (this.isConfiguring) { return; } var me = this, position = me.position, minPosition = me.getMinUserPosition(), maxPosition = me.getMaxUserPosition(), minX = minPosition.x, minY = minPosition.y, maxX = maxPosition.x, maxY = maxPosition.y, x = Math.round(position.x), y = Math.round(position.y); if (x < minX) { x = minX; } else if (x > maxX) { x = maxX; } if (y < minY) { y = minY; } else if (y > maxY) { y = maxY; } me.doScrollTo(x, y); }, /** * @private * @return {Boolean} */ snapToSlot: function() { var me = this, snapX = me.getSnapPosition('x'), snapY = me.getSnapPosition('y'), easing = me.getSlotSnapEasing(); if (snapX !== null || snapY !== null) { me.doScrollTo(snapX, snapY, { easingX: easing.x, easingY: easing.y }); return true; } return false; }, /** * @private * Stops the animation of the scroller at any time. */ stopAnimation: function() { this.getTranslatable().stopAnimation(); }, toggleResizeListeners: function(on) { var me = this, element = me.getElement(), method = on ? 'on' : 'un'; if (element) { element[method]('resize', 'onElementResize', me); me.getInnerElement()[method]('resize', 'onInnerElementResize', me); } }, unwrapContent: function() { var innerDom = this.getInnerElement().dom, dom = this.getElement().dom, child; while ((child = innerDom.firstChild)) { dom.insertBefore(child, innerDom); } }, /** * Wraps the element's content in a innerElement * @param {Ext.dom.Element} element * @return {Ext.dom.Element} the innerElement * @private */ wrapContent: function(element) { var wrap = document.createElement('div'), dom = element.dom, child; while (child = dom.lastChild) { // jshint ignore:line wrap.insertBefore(child, wrap.firstChild); } dom.appendChild(wrap); this.setInnerElement(wrap); // Set a flag that indiacates the element's content was not already pre-wrapped // when the scroller was instanced. This means we had to wrap the content // and so must unwrap when we destroy the scroller. this._isWrapped = true; return this.getInnerElement(); } }});