feat(list): reordering scrolls page, reordering performance better

Fixes #521. Reordering now uses webkitTransform instead of
element.style.left.  Additionally, as you drag the drag-element to the
top or bottom of the scroll-area, it will scroll it up or down as
allowed.

Refactors necessary: Common code from `<content>` and `<scroll>` moved
into js/ext/angular/controllers/ionicScrollController.  Then `<content>`
and `<scroll>` expose the controller, and `<list>` can require it.

`<list>` then uses the controller (if exists) to pass the scrollView and
scrollEl to ReorderDrag, and ReorderDrag uses that to scroll.

Additionally, js/ext/angular/test/controller/ionicScrollController tests
much functionality that was untested before.
This commit is contained in:
Andy Joslin
2014-02-06 14:59:21 -05:00
parent 5ebbbab5e7
commit 7f4b28d9da
11 changed files with 299 additions and 181 deletions

View File

@@ -0,0 +1,44 @@
(function() {
'use strict';
angular.module('ionic.ui.scroll')
.controller('$ionicScroll', ['$scope', 'scrollViewOptions', '$timeout',
function($scope, scrollViewOptions, $timeout) {
scrollViewOptions.bouncing = angular.isDefined(scrollViewOptions.bouncing) ?
scrollViewOptions.bouncing :
!ionic.Platform.isAndroid();
var element = this.element = scrollViewOptions.el;
var refresher = this.refresher = element.querySelector('.scroll-refresher');
var scrollView = this.scrollView = new ionic.views.Scroll(scrollViewOptions);
this.$element = angular.element(element);
//Attach self to element as a controller so other directives can require this controller
//through `require: '$ionicScroll'
this.$element.data('$$ionicScrollController', this);
$timeout(function() {
scrollView.run();
// Activate pull-to-refresh
if(refresher) {
var refresherHeight = refresher.clientHeight || 0;
scrollView.activatePullToRefresh(refresherHeight, function() {
refresher.classList.add('active');
}, function() {
refresher.classList.remove('refreshing');
refresher.classList.remove('active');
}, function() {
refresher.classList.add('refreshing');
$scope.onRefresh && $scope.onRefresh();
$scope.$parent.$broadcast('scroll.onRefresh');
});
}
});
}]);
})();