javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(scrollView): only update DOM on changes

Browse Source 
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.
This commit is contained in:
Adam Bradley
2014-10-09 20:11:48 -05:00
parent 2d9f5fd439
commit 6385452303
1 changed files with 148 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
js/views/scrollView.js
View File

@@ -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;
}