From 257cf1fc34e3054ec5b5926fba2199200dbbc442 Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Sat, 11 Oct 2014 15:10:54 +0200 Subject: [PATCH 1/8] 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(-) 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); } From 6ec9c99d48571103eafb0997cd3434baa421ccbf Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 14:16:17 +0200 Subject: [PATCH 2/8] Use this.$el instead of the absolute selector --- apps/files/js/filelist.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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); }, /** From 33ada11a648276986d7c0a6e21da27cd10b8823e Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 14:55:24 +0200 Subject: [PATCH 3/8] Use function call for FileList.pageSize --- apps/files/js/files.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) { From 9de874f01533522f4c028214e85ff8363e8f2164 Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 15:06:35 +0200 Subject: [PATCH 4/8] 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(-) 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); }, /** From 5033fc4e5249d996800af64afc6488088f3fc220 Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 15:09:01 +0200 Subject: [PATCH 5/8] Stub for pageSize, because now it is dynamically calculated --- apps/files/tests/js/filelistSpec.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index 94b52b395e5..e3cff352803 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -20,7 +20,7 @@ */ describe('OCA.Files.FileList tests', function() { - var testFiles, alertStub, notificationStub, fileList; + var testFiles, alertStub, notificationStub, fileList, pageSizeStub; var bcResizeStub; /** @@ -120,7 +120,7 @@ describe('OCA.Files.FileList tests', function() { size: 250, etag: '456' }]; - + pageSizeStub = sinon.stub(OCA.File.FileList.prototype, 'pageSize').returns(20); fileList = new OCA.Files.FileList($('#app-content-files')); }); afterEach(function() { @@ -130,6 +130,7 @@ describe('OCA.Files.FileList tests', function() { notificationStub.restore(); alertStub.restore(); bcResizeStub.restore(); + pageSizeStub.restore(); }); describe('Getters', function() { it('Returns the current directory', function() { From da27797e8d99931a299d1a8811d43d30053c69f6 Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 15:24:03 +0200 Subject: [PATCH 6/8] Even better - usage of this.$container instead of this.$el.parent() --- apps/files/js/filelist.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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); }, /** From 63145f57654447fd07659f8a0ec1f98bf59a4d34 Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 19:17:21 +0200 Subject: [PATCH 7/8] Typo --- apps/files/tests/js/filelistSpec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index e3cff352803..850977ed467 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -120,7 +120,7 @@ describe('OCA.Files.FileList tests', function() { size: 250, etag: '456' }]; - pageSizeStub = sinon.stub(OCA.File.FileList.prototype, 'pageSize').returns(20); + pageSizeStub = sinon.stub(OCA.Files.FileList.prototype, 'pageSize').returns(20); fileList = new OCA.Files.FileList($('#app-content-files')); }); afterEach(function() { From 8198e70f24e2645904471c19f514a4e0408f4d74 Mon Sep 17 00:00:00 2001 From: Nazar Mokrynskyi Date: Wed, 15 Oct 2014 19:18:35 +0200 Subject: [PATCH 8/8] Changed fileList.pageSize to function call --- apps/files/tests/js/filelistSpec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index 850977ed467..83cf1f428b2 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -815,7 +815,7 @@ describe('OCA.Files.FileList tests', function() { fileList.$fileList.on('fileActionsReady', handler); fileList._nextPage(); expect(handler.calledOnce).toEqual(true); - expect(handler.getCall(0).args[0].$files.length).toEqual(fileList.pageSize); + expect(handler.getCall(0).args[0].$files.length).toEqual(fileList.pageSize()); }); it('does not trigger "fileActionsReady" event after single add with silent argument', function() { var handler = sinon.stub();