Refresh and refresh callback on content directive

This commit is contained in:
Max Lynch
2013-11-08 15:32:50 -06:00
parent 7725a5e7f2
commit 8a7db90aaf
7 changed files with 34 additions and 12 deletions

3
dist/css/ionic.css vendored
View File

@ -2324,7 +2324,8 @@ body, .ionic-body {
.scroll-refresher-content { .scroll-refresher-content {
height: 100%; height: 100%;
width: 100%; width: 100%;
text-align: center; } text-align: center;
position: relative; }
.scroll-refreshing { .scroll-refreshing {
-webkit-transition: height 0.1s ease-in-out; } -webkit-transition: height 0.1s ease-in-out; }

View File

@ -487,6 +487,7 @@ angular.module('ionic.ui.content', [])
replace: true, replace: true,
template: '<div class="scroll-content"><div class="scroll"></div></div>', template: '<div class="scroll-content"><div class="scroll"></div></div>',
transclude: true, transclude: true,
scope: true,
compile: function(element, attr, transclude) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr) { return function($scope, $element, $attr) {
var c = $element.eq(0); var c = $element.eq(0);
@ -512,7 +513,10 @@ angular.module('ionic.ui.content', [])
} else { } else {
// Otherwise, supercharge this baby! // Otherwise, supercharge this baby!
var sv = new ionic.views.Scroll({ var sv = new ionic.views.Scroll({
el: $element[0].firstElementChild el: $element[0].firstElementChild,
onRefresh: function() {
$scope.onRefresh && $scope.onRefresh();
}
}); });
// Let child scopes access this // Let child scopes access this
$scope.scrollView = sv; $scope.scrollView = sv;
@ -530,7 +534,6 @@ angular.module('ionic.ui.content', [])
restrict: 'E', restrict: 'E',
replace: true, replace: true,
transclude: true, transclude: true,
scope: true,
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>' template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
} }
}) })

7
dist/js/ionic.js vendored
View File

@ -2419,6 +2419,7 @@ window.ionic = {
this._refresher.style.display = 'none'; this._refresher.style.display = 'none';
} else { } else {
this._isRefresherHidden = false; this._isRefresherHidden = false;
this._didTriggerRefresh = false;
this._refresher.style.display = 'block'; this._refresher.style.display = 'block';
} }
@ -2627,12 +2628,14 @@ window.ionic = {
_this._refresher.classList.add('scroll-refreshing'); _this._refresher.classList.add('scroll-refreshing');
//_this._refresher.style.height = firstChildHeight + 'px'; //_this._refresher.style.height = firstChildHeight + 'px';
_this._scrollTo(0, _this._refresherHeight, 100, _this.refreshEasing); _this._scrollTo(0, _this._refresherHeight, 100, _this.refreshEasing);
_this.onRefresh && _this.onRefresh(); if(!_this._didTriggerRefresh) {
_this.onRefresh && _this.onRefresh();
_this._didTriggerRefresh = true;
}
} else { } else {
_this._refresher.classList.add('scroll-refreshing'); _this._refresher.classList.add('scroll-refreshing');
//_this._refresher.style.height = 0 + 'px'; //_this._refresher.style.height = 0 + 'px';
_this._scrollTo(0, 0, _this.refreshEasingTime, _this.refreshEasing); _this._scrollTo(0, 0, _this.refreshEasingTime, _this.refreshEasing);
_this.onRefresh && _this.onRefresh();
} }
return; return;
} }

View File

@ -20,6 +20,7 @@ angular.module('ionic.ui.content', [])
replace: true, replace: true,
template: '<div class="scroll-content"><div class="scroll"></div></div>', template: '<div class="scroll-content"><div class="scroll"></div></div>',
transclude: true, transclude: true,
scope: true,
compile: function(element, attr, transclude) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr) { return function($scope, $element, $attr) {
var c = $element.eq(0); var c = $element.eq(0);
@ -45,7 +46,10 @@ angular.module('ionic.ui.content', [])
} else { } else {
// Otherwise, supercharge this baby! // Otherwise, supercharge this baby!
var sv = new ionic.views.Scroll({ var sv = new ionic.views.Scroll({
el: $element[0].firstElementChild el: $element[0].firstElementChild,
onRefresh: function() {
$scope.onRefresh && $scope.onRefresh();
}
}); });
// Let child scopes access this // Let child scopes access this
$scope.scrollView = sv; $scope.scrollView = sv;
@ -63,7 +67,6 @@ angular.module('ionic.ui.content', [])
restrict: 'E', restrict: 'E',
replace: true, replace: true,
transclude: true, transclude: true,
scope: true,
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>' template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
} }
}) })

View File

@ -42,7 +42,10 @@
#refresh-content { #refresh-content {
color: #999; color: #999;
text-align: center; text-align: center;
font-size: 20px; font-size: 48px;
position: absolute;
bottom: 10px;
width: 100%;
} }
</style> </style>
@ -52,9 +55,11 @@
<header class="bar bar-header bar-success"> <header class="bar bar-header bar-success">
<button class="button"><i class="icon ion-home"></i></button> <button class="button"><i class="icon ion-home"></i></button>
</header> </header>
<content has-header="true" ng-controller="AppCtrl" class="reveal-animation"> <content on-refresh="onRefresh()" has-header="true" ng-controller="AppCtrl" class="reveal-animation">
<refresher> <refresher>
Refreshing <div id="refresh-content">
<i class="icon ion-ios7-reloading"></i>
</div>
</refresher> </refresher>
<ul class="list"> <ul class="list">
<li class="list-item" ng-repeat="item in items">asdf{{$index}}</li> <li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
@ -73,6 +78,9 @@
}); });
} }
$scope.what = {}; $scope.what = {};
$scope.onRefresh = function() {
console.log('On refresh');
}
}) })
</script> </script>
</body> </body>

View File

@ -510,6 +510,7 @@
this._refresher.style.display = 'none'; this._refresher.style.display = 'none';
} else { } else {
this._isRefresherHidden = false; this._isRefresherHidden = false;
this._didTriggerRefresh = false;
this._refresher.style.display = 'block'; this._refresher.style.display = 'block';
} }
@ -718,12 +719,14 @@
_this._refresher.classList.add('scroll-refreshing'); _this._refresher.classList.add('scroll-refreshing');
//_this._refresher.style.height = firstChildHeight + 'px'; //_this._refresher.style.height = firstChildHeight + 'px';
_this._scrollTo(0, _this._refresherHeight, 100, _this.refreshEasing); _this._scrollTo(0, _this._refresherHeight, 100, _this.refreshEasing);
_this.onRefresh && _this.onRefresh(); if(!_this._didTriggerRefresh) {
_this.onRefresh && _this.onRefresh();
_this._didTriggerRefresh = true;
}
} else { } else {
_this._refresher.classList.add('scroll-refreshing'); _this._refresher.classList.add('scroll-refreshing');
//_this._refresher.style.height = 0 + 'px'; //_this._refresher.style.height = 0 + 'px';
_this._scrollTo(0, 0, _this.refreshEasingTime, _this.refreshEasing); _this._scrollTo(0, 0, _this.refreshEasingTime, _this.refreshEasing);
_this.onRefresh && _this.onRefresh();
} }
return; return;
} }

View File

@ -118,6 +118,7 @@ body, .ionic-body {
height: 100%; height: 100%;
width: 100%; width: 100%;
text-align: center; text-align: center;
position: relative;
//@include display-flex(); //@include display-flex();
//@include align-items(center); //@include align-items(center);
} }