javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed #317

Browse Source
This commit is contained in:
Max Lynch
2013-12-12 14:26:12 -06:00
parent aae39e64f5
commit 37c6ac81ac
11 changed files with 192 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/css/ionic.css vendored
View File

@@ -1,3 +1,4 @@
@charset "UTF-8";
/*!
* Copyright 2013 Drifty Co.
* http://drifty.com/

1
dist/css/themes/ionic-ios7.css vendored
View File

@@ -1,3 +1,4 @@
@charset "UTF-8";
/*!
* Copyright 2013 Drifty Co.
* http://drifty.com/

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

@@ -547,7 +547,6 @@ angular.module('ionic.ui.header', ['ngAnimate'])
$scope.$watch('title', function(val) {
// Resize the title since the title has changed
console.log('Title changed');
hb.align();
});
}
@@ -708,59 +707,56 @@ angular.module('ionic.ui.content', [])
// Otherwise, supercharge this baby!
// Add timeout to let content render so Scroller.resize grabs the right content height
$timeout(function() {
sv = new ionic.views.Scroll({
el: $element[0],
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: $scope.$eval($scope.hasScrollX) == true,
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20,
scrollingComplete: function() {
$scope.onScrollComplete({
scrollTop: this.__scrollTop,
scrollLeft: this.__scrollLeft
});
}
});
// Activate pull-to-refresh
if(refresher) {
sv.activatePullToRefresh(50, 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');
sv = new ionic.views.Scroll({
el: $element[0],
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: $scope.$eval($scope.hasScrollX) == true,
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20,
scrollingComplete: function() {
$scope.onScrollComplete({
scrollTop: this.__scrollTop,
scrollLeft: this.__scrollLeft
});
}
});
$element.bind('scroll', function(e) {
$scope.onScroll({
event: e,
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
});
// Activate pull-to-refresh
if(refresher) {
sv.activatePullToRefresh(50, 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.resize', function(e) {
// Run the resize after this digest
$timeout(function() {
sv && sv.resize();
})
$element.bind('scroll', function(e) {
$scope.onScroll({
event: e,
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
});
});
$scope.$parent.$on('scroll.refreshComplete', function(e) {
sv && sv.finishPullToRefresh();
});
// Let child scopes access this
$scope.$parent.scrollView = sv;
}, 500);
$scope.$parent.$on('scroll.resize', function(e) {
// Run the resize after this digest
$timeout(function() {
sv && sv.resize();
})
});
$scope.$parent.$on('scroll.refreshComplete', function(e) {
sv && sv.finishPullToRefresh();
});
// Let child scopes access this
$scope.$parent.scrollView = sv;
@@ -1628,56 +1624,52 @@ angular.module('ionic.ui.scroll', [])
}
// Otherwise, supercharge this baby!
// Add timeout to let content render so Scroller.resize grabs the right content height
$timeout(function() {
var hasScrollingX = $scope.direction.indexOf('x') >= 0;
var hasScrollingY = $scope.direction.indexOf('y') >= 0;
var hasScrollingX = $scope.direction.indexOf('x') >= 0;
var hasScrollingY = $scope.direction.indexOf('y') >= 0;
sv = new ionic.views.Scroll({
el: $element[0],
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: hasScrollingX,
scrollingY: hasScrollingY
sv = new ionic.views.Scroll({
el: $element[0],
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: hasScrollingX,
scrollingY: hasScrollingY
});
// 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');
});
}
// 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');
});
}
$element.bind('scroll', function(e) {
$scope.onScroll({
event: e,
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
});
$element.bind('scroll', function(e) {
$scope.onScroll({
event: e,
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
});
});
$scope.$parent.$on('scroll.resize', function(e) {
// Run the resize after this digest
$timeout(function() {
sv && sv.resize();
})
});
$scope.$parent.$on('scroll.resize', function(e) {
// Run the resize after this digest
$timeout(function() {
sv && sv.resize();
})
});
$scope.$parent.$on('scroll.refreshComplete', function(e) {
sv && sv.finishPullToRefresh();
});
// Let child scopes access this
$scope.$parent.scrollView = sv;
}, 500);
$scope.$parent.$on('scroll.refreshComplete', function(e) {
sv && sv.finishPullToRefresh();
});
// Let child scopes access this
$scope.$parent.scrollView = sv;
};
}
};

13
dist/js/ionic.js vendored
View File

@@ -2639,10 +2639,12 @@ ionic.views.Scroll = ionic.views.View.inherit({
if ('ontouchstart' in window) {
container.addEventListener("touchstart", function(e) {
console.log('TOUCHSTART');
// Don't react if initial down happens on a form element
if (e.target.tagName.match(/input|textarea|select/i)) {
return;
}
self.doTouchStart(e.touches, e.timeStamp);
e.preventDefault();
@@ -2759,6 +2761,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
// Update horiz bar
if(self.__indicatorX) {
var width = Math.max(Math.round(self.__clientWidth * self.__clientWidth / (self.__contentWidth)), 20);
if(width > self.__contentWidth) {
width = 0;
}
self.__indicatorX.size = width;
self.__indicatorX.minScale = this.options.minScrollbarSizeX / width;
self.__indicatorX.indicator.style.width = width + 'px';
@@ -2769,6 +2774,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
// Update vert bar
if(self.__indicatorY) {
var height = Math.max(Math.round(self.__clientHeight * self.__clientHeight / (self.__contentHeight)), 20);
if(height > self.__contentHeight) {
height = 0;
}
self.__indicatorY.size = height;
self.__indicatorY.minScale = this.options.minScrollbarSizeY / height;
self.__indicatorY.maxPos = self.__clientHeight - height;
@@ -3864,8 +3872,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
clearTimeout(self.__sizerTimeout);
self.__sizerTimeout = setTimeout(function sizer() {
self.resize();
if(self.__maxScrollLeft == 0 && self.__maxScrollTop == 0) {
self.__sizerTimeout = setTimeout(sizer, 1000);
if((self.options.scrollingX && self.__maxScrollLeft == 0) || (self.options.scrollingY && self.__maxScrollTop == 0)) {
//self.__sizerTimeout = setTimeout(sizer, 1000);
}
}, 1000);

1
js/ext/angular/src/directive/ionicBar.js vendored
View File

@@ -51,7 +51,6 @@ angular.module('ionic.ui.header', ['ngAnimate'])
$scope.$watch('title', function(val) {
// Resize the title since the title has changed
console.log('Title changed');
hb.align();
});
}

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

@@ -84,59 +84,56 @@ angular.module('ionic.ui.content', [])
// Otherwise, supercharge this baby!
// Add timeout to let content render so Scroller.resize grabs the right content height
$timeout(function() {
sv = new ionic.views.Scroll({
el: $element[0],
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: $scope.$eval($scope.hasScrollX) == true,
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20,
scrollingComplete: function() {
$scope.onScrollComplete({
scrollTop: this.__scrollTop,
scrollLeft: this.__scrollLeft
});
}
});
// Activate pull-to-refresh
if(refresher) {
sv.activatePullToRefresh(50, 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');
sv = new ionic.views.Scroll({
el: $element[0],
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: $scope.$eval($scope.hasScrollX) == true,
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20,
scrollingComplete: function() {
$scope.onScrollComplete({
scrollTop: this.__scrollTop,
scrollLeft: this.__scrollLeft
});
}
});
$element.bind('scroll', function(e) {
$scope.onScroll({
event: e,
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
});
// Activate pull-to-refresh
if(refresher) {
sv.activatePullToRefresh(50, 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.resize', function(e) {
// Run the resize after this digest
$timeout(function() {
sv && sv.resize();
})
$element.bind('scroll', function(e) {
$scope.onScroll({
event: e,
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
});
});
$scope.$parent.$on('scroll.refreshComplete', function(e) {
sv && sv.finishPullToRefresh();
});
// Let child scopes access this
$scope.$parent.scrollView = sv;
}, 500);
$scope.$parent.$on('scroll.resize', function(e) {
// Run the resize after this digest
$timeout(function() {
sv && sv.resize();
})
});
$scope.$parent.$on('scroll.refreshComplete', function(e) {
sv && sv.finishPullToRefresh();
});
// Let child scopes access this
$scope.$parent.scrollView = sv;

84
js/ext/angular/src/directive/ionicScroll.js vendored
View File

@@ -48,56 +48,52 @@ angular.module('ionic.ui.scroll', [])
}
// Otherwise, supercharge this baby!
// Add timeout to let content render so Scroller.resize grabs the right content height
$timeout(function() {
var hasScrollingX = $scope.direction.indexOf('x') >= 0;
var hasScrollingY = $scope.direction.indexOf('y') >= 0;
var hasScrollingX = $scope.direction.indexOf('x') >= 0;
var hasScrollingY = $scope.direction.indexOf('y') >= 0;
sv = new ionic.views.Scroll({
el: $element[0],
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: hasScrollingX,
scrollingY: hasScrollingY
sv = new ionic.views.Scroll({
el: $element[0],
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: hasScrollingX,
scrollingY: hasScrollingY
});
// 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');
});
}
// 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');
});
}
$element.bind('scroll', function(e) {
$scope.onScroll({
event: e,
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
});
$element.bind('scroll', function(e) {
$scope.onScroll({
event: e,
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
});
});
$scope.$parent.$on('scroll.resize', function(e) {
// Run the resize after this digest
$timeout(function() {
sv && sv.resize();
})
});
$scope.$parent.$on('scroll.resize', function(e) {
// Run the resize after this digest
$timeout(function() {
sv && sv.resize();
})
});
$scope.$parent.$on('scroll.refreshComplete', function(e) {
sv && sv.finishPullToRefresh();
});
// Let child scopes access this
$scope.$parent.scrollView = sv;
}, 500);
$scope.$parent.$on('scroll.refreshComplete', function(e) {
sv && sv.finishPullToRefresh();
});
// Let child scopes access this
$scope.$parent.scrollView = sv;
};
}
};

2
js/ext/angular/test/content.html
View File

@@ -132,7 +132,7 @@
.controller('AppCtrl', function($scope, $compile, $timeout, $element) {
$scope.items = [];
for(var i = 0; i < 70; i++) {
for(var i = 0; i < 10; i++) {
$scope.items.push({
});
}

2
js/ext/angular/test/content_defer.html
View File

@@ -62,7 +62,6 @@
return {
link: function($scope, $element, $attr) {
var startTop = $element[0].offsetTop;
console.log("Starting", startTop);
}
}
})
@@ -79,6 +78,7 @@
$scope.items.push({
});
}
$scope.$broadcast('scroll.resize');
}, 2000);
$timeout(function() {
for(var i = 0; i < 70; i++) {

13
js/views/scrollView.js
View File

@@ -572,10 +572,12 @@ ionic.views.Scroll = ionic.views.View.inherit({
if ('ontouchstart' in window) {
container.addEventListener("touchstart", function(e) {
console.log('TOUCHSTART');
// Don't react if initial down happens on a form element
if (e.target.tagName.match(/input|textarea|select/i)) {
return;
}
self.doTouchStart(e.touches, e.timeStamp);
e.preventDefault();
@@ -692,6 +694,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
// Update horiz bar
if(self.__indicatorX) {
var width = Math.max(Math.round(self.__clientWidth * self.__clientWidth / (self.__contentWidth)), 20);
if(width > self.__contentWidth) {
width = 0;
}
self.__indicatorX.size = width;
self.__indicatorX.minScale = this.options.minScrollbarSizeX / width;
self.__indicatorX.indicator.style.width = width + 'px';
@@ -702,6 +707,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
// Update vert bar
if(self.__indicatorY) {
var height = Math.max(Math.round(self.__clientHeight * self.__clientHeight / (self.__contentHeight)), 20);
if(height > self.__contentHeight) {
height = 0;
}
self.__indicatorY.size = height;
self.__indicatorY.minScale = this.options.minScrollbarSizeY / height;
self.__indicatorY.maxPos = self.__clientHeight - height;
@@ -1797,8 +1805,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
clearTimeout(self.__sizerTimeout);
self.__sizerTimeout = setTimeout(function sizer() {
self.resize();
if(self.__maxScrollLeft == 0 && self.__maxScrollTop == 0) {
self.__sizerTimeout = setTimeout(sizer, 1000);
if((self.options.scrollingX && self.__maxScrollLeft == 0) || (self.options.scrollingY && self.__maxScrollTop == 0)) {
//self.__sizerTimeout = setTimeout(sizer, 1000);
}
}, 1000);

11
test/js/views/scrollView.unit.js
View File

@@ -34,15 +34,4 @@ describe('Scroll View', function() {
expect(sc.children[1].classList.contains('scroll-bar')).toBe(true);
expect(sc.children[2].classList.contains('scroll-bar')).toBe(true);
});
it('Should fade out scrollbars', function() {
var sv = new ionic.views.Scroll({
el: sc,
scrollbarsX: true,
scrollingX: true,
scrollbarsY: true,
scrollingY: true,
});
});
});