From 37c6ac81ac68945d0ccc53651b024d25895ef27d Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 12 Dec 2013 14:26:12 -0600 Subject: [PATCH] Fixed #317 --- dist/css/ionic.css | 1 + dist/css/themes/ionic-ios7.css | 1 + dist/js/ionic-angular.js | 174 +++++++++---------- dist/js/ionic.js | 13 +- js/ext/angular/src/directive/ionicBar.js | 1 - js/ext/angular/src/directive/ionicContent.js | 89 +++++----- js/ext/angular/src/directive/ionicScroll.js | 84 +++++---- js/ext/angular/test/content.html | 2 +- js/ext/angular/test/content_defer.html | 2 +- js/views/scrollView.js | 13 +- test/js/views/scrollView.unit.js | 11 -- 11 files changed, 192 insertions(+), 199 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 909f0b5f74..84bf5ce887 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /*! * Copyright 2013 Drifty Co. * http://drifty.com/ diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css index 23bcd03921..1e5a055c50 100644 --- a/dist/css/themes/ionic-ios7.css +++ b/dist/css/themes/ionic-ios7.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /*! * Copyright 2013 Drifty Co. * http://drifty.com/ diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index f1a3f5157a..070bdda840 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -547,7 +547,6 @@ angular.module('ionic.ui.header', ['ngAnimate']) $scope.$watch('title', function(val) { // Resize the title since the title has changed - console.log('Title changed'); hb.align(); }); } @@ -708,59 +707,56 @@ angular.module('ionic.ui.content', []) // Otherwise, supercharge this baby! - // Add timeout to let content render so Scroller.resize grabs the right content height - $timeout(function() { - sv = new ionic.views.Scroll({ - el: $element[0], - scrollbarX: $scope.$eval($scope.scrollbarX) !== false, - scrollbarY: $scope.$eval($scope.scrollbarY) !== false, - scrollingX: $scope.$eval($scope.hasScrollX) == true, - scrollingY: $scope.$eval($scope.hasScrollY) !== false, - scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20, - scrollingComplete: function() { - $scope.onScrollComplete({ - scrollTop: this.__scrollTop, - scrollLeft: this.__scrollLeft - }); - } - }); - - // Activate pull-to-refresh - if(refresher) { - sv.activatePullToRefresh(50, function() { - refresher.classList.add('active'); - }, function() { - refresher.classList.remove('refreshing'); - refresher.classList.remove('active'); - }, function() { - refresher.classList.add('refreshing'); - $scope.onRefresh(); - $scope.$parent.$broadcast('scroll.onRefresh'); + sv = new ionic.views.Scroll({ + el: $element[0], + scrollbarX: $scope.$eval($scope.scrollbarX) !== false, + scrollbarY: $scope.$eval($scope.scrollbarY) !== false, + scrollingX: $scope.$eval($scope.hasScrollX) == true, + scrollingY: $scope.$eval($scope.hasScrollY) !== false, + scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20, + scrollingComplete: function() { + $scope.onScrollComplete({ + scrollTop: this.__scrollTop, + scrollLeft: this.__scrollLeft }); } + }); - $element.bind('scroll', function(e) { - $scope.onScroll({ - event: e, - scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0, - scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0 - }); + // Activate pull-to-refresh + if(refresher) { + sv.activatePullToRefresh(50, function() { + refresher.classList.add('active'); + }, function() { + refresher.classList.remove('refreshing'); + refresher.classList.remove('active'); + }, function() { + refresher.classList.add('refreshing'); + $scope.onRefresh(); + $scope.$parent.$broadcast('scroll.onRefresh'); }); + } - $scope.$parent.$on('scroll.resize', function(e) { - // Run the resize after this digest - $timeout(function() { - sv && sv.resize(); - }) + $element.bind('scroll', function(e) { + $scope.onScroll({ + event: e, + scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0, + scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0 }); + }); - $scope.$parent.$on('scroll.refreshComplete', function(e) { - sv && sv.finishPullToRefresh(); - }); - - // Let child scopes access this - $scope.$parent.scrollView = sv; - }, 500); + $scope.$parent.$on('scroll.resize', function(e) { + // Run the resize after this digest + $timeout(function() { + sv && sv.resize(); + }) + }); + + $scope.$parent.$on('scroll.refreshComplete', function(e) { + sv && sv.finishPullToRefresh(); + }); + + // Let child scopes access this + $scope.$parent.scrollView = sv; @@ -1628,56 +1624,52 @@ angular.module('ionic.ui.scroll', []) } - // Otherwise, supercharge this baby! - // Add timeout to let content render so Scroller.resize grabs the right content height - $timeout(function() { - var hasScrollingX = $scope.direction.indexOf('x') >= 0; - var hasScrollingY = $scope.direction.indexOf('y') >= 0; + var hasScrollingX = $scope.direction.indexOf('x') >= 0; + var hasScrollingY = $scope.direction.indexOf('y') >= 0; - sv = new ionic.views.Scroll({ - el: $element[0], - scrollbarX: $scope.$eval($scope.scrollbarX) !== false, - scrollbarY: $scope.$eval($scope.scrollbarY) !== false, - scrollingX: hasScrollingX, - scrollingY: hasScrollingY + sv = new ionic.views.Scroll({ + el: $element[0], + scrollbarX: $scope.$eval($scope.scrollbarX) !== false, + scrollbarY: $scope.$eval($scope.scrollbarY) !== false, + scrollingX: hasScrollingX, + scrollingY: hasScrollingY + }); + + // Activate pull-to-refresh + if(refresher) { + sv.activatePullToRefresh(refresherHeight, function() { + refresher.classList.add('active'); + }, function() { + refresher.classList.remove('refreshing'); + refresher.classList.remove('active'); + }, function() { + refresher.classList.add('refreshing'); + $scope.onRefresh(); + $scope.$parent.$broadcast('scroll.onRefresh'); }); + } - // Activate pull-to-refresh - if(refresher) { - sv.activatePullToRefresh(refresherHeight, function() { - refresher.classList.add('active'); - }, function() { - refresher.classList.remove('refreshing'); - refresher.classList.remove('active'); - }, function() { - refresher.classList.add('refreshing'); - $scope.onRefresh(); - $scope.$parent.$broadcast('scroll.onRefresh'); - }); - } - - $element.bind('scroll', function(e) { - $scope.onScroll({ - event: e, - scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0, - scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0 - }); + $element.bind('scroll', function(e) { + $scope.onScroll({ + event: e, + scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0, + scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0 }); + }); - $scope.$parent.$on('scroll.resize', function(e) { - // Run the resize after this digest - $timeout(function() { - sv && sv.resize(); - }) - }); + $scope.$parent.$on('scroll.resize', function(e) { + // Run the resize after this digest + $timeout(function() { + sv && sv.resize(); + }) + }); - $scope.$parent.$on('scroll.refreshComplete', function(e) { - sv && sv.finishPullToRefresh(); - }); - - // Let child scopes access this - $scope.$parent.scrollView = sv; - }, 500); + $scope.$parent.$on('scroll.refreshComplete', function(e) { + sv && sv.finishPullToRefresh(); + }); + + // Let child scopes access this + $scope.$parent.scrollView = sv; }; } }; diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 3dc7355ddb..7d97d5584f 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -2639,10 +2639,12 @@ ionic.views.Scroll = ionic.views.View.inherit({ if ('ontouchstart' in window) { container.addEventListener("touchstart", function(e) { + console.log('TOUCHSTART'); // Don't react if initial down happens on a form element if (e.target.tagName.match(/input|textarea|select/i)) { return; } + self.doTouchStart(e.touches, e.timeStamp); e.preventDefault(); @@ -2759,6 +2761,9 @@ ionic.views.Scroll = ionic.views.View.inherit({ // Update horiz bar if(self.__indicatorX) { var width = Math.max(Math.round(self.__clientWidth * self.__clientWidth / (self.__contentWidth)), 20); + if(width > self.__contentWidth) { + width = 0; + } self.__indicatorX.size = width; self.__indicatorX.minScale = this.options.minScrollbarSizeX / width; self.__indicatorX.indicator.style.width = width + 'px'; @@ -2769,6 +2774,9 @@ ionic.views.Scroll = ionic.views.View.inherit({ // Update vert bar if(self.__indicatorY) { var height = Math.max(Math.round(self.__clientHeight * self.__clientHeight / (self.__contentHeight)), 20); + if(height > self.__contentHeight) { + height = 0; + } self.__indicatorY.size = height; self.__indicatorY.minScale = this.options.minScrollbarSizeY / height; self.__indicatorY.maxPos = self.__clientHeight - height; @@ -3864,8 +3872,9 @@ ionic.views.Scroll = ionic.views.View.inherit({ clearTimeout(self.__sizerTimeout); self.__sizerTimeout = setTimeout(function sizer() { self.resize(); - if(self.__maxScrollLeft == 0 && self.__maxScrollTop == 0) { - self.__sizerTimeout = setTimeout(sizer, 1000); + + if((self.options.scrollingX && self.__maxScrollLeft == 0) || (self.options.scrollingY && self.__maxScrollTop == 0)) { + //self.__sizerTimeout = setTimeout(sizer, 1000); } }, 1000); diff --git a/js/ext/angular/src/directive/ionicBar.js b/js/ext/angular/src/directive/ionicBar.js index 928561976c..f9b456cb0e 100644 --- a/js/ext/angular/src/directive/ionicBar.js +++ b/js/ext/angular/src/directive/ionicBar.js @@ -51,7 +51,6 @@ angular.module('ionic.ui.header', ['ngAnimate']) $scope.$watch('title', function(val) { // Resize the title since the title has changed - console.log('Title changed'); hb.align(); }); } diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index 2af52e4826..255c6d8a7c 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -84,59 +84,56 @@ angular.module('ionic.ui.content', []) // Otherwise, supercharge this baby! - // Add timeout to let content render so Scroller.resize grabs the right content height - $timeout(function() { - sv = new ionic.views.Scroll({ - el: $element[0], - scrollbarX: $scope.$eval($scope.scrollbarX) !== false, - scrollbarY: $scope.$eval($scope.scrollbarY) !== false, - scrollingX: $scope.$eval($scope.hasScrollX) == true, - scrollingY: $scope.$eval($scope.hasScrollY) !== false, - scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20, - scrollingComplete: function() { - $scope.onScrollComplete({ - scrollTop: this.__scrollTop, - scrollLeft: this.__scrollLeft - }); - } - }); - - // Activate pull-to-refresh - if(refresher) { - sv.activatePullToRefresh(50, function() { - refresher.classList.add('active'); - }, function() { - refresher.classList.remove('refreshing'); - refresher.classList.remove('active'); - }, function() { - refresher.classList.add('refreshing'); - $scope.onRefresh(); - $scope.$parent.$broadcast('scroll.onRefresh'); + sv = new ionic.views.Scroll({ + el: $element[0], + scrollbarX: $scope.$eval($scope.scrollbarX) !== false, + scrollbarY: $scope.$eval($scope.scrollbarY) !== false, + scrollingX: $scope.$eval($scope.hasScrollX) == true, + scrollingY: $scope.$eval($scope.hasScrollY) !== false, + scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20, + scrollingComplete: function() { + $scope.onScrollComplete({ + scrollTop: this.__scrollTop, + scrollLeft: this.__scrollLeft }); } + }); - $element.bind('scroll', function(e) { - $scope.onScroll({ - event: e, - scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0, - scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0 - }); + // Activate pull-to-refresh + if(refresher) { + sv.activatePullToRefresh(50, function() { + refresher.classList.add('active'); + }, function() { + refresher.classList.remove('refreshing'); + refresher.classList.remove('active'); + }, function() { + refresher.classList.add('refreshing'); + $scope.onRefresh(); + $scope.$parent.$broadcast('scroll.onRefresh'); }); + } - $scope.$parent.$on('scroll.resize', function(e) { - // Run the resize after this digest - $timeout(function() { - sv && sv.resize(); - }) + $element.bind('scroll', function(e) { + $scope.onScroll({ + event: e, + scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0, + scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0 }); + }); - $scope.$parent.$on('scroll.refreshComplete', function(e) { - sv && sv.finishPullToRefresh(); - }); - - // Let child scopes access this - $scope.$parent.scrollView = sv; - }, 500); + $scope.$parent.$on('scroll.resize', function(e) { + // Run the resize after this digest + $timeout(function() { + sv && sv.resize(); + }) + }); + + $scope.$parent.$on('scroll.refreshComplete', function(e) { + sv && sv.finishPullToRefresh(); + }); + + // Let child scopes access this + $scope.$parent.scrollView = sv; diff --git a/js/ext/angular/src/directive/ionicScroll.js b/js/ext/angular/src/directive/ionicScroll.js index b2c2d8f067..0438e6f04d 100644 --- a/js/ext/angular/src/directive/ionicScroll.js +++ b/js/ext/angular/src/directive/ionicScroll.js @@ -48,56 +48,52 @@ angular.module('ionic.ui.scroll', []) } - // Otherwise, supercharge this baby! - // Add timeout to let content render so Scroller.resize grabs the right content height - $timeout(function() { - var hasScrollingX = $scope.direction.indexOf('x') >= 0; - var hasScrollingY = $scope.direction.indexOf('y') >= 0; + var hasScrollingX = $scope.direction.indexOf('x') >= 0; + var hasScrollingY = $scope.direction.indexOf('y') >= 0; - sv = new ionic.views.Scroll({ - el: $element[0], - scrollbarX: $scope.$eval($scope.scrollbarX) !== false, - scrollbarY: $scope.$eval($scope.scrollbarY) !== false, - scrollingX: hasScrollingX, - scrollingY: hasScrollingY + sv = new ionic.views.Scroll({ + el: $element[0], + scrollbarX: $scope.$eval($scope.scrollbarX) !== false, + scrollbarY: $scope.$eval($scope.scrollbarY) !== false, + scrollingX: hasScrollingX, + scrollingY: hasScrollingY + }); + + // Activate pull-to-refresh + if(refresher) { + sv.activatePullToRefresh(refresherHeight, function() { + refresher.classList.add('active'); + }, function() { + refresher.classList.remove('refreshing'); + refresher.classList.remove('active'); + }, function() { + refresher.classList.add('refreshing'); + $scope.onRefresh(); + $scope.$parent.$broadcast('scroll.onRefresh'); }); + } - // Activate pull-to-refresh - if(refresher) { - sv.activatePullToRefresh(refresherHeight, function() { - refresher.classList.add('active'); - }, function() { - refresher.classList.remove('refreshing'); - refresher.classList.remove('active'); - }, function() { - refresher.classList.add('refreshing'); - $scope.onRefresh(); - $scope.$parent.$broadcast('scroll.onRefresh'); - }); - } - - $element.bind('scroll', function(e) { - $scope.onScroll({ - event: e, - scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0, - scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0 - }); + $element.bind('scroll', function(e) { + $scope.onScroll({ + event: e, + scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0, + scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0 }); + }); - $scope.$parent.$on('scroll.resize', function(e) { - // Run the resize after this digest - $timeout(function() { - sv && sv.resize(); - }) - }); + $scope.$parent.$on('scroll.resize', function(e) { + // Run the resize after this digest + $timeout(function() { + sv && sv.resize(); + }) + }); - $scope.$parent.$on('scroll.refreshComplete', function(e) { - sv && sv.finishPullToRefresh(); - }); - - // Let child scopes access this - $scope.$parent.scrollView = sv; - }, 500); + $scope.$parent.$on('scroll.refreshComplete', function(e) { + sv && sv.finishPullToRefresh(); + }); + + // Let child scopes access this + $scope.$parent.scrollView = sv; }; } }; diff --git a/js/ext/angular/test/content.html b/js/ext/angular/test/content.html index 2778614bf5..454384d04d 100644 --- a/js/ext/angular/test/content.html +++ b/js/ext/angular/test/content.html @@ -132,7 +132,7 @@ .controller('AppCtrl', function($scope, $compile, $timeout, $element) { $scope.items = []; - for(var i = 0; i < 70; i++) { + for(var i = 0; i < 10; i++) { $scope.items.push({ }); } diff --git a/js/ext/angular/test/content_defer.html b/js/ext/angular/test/content_defer.html index fede62bd27..aa23217d68 100644 --- a/js/ext/angular/test/content_defer.html +++ b/js/ext/angular/test/content_defer.html @@ -62,7 +62,6 @@ return { link: function($scope, $element, $attr) { var startTop = $element[0].offsetTop; - console.log("Starting", startTop); } } }) @@ -79,6 +78,7 @@ $scope.items.push({ }); } + $scope.$broadcast('scroll.resize'); }, 2000); $timeout(function() { for(var i = 0; i < 70; i++) { diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 72366ebc1f..ec9ed1003c 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -572,10 +572,12 @@ ionic.views.Scroll = ionic.views.View.inherit({ if ('ontouchstart' in window) { container.addEventListener("touchstart", function(e) { + console.log('TOUCHSTART'); // Don't react if initial down happens on a form element if (e.target.tagName.match(/input|textarea|select/i)) { return; } + self.doTouchStart(e.touches, e.timeStamp); e.preventDefault(); @@ -692,6 +694,9 @@ ionic.views.Scroll = ionic.views.View.inherit({ // Update horiz bar if(self.__indicatorX) { var width = Math.max(Math.round(self.__clientWidth * self.__clientWidth / (self.__contentWidth)), 20); + if(width > self.__contentWidth) { + width = 0; + } self.__indicatorX.size = width; self.__indicatorX.minScale = this.options.minScrollbarSizeX / width; self.__indicatorX.indicator.style.width = width + 'px'; @@ -702,6 +707,9 @@ ionic.views.Scroll = ionic.views.View.inherit({ // Update vert bar if(self.__indicatorY) { var height = Math.max(Math.round(self.__clientHeight * self.__clientHeight / (self.__contentHeight)), 20); + if(height > self.__contentHeight) { + height = 0; + } self.__indicatorY.size = height; self.__indicatorY.minScale = this.options.minScrollbarSizeY / height; self.__indicatorY.maxPos = self.__clientHeight - height; @@ -1797,8 +1805,9 @@ ionic.views.Scroll = ionic.views.View.inherit({ clearTimeout(self.__sizerTimeout); self.__sizerTimeout = setTimeout(function sizer() { self.resize(); - if(self.__maxScrollLeft == 0 && self.__maxScrollTop == 0) { - self.__sizerTimeout = setTimeout(sizer, 1000); + + if((self.options.scrollingX && self.__maxScrollLeft == 0) || (self.options.scrollingY && self.__maxScrollTop == 0)) { + //self.__sizerTimeout = setTimeout(sizer, 1000); } }, 1000); diff --git a/test/js/views/scrollView.unit.js b/test/js/views/scrollView.unit.js index 30f5d1b45a..353b1fe227 100644 --- a/test/js/views/scrollView.unit.js +++ b/test/js/views/scrollView.unit.js @@ -34,15 +34,4 @@ describe('Scroll View', function() { expect(sc.children[1].classList.contains('scroll-bar')).toBe(true); expect(sc.children[2].classList.contains('scroll-bar')).toBe(true); }); - - it('Should fade out scrollbars', function() { - var sv = new ionic.views.Scroll({ - el: sc, - scrollbarsX: true, - scrollingX: true, - scrollbarsY: true, - scrollingY: true, - }); - - }); });