Fixed #56 - pull to drag

This commit is contained in:
Max Lynch
2013-11-08 16:58:14 -06:00
parent 7c4a37e56a
commit d082c0c148
6 changed files with 63 additions and 49 deletions

View File

@ -481,13 +481,16 @@ angular.module('ionic.ui.content', [])
// The content directive is a core scrollable content area
// that is part of many View hierarchies
.directive('content', function() {
.directive('content', ['$parse', function($parse) {
return {
restrict: 'E',
replace: true,
template: '<div class="scroll-content"><div class="scroll"></div></div>',
transclude: true,
scope: true,
scope: {
onRefresh: '&',
onRefreshOpening: '&'
},
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
var c = $element.eq(0);
@ -506,7 +509,6 @@ angular.module('ionic.ui.content', [])
c.addClass('has-tabs');
}
// If they want plain overflows scrolling, add that as a class
if(attr.overflowScroll === "true") {
c.addClass('overflow-scroll');
@ -514,23 +516,25 @@ angular.module('ionic.ui.content', [])
// Otherwise, supercharge this baby!
var sv = new ionic.views.Scroll({
el: $element[0].firstElementChild,
hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'),
onRefresh: function() {
$scope.onRefresh && $scope.onRefresh();
$scope.onRefresh();
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening && $scope.onRefreshOpening({amount: amt});
$scope.onRefreshOpening({amount: amt});
}
});
// Let child scopes access this
$scope.scrollView = sv;
}
var clone = transclude($scope);
// Pass the parent scope down to the child
var clone = transclude($scope.$parent);
angular.element($element[0].firstElementChild).append(clone);
};
}
};
})
}])
.directive('refresher', function() {
return {

3
dist/js/ionic.js vendored
View File

@ -2414,6 +2414,8 @@ window.ionic = {
// Grab the refresher element if using Pull to Refresh
if(this.hasPullToRefresh) {
this._refresher = document.querySelector('.scroll-refresher');
if(this._refresher) {
this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
// We always start the refresher hidden
if(this.y < 0) {
@ -2431,6 +2433,7 @@ window.ionic = {
this._refresher.classList.remove('scroll-refreshing');
}
}
}
this._drag = {
direction: 'v',

View File

@ -14,13 +14,16 @@ angular.module('ionic.ui.content', [])
// The content directive is a core scrollable content area
// that is part of many View hierarchies
.directive('content', function() {
.directive('content', ['$parse', function($parse) {
return {
restrict: 'E',
replace: true,
template: '<div class="scroll-content"><div class="scroll"></div></div>',
transclude: true,
scope: true,
scope: {
onRefresh: '&',
onRefreshOpening: '&'
},
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
var c = $element.eq(0);
@ -39,7 +42,6 @@ angular.module('ionic.ui.content', [])
c.addClass('has-tabs');
}
// If they want plain overflows scrolling, add that as a class
if(attr.overflowScroll === "true") {
c.addClass('overflow-scroll');
@ -47,23 +49,25 @@ angular.module('ionic.ui.content', [])
// Otherwise, supercharge this baby!
var sv = new ionic.views.Scroll({
el: $element[0].firstElementChild,
hasPullToRefresh: (typeof $scope.onRefresh !== 'undefined'),
onRefresh: function() {
$scope.onRefresh && $scope.onRefresh();
$scope.onRefresh();
},
onRefreshOpening: function(amt) {
$scope.onRefreshOpening && $scope.onRefreshOpening({amount: amt});
$scope.onRefreshOpening({amount: amt});
}
});
// Let child scopes access this
$scope.scrollView = sv;
}
var clone = transclude($scope);
// Pass the parent scope down to the child
var clone = transclude($scope.$parent);
angular.element($element[0].firstElementChild).append(clone);
};
}
};
})
}])
.directive('refresher', function() {
return {

View File

@ -7,9 +7,9 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
<style>
.reveal-animation {
/*
@ -50,12 +50,12 @@
</style>
</head>
<body>
<body ng-controller="AppCtrl">
<header class="bar bar-header bar-success">
<button class="button"><i class="icon ion-home"></i></button>
</header>
<content on-refresh="onRefresh()" on-refresh-opening="onRefreshOpening(amount)" has-header="true" ng-controller="AppCtrl" class="reveal-animation">
<content on-refresh="onRefresh()" on-refresh-opening="onRefreshOpening(amount)" has-header="true" class="reveal-animation">
<refresher>
<div id="refresh-content">
<i class="icon ion-ios7-reloading"></i>

View File

@ -5,9 +5,9 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
<script src="/vendor/angular/angular-touch.js"></script>
<script src="/vendor/angular/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
<style>
.fade-out > .ng-enter,
.fade-out > .ng-leave,
@ -109,7 +109,7 @@
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('tabsTest', ['ionic.ui', 'ionic.service.modal', 'ionic.service.actionSheet'])
angular.module('tabsTest', ['ionic'])
.controller('RootCtrl', function($scope) {
$scope.onControllerChanged = function(oldController, oldIndex, newController, newIndex) {

View File

@ -477,6 +477,8 @@
// Grab the refresher element if using Pull to Refresh
if(this.hasPullToRefresh) {
this._refresher = document.querySelector('.scroll-refresher');
if(this._refresher) {
this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
// We always start the refresher hidden
if(this.y < 0) {
@ -494,6 +496,7 @@
this._refresher.classList.remove('scroll-refreshing');
}
}
}
this._drag = {
direction: 'v',