Merge pull request #1 from vash15/listview-header

Added listview header

Author: SonoIo

lib/listviews/ListView.js

@@ -55,10 +55,14 @@ export default class ListView extends BaseView {
 			infiniteLoadingSize: 44,
 			distance: 100,
 			pullToRefresh: false,
+			pullToRefreshText: 'Pull to refresh...',
 			pullToRefreshClass: 'ui-pull-to-refresh',
 			touchActiveClassName: 'touch-active',
 			emptyText: '',
-			delayedRender: 0
+			delayedRender: 0,
+			headerView: null, // view to print on the header
+			headerSize: 0, // height of the header in a vertical listview or width in an horizontal listview
+			changeDirectionPan: 50
 		});
 
 		this.items = [];
@@ -81,6 +85,7 @@ export default class ListView extends BaseView {
 		this.touchY = 0;
 		this.direction = null;
 		this.previousDirection = null;
+		this.startChangeDirectionAt = null;
 
 		this.setCollection(this.collection);
 
@@ -146,7 +151,7 @@ export default class ListView extends BaseView {
 		});
 
 		// Preparo gli elementi vuoti
-		var anElement, anItem, aPosition;
+		var anElement, anItem, aPosition, aXY;
 		var itemStyle = {
 			position: 'absolute',
 			top: 0,
@@ -158,16 +163,14 @@ export default class ListView extends BaseView {
 				index: i,
 				$el: anElement
 			};
-			aPosition = this.getPositionAtIndex(i);
+			aXY = this.getXYFromIndex(i);
+			anItem.x = aXY.x;
+			anItem.y = aXY.y;
 
 			if (this.options.orientation === ORIENTATION_VERTICAL) {
-				anItem.x = aPosition.column * Math.floor(this.listWidth / this.options.itemsPerRow);
-				anItem.y = aPosition.row * this.options.itemHeight;
 				itemStyle.width = ((this.listWidth / this.options.itemsPerRow) / this.listWidth) * 100 + '%';
 			}
 			else {
-				anItem.x = aPosition.row * this.options.itemWidth;
-				anItem.y = aPosition.column * Math.floor(this.listHeight / this.options.itemsPerRow);
 				itemStyle.height = ((this.listHeight / this.options.itemsPerRow) / this.listHeight) * 100 + '%';
 			}
 
@@ -180,6 +183,12 @@ export default class ListView extends BaseView {
 
 		this.$el.append($scrollContainer);
 
+		// Header
+		if (this.options.headerView && this.options.headerView instanceof BaseView) {
+			this.$el.prepend(this.options.headerView.el);
+			this.options.headerView.render();
+		}
+
 		// Pull to refresh
 		if (this.options.pullToRefresh) {
 			let $pullToRefresh = this.cache.$pullToRefresh = $('<div>').addClass(this.options.pullToRefreshClass);
@@ -189,7 +198,7 @@ export default class ListView extends BaseView {
 				left: 0,
 				'margin-top': '-60px',
 			});
-			$pullToRefresh.append($('<span>').text('Pull to refresh...'));
+			$pullToRefresh.append($('<span>').text(this.options.pullToRefreshText));
 			this.$el.prepend($pullToRefresh);
 		}
 	}
@@ -219,14 +228,9 @@ export default class ListView extends BaseView {
 
 		// Riposiziona l'elemento
 		let position = this.getPositionAtIndex(item.index);
-		if (this.options.orientation === ORIENTATION_VERTICAL) {
-			item.x = position.column * Math.floor(this.listWidth / this.options.itemsPerRow);
-			item.y = position.row * this.options.itemHeight;
-		}
-		else {
-			item.x = position.row * this.options.itemWidth;
-			item.y = position.column * Math.floor(this.listHeight / this.options.itemsPerRow);
-		}
+		let xy = this.getXYFromIndex(item.index);
+		item.x = xy.x;
+		item.y = xy.y;
 		this.requestAnimationFrame(() => {
 			for (var c = 0; c < this.options.itemsPerRow; c++) {
 				if (position.column !== c)
@@ -479,6 +483,12 @@ export default class ListView extends BaseView {
 		// TODO: animate scroll
 		this.pause();
 		this.el.scrollTop = 0;
+		// Trigger change:direction when user taps the status bar
+		this.direction = DOWN_TOP;
+		if (this.direction != this.previousDirection) {
+			this.trigger('change:direction', this.direction);
+			this.previousDirection = this.direction;
+		}
 		this.resume();
 	}
 
@@ -498,9 +508,15 @@ export default class ListView extends BaseView {
 			let y = this.y = -this.el.scrollTop;
 			this.direction = y < this.previousY ? TOP_DOWN : DOWN_TOP;
 			if (this.direction != this.previousDirection && y < 0) {
-				this.trigger('change:direction', this.direction);
+				this.startChangeDirectionAt = y;
 				this.previousDirection = this.direction;
 			}
+
+			if (this.startChangeDirectionAt !== null && Math.abs(this.startChangeDirectionAt - y) > this.options.changeDirectionPan) {
+				this.startChangeDirectionAt = null;
+				this.trigger('change:direction', this.direction);
+			}
+
 			this.previousY = y;
 			startIndex = this.getStartIndex();
 			endIndex   = this.getEndIndex();
@@ -654,10 +670,10 @@ export default class ListView extends BaseView {
 		}
 
 		if (this.options.orientation === ORIENTATION_VERTICAL) {
-			return rows * this.options.itemHeight + infiniteLoadingSize;
+			return rows * this.options.itemHeight + infiniteLoadingSize + this.options.headerSize;
 		}
 		else {
-			return rows * this.options.itemWidth + infiniteLoadingSize;
+			return rows * this.options.itemWidth + infiniteLoadingSize + this.options.headerSize;
 		}
 	}
 
@@ -679,6 +695,24 @@ export default class ListView extends BaseView {
 		}
 	}
 
+	getXYFromIndex(index) {
+		let aPosition = this.getPositionAtIndex(index);
+		let xy = {};
+		if (this.options.orientation === ORIENTATION_VERTICAL) {
+			xy = {
+				x: aPosition.column * Math.floor(this.listWidth / this.options.itemsPerRow),
+				y: aPosition.row * this.options.itemHeight + this.options.headerSize
+			};
+		}
+		else {
+			xy = {
+				x: aPosition.row * this.options.itemWidth + this.options.headerSize,
+				y: aPosition.column * Math.floor(this.listHeight / this.options.itemsPerRow)
+			};
+		}
+		return xy;
+	}
+
 	getIndexFromXY(x, y) {
 		var index;
 		var row;