mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Merged new scroll stuff
This commit is contained in:
Max Lynch
104
js/ext/angular/src/directive/ionicContent.js
vendored
104
js/ext/angular/src/directive/ionicContent.js
vendored
@@ -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,
|
||||
@@ -28,16 +28,16 @@ angular.module('ionic.ui.content', [])
|
||||
onRefresh: '&',
|
||||
onRefreshOpening: '&',
|
||||
refreshComplete: '=',
|
||||
scroll: '@'
|
||||
scroll: '@',
|
||||
hasScrollX: '@',
|
||||
hasScrollY: '@'
|
||||
},
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr) {
|
||||
var
|
||||
c = $element.eq(0),
|
||||
clone,
|
||||
sc,
|
||||
sv,
|
||||
addedPadding = false;
|
||||
var clone, sc, sv;
|
||||
|
||||
var addedPadding = false;
|
||||
var c = $element.eq(0);
|
||||
|
||||
if(attr.hasHeader == "true") {
|
||||
c.addClass('has-header');
|
||||
@@ -52,15 +52,6 @@ angular.module('ionic.ui.content', [])
|
||||
c.addClass('has-tabs');
|
||||
}
|
||||
|
||||
if(attr.refreshComplete) {
|
||||
$scope.refreshComplete = function() {
|
||||
if($scope.scrollView) {
|
||||
$scope.scrollView.doneRefreshing();
|
||||
$scope.$parent.$broadcast('scroll.onRefreshComplete');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// If they want plain overflow scrolling, add that as a class
|
||||
if($scope.scroll === "false") {
|
||||
clone = transclude($scope.$parent);
|
||||
@@ -77,25 +68,56 @@ angular.module('ionic.ui.content', [])
|
||||
addedPadding = true;
|
||||
}
|
||||
$element.append(sc);
|
||||
// Otherwise, supercharge this baby!
|
||||
sv = new ionic.views.Scroll({
|
||||
el: $element[0].firstElementChild,
|
||||
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.scrollView = sv;
|
||||
|
||||
// Pass the parent scope down to the child
|
||||
clone = transclude($scope.$parent);
|
||||
angular.element($element[0].firstElementChild).append(clone);
|
||||
|
||||
var refresher = $element[0].querySelector('.scroll-refresher');
|
||||
var refresherHeight = refresher && refresher.clientHeight || 0;
|
||||
|
||||
if(attr.refreshComplete) {
|
||||
$scope.refreshComplete = function() {
|
||||
if($scope.scrollView) {
|
||||
refresher && refresher.classList.remove('active');
|
||||
$scope.scrollView.finishPullToRefresh();
|
||||
$scope.$parent.$broadcast('scroll.onRefreshComplete');
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// Otherwise, supercharge this baby!
|
||||
// Add timeout to let content render so Scroller.resize grabs the right content height
|
||||
$timeout(function() {
|
||||
sv = new ionic.views.Scroller({
|
||||
el: $element[0]
|
||||
});
|
||||
|
||||
// Activate pull-to-refresh
|
||||
if(refresher) {
|
||||
sv.activatePullToRefresh(refresherHeight, function() {
|
||||
refresher.classList.add('active');
|
||||
}, function() {
|
||||
refresher.classList.remove('refreshing');
|
||||
refresher.classList.remove('active');
|
||||
}, function() {
|
||||
refresher.classList.add('refreshing');
|
||||
$scope.onRefresh();
|
||||
$scope.$parent.$broadcast('scroll.onRefresh');
|
||||
});
|
||||
}
|
||||
|
||||
$scope.$parent.$on('scroll.refreshComplete', function(e) {
|
||||
sv && sv.finishPullToRefresh();
|
||||
});
|
||||
|
||||
// Let child scopes access this
|
||||
$scope.$parent.scrollView = sv;
|
||||
}, 500);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// if padding attribute is true, then add padding if it wasn't added to the .scroll
|
||||
@@ -113,22 +135,8 @@ angular.module('ionic.ui.content', [])
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
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) {
|
||||
var icon = $element[0].querySelector('.ionic-refresher');
|
||||
|
||||
// Scale up the refreshing icon
|
||||
var onRefreshOpening = ionic.throttle(function(e, amt) {
|
||||
icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((1 + amt), 2) + ')';
|
||||
}, 100);
|
||||
|
||||
$scope.$on('scroll.onRefresh', function(e) {
|
||||
icon.style[ionic.CSS.TRANSFORM] = 'scale(2)';
|
||||
});
|
||||
|
||||
$scope.$on('scroll.onRefreshOpening', onRefreshOpening);
|
||||
}
|
||||
template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-d icon-refreshing"></i></div></div>',
|
||||
scope: true
|
||||
};
|
||||
})
|
||||
|
||||
|
||||
17
js/ext/angular/src/directive/ionicSideMenu.js
vendored
17
js/ext/angular/src/directive/ionicSideMenu.js
vendored
@@ -58,6 +58,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
$element.addClass('menu-content');
|
||||
|
||||
var defaultPrevented = false;
|
||||
var isDragging = false;
|
||||
|
||||
ionic.on('mousedown', function(e) {
|
||||
// If the child element prevented the drag, don't drag
|
||||
@@ -68,15 +69,25 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
if(defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
isDragging = true;
|
||||
sideMenuCtrl._handleDrag(e);
|
||||
e.gesture.srcEvent.preventDefault();
|
||||
};
|
||||
|
||||
var dragVertFn = function(e) {
|
||||
if(isDragging) {
|
||||
e.gesture.srcEvent.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
//var dragGesture = Gesture.on('drag', dragFn, $element);
|
||||
var dragRightGesture = Gesture.on('dragright', dragFn, $element);
|
||||
var dragLeftGesture = Gesture.on('dragleft', dragFn, $element);
|
||||
var dragUpGesture = Gesture.on('dragup', dragVertFn, $element);
|
||||
var dragDownGesture = Gesture.on('dragdown', dragVertFn, $element);
|
||||
|
||||
var dragReleaseFn = function(e) {
|
||||
isDragging = false;
|
||||
if(!defaultPrevented) {
|
||||
sideMenuCtrl._endDrag(e);
|
||||
}
|
||||
@@ -109,8 +120,10 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
|
||||
|
||||
// Cleanup
|
||||
$scope.$on('$destroy', function() {
|
||||
Gesture.off(dragLeftGesture, 'drag', dragFn);
|
||||
Gesture.off(dragRightGesture, 'drag', dragFn);
|
||||
Gesture.off(dragLeftGesture, 'dragleft', dragFn);
|
||||
Gesture.off(dragRightGesture, 'dragright', dragFn);
|
||||
Gesture.off(dragUpGesture, 'dragup', dragFn);
|
||||
Gesture.off(dragDownGesture, 'dragdown', dragFn);
|
||||
Gesture.off(releaseGesture, 'release', dragReleaseFn);
|
||||
});
|
||||
};
|
||||
|
||||
6
js/ext/angular/src/directive/ionicTabBar.js
vendored
6
js/ext/angular/src/directive/ionicTabBar.js
vendored
@@ -49,7 +49,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
$scope.tabsController = this;
|
||||
}],
|
||||
//templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
|
||||
template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
|
||||
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
|
||||
compile: function(element, attr, transclude, tabsCtrl) {
|
||||
return function($scope, $element, $attr) {
|
||||
var tabs = $element[0].querySelector('.tabs');
|
||||
@@ -91,7 +91,6 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
.directive('tab', ['$animate', '$parse', function($animate, $parse) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
require: '^tabs',
|
||||
scope: true,
|
||||
transclude: 'element',
|
||||
@@ -150,6 +149,9 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
childScope = $scope.$new();
|
||||
transclude(childScope, function(clone) {
|
||||
childElement = clone;
|
||||
|
||||
clone.addClass('pane');
|
||||
|
||||
$animate.enter(clone, $element.parent(), $element);
|
||||
|
||||
if($scope.title) {
|
||||
|
||||
Reference in New Issue
Block a user