javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(virtualScroll): remove virtualScroll until refactor complete

Browse Source
This commit is contained in:
Adam Bradley
2016-02-29 13:02:11 -06:00
parent ea884ded6d
commit fdb311d397
4 changed files with 11 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
ionic/components/list/list.ts
View File

@ -1,19 +1,21 @@
import {Directive, ElementRef, Renderer, Attribute, NgZone, Input} from 'angular2/core';
import {Directive, ElementRef, Renderer, Attribute, NgZone} from 'angular2/core';
import {Ion} from '../ion';
import {ListVirtualScroll} from './virtual';
import {ItemSlidingGesture} from '../item/item-sliding-gesture';
import {isDefined} from '../../util';
/**
* The List is a widely used interface element in almost any mobile app, and can include
* content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
* The List is a widely used interface element in almost any mobile app,
* and can include content ranging from basic text all the way to
* buttons, toggles, icons, and thumbnails.
*
* Both the list, which contains items, and the list items themselves can be any HTML
* element.
* Both the list, which contains items, and the list items themselves
* can be any HTML element.
*
* Using the List and Item components make it easy to support various
* interaction modes such as swipe to edit, drag to reorder, and removing items.
* interaction modes such as swipe to edit, drag to reorder, and
* removing items.
*
* @demo /docs/v2/demos/list/
* @see {@link /docs/v2/components#lists List Component Docs}
*
@ -23,80 +25,28 @@ import {isDefined} from '../../util';
})
export class List extends Ion {
private _enableSliding: boolean = false;
private _virtualScrollingManager: ListVirtualScroll;
/**
* @private
*/
ele: HTMLElement;
/**
* @private
*/
itemTemplate: any;
/**
* @private
*/
slidingGesture: ItemSlidingGesture;
/**
* @private
*/
@Input() items;
/**
* @private
*/
@Input() virtual;
/**
* @private
*/
@Input() content;
constructor(elementRef: ElementRef, private _zone: NgZone) {
super(elementRef);
this.ele = elementRef.nativeElement;
}
/**
* @private
*/
ngOnInit() {
if (isDefined(this.virtual)) {
console.debug('Content', this.content);
console.debug('Virtual?', this.virtual);
console.debug('Items?', this.items.length, 'of \'em');
this._initVirtualScrolling();
}
}
/**
* @private
*/
ngOnDestroy() {
this.ele = null;
this.slidingGesture && this.slidingGesture.unlisten();
}
/**
* @private
*/
_initVirtualScrolling() {
if(!this.content) {
return;
}
this._virtualScrollingManager = new ListVirtualScroll(this);
}
/**
* @private
*/
setItemTemplate(item: any) {
this.itemTemplate = item;
this.slidingGesture && this.slidingGesture.destroy();
this.ele = this.slidingGesture = null;
}
/**

9
ionic/components/list/test/infinite/index.ts
View File

@ -1,9 +0,0 @@
import {App} from 'ionic-angular';
@App({
templateUrl: 'main.html'
})
class E2EApp {
// TODO
}

7
ionic/components/list/test/infinite/main.html
View File

@ -1,7 +0,0 @@
<ion-toolbar><ion-title>Infinite List</ion-title></ion-toolbar>
<ion-content padding>
TODO
</ion-content>

119
ionic/components/list/virtual.ts
View File

@ -1,119 +0,0 @@
import {List} from './list';
export class ListVirtualScroll {
content;
viewContainer;
viewportHeight;
virtualHeight;
viewportScrollHeight;
itemsPerScreen;
list: List;
itemHeight: number = 60;
shownItems = {};
enteringItems = [];
leavingItems = [];
constructor(list: List) {
this.list = list;
this.content = this.list.content;
this.viewportHeight = this.content.height();
this.viewContainer = this.list.itemTemplate.viewContainer;
// Compute the initial sizes
setTimeout(() => {
this.resize();
// Simulate the first event to start layout
this._handleVirtualScroll({
target: this.content.scrollElement
});
})
this.content.addScrollEventListener((event) => {
this._handleVirtualScroll(event);
});
}
resize() {
this.viewportHeight = this.content.height();
this.viewportScrollHeight = this.content.scrollElement.scrollHeight;
this.virtualHeight = this.list.items.length * this.itemHeight;
this.itemsPerScreen = this.viewportHeight / this.itemHeight;
console.debug('VIRTUAL: resize(viewportHeight:', this.viewportHeight,
'viewportScrollHeight:', this.viewportScrollHeight, 'virtualHeight:', this.virtualHeight,
', itemsPerScreen:', this.itemsPerScreen, ')');
}
_handleVirtualScroll(event) {
let item;
let shownItemRef;
let st = event.target.scrollTop;
let sh = event.target.scrollHeight;
let topIndex = Math.floor(st / this.itemHeight);
let bottomIndex = Math.floor((st / this.itemHeight) + this.itemsPerScreen);
let items = this.list.items;
// Key iterate the shown items map
// and compare the index to our index range,
// pushing the items to remove to our leaving
// list if they're ouside this range.
for (let i in this.shownItems) {
if (i < topIndex || i > bottomIndex) {
this.leavingItems.push(this.shownItems[i]);
delete this.shownItems[i];
}
}
let realIndex = 0;
// Iterate the set of items that will be rendered, using the
// index from the actual items list as the map for the
// virtual items we draw
for (let i = topIndex, realIndex = 0; i < bottomIndex && i < items.length; i++, realIndex++) {
item = items[i];
console.debug('Drawing item', i, item.title);
shownItemRef = this.shownItems[i];
// Is this a new item?
if (!shownItemRef) {
let itemView = this.viewContainer.create(this.list.itemTemplate.protoViewRef, realIndex);
itemView.setLocal('\$implicit', item);
itemView.setLocal('\$item', item);
shownItemRef = new VirtualItemRef(item, i, realIndex, itemView);
this.shownItems[i] = shownItemRef;
this.enteringItems.push(shownItemRef);
}
//tuple.view = viewContainer.create(protoViewRef, tuple.record.currentIndex);
}
while (this.leavingItems.length) {
let itemRef = this.leavingItems.pop();
console.debug('Removing item', itemRef.item, itemRef.realIndex);
this.viewContainer.remove(itemRef.realIndex);
}
console.debug('VIRTUAL SCROLL: scroll(scrollTop:', st, 'topIndex:', topIndex, 'bottomIndex:', bottomIndex, ')');
console.debug('Container has', this.list.getNativeElement().children.length, 'children');
}
cellAtIndex(index) {
}
}
class VirtualItemRef {
constructor(public item, public index, public realIndex, public view) {}
}