From 6385452303224bc421a4072c45f6ec9ef7f2181c Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 9 Oct 2014 20:11:48 -0500 Subject: [PATCH] refactor(scrollView): only update DOM on changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On line 1188 and 1094, only make updates to the content element’s transform style when there are actual DOM changes that need to be made, instead of accessing the DOM just to set the same value. Also many style() updates. --- js/views/scrollView.js | 314 +++++++++++++++++++---------------------- 1 file changed, 148 insertions(+), 166 deletions(-) diff --git a/js/views/scrollView.js b/js/views/scrollView.js index cf23907c4e..1471af016e 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -284,8 +284,8 @@ ionic.views.Scroll = ionic.views.View.inherit({ initialize: function(options) { var self = this; - this.__container = options.el; - this.__content = options.el.firstElementChild; + self.__container = options.el; + self.__content = options.el.firstElementChild; //Remove any scrollTop attached to these elements; they are virtual scroll now //This also stops on-load-scroll-to-window.location.hash that the browser does @@ -296,7 +296,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ } }); - this.options = { + self.options = { /** Disable scrolling on x-axis by default */ scrollingX: false, @@ -377,16 +377,16 @@ ionic.views.Scroll = ionic.views.View.inherit({ }; for (var key in options) { - this.options[key] = options[key]; + self.options[key] = options[key]; } - this.hintResize = ionic.debounce(function() { + self.hintResize = ionic.debounce(function() { self.resize(); }, 1000, true); - this.onScroll = function() { + self.onScroll = function() { - if(!ionic.scroll.isScrolling) { + if (!ionic.scroll.isScrolling) { setTimeout(self.setScrollStart, 50); } else { clearTimeout(self.scrollTimer); @@ -395,27 +395,27 @@ ionic.views.Scroll = ionic.views.View.inherit({ }; - this.setScrollStart = function() { + self.setScrollStart = function() { ionic.scroll.isScrolling = Math.abs(ionic.scroll.lastTop - self.__scrollTop) > 1; clearTimeout(self.scrollTimer); self.scrollTimer = setTimeout(self.setScrollStop, 80); }; - this.setScrollStop = function() { + self.setScrollStop = function() { ionic.scroll.isScrolling = false; ionic.scroll.lastTop = self.__scrollTop; }; - this.triggerScrollEvent = ionic.throttle(function() { + self.triggerScrollEvent = ionic.throttle(function() { self.onScroll(); ionic.trigger('scroll', { scrollTop: self.__scrollTop, scrollLeft: self.__scrollLeft, target: self.__container }); - }, this.options.scrollEventInterval); + }, self.options.scrollEventInterval); - this.triggerScrollEndEvent = function() { + self.triggerScrollEndEvent = function() { ionic.trigger('scrollend', { scrollTop: self.__scrollTop, scrollLeft: self.__scrollLeft, @@ -423,14 +423,14 @@ ionic.views.Scroll = ionic.views.View.inherit({ }); }; - this.__scrollLeft = this.options.startX; - this.__scrollTop = this.options.startY; + self.__scrollLeft = self.options.startX; + self.__scrollTop = self.options.startY; // Get the render update function, initialize event handlers, // and calculate the size of the scroll container - this.__callback = this.getRenderFn(); - this.__initEventHandlers(); - this.__createScrollbars(); + self.__callback = self.getRenderFn(); + self.__initEventHandlers(); + self.__createScrollbars(); }, @@ -619,17 +619,17 @@ ionic.views.Scroll = ionic.views.View.inherit({ var self = this; // Event Handler - var container = this.__container; + var container = self.__container; self.scrollChildIntoView = function(e) { //distance from bottom of scrollview to top of viewport var scrollBottomOffsetToTop; - if( !self.isScrolledIntoView ) { + if ( !self.isScrolledIntoView ) { // shrink scrollview so we can actually scroll if the input is hidden // if it isn't shrink so we can scroll to inputs under the keyboard - if((ionic.Platform.isIOS() || ionic.Platform.isFullScreen) && !container.parentNode.classList.contains('modal')){ + if ((ionic.Platform.isIOS() || ionic.Platform.isFullScreen) && !container.parentNode.classList.contains('modal')){ // if there are things below the scroll view account for them and // subtract them from the keyboard height when resizing @@ -645,7 +645,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ } //If the element is positioned under the keyboard... - if( e.detail.isElementUnderKeyboard ) { + if ( e.detail.isElementUnderKeyboard ) { var delay; // Wait on android for web view to resize if ( ionic.Platform.isAndroid() && !ionic.Platform.isFullScreen ) { @@ -688,7 +688,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ self.resetScrollView = function(e) { //return scrollview to original height once keyboard has hidden - if(self.isScrolledIntoView) { + if (self.isScrolledIntoView) { self.isScrolledIntoView = false; container.style.height = ""; container.style.overflow = ""; @@ -718,7 +718,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ self.__isDown = true; - if( ionic.tap.containsOrIsTextInput(e.target) || e.target.tagName === 'SELECT' ) { + if ( ionic.tap.containsOrIsTextInput(e.target) || e.target.tagName === 'SELECT' ) { // do not start if the target is a text input // if there is a touchmove on this input, then we can start the scroll self.__hasStarted = false; @@ -733,13 +733,13 @@ ionic.views.Scroll = ionic.views.View.inherit({ }; self.touchMove = function(e) { - if(!self.__isDown || + if (!self.__isDown || e.defaultPrevented || (e.target.tagName === 'TEXTAREA' && e.target.parentElement.querySelector(':focus')) ) { return; } - if( !self.__hasStarted && ( ionic.tap.containsOrIsTextInput(e.target) || e.target.tagName === 'SELECT' ) ) { + if ( !self.__hasStarted && ( ionic.tap.containsOrIsTextInput(e.target) || e.target.tagName === 'SELECT' ) ) { // the target is a text input and scroll has started // since the text input doesn't start on touchStart, do it here self.__hasStarted = true; @@ -748,11 +748,11 @@ ionic.views.Scroll = ionic.views.View.inherit({ return; } - if(self.startCoordinates) { + if (self.startCoordinates) { // we have start coordinates, so get this touch move's current coordinates var currentCoordinates = ionic.tap.pointerCoord(e); - if( self.__isSelectable && + if ( self.__isSelectable && ionic.tap.isTextInput(e.target) && Math.abs(self.startCoordinates.x - currentCoordinates.x) > 20 ) { // user slid the text input's caret on its x axis, disable any future y scrolling @@ -760,7 +760,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ self.__isSelectable = true; } - if( self.__enableScrollY && Math.abs(self.startCoordinates.y - currentCoordinates.y) > 10 ) { + if ( self.__enableScrollY && Math.abs(self.startCoordinates.y - currentCoordinates.y) > 10 ) { // user scrolled the entire view on the y axis // disabled being able to select text on an input // hide the input which has focus, and show a cloned one that doesn't have focus @@ -774,7 +774,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ }; self.touchEnd = function(e) { - if(!self.__isDown) return; + if (!self.__isDown) return; self.doTouchEnd(e.timeStamp); self.__isDown = false; @@ -782,7 +782,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ self.__isSelectable = true; self.__enableScrollY = true; - if( !self.__isDragging && !self.__isDecelerating && !self.__isAnimating ) { + if ( !self.__isDragging && !self.__isDecelerating && !self.__isAnimating ) { ionic.tap.removeClonedInputs(container, self); } }; @@ -818,7 +818,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ } self.doTouchStart(getEventTouches(e), e.timeStamp); - if( !ionic.tap.isTextInput(e.target) ) { + if ( !ionic.tap.isTextInput(e.target) ) { e.preventDefault(); } mousedown = true; @@ -870,8 +870,8 @@ ionic.views.Scroll = ionic.views.View.inherit({ }, __cleanup: function() { - var container = this.__container; var self = this; + var container = self.__container; container.removeEventListener('touchstart', self.touchStart); document.removeEventListener('touchmove', self.touchMove); @@ -898,19 +898,19 @@ ionic.views.Scroll = ionic.views.View.inherit({ ionic.tap.removeClonedInputs(container, self); - delete this.__container; - delete this.__content; - delete this.__indicatorX; - delete this.__indicatorY; - delete this.options.el; + delete self.__container; + delete self.__content; + delete self.__indicatorX; + delete self.__indicatorY; + delete self.options.el; - this.__callback = this.scrollChildIntoView = this.resetScrollView = angular.noop; + self.__callback = self.scrollChildIntoView = self.resetScrollView = angular.noop; - this.mouseMove = this.mouseDown = this.mouseUp = this.mouseWheel = - this.touchStart = this.touchMove = this.touchEnd = this.touchCancel = angular.noop; + self.mouseMove = self.mouseDown = self.mouseUp = self.mouseWheel = + self.touchStart = self.touchMove = self.touchEnd = self.touchCancel = angular.noop; - this.resize = this.scrollTo = this.zoomTo = - this.__scrollingComplete = angular.noop; + self.resize = self.scrollTo = self.zoomTo = + self.__scrollingComplete = angular.noop; container = null; }, @@ -921,7 +921,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ indicator.className = 'scroll-bar-indicator scroll-bar-fade-out'; - if(direction == 'h') { + if (direction == 'h') { bar.className = 'scroll-bar scroll-bar-h'; } else { bar.className = 'scroll-bar scroll-bar-v'; @@ -932,32 +932,33 @@ ionic.views.Scroll = ionic.views.View.inherit({ }, __createScrollbars: function() { + var self = this; var indicatorX, indicatorY; - if(this.options.scrollingX) { + if (self.options.scrollingX) { indicatorX = { - el: this.__createScrollbar('h'), + el: self.__createScrollbar('h'), sizeRatio: 1 }; indicatorX.indicator = indicatorX.el.children[0]; - if(this.options.scrollbarX) { - this.__container.appendChild(indicatorX.el); + if (self.options.scrollbarX) { + self.__container.appendChild(indicatorX.el); } - this.__indicatorX = indicatorX; + self.__indicatorX = indicatorX; } - if(this.options.scrollingY) { + if (self.options.scrollingY) { indicatorY = { - el: this.__createScrollbar('v'), + el: self.__createScrollbar('v'), sizeRatio: 1 }; indicatorY.indicator = indicatorY.el.children[0]; - if(this.options.scrollbarY) { - this.__container.appendChild(indicatorY.el); + if (self.options.scrollbarY) { + self.__container.appendChild(indicatorY.el); } - this.__indicatorY = indicatorY; + self.__indicatorY = indicatorY; } }, @@ -965,28 +966,32 @@ ionic.views.Scroll = ionic.views.View.inherit({ var self = this; // Update horiz bar - if(self.__indicatorX) { + if (self.__indicatorX) { var width = Math.max(Math.round(self.__clientWidth * self.__clientWidth / (self.__contentWidth)), 20); - if(width > self.__contentWidth) { + if (width > self.__contentWidth) { width = 0; } + if (width !== self.__indicatorX.size) { + self.__indicatorX.indicator.style.width = width + 'px'; + } self.__indicatorX.size = width; - self.__indicatorX.minScale = this.options.minScrollbarSizeX / width; - self.__indicatorX.indicator.style.width = width + 'px'; + self.__indicatorX.minScale = self.options.minScrollbarSizeX / width; self.__indicatorX.maxPos = self.__clientWidth - width; self.__indicatorX.sizeRatio = self.__maxScrollLeft ? self.__indicatorX.maxPos / self.__maxScrollLeft : 1; } // Update vert bar - if(self.__indicatorY) { + if (self.__indicatorY) { var height = Math.max(Math.round(self.__clientHeight * self.__clientHeight / (self.__contentHeight)), 20); - if(height > self.__contentHeight) { + if (height > self.__contentHeight) { height = 0; } + if (height !== self.__indicatorY.size) { + self.__indicatorY.indicator.style.height = height + 'px'; + } self.__indicatorY.size = height; - self.__indicatorY.minScale = this.options.minScrollbarSizeY / height; + self.__indicatorY.minScale = self.options.minScrollbarSizeY / height; self.__indicatorY.maxPos = self.__clientHeight - height; - self.__indicatorY.indicator.style.height = height + 'px'; self.__indicatorY.sizeRatio = self.__maxScrollTop ? self.__indicatorY.maxPos / self.__maxScrollTop : 1; } }, @@ -1000,18 +1005,18 @@ ionic.views.Scroll = ionic.views.View.inherit({ x, y, xstop = 0, ystop = 0; - if(self.__indicatorX) { + if (self.__indicatorX) { // Handle the X scrollbar // Don't go all the way to the right if we have a vertical scrollbar as well - if(self.__indicatorY) xstop = 10; + if (self.__indicatorY) xstop = 10; x = Math.round(self.__indicatorX.sizeRatio * self.__scrollLeft) || 0, // The the difference between the last content X position, and our overscrolled one widthDiff = self.__scrollLeft - (self.__maxScrollLeft - xstop); - if(self.__scrollLeft < 0) { + if (self.__scrollLeft < 0) { widthScale = Math.max(self.__indicatorX.minScale, (self.__indicatorX.size - Math.abs(self.__scrollLeft)) / self.__indicatorX.size); @@ -1021,7 +1026,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ // Make sure scale is transformed from the left/center origin point self.__indicatorX.indicator.style[self.__transformOriginProperty] = 'left center'; - } else if(widthDiff > 0) { + } else if (widthDiff > 0) { widthScale = Math.max(self.__indicatorX.minScale, (self.__indicatorX.size - widthDiff) / self.__indicatorX.size); @@ -1043,16 +1048,16 @@ ionic.views.Scroll = ionic.views.View.inherit({ self.__indicatorX.indicator.style[self.__transformProperty] = 'translate3d(' + x + 'px, 0, 0) scaleX(' + widthScale + ')'; } - if(self.__indicatorY) { + if (self.__indicatorY) { y = Math.round(self.__indicatorY.sizeRatio * self.__scrollTop) || 0; // Don't go all the way to the right if we have a vertical scrollbar as well - if(self.__indicatorX) ystop = 10; + if (self.__indicatorX) ystop = 10; heightDiff = self.__scrollTop - (self.__maxScrollTop - ystop); - if(self.__scrollTop < 0) { + if (self.__scrollTop < 0) { heightScale = Math.max(self.__indicatorY.minScale, (self.__indicatorY.size - Math.abs(self.__scrollTop)) / self.__indicatorY.size); @@ -1060,9 +1065,12 @@ ionic.views.Scroll = ionic.views.View.inherit({ y = 0; // Make sure scale is transformed from the center/top origin point - self.__indicatorY.indicator.style[self.__transformOriginProperty] = 'center top'; + if (self.__indicatorY.originProp !== 'center top') { + self.__indicatorY.indicator.style[self.__transformOriginProperty] = 'center top'; + self.__indicatorY.originProp = 'center top'; + } - } else if(heightDiff > 0) { + } else if (heightDiff > 0) { heightScale = Math.max(self.__indicatorY.minScale, (self.__indicatorY.size - heightDiff) / self.__indicatorY.size); @@ -1070,7 +1078,10 @@ ionic.views.Scroll = ionic.views.View.inherit({ y = self.__indicatorY.maxPos - ystop; // Make sure scale is transformed from the center/bottom origin point - self.__indicatorY.indicator.style[self.__transformOriginProperty] = 'center bottom'; + if (self.__indicatorY.originProp !== 'center bottom') { + self.__indicatorY.indicator.style[self.__transformOriginProperty] = 'center bottom'; + self.__indicatorY.originProp = 'center bottom'; + } } else { @@ -1080,52 +1091,55 @@ ionic.views.Scroll = ionic.views.View.inherit({ } - self.__indicatorY.indicator.style[self.__transformProperty] = 'translate3d(0,' + y + 'px, 0) scaleY(' + heightScale + ')'; + var translate3d = 'translate3d(0,' + y + 'px, 0) scaleY(' + heightScale + ')'; + if (self.__indicatorY.transformProp !== translate3d) { + self.__indicatorY.indicator.style[self.__transformProperty] = translate3d; + self.__indicatorY.transformProp = translate3d; + } } }, __fadeScrollbars: function(direction, delay) { var self = this; - if(!this.options.scrollbarsFade) { + if (!self.options.scrollbarsFade) { return; } var className = 'scroll-bar-fade-out'; - if(self.options.scrollbarsFade === true) { + if (self.options.scrollbarsFade === true) { clearTimeout(self.__scrollbarFadeTimeout); - if(direction == 'in') { - if(self.__indicatorX) { self.__indicatorX.indicator.classList.remove(className); } - if(self.__indicatorY) { self.__indicatorY.indicator.classList.remove(className); } + if (direction == 'in') { + if (self.__indicatorX) { self.__indicatorX.indicator.classList.remove(className); } + if (self.__indicatorY) { self.__indicatorY.indicator.classList.remove(className); } } else { self.__scrollbarFadeTimeout = setTimeout(function() { - if(self.__indicatorX) { self.__indicatorX.indicator.classList.add(className); } - if(self.__indicatorY) { self.__indicatorY.indicator.classList.add(className); } + if (self.__indicatorX) { self.__indicatorX.indicator.classList.add(className); } + if (self.__indicatorY) { self.__indicatorY.indicator.classList.add(className); } }, delay || self.options.scrollbarFadeDelay); } } }, __scrollingComplete: function() { - var self = this; - self.options.scrollingComplete(); - ionic.tap.removeClonedInputs(self.__container, self); - - self.__fadeScrollbars('out'); + this.options.scrollingComplete(); + ionic.tap.removeClonedInputs(this.__container, this); + this.__fadeScrollbars('out'); }, resize: function() { - if(!this.__container || !this.options) return; + var self = this; + if (!self.__container || !self.options) return; // Update Scroller dimensions for changed content // Add padding to bottom of content - this.setDimensions( - this.__container.clientWidth, - this.__container.clientHeight, - this.options.getContentWidth(), - this.options.getContentHeight() + self.setDimensions( + self.__container.clientWidth, + self.__container.clientHeight, + self.options.getContentWidth(), + self.options.getContentHeight() ); }, /* @@ -1137,7 +1151,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ getRenderFn: function() { var self = this; - var content = this.__content; + var content = self.__content; var docStyle = document.documentElement.style; @@ -1171,9 +1185,13 @@ ionic.views.Scroll = ionic.views.View.inherit({ if (helperElem.style[perspectiveProperty] !== undef) { return function(left, top, zoom, wasResize) { - content.style[transformProperty] = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')'; + var translate3d = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')'; + if (translate3d !== self.contentTransform) { + content.style[transformProperty] = translate3d; + self.contentTransform = translate3d; + } self.__repositionScrollbars(); - if(!wasResize) { + if (!wasResize) { self.triggerScrollEvent(); } }; @@ -1183,7 +1201,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ return function(left, top, zoom, wasResize) { content.style[transformProperty] = 'translate(' + (-left) + 'px,' + (-top) + 'px) scale(' + zoom + ')'; self.__repositionScrollbars(); - if(!wasResize) { + if (!wasResize) { self.triggerScrollEvent(); } }; @@ -1195,7 +1213,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ content.style.marginTop = top ? (-top/zoom) + 'px' : ''; content.style.zoom = zoom || ''; self.__repositionScrollbars(); - if(!wasResize) { + if (!wasResize) { self.triggerScrollEvent(); } }; @@ -1251,12 +1269,8 @@ ionic.views.Scroll = ionic.views.View.inherit({ * @param top {Integer} Top position of outer element */ setPosition: function(left, top) { - - var self = this; - - self.__clientLeft = left || 0; - self.__clientTop = top || 0; - + this.__clientLeft = left || 0; + this.__clientTop = top || 0; }, @@ -1267,12 +1281,8 @@ ionic.views.Scroll = ionic.views.View.inherit({ * @param height {Integer} Snapping height */ setSnapSize: function(width, height) { - - var self = this; - - self.__snapWidth = width; - self.__snapHeight = height; - + this.__snapWidth = width; + this.__snapHeight = height; }, @@ -1290,7 +1300,6 @@ ionic.views.Scroll = ionic.views.View.inherit({ * @param tailCallback {Function} Callback to execute just before the refresher returns to it's original state. This is for zooming out the refresher. */ activatePullToRefresh: function(height, activateCallback, deactivateCallback, startCallback, showCallback, hideCallback, tailCallback) { - var self = this; self.__refreshHeight = height; @@ -1314,7 +1323,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ this.__publish(this.__scrollLeft, -this.__refreshHeight, this.__zoomLevel, true); var d = new Date(); - self.refreshStartTime = d.getTime(); + this.refreshStartTime = d.getTime(); if (this.__refreshStart) { this.__refreshStart(); @@ -1326,16 +1335,15 @@ ionic.views.Scroll = ionic.views.View.inherit({ * Signalizes that pull-to-refresh is finished. */ finishPullToRefresh: function() { - var self = this; // delay to make sure the spinner has a chance to spin for a split second before it's dismissed var d = new Date(); var delay = 0; - if(self.refreshStartTime + self.__minSpinTime > d.getTime()){ + if (self.refreshStartTime + self.__minSpinTime > d.getTime()){ delay = self.refreshStartTime + self.__minSpinTime - d.getTime(); } setTimeout(function(){ - if(self.__refreshTail){ + if (self.__refreshTail){ self.__refreshTail(); } setTimeout(function(){ @@ -1343,7 +1351,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ if (self.__refreshDeactivate) { self.__refreshDeactivate(); } - if(self.__refreshHide){ + if (self.__refreshHide){ self.__refreshHide(); } @@ -1359,15 +1367,11 @@ ionic.views.Scroll = ionic.views.View.inherit({ * @return {Map} `left` and `top` scroll position and `zoom` level */ getValues: function() { - - var self = this; - return { - left: self.__scrollLeft, - top: self.__scrollTop, - zoom: self.__zoomLevel + left: this.__scrollLeft, + top: this.__scrollTop, + zoom: this.__zoomLevel }; - }, @@ -1377,14 +1381,10 @@ ionic.views.Scroll = ionic.views.View.inherit({ * @return {Map} `left` and `top` maximum scroll values */ getScrollMax: function() { - - var self = this; - return { - left: self.__maxScrollLeft, - top: self.__maxScrollTop + left: this.__maxScrollLeft, + top: this.__maxScrollTop }; - }, @@ -1398,7 +1398,6 @@ ionic.views.Scroll = ionic.views.View.inherit({ * @param originTop {Number} Zoom in at given top coordinate */ zoomTo: function(level, animate, originLeft, originTop) { - var self = this; if (!self.options.zooming) { @@ -1461,11 +1460,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ * @param originTop {Number} Zoom in at given top coordinate */ zoomBy: function(factor, animate, originLeft, originTop) { - - var self = this; - - self.zoomTo(self.__zoomLevel * factor, animate, originLeft, originTop); - + this.zoomTo(this.__zoomLevel * factor, animate, originLeft, originTop); }, @@ -1558,14 +1553,12 @@ ionic.views.Scroll = ionic.views.View.inherit({ * @param animate {Boolean} Whether to animate the given change */ scrollBy: function(left, top, animate) { - var self = this; var startLeft = self.__isAnimating ? self.__scheduledLeft : self.__scrollLeft; var startTop = self.__isAnimating ? self.__scheduledTop : self.__scrollTop; self.scrollTo(startLeft + (left || 0), startTop + (top || 0), animate); - }, @@ -1580,19 +1573,17 @@ ionic.views.Scroll = ionic.views.View.inherit({ * Mouse wheel handler for zooming support */ doMouseZoom: function(wheelDelta, timeStamp, pageX, pageY) { - - var self = this; var change = wheelDelta > 0 ? 0.97 : 1.03; - - return self.zoomTo(self.__zoomLevel * change, false, pageX - self.__clientLeft, pageY - self.__clientTop); - + return this.zoomTo(this.__zoomLevel * change, false, pageX - this.__clientLeft, pageY - this.__clientTop); }, /** * Touch start handler for scrolling support */ doTouchStart: function(touches, timeStamp) { - this.hintResize(); + var self = this; + + self.hintResize(); if (timeStamp instanceof Date) { timeStamp = timeStamp.valueOf(); @@ -1601,8 +1592,6 @@ ionic.views.Scroll = ionic.views.View.inherit({ timeStamp = Date.now(); } - var self = this; - // Reset interruptedAnimation flag self.__interruptedAnimation = true; @@ -1751,7 +1740,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ if (self.__enableScrollX) { - scrollLeft -= moveX * this.options.speedMultiplier; + scrollLeft -= moveX * self.options.speedMultiplier; var maxScrollLeft = self.__maxScrollLeft; if (scrollLeft > maxScrollLeft || scrollLeft < 0) { @@ -1759,7 +1748,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ // Slow down on the edges if (self.options.bouncing) { - scrollLeft += (moveX / 2 * this.options.speedMultiplier); + scrollLeft += (moveX / 2 * self.options.speedMultiplier); } else if (scrollLeft > maxScrollLeft) { @@ -1776,7 +1765,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ // Compute new vertical scroll position if (self.__enableScrollY) { - scrollTop -= moveY * this.options.speedMultiplier; + scrollTop -= moveY * self.options.speedMultiplier; var maxScrollTop = self.__maxScrollTop; if (scrollTop > maxScrollTop || scrollTop < 0) { @@ -1784,16 +1773,16 @@ ionic.views.Scroll = ionic.views.View.inherit({ // Slow down on the edges if (self.options.bouncing || (self.__refreshHeight && scrollTop < 0)) { - scrollTop += (moveY / 2 * this.options.speedMultiplier); + scrollTop += (moveY / 2 * self.options.speedMultiplier); // Support pull-to-refresh (only when only y is scrollable) if (!self.__enableScrollX && self.__refreshHeight != null) { // hide the refresher when it's behind the header bar in case of header transparency - if(scrollTop < 0){ + if (scrollTop < 0){ self.__refreshHidden = false; self.__refreshShow(); - }else{ + } else { self.__refreshHide(); self.__refreshHidden = true; } @@ -1824,7 +1813,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ scrollTop = 0; } - }else if(self.__refreshHeight && !self.__refreshHidden){ + } else if (self.__refreshHeight && !self.__refreshHidden){ // if a positive scroll value and the refresher is still not hidden, hide it self.__refreshHide(); self.__refreshHidden = true; @@ -1968,7 +1957,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ self.__refreshStart(); } // for iOS-ey style scrolling - if(!ionic.Platform.isAndroid())self.__startDeceleration(); + if (!ionic.Platform.isAndroid())self.__startDeceleration(); } else { if (self.__interruptedAnimation || self.__isDragging) { @@ -2093,7 +2082,6 @@ ionic.views.Scroll = ionic.views.View.inherit({ * Recomputes scroll minimum values based on client dimensions and content dimensions. */ __computeScrollMax: function(zoomLevel) { - var self = this; if (zoomLevel == null) { @@ -2103,7 +2091,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ self.__maxScrollLeft = Math.max((self.__contentWidth * zoomLevel) - self.__clientWidth, 0); self.__maxScrollTop = Math.max((self.__contentHeight * zoomLevel) - self.__clientHeight, 0); - if(!self.__didWaitForSize && !self.__maxScrollLeft && !self.__maxScrollTop) { + if (!self.__didWaitForSize && !self.__maxScrollLeft && !self.__maxScrollTop) { self.__didWaitForSize = true; self.__waitForSize(); } @@ -2114,7 +2102,6 @@ ionic.views.Scroll = ionic.views.View.inherit({ * If the scroll view isn't sized correctly on start, wait until we have at least some size */ __waitForSize: function() { - var self = this; clearTimeout(self.__sizerTimeout); @@ -2122,9 +2109,9 @@ ionic.views.Scroll = ionic.views.View.inherit({ var sizer = function() { self.resize(); - if((self.options.scrollingX && !self.__maxScrollLeft) || (self.options.scrollingY && !self.__maxScrollTop)) { - //self.__sizerTimeout = setTimeout(sizer, 1000); - } + // if ((self.options.scrollingX && !self.__maxScrollLeft) || (self.options.scrollingY && !self.__maxScrollTop)) { + // //self.__sizerTimeout = setTimeout(sizer, 1000); + // } }; sizer(); @@ -2142,7 +2129,6 @@ ionic.views.Scroll = ionic.views.View.inherit({ * to switch into deceleration mode. */ __startDeceleration: function(timeStamp) { - var self = this; if (self.options.paging) { @@ -2165,7 +2151,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ self.__minDecelerationScrollTop = 0; self.__maxDecelerationScrollLeft = self.__maxScrollLeft; self.__maxDecelerationScrollTop = self.__maxScrollTop; - if(self.__refreshActive) self.__minDecelerationScrollTop = self.__refreshHeight *-1; + if (self.__refreshActive) self.__minDecelerationScrollTop = self.__refreshHeight *-1; } // Wrap class method @@ -2204,7 +2190,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ } // Animate to grid when snapping is active, otherwise just fix out-of-boundary positions - if(self.options.paging) { + if (self.options.paging) { self.scrollTo(self.__scrollLeft, self.__scrollTop, self.options.snapping); } }; @@ -2221,7 +2207,6 @@ ionic.views.Scroll = ionic.views.View.inherit({ * @param inMemory {Boolean} Whether to not render the current step, but keep it in memory only. Used internally only! */ __stepThroughDeceleration: function(render) { - var self = this; @@ -2364,13 +2349,10 @@ ionic.views.Scroll = ionic.views.View.inherit({ * @returns {Number} scale */ __getScale: function getScale(start, end) { - - var self = this; - // need two fingers... - if(start.length >= 2 && end.length >= 2) { - return self.__getDistance(end[0], end[1]) / - self.__getDistance(start[0], start[1]); + if (start.length >= 2 && end.length >= 2) { + return this.__getDistance(end[0], end[1]) / + this.__getDistance(start[0], start[1]); } return 1; }