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,

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 86cba29e76c96d1a5bf02e6d9a36f7f1cae9fcb9..eafef6c2a5e23353abb62a26fda7702ebbd0a694 100644 (file)
--- 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);
                        }