Added infinite scrolling (in-memory list)

apps/files/js/filelist.js

@@ -19,6 +19,12 @@ window.FileList = {
 	breadcrumb: null,
 	initialized: false,
 
+	// number of files per page
+	pageSize: 20,
+	// zero based page number
+	pageNumber: 0,
+	totalPages: 0,
+
 	/**
 	 * Initialize the file list and its components
 	 */
@@ -62,6 +68,16 @@ window.FileList = {
 		}
 	},
 
+	_onScroll: function(e) {
+		if (this.pageNumber + 1 >= this.totalPages) {
+			return;
+		}
+		var target = $(document);
+		if ($(window).scrollTop() + $(window).height() > $(document).height() - 20) {
+			this._nextPage(true);
+		}
+	},
+
 	/**
 	 * Event handler when dropping on a breadcrumb
 	 */
@@ -129,6 +145,42 @@ window.FileList = {
 		// use filterAttr to avoid escaping issues
 		return this.$fileList.find('tr').filterAttr('data-file', fileName);
 	},
+
+	/**
+	 * Appends the next page of files into the table
+	 * @param animate true to animate the new elements
+	 */
+	_nextPage: function(animate) {
+		var tr, index, count = this.pageSize,
+			newTrs = [];
+
+		if (this.pageNumber + 1 >= this.totalPages) {
+			return;
+		}
+
+		this.pageNumber++;
+		index = this.pageNumber * this.pageSize;
+
+		while (count > 0 && index < this.files.length) {
+			tr = this.add(this.files[index], {updateSummary: false});
+			if (animate) {
+				tr.addClass('appear transparent'); // TODO
+				newTrs.push(tr);
+			}
+			index++;
+			count--;
+		}
+
+		if (animate) {
+			// defer, for animation
+			window.setTimeout(function() {
+				for (var i = 0; i < newTrs.length; i++ ) {
+					newTrs[i].removeClass('transparent');
+				}
+			}, 0);
+		}
+	},
+
 	/**
 	 * Sets the files to be displayed in the list.
 	 * This operation will rerender the list and update the summary.
@@ -136,14 +188,15 @@ window.FileList = {
 	 */
 	setFiles:function(filesArray) {
 		// detach to make adding multiple rows faster
-		this.$fileList.detach();
+		this.files = filesArray;
+		this.pageNumber = -1;
+		this.totalPages = Math.ceil(filesArray.length / this.pageSize);
 
+		this.$fileList.detach();
 		this.$fileList.empty();
 
-		this.isEmpty = filesArray.length === 0;
-		for (var i = 0; i < filesArray.length; i++) {
-			this.add(filesArray[i], {updateSummary: false});
-		}
+		this.isEmpty = this.files.length === 0;
+		this._nextPage();
 
 		this.$el.find('thead').after(this.$fileList);
 
@@ -1255,6 +1308,8 @@ $(document).ready(function() {
 		}
 	};
 
+	$(window).scroll(function(e) {FileList._onScroll(e);});
+
 	var dir = parseCurrentDirFromUrl();
 	// trigger ajax load, deferred to let sub-apps do their overrides first
 	setTimeout(function() {

core/css/apps.css

@@ -243,7 +243,6 @@ button.loading {
 	padding-right: 30px;
 }
 
-
 /* general styles for the content area */
 .section {
 	display: block;
@@ -264,3 +263,14 @@ button.loading {
 	vertical-align: -2px;
 	margin-right: 4px;
 }
+.appear {
+	opacity: 1;
+	transition: opacity 500ms ease 0s;
+	-moz-transition: opacity 500ms ease 0s;
+	-ms-transition: opacity 500ms ease 0s;
+	-o-transition: opacity 500ms ease 0s;
+	-webkit-transition: opacity 500ms ease 0s;
+}
+.appear.transparent {
+	opacity: 0;
+}