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

Merge branch 'master' of https://github.com/driftyco/ionic

Browse Source 
Conflicts:
	dist/js/ionic.js
This commit is contained in:
Adam Bradley
2013-10-31 11:06:27 -05:00
parent 41ec12e3a3 ab896be994
commit 00a1e9f36b
9 changed files with 1048 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -374,7 +374,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
.directive('listItem', function() {
return {
restrict: 'E',
require: '^list',
require: ['?^list', '?^virtualList'],
replace: true,
transclude: true,
scope: {
@ -409,6 +409,13 @@ angular.module('ionic.ui.list', ['ngAnimate'])
</div>\
</li>',*/
link: function($scope, $element, $attr, list) {
// Grab the parent list controller
if(list[0]) {
list = list[0];
} else if(list[1]) {
list = list[1];
}
$scope.isEditing = false;
$scope.deleteIcon = list.scope.deleteIcon;
$scope.reorderIcon = list.scope.reorderIcon;
@ -436,7 +443,6 @@ angular.module('ionic.ui.list', ['ngAnimate'])
reorderIcon: '@'
},
// So we can require being under this
controller: function($scope) {
var _this = this;
@ -460,7 +466,55 @@ angular.module('ionic.ui.list', ['ngAnimate'])
};
}
};
});
})
.directive('virtualList', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
isEditing: '=',
deleteIcon: '@',
reorderIcon: '@',
itemHeight: '@'
},
controller: function($scope, $element) {
var _this = this;
this.scope = $scope;
this.element = $element;
var lv = new ionic.views.ListView({
el: $element[0],
listEl: $element[0].children[0],
isVirtual: true,
itemHeight: $scope.itemHeight,
});
this.listView = lv;
$scope.$watch('isEditing', function(v) {
_this.isEditing = true;
});
},
template: '<div class="scroll"><ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
</ul></div>',
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
if(attr.animation) {
$element.addClass(attr.animation);
}
};
}
};
})
})();
;
@ -1082,3 +1136,353 @@ angular.module('ionic.ui.toggle', [])
}
};
});
;
(function() {
'use strict';
angular.module('ionic.ui.virtRepeat', [])
.directive('virtRepeat', function() {
return {
require: ['?ngModel', '^virtualList'],
transclude: 'element',
priority: 1000,
terminal: true,
compile: function(element, attr, transclude) {
return function($scope, $element, $attr, ctrls) {
var virtualList = ctrls[1];
var _this = this;
virtualList.listView.renderViewport = function(high, low, start, end) {
console.log('RENDER VIEWPORT', high, low, start, end);
}
}
}
}
});
})(ionic);
;
(function() {
'use strict';
// Turn the expression supplied to the directive:
//
// a in b
//
// into `{ value: "a", collection: "b" }`
function parseRepeatExpression(expression){
var match = expression.match(/^\s*([\$\w]+)\s+in\s+(\S*)\s*$/);
if (! match) {
throw new Error("Expected sfVirtualRepeat in form of '_item_ in _collection_' but got '" +
expression + "'.");
}
return {
value: match[1],
collection: match[2]
};
}
// Utility to filter out elements by tag name
function isTagNameInList(element, list){
var t, tag = element.tagName.toUpperCase();
for( t = 0; t < list.length; t++ ){
if( list[t] === tag ){
return true;
}
}
return false;
}
// Utility to find the viewport/content elements given the start element:
function findViewportAndContent(startElement){
/*jshint eqeqeq:false, curly:false */
var root = $rootElement[0];
var e, n;
// Somewhere between the grandparent and the root node
for( e = startElement.parent().parent()[0]; e !== root; e = e.parentNode ){
// is an element
if( e.nodeType != 1 ) break;
// that isn't in the blacklist (tables etc.),
if( isTagNameInList(e, DONT_WORK_AS_VIEWPORTS) ) continue;
// has a single child element (the content),
if( e.childElementCount != 1 ) continue;
// which is not in the blacklist
if( isTagNameInList(e.firstElementChild, DONT_WORK_AS_CONTENT) ) continue;
// and no text.
for( n = e.firstChild; n; n = n.nextSibling ){
if( n.nodeType == 3 && /\S/g.test(n.textContent) ){
break;
}
}
if( n == null ){
// That element should work as a viewport.
return {
viewport: angular.element(e),
content: angular.element(e.firstElementChild)
};
}
}
throw new Error("No suitable viewport element");
}
// Apply explicit height and overflow styles to the viewport element.
//
// If the viewport has a max-height (inherited or otherwise), set max-height.
// Otherwise, set height from the current computed value or use
// window.innerHeight as a fallback
//
function setViewportCss(viewport){
var viewportCss = {'overflow': 'auto'},
style = window.getComputedStyle ?
window.getComputedStyle(viewport[0]) :
viewport[0].currentStyle,
maxHeight = style && style.getPropertyValue('max-height'),
height = style && style.getPropertyValue('height');
if( maxHeight && maxHeight !== '0px' ){
viewportCss.maxHeight = maxHeight;
}else if( height && height !== '0px' ){
viewportCss.height = height;
}else{
viewportCss.height = window.innerHeight;
}
viewport.css(viewportCss);
}
// Apply explicit styles to the content element to prevent pesky padding
// or borders messing with our calculations:
function setContentCss(content){
var contentCss = {
margin: 0,
padding: 0,
border: 0,
'box-sizing': 'border-box'
};
content.css(contentCss);
}
// TODO: compute outerHeight (padding + border unless box-sizing is border)
function computeRowHeight(element){
var style = window.getComputedStyle ? window.getComputedStyle(element)
: element.currentStyle,
maxHeight = style && style.getPropertyValue('max-height'),
height = style && style.getPropertyValue('height');
if( height && height !== '0px' && height !== 'auto' ){
$log.info('Row height is "%s" from css height', height);
}else if( maxHeight && maxHeight !== '0px' && maxHeight !== 'none' ){
height = maxHeight;
$log.info('Row height is "%s" from css max-height', height);
}else if( element.clientHeight ){
height = element.clientHeight+'px';
$log.info('Row height is "%s" from client height', height);
}else{
throw new Error("Unable to compute height of row");
}
angular.element(element).css('height', height);
return parseInt(height, 10);
}
angular.module('ionic.ui.virtualRepeat', [])
/**
* A replacement for ng-repeat that supports virtual lists.
* This is not a 1 to 1 replacement for ng-repeat. However, in situations
* where you have huge lists, this repeater will work with our virtual
* scrolling to only render items that are showing or will be showing
* if a scroll is made.
*/
.directive('virtualRepeat', ['$log', function($log) {
return {
require: ['?ngModel, ^virtualList'],
transclude: 'element',
priority: 1000,
terminal: true,
compile: function(element, attr, transclude) {
var ident = parseRepeatExpression(attr.sfVirtualRepeat);
return function(scope, iterStartElement, attrs, ctrls, b) {
var virtualList = ctrls[1];
var rendered = [];
var rowHeight = 0;
var sticky = false;
var dom = virtualList.element;
//var dom = findViewportAndContent(iterStartElement);
// The list structure is controlled by a few simple (visible) variables:
var state = 'ngModel' in attrs ? scope.$eval(attrs.ngModel) : {};
function makeNewScope (idx, collection, containerScope) {
var childScope = containerScope.$new();
childScope[ident.value] = collection[idx];
childScope.$index = idx;
childScope.$first = (idx === 0);
childScope.$last = (idx === (collection.length - 1));
childScope.$middle = !(childScope.$first || childScope.$last);
childScope.$watch(function updateChildScopeItem(){
childScope[ident.value] = collection[idx];
});
return childScope;
}
// Given the collection and a start and end point, add the current
function addElements (start, end, collection, containerScope, insPoint) {
var frag = document.createDocumentFragment();
var newElements = [], element, idx, childScope;
for( idx = start; idx !== end; idx ++ ){
childScope = makeNewScope(idx, collection, containerScope);
element = linker(childScope, angular.noop);
//setElementCss(element);
newElements.push(element);
frag.appendChild(element[0]);
}
insPoint.after(frag);
return newElements;
}
function recomputeActive() {
// We want to set the start to the low water mark unless the current
// start is already between the low and high water marks.
var start = clip(state.firstActive, state.firstVisible - state.lowWater, state.firstVisible - state.highWater);
// Similarly for the end
var end = clip(state.firstActive + state.active,
state.firstVisible + state.visible + state.lowWater,
state.firstVisible + state.visible + state.highWater );
state.firstActive = Math.max(0, start);
state.active = Math.min(end, state.total) - state.firstActive;
}
function sfVirtualRepeatOnScroll(evt){
if( !rowHeight ){
return;
}
// Enter the angular world for the state change to take effect.
scope.$apply(function(){
state.firstVisible = Math.floor(evt.target.scrollTop / rowHeight);
state.visible = Math.ceil(dom.viewport[0].clientHeight / rowHeight);
$log.log('scroll to row %o', state.firstVisible);
sticky = evt.target.scrollTop + evt.target.clientHeight >= evt.target.scrollHeight;
recomputeActive();
$log.log(' state is now %o', state);
$log.log(' sticky = %o', sticky);
});
}
function sfVirtualRepeatWatchExpression(scope){
var coll = scope.$eval(ident.collection);
if( coll.length !== state.total ){
state.total = coll.length;
recomputeActive();
}
return {
start: state.firstActive,
active: state.active,
len: coll.length
};
}
function destroyActiveElements (action, count) {
var dead, ii, remover = Array.prototype[action];
for( ii = 0; ii < count; ii++ ){
dead = remover.call(rendered);
dead.scope().$destroy();
dead.remove();
}
}
// When the watch expression for the repeat changes, we may need to add
// and remove scopes and elements
function sfVirtualRepeatListener(newValue, oldValue, scope){
var oldEnd = oldValue.start + oldValue.active,
collection = scope.$eval(ident.collection),
newElements;
if(newValue === oldValue) {
$log.info('initial listen');
newElements = addElements(newValue.start, oldEnd, collection, scope, iterStartElement);
rendered = newElements;
if(rendered.length) {
rowHeight = computeRowHeight(newElements[0][0]);
}
} else {
var newEnd = newValue.start + newValue.active;
var forward = newValue.start >= oldValue.start;
var delta = forward ? newValue.start - oldValue.start
: oldValue.start - newValue.start;
var endDelta = newEnd >= oldEnd ? newEnd - oldEnd : oldEnd - newEnd;
var contiguous = delta < (forward ? oldValue.active : newValue.active);
$log.info('change by %o,%o rows %s', delta, endDelta, forward ? 'forward' : 'backward');
if(!contiguous) {
$log.info('non-contiguous change');
destroyActiveElements('pop', rendered.length);
rendered = addElements(newValue.start, newEnd, collection, scope, iterStartElement);
} else {
if(forward) {
$log.info('need to remove from the top');
destroyActiveElements('shift', delta);
} else if(delta) {
$log.info('need to add at the top');
newElements = addElements(
newValue.start,
oldValue.start,
collection, scope, iterStartElement);
rendered = newElements.concat(rendered);
}
if(newEnd < oldEnd) {
$log.info('need to remove from the bottom');
destroyActiveElements('pop', oldEnd - newEnd);
} else if(endDelta) {
var lastElement = rendered[rendered.length-1];
$log.info('need to add to the bottom');
newElements = addElements(
oldEnd,
newEnd,
collection, scope, lastElement);
rendered = rendered.concat(newElements);
}
}
if(!rowHeight && rendered.length) {
rowHeight = computeRowHeight(rendered[0][0]);
}
dom.content.css({'padding-top': newValue.start * rowHeight + 'px'});
}
dom.content.css({'height': newValue.len * rowHeight + 'px'});
if(sticky) {
dom.viewport[0].scrollTop = dom.viewport[0].clientHeight + dom.viewport[0].scrollHeight;
}
}
// - The index of the first active element
state.firstActive = 0;
// - The index of the first visible element
state.firstVisible = 0;
// - The number of elements visible in the viewport.
state.visible = 0;
// - The number of active elements
state.active = 0;
// - The total number of elements
state.total = 0;
// - The point at which we add new elements
state.lowWater = state.lowWater || 100;
// - The point at which we remove old elements
state.highWater = state.highWater || 300;
// TODO: now watch the water marks
setContentCss(dom.content);
setViewportCss(dom.viewport);
// When the user scrolls, we move the `state.firstActive`
dom.bind('momentumScrolled', sfVirtualRepeatOnScroll);
// The watch on the collection is just a watch on the length of the
// collection. We don't care if the content changes.
scope.$watch(sfVirtualRepeatWatchExpression, sfVirtualRepeatListener, true);
}
}
};
}]);
})(ionic);

38
dist/js/ionic.js vendored
View File

@ -2002,6 +2002,8 @@ window.ionic = {
_scrollTo: function(x, y, time, easing) {
var _this = this;
time = time || 0;
var start = Date.now();
easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
@ -2030,6 +2032,10 @@ window.ionic = {
time = 0;
}
if(time == Infinity) {
debugger;
}
var dx = ox - x;
var dy = oy - y;
@ -2216,6 +2222,13 @@ window.ionic = {
destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
duration = speed / deceleration;
if(speed === 0) {
return {
destination: current,
duration: 0
};
}
// Check if the final destination needs to be rubber banded
if ( destination < lowerMargin ) {
// We have dragged too far down, snap back to the maximum
@ -2515,6 +2528,9 @@ window.ionic = {
});
},
/**
* Trigger a done scrolling event.
*/
_doneScrolling: function() {
this.didStopScrolling && this.didStopScrolling({
target: this.el,
@ -3507,26 +3523,46 @@ window.ionic = {
refresher.style.height = '0px';
},
/**
* If we scrolled and have virtual mode enabled, compute the window
* of active elements in order to figure out the viewport to render.
*/
didScroll: function(e) {
if(this.isVirtual) {
var itemHeight = this.itemHeight;
// TODO: This would be inaccurate if we are windowed
var totalItems = this.listEl.children.length;
// Grab the total height of the list
var scrollHeight = e.target.scrollHeight;
// Get the viewport height
var viewportHeight = this.el.parentNode.offsetHeight;
// scrollTop is the current scroll position
var scrollTop = e.scrollTop;
// High water is the pixel position of the first element to include (everything before
// that will be removed)
var highWater = Math.max(0, e.scrollTop + this.virtualRemoveThreshold);
// Low water is the pixel position of the last element to include (everything after
// that will be removed)
var lowWater = Math.min(scrollHeight, Math.abs(e.scrollTop) + viewportHeight + this.virtualAddThreshold);
// Compute how many items per viewport size can show
var itemsPerViewport = Math.floor((lowWater - highWater) / itemHeight);
// Get the first and last elements in the list based on how many can fit
// between the pixel range of lowWater and highWater
var first = parseInt(Math.abs(highWater / itemHeight));
var last = parseInt(Math.abs(lowWater / itemHeight));
// Get the items we need to remove
this._virtualItemsToRemove = Array.prototype.slice.call(this.listEl.children, 0, first);
// Grab the nodes we will be showing
var nodes = Array.prototype.slice.call(this.listEl.children, first, first + itemsPerViewport);
this.renderViewport && this.renderViewport(highWater, lowWater, first, last);

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

@ -6,7 +6,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
.directive('listItem', function() {
return {
restrict: 'E',
require: '^list',
require: ['?^list', '?^virtualList'],
replace: true,
transclude: true,
scope: {
@ -41,6 +41,13 @@ angular.module('ionic.ui.list', ['ngAnimate'])
</div>\
</li>',*/
link: function($scope, $element, $attr, list) {
// Grab the parent list controller
if(list[0]) {
list = list[0];
} else if(list[1]) {
list = list[1];
}
$scope.isEditing = false;
$scope.deleteIcon = list.scope.deleteIcon;
$scope.reorderIcon = list.scope.reorderIcon;
@ -68,7 +75,6 @@ angular.module('ionic.ui.list', ['ngAnimate'])
reorderIcon: '@'
},
// So we can require being under this
controller: function($scope) {
var _this = this;
@ -92,6 +98,54 @@ angular.module('ionic.ui.list', ['ngAnimate'])
};
}
};
});
})
.directive('virtualList', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
isEditing: '=',
deleteIcon: '@',
reorderIcon: '@',
itemHeight: '@'
},
controller: function($scope, $element) {
var _this = this;
this.scope = $scope;
this.element = $element;
var lv = new ionic.views.ListView({
el: $element[0],
listEl: $element[0].children[0],
isVirtual: true,
itemHeight: $scope.itemHeight,
});
this.listView = lv;
$scope.$watch('isEditing', function(v) {
_this.isEditing = true;
});
},
template: '<div class="scroll"><ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
</ul></div>',
compile: function(element, attr, transclude) {
return function($scope, $element, $attr) {
if(attr.animation) {
$element.addClass(attr.animation);
}
};
}
};
})
})();

24
js/ext/angular/src/directive/ionicVirtRepeat.js vendored Normal file
View File

@ -0,0 +1,24 @@
(function() {
'use strict';
angular.module('ionic.ui.virtRepeat', [])
.directive('virtRepeat', function() {
return {
require: ['?ngModel', '^virtualList'],
transclude: 'element',
priority: 1000,
terminal: true,
compile: function(element, attr, transclude) {
return function($scope, $element, $attr, ctrls) {
var virtualList = ctrls[1];
var _this = this;
virtualList.listView.renderViewport = function(high, low, start, end) {
console.log('RENDER VIEWPORT', high, low, start, end);
}
}
}
}
});
})(ionic);

324
js/ext/angular/src/directive/ionicVirtualRepeat.js vendored Normal file
View File

@ -0,0 +1,324 @@
(function() {
'use strict';
// Turn the expression supplied to the directive:
//
// a in b
//
// into `{ value: "a", collection: "b" }`
function parseRepeatExpression(expression){
var match = expression.match(/^\s*([\$\w]+)\s+in\s+(\S*)\s*$/);
if (! match) {
throw new Error("Expected sfVirtualRepeat in form of '_item_ in _collection_' but got '" +
expression + "'.");
}
return {
value: match[1],
collection: match[2]
};
}
// Utility to filter out elements by tag name
function isTagNameInList(element, list){
var t, tag = element.tagName.toUpperCase();
for( t = 0; t < list.length; t++ ){
if( list[t] === tag ){
return true;
}
}
return false;
}
// Utility to find the viewport/content elements given the start element:
function findViewportAndContent(startElement){
/*jshint eqeqeq:false, curly:false */
var root = $rootElement[0];
var e, n;
// Somewhere between the grandparent and the root node
for( e = startElement.parent().parent()[0]; e !== root; e = e.parentNode ){
// is an element
if( e.nodeType != 1 ) break;
// that isn't in the blacklist (tables etc.),
if( isTagNameInList(e, DONT_WORK_AS_VIEWPORTS) ) continue;
// has a single child element (the content),
if( e.childElementCount != 1 ) continue;
// which is not in the blacklist
if( isTagNameInList(e.firstElementChild, DONT_WORK_AS_CONTENT) ) continue;
// and no text.
for( n = e.firstChild; n; n = n.nextSibling ){
if( n.nodeType == 3 && /\S/g.test(n.textContent) ){
break;
}
}
if( n == null ){
// That element should work as a viewport.
return {
viewport: angular.element(e),
content: angular.element(e.firstElementChild)
};
}
}
throw new Error("No suitable viewport element");
}
// Apply explicit height and overflow styles to the viewport element.
//
// If the viewport has a max-height (inherited or otherwise), set max-height.
// Otherwise, set height from the current computed value or use
// window.innerHeight as a fallback
//
function setViewportCss(viewport){
var viewportCss = {'overflow': 'auto'},
style = window.getComputedStyle ?
window.getComputedStyle(viewport[0]) :
viewport[0].currentStyle,
maxHeight = style && style.getPropertyValue('max-height'),
height = style && style.getPropertyValue('height');
if( maxHeight && maxHeight !== '0px' ){
viewportCss.maxHeight = maxHeight;
}else if( height && height !== '0px' ){
viewportCss.height = height;
}else{
viewportCss.height = window.innerHeight;
}
viewport.css(viewportCss);
}
// Apply explicit styles to the content element to prevent pesky padding
// or borders messing with our calculations:
function setContentCss(content){
var contentCss = {
margin: 0,
padding: 0,
border: 0,
'box-sizing': 'border-box'
};
content.css(contentCss);
}
// TODO: compute outerHeight (padding + border unless box-sizing is border)
function computeRowHeight(element){
var style = window.getComputedStyle ? window.getComputedStyle(element)
: element.currentStyle,
maxHeight = style && style.getPropertyValue('max-height'),
height = style && style.getPropertyValue('height');
if( height && height !== '0px' && height !== 'auto' ){
$log.info('Row height is "%s" from css height', height);
}else if( maxHeight && maxHeight !== '0px' && maxHeight !== 'none' ){
height = maxHeight;
$log.info('Row height is "%s" from css max-height', height);
}else if( element.clientHeight ){
height = element.clientHeight+'px';
$log.info('Row height is "%s" from client height', height);
}else{
throw new Error("Unable to compute height of row");
}
angular.element(element).css('height', height);
return parseInt(height, 10);
}
angular.module('ionic.ui.virtualRepeat', [])
/**
* A replacement for ng-repeat that supports virtual lists.
* This is not a 1 to 1 replacement for ng-repeat. However, in situations
* where you have huge lists, this repeater will work with our virtual
* scrolling to only render items that are showing or will be showing
* if a scroll is made.
*/
.directive('virtualRepeat', ['$log', function($log) {
return {
require: ['?ngModel, ^virtualList'],
transclude: 'element',
priority: 1000,
terminal: true,
compile: function(element, attr, transclude) {
var ident = parseRepeatExpression(attr.sfVirtualRepeat);
return function(scope, iterStartElement, attrs, ctrls, b) {
var virtualList = ctrls[1];
var rendered = [];
var rowHeight = 0;
var sticky = false;
var dom = virtualList.element;
//var dom = findViewportAndContent(iterStartElement);
// The list structure is controlled by a few simple (visible) variables:
var state = 'ngModel' in attrs ? scope.$eval(attrs.ngModel) : {};
function makeNewScope (idx, collection, containerScope) {
var childScope = containerScope.$new();
childScope[ident.value] = collection[idx];
childScope.$index = idx;
childScope.$first = (idx === 0);
childScope.$last = (idx === (collection.length - 1));
childScope.$middle = !(childScope.$first || childScope.$last);
childScope.$watch(function updateChildScopeItem(){
childScope[ident.value] = collection[idx];
});
return childScope;
}
// Given the collection and a start and end point, add the current
function addElements (start, end, collection, containerScope, insPoint) {
var frag = document.createDocumentFragment();
var newElements = [], element, idx, childScope;
for( idx = start; idx !== end; idx ++ ){
childScope = makeNewScope(idx, collection, containerScope);
element = linker(childScope, angular.noop);
//setElementCss(element);
newElements.push(element);
frag.appendChild(element[0]);
}
insPoint.after(frag);
return newElements;
}
function recomputeActive() {
// We want to set the start to the low water mark unless the current
// start is already between the low and high water marks.
var start = clip(state.firstActive, state.firstVisible - state.lowWater, state.firstVisible - state.highWater);
// Similarly for the end
var end = clip(state.firstActive + state.active,
state.firstVisible + state.visible + state.lowWater,
state.firstVisible + state.visible + state.highWater );
state.firstActive = Math.max(0, start);
state.active = Math.min(end, state.total) - state.firstActive;
}
function sfVirtualRepeatOnScroll(evt){
if( !rowHeight ){
return;
}
// Enter the angular world for the state change to take effect.
scope.$apply(function(){
state.firstVisible = Math.floor(evt.target.scrollTop / rowHeight);
state.visible = Math.ceil(dom.viewport[0].clientHeight / rowHeight);
$log.log('scroll to row %o', state.firstVisible);
sticky = evt.target.scrollTop + evt.target.clientHeight >= evt.target.scrollHeight;
recomputeActive();
$log.log(' state is now %o', state);
$log.log(' sticky = %o', sticky);
});
}
function sfVirtualRepeatWatchExpression(scope){
var coll = scope.$eval(ident.collection);
if( coll.length !== state.total ){
state.total = coll.length;
recomputeActive();
}
return {
start: state.firstActive,
active: state.active,
len: coll.length
};
}
function destroyActiveElements (action, count) {
var dead, ii, remover = Array.prototype[action];
for( ii = 0; ii < count; ii++ ){
dead = remover.call(rendered);
dead.scope().$destroy();
dead.remove();
}
}
// When the watch expression for the repeat changes, we may need to add
// and remove scopes and elements
function sfVirtualRepeatListener(newValue, oldValue, scope){
var oldEnd = oldValue.start + oldValue.active,
collection = scope.$eval(ident.collection),
newElements;
if(newValue === oldValue) {
$log.info('initial listen');
newElements = addElements(newValue.start, oldEnd, collection, scope, iterStartElement);
rendered = newElements;
if(rendered.length) {
rowHeight = computeRowHeight(newElements[0][0]);
}
} else {
var newEnd = newValue.start + newValue.active;
var forward = newValue.start >= oldValue.start;
var delta = forward ? newValue.start - oldValue.start
: oldValue.start - newValue.start;
var endDelta = newEnd >= oldEnd ? newEnd - oldEnd : oldEnd - newEnd;
var contiguous = delta < (forward ? oldValue.active : newValue.active);
$log.info('change by %o,%o rows %s', delta, endDelta, forward ? 'forward' : 'backward');
if(!contiguous) {
$log.info('non-contiguous change');
destroyActiveElements('pop', rendered.length);
rendered = addElements(newValue.start, newEnd, collection, scope, iterStartElement);
} else {
if(forward) {
$log.info('need to remove from the top');
destroyActiveElements('shift', delta);
} else if(delta) {
$log.info('need to add at the top');
newElements = addElements(
newValue.start,
oldValue.start,
collection, scope, iterStartElement);
rendered = newElements.concat(rendered);
}
if(newEnd < oldEnd) {
$log.info('need to remove from the bottom');
destroyActiveElements('pop', oldEnd - newEnd);
} else if(endDelta) {
var lastElement = rendered[rendered.length-1];
$log.info('need to add to the bottom');
newElements = addElements(
oldEnd,
newEnd,
collection, scope, lastElement);
rendered = rendered.concat(newElements);
}
}
if(!rowHeight && rendered.length) {
rowHeight = computeRowHeight(rendered[0][0]);
}
dom.content.css({'padding-top': newValue.start * rowHeight + 'px'});
}
dom.content.css({'height': newValue.len * rowHeight + 'px'});
if(sticky) {
dom.viewport[0].scrollTop = dom.viewport[0].clientHeight + dom.viewport[0].scrollHeight;
}
}
// - The index of the first active element
state.firstActive = 0;
// - The index of the first visible element
state.firstVisible = 0;
// - The number of elements visible in the viewport.
state.visible = 0;
// - The number of active elements
state.active = 0;
// - The total number of elements
state.total = 0;
// - The point at which we add new elements
state.lowWater = state.lowWater || 100;
// - The point at which we remove old elements
state.highWater = state.highWater || 300;
// TODO: now watch the water marks
setContentCss(dom.content);
setViewportCss(dom.viewport);
// When the user scrolls, we move the `state.firstActive`
dom.bind('momentumScrolled', sfVirtualRepeatOnScroll);
// The watch on the collection is just a watch on the length of the
// collection. We don't care if the content changes.
scope.$watch(sfVirtualRepeatWatchExpression, sfVirtualRepeatListener, true);
}
}
};
}]);
})(ionic);

161
js/ext/angular/test/biglist.html Normal file
View File

@ -0,0 +1,161 @@
<html ng-app="navtest">
<head>
<meta charset="utf-8">
<title>Big List</title>
<!-- sets initial viewport load and disables zooming -->
<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>
<style>
.my-repeat-animation > .ng-enter,
.my-repeat-animation > .ng-leave,
.my-repeat-animation > .ng-move {
-webkit-transition: 0.2s linear all;
transition: 0.2s linear all;
position:relative;
}
.my-repeat-animation > .ng-enter {
left:-10px;
opacity:0;
}
.my-repeat-animation > .ng-enter.ng-enter-active {
left:0;
opacity:1;
}
.my-repeat-animation > .ng-leave {
left:0;
opacity:1;
}
.my-repeat-animation > .ng-leave.ng-leave-active {
left:-10px;
opacity:0;
}
.my-repeat-animation > .ng-move {
opacity:0.5;
}
.my-repeat-animation > .ng-move.ng-move-active {
opacity:1;
}
.spinner {
width: 40px;
height: 40px;
border: 2px solid rgba(255,255,255,0.4);
border-radius: 40px;
margin: auto;
margin-bottom: 100px;
}
.spin-thing {
width: 10px;
height: 10px;
background-color: #4a87ee;
border-radius: 10px;
}
</style>
</head>
<body>
<content ng-controller="testctrl" class="reveal-animation">
<virtual-list is-editing="iseditingitems" on-refresh-holding="almostrefreshing()" on-refresh-opening="almostrefreshprojects(ratio)" on-refresh="refreshprojects()" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
<list-refresher>
<spinner ratio="refreshratio.ratio"></spinner>
</list-refresher>
<list-item virt-repeat="item in items"
buttons="item.buttons"
can-delete="true"
can-reorder="true"
can-swipe="true"
on-delete="deleteproject(project)"
on-select="selectproject(project)">
{{item.text}}
<i class="{{item.icon}}"></i>
</list-item>
</virtual-list>
<button ng-click="edit()" class="button button-success">edit</button>
</content>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('navtest', ['ionic.ui.list', 'ionic.ui.content', 'ionic.ui.virtRepeat', 'ngAnimate'])
.directive('spinner', function() {
return {
restrict: 'e',
replace: true,
scope: {
ratio: '='
},
template: '<div class="spinner"><div class="spin-thing"></div></div>',
link: function($scope, $element, $attr) {
$scope.$watch('ratio', function(value) {
if(value > 0.97) {
value = 1;
}
var a = (value * 360) % 360;
var r = (a * math.pi) / 180;
var x = (math.sin(r) * 20) + 14;
var y = (math.cos(r) * -20) + 14;
$element[0].firstelementchild.style.webkittransform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
//$element[0].firstelementchild.setattribute('d', anim);
});
}
}
})
.controller('testctrl', function($scope) {
$scope.refreshratio = { ratio: 0 };
var removeitem = function(item) {
// remove ourselves
$scope.items.splice($scope.items.indexof(item), 1);
};
$scope.almostrefreshing = function() {
console.log('holding for refresh');
};
$scope.almostrefreshprojects = function(amt) {
console.log('almost refreshing', amt);
$scope.refreshratio.ratio = amt;
$scope.$apply();
};
$scope.refreshprojects = function() {
console.log("refreshing");
};
$scope.items = [];
for(var i = 0; i < 500; i++) {
$scope.items.push({
text: 'item ' + i,
candelete: true,
canswipe: true,
canreorder: true,
icon: 'icon-chevron-right',
hide: false,
deleteitem: removeitem,
buttons: [{
text: 'kill',
type: 'button-danger',
buttonclicked: removeitem,
}]
});
}
$scope.edit = function() {
$scope.iseditingitems = !$scope.iseditingitems;
}
});
</script>
</body>
</html>

22
js/views/listViewScroll.js
View File

@ -403,26 +403,46 @@
refresher.style.height = '0px';
},
/**
* If we scrolled and have virtual mode enabled, compute the window
* of active elements in order to figure out the viewport to render.
*/
didScroll: function(e) {
if(this.isVirtual) {
var itemHeight = this.itemHeight;
// TODO: This would be inaccurate if we are windowed
var totalItems = this.listEl.children.length;
// Grab the total height of the list
var scrollHeight = e.target.scrollHeight;
// Get the viewport height
var viewportHeight = this.el.parentNode.offsetHeight;
// scrollTop is the current scroll position
var scrollTop = e.scrollTop;
// High water is the pixel position of the first element to include (everything before
// that will be removed)
var highWater = Math.max(0, e.scrollTop + this.virtualRemoveThreshold);
// Low water is the pixel position of the last element to include (everything after
// that will be removed)
var lowWater = Math.min(scrollHeight, Math.abs(e.scrollTop) + viewportHeight + this.virtualAddThreshold);
// Compute how many items per viewport size can show
var itemsPerViewport = Math.floor((lowWater - highWater) / itemHeight);
// Get the first and last elements in the list based on how many can fit
// between the pixel range of lowWater and highWater
var first = parseInt(Math.abs(highWater / itemHeight));
var last = parseInt(Math.abs(lowWater / itemHeight));
// Get the items we need to remove
this._virtualItemsToRemove = Array.prototype.slice.call(this.listEl.children, 0, first);
// Grab the nodes we will be showing
var nodes = Array.prototype.slice.call(this.listEl.children, first, first + itemsPerViewport);
this.renderViewport && this.renderViewport(highWater, lowWater, first, last);

16
js/views/scrollView.js
View File

@ -122,6 +122,8 @@
_scrollTo: function(x, y, time, easing) {
var _this = this;
time = time || 0;
var start = Date.now();
easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)';
@ -150,6 +152,10 @@
time = 0;
}
if(time == Infinity) {
debugger;
}
var dx = ox - x;
var dy = oy - y;
@ -336,6 +342,13 @@
destination = current + ( speed * speed ) / ( 2 * deceleration ) * ( distance < 0 ? -1 : 1 );
duration = speed / deceleration;
if(speed === 0) {
return {
destination: current,
duration: 0
};
}
// Check if the final destination needs to be rubber banded
if ( destination < lowerMargin ) {
// We have dragged too far down, snap back to the maximum
@ -635,6 +648,9 @@
});
},
/**
* Trigger a done scrolling event.
*/
_doneScrolling: function() {
this.didStopScrolling && this.didStopScrolling({
target: this.el,

2
test/biglists.html
View File

@ -22,7 +22,7 @@
<main id="content" class="scroll">
<div id="list" class="list scroll">
<div id="list" class="list">
<div class="item-divider">
Work