From 257cf1fc34e3054ec5b5926fba2199200dbbc442 Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Sat, 11 Oct 2014 15:10:54 +0200 Subject: Page size calculation based on real page height This is fix for https://github.com/owncloud/core/issues/10060 Instead of hard coding page size as 20 items, we check real page height, and divide by 50 (height of one row). This will allow to load fewer items on small screens and enough items on large screens (4k, portrait orientation, etc.). Also checking page height on every load to respond on browser window resizing, --- apps/files/js/filelist.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'apps/files/js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 86cba29e76c..eafef6c2a5e 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -49,8 +49,10 @@ fileSummary: null, initialized: false, - // number of files per page - pageSize: 20, + // number of files per page, calculated dynamically + pageSize: function() { + return Math.ceil($('#app-content').height() / 50); + }, /** * Array of files in the current folder. @@ -496,7 +498,7 @@ */ _nextPage: function(animate) { var index = this.$fileList.children().length, - count = this.pageSize, + count = this.pageSize(), tr, fileData, newTrs = [], @@ -1189,7 +1191,7 @@ // if there are less elements visible than one page // but there are still pending elements in the array, // then directly append the next page - if (lastIndex < this.files.length && lastIndex < this.pageSize) { + if (lastIndex < this.files.length && lastIndex < this.pageSize()) { this._nextPage(true); } -- cgit v1.2.3 From 6ec9c99d48571103eafb0997cd3434baa421ccbf Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 14:16:17 +0200 Subject: Use this.$el instead of the absolute selector --- apps/files/js/filelist.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'apps/files/js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index eafef6c2a5e..b8df55760be 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -51,7 +51,7 @@ // number of files per page, calculated dynamically pageSize: function() { - return Math.ceil($('#app-content').height() / 50); + return Math.ceil(this.$el.height() / 50); }, /** -- cgit v1.2.3 From 33ada11a648276986d7c0a6e21da27cd10b8823e Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 14:55:24 +0200 Subject: Use function call for FileList.pageSize --- apps/files/js/files.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'apps/files/js') diff --git a/apps/files/js/files.js b/apps/files/js/files.js index 5fcf99d24af..df268fea6de 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -350,7 +350,7 @@ var createDragShadow = function(event) { } // do not show drag shadow for too many files - var selectedFiles = _.first(FileList.getSelectedFiles(), FileList.pageSize); + var selectedFiles = _.first(FileList.getSelectedFiles(), FileList.pageSize()); selectedFiles = _.sortBy(selectedFiles, FileList._fileInfoCompare); if (!isDragSelected && selectedFiles.length === 1) { -- cgit v1.2.3 From 9de874f01533522f4c028214e85ff8363e8f2164 Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 15:06:35 +0200 Subject: this.$el is not the same as $('#app-content') That is why we use `this.$el.parent()` instead --- apps/files/js/filelist.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'apps/files/js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index b8df55760be..2fbaf71c120 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -51,7 +51,7 @@ // number of files per page, calculated dynamically pageSize: function() { - return Math.ceil(this.$el.height() / 50); + return Math.ceil(this.$el.parent().height() / 50); }, /** -- cgit v1.2.3 From da27797e8d99931a299d1a8811d43d30053c69f6 Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 15:24:03 +0200 Subject: Even better - usage of this.$container instead of this.$el.parent() --- apps/files/js/filelist.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'apps/files/js') diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 2fbaf71c120..ca2ce1a1831 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -51,7 +51,7 @@ // number of files per page, calculated dynamically pageSize: function() { - return Math.ceil(this.$el.parent().height() / 50); + return Math.ceil(this.$container.height() / 50); }, /** -- cgit v1.2.3