From c96a46a0d7bcff860c36a073c0926ff4cc77f518 Mon Sep 17 00:00:00 2001 From: Travis Russi Date: Sat, 30 Nov 2013 16:24:20 -0800 Subject: [PATCH 1/4] fixed resize issue for scrolling --- js/ext/angular/src/directive/ionicContent.js | 40 +++++++++++--------- js/views/scrollZyng.js | 3 +- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index fb0db2b440..384c4d8880 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -18,7 +18,7 @@ angular.module('ionic.ui.content', []) // The content directive is a core scrollable content area // that is part of many View hierarchies -.directive('content', ['$parse', function($parse) { +.directive('content', ['$parse', '$timeout', function($parse, $timeout) { return { restrict: 'E', replace: true, @@ -62,24 +62,28 @@ angular.module('ionic.ui.content', []) addedPadding = true; } $element.append(sc); + // Otherwise, supercharge this baby! - sv = new ionic.views.Scroller({ - el: $element[0] - }); - /* - hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'), - onRefresh: function() { - $scope.onRefresh(); - $scope.$parent.$broadcast('scroll.onRefresh'); - }, - onRefreshOpening: function(amt) { - $scope.onRefreshOpening({amount: amt}); - $scope.$parent.$broadcast('scroll.onRefreshOpening', amt); - } - }); - */ - // Let child scopes access this - $scope.$parent.scrollView = sv; + // Add timeout to let content render so Scroller.resize grabs the right content height + $timeout(function() { + sv = new ionic.views.Scroller({ + el: $element[0] + }); + /* + hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'), + onRefresh: function() { + $scope.onRefresh(); + $scope.$parent.$broadcast('scroll.onRefresh'); + }, + onRefreshOpening: function(amt) { + $scope.onRefreshOpening({amount: amt}); + $scope.$parent.$broadcast('scroll.onRefreshOpening', amt); + } + }); + */ + // Let child scopes access this + $scope.$parent.scrollView = sv; + }, 100); // Pass the parent scope down to the child clone = transclude($scope.$parent); diff --git a/js/views/scrollZyng.js b/js/views/scrollZyng.js index e9567c59ea..ecaaaf5c6f 100644 --- a/js/views/scrollZyng.js +++ b/js/views/scrollZyng.js @@ -582,7 +582,8 @@ var Scroller; resize: function() { // Update Scroller dimensions for changed content - this.setDimensions(this.__container.clientWidth, this.__container.clientHeight, this.__content.offsetWidth, this.__content.offsetHeight-50); + // Add padding to bottom of content + this.setDimensions(this.__container.clientWidth, this.__container.clientHeight, this.__content.offsetWidth, this.__content.offsetHeight+50); }, /* --------------------------------------------------------------------------- From 1fd7be878507ae5390e0236003cb9f63cf7fa928 Mon Sep 17 00:00:00 2001 From: Travis Russi Date: Sat, 30 Nov 2013 16:57:56 -0800 Subject: [PATCH 2/4] added Math.min in case the parent is smaller --- js/ext/angular/src/directive/ionicContent.js | 9 +++++---- js/views/scrollZyng.js | 6 +++++- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index 384c4d8880..a93a4f2aca 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -62,7 +62,11 @@ angular.module('ionic.ui.content', []) addedPadding = true; } $element.append(sc); - + + // Pass the parent scope down to the child + clone = transclude($scope.$parent); + angular.element($element[0].firstElementChild).append(clone); + // Otherwise, supercharge this baby! // Add timeout to let content render so Scroller.resize grabs the right content height $timeout(function() { @@ -85,9 +89,6 @@ angular.module('ionic.ui.content', []) $scope.$parent.scrollView = sv; }, 100); - // Pass the parent scope down to the child - clone = transclude($scope.$parent); - angular.element($element[0].firstElementChild).append(clone); } // if padding attribute is true, then add padding if it wasn't added to the .scroll diff --git a/js/views/scrollZyng.js b/js/views/scrollZyng.js index ecaaaf5c6f..680795b547 100644 --- a/js/views/scrollZyng.js +++ b/js/views/scrollZyng.js @@ -583,7 +583,11 @@ var Scroller; resize: function() { // Update Scroller dimensions for changed content // Add padding to bottom of content - this.setDimensions(this.__container.clientWidth, this.__container.clientHeight, this.__content.offsetWidth, this.__content.offsetHeight+50); + this.setDimensions( + Math.min(this.__container.clientWidth, this.__container.parentElement.clientWidth), + Math.min(this.__container.clientHeight, this.__container.parentElement.clientHeight), + this.__content.offsetWidth, + this.__content.offsetHeight+50); }, /* --------------------------------------------------------------------------- From 2485b4a597a8f0f00ce623896ef8f8cf2a7bb843 Mon Sep 17 00:00:00 2001 From: Travis Russi Date: Sat, 30 Nov 2013 17:30:50 -0800 Subject: [PATCH 3/4] added watch to element height and extended timeout to 500ms --- js/ext/angular/src/directive/ionicContent.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index a93a4f2aca..3de74f1331 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -70,6 +70,20 @@ 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() { + + // Add watch to the container element's height to fire Scroller.resize event + $scope.$watch + ( + function () { + return typeof($element) !== "undefined" && $element.length > 0 && $element[0].clientHeight > 0 ? $element[0].clientHeight : 0; + }, + function (newValue, oldValue) { + if (newValue != oldValue && $scope.$parent && $scope.$parent.scrollView && $scope.$parent.scrollView.resize) { + $scope.$parent.scrollView.resize(); + } + } + ); + sv = new ionic.views.Scroller({ el: $element[0] }); @@ -87,7 +101,9 @@ angular.module('ionic.ui.content', []) */ // Let child scopes access this $scope.$parent.scrollView = sv; - }, 100); + }, 500); + + } From ebdc712e7d50200de7c0575df5681157ddb32240 Mon Sep 17 00:00:00 2001 From: Travis Russi Date: Sat, 30 Nov 2013 17:34:10 -0800 Subject: [PATCH 4/4] commented out the element height watch; hard-coded timeout seems to work fine --- js/ext/angular/src/directive/ionicContent.js | 22 ++++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index 3de74f1331..0101ebc36d 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -72,17 +72,17 @@ angular.module('ionic.ui.content', []) $timeout(function() { // Add watch to the container element's height to fire Scroller.resize event - $scope.$watch - ( - function () { - return typeof($element) !== "undefined" && $element.length > 0 && $element[0].clientHeight > 0 ? $element[0].clientHeight : 0; - }, - function (newValue, oldValue) { - if (newValue != oldValue && $scope.$parent && $scope.$parent.scrollView && $scope.$parent.scrollView.resize) { - $scope.$parent.scrollView.resize(); - } - } - ); + // $scope.$watch + // ( + // function () { + // return typeof($element) !== "undefined" && $element.length > 0 && $element[0].clientHeight > 0 ? $element[0].clientHeight : 0; + // }, + // function (newValue, oldValue) { + // if (newValue != oldValue && $scope.$parent && $scope.$parent.scrollView && $scope.$parent.scrollView.resize) { + // $scope.$parent.scrollView.resize(); + // } + // } + // ); sv = new ionic.views.Scroller({ el: $element[0]