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 {
height: 100%;
width: 100%;
text-align: center; }
text-align: center;
position: relative; }
.scroll-refreshing {
-webkit-transition: height 0.1s ease-in-out; }

View File

@ -487,6 +487,7 @@ angular.module('ionic.ui.content', [])
replace: true,
template: '<div class="scroll-content"><div class="scroll"></div></div>',
transclude: true,
scope: true,
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
var c = $element.eq(0);
@ -512,7 +513,10 @@ angular.module('ionic.ui.content', [])
} else {
// Otherwise, supercharge this baby!
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
$scope.scrollView = sv;
@ -530,7 +534,6 @@ angular.module('ionic.ui.content', [])
restrict: 'E',
replace: true,
transclude: true,
scope: true,
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';
} else {
this._isRefresherHidden = false;
this._didTriggerRefresh = false;
this._refresher.style.display = 'block';
}
@ -2627,12 +2628,14 @@ window.ionic = {
_this._refresher.classList.add('scroll-refreshing');
//_this._refresher.style.height = firstChildHeight + 'px';
_this._scrollTo(0, _this._refresherHeight, 100, _this.refreshEasing);
_this.onRefresh && _this.onRefresh();
if(!_this._didTriggerRefresh) {
_this.onRefresh && _this.onRefresh();
_this._didTriggerRefresh = true;
}
} else {
_this._refresher.classList.add('scroll-refreshing');
//_this._refresher.style.height = 0 + 'px';
_this._scrollTo(0, 0, _this.refreshEasingTime, _this.refreshEasing);
_this.onRefresh && _this.onRefresh();
}
return;
}

View File

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

View File

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

View File

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

View File

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