javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Working on custom refresher

Browse Source
This commit is contained in:
Max Lynch
2013-11-11 17:37:32 -06:00
parent 53862a434c
commit fa315677c6
5 changed files with 77 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
dist/css/ionic.css vendored
View File

@ -2327,6 +2327,22 @@ body, .ionic-body {
text-align: center;
position: relative; }
.ionic-refresher-content {
height: 100%;
width: 100%;
text-align: center;
position: relative; }
.ionic-refresher {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #4a87ee;
position: absolute;
left: 50%;
margin-left: -5px;
bottom: 15px; }
.scroll-refreshing {
-webkit-transition: height 0.1s ease-in-out; }

24
dist/js/ionic-angular.js vendored
View File

@ -548,11 +548,29 @@ angular.module('ionic.ui.content', [])
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
require: ['^?content', '^?list'],
template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
scope: true,
link: function($scope, $element, $attr, scrollCtrl) {
$scope.$on('onRefresh', function() {
});
$scope.$on('onRefreshOpening', function(amt) {
console.log('On refresh opening', amt);
});
}
}
})
.directive('scroll-refresher', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="scroll-refresher"><div class="scroll-refresher-content"></div></div>'
}
});
})();
;
(function() {
@ -667,9 +685,11 @@ angular.module('ionic.ui.list', ['ngAnimate'])
hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'),
onRefresh: function() {
$scope.onRefresh();
$scope.$broadcast('onRefresh');
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
$scope.$broadcast('onRefreshOpening', amt);
}
});

22
js/ext/angular/src/directive/ionicContent.js vendored
View File

@ -76,9 +76,27 @@ angular.module('ionic.ui.content', [])
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
require: ['^?content', '^?list'],
template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
scope: true,
link: function($scope, $element, $attr, scrollCtrl) {
$scope.$on('onRefresh', function() {
});
$scope.$on('onRefreshOpening', function(amt) {
console.log('On refresh opening', amt);
});
}
}
})
.directive('scroll-refresher', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="scroll-refresher"><div class="scroll-refresher-content"></div></div>'
}
});
})();

2
js/ext/angular/src/directive/ionicList.js vendored
View File

@ -110,9 +110,11 @@ angular.module('ionic.ui.list', ['ngAnimate'])
hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'),
onRefresh: function() {
$scope.onRefresh();
$scope.$broadcast('onRefresh');
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening({amount: amt});
$scope.$broadcast('onRefreshOpening', amt);
}
});

17
scss/_scaffolding.scss
View File

@ -122,6 +122,23 @@ body, .ionic-body {
//@include display-flex();
//@include align-items(center);
}
.ionic-refresher-content {
height: 100%;
width: 100%;
text-align: center;
position: relative;
}
.ionic-refresher {
// A custom refresher
width: 10px;
height: 10px;
border-radius: 50%;
background-color: $brand-primary;
position: absolute;
left: 50%;
margin-left: -5px;
bottom: 15px;
}
.scroll-refreshing {
-webkit-transition: height 0.1s ease-in-out;
}