pageSize: 20,
totalPages: 0,
+ /**
+ * Array of files in the current folder.
+ * The entries are of file data.
+ */
+ files: [],
+
+ /**
+ * Map of file id to file data
+ */
+ _selectedFiles: {},
+
+ /**
+ * Summary of selected files.
+ * Instance of FileSummary.
+ */
+ _selectionSummary: null,
+
/**
* Compare two file info objects, sorting by
* folders first, then by name.
this.$el = $('#filestable');
this.$fileList = $('#fileList');
this.files = [];
+ this._selectedFiles = {};
+ this._selectionSummary = new FileSummary();
this.fileSummary = this._createSummary();
this.$el.find('.delete-selected').click(this._onClickDeleteSelected);
},
+ /**
+ * Selected/deselects the given file element and updated
+ * the internal selection cache.
+ *
+ * @param $tr single file row element
+ * @param state true to select, false to deselect
+ */
+ _selectFileEl: function($tr, state) {
+ var $checkbox = $tr.find('input:checkbox');
+ var oldData = !!this._selectedFiles[$tr.data('id')];
+ var data;
+ $checkbox.prop('checked', state);
+ $tr.toggleClass('selected', state);
+ // already selected ?
+ if (state === oldData) {
+ return;
+ }
+ data = this.elementToFile($tr);
+ if (state) {
+ this._selectedFiles[$tr.data('id')] = data;
+ this._selectionSummary.add(data);
+ }
+ else {
+ delete this._selectedFiles[$tr.data('id')];
+ this._selectionSummary.remove(data);
+ }
+ this.$el.find('#select_all').prop('checked', this._selectionSummary.getTotal() === this.files.length);
+ },
+
/**
* Event handler for when clicking on files to select them
*/
_onClickFile: function(event) {
+ var $tr = $(this).closest('tr');
if (event.ctrlKey || event.shiftKey) {
event.preventDefault();
if (event.shiftKey) {
- var last = $(FileList._lastChecked).parent().parent().prevAll().length;
- var first = $(this).parent().parent().prevAll().length;
- var start = Math.min(first, last);
- var end = Math.max(first, last);
- var rows = $(this).parent().parent().parent().children('tr');
- for (var i = start; i < end; i++) {
- $(rows).each(function(index) {
- if (index === i) {
- var checkbox = $(this).children().children('input:checkbox');
- $(checkbox).attr('checked', 'checked');
- $(checkbox).parent().parent().addClass('selected');
- }
- });
+ var $lastTr = $(FileList._lastChecked);
+ var lastIndex = $lastTr.index();
+ var currentIndex = $tr.index();
+ var $rows = FileList.$fileList.children('tr');
+
+ // last clicked checkbox below current one ?
+ if (lastIndex > currentIndex) {
+ var aux = lastIndex;
+ lastIndex = currentIndex;
+ currentIndex = aux;
}
- }
- var checkbox = $(this).parent().children('input:checkbox');
- FileList._lastChecked = checkbox;
- if ($(checkbox).attr('checked')) {
- $(checkbox).removeAttr('checked');
- $(checkbox).parent().parent().removeClass('selected');
- $('#select_all').removeAttr('checked');
- } else {
- $(checkbox).attr('checked', 'checked');
- $(checkbox).parent().parent().toggleClass('selected');
- var selectedCount = $('td.filename input:checkbox:checked').length;
- if (selectedCount === $('td.filename input:checkbox').length) {
- $('#select_all').attr('checked', 'checked');
+
+ // auto-select everything in-between
+ for (var i = lastIndex + 1; i < currentIndex; i++) {
+ FileList._selectFileEl($rows.eq(i), true);
}
}
+ else {
+ FileList._lastChecked = $tr;
+ }
+ var $checkbox = $tr.find('input:checkbox');
+ FileList._selectFileEl($tr, !$checkbox.prop('checked'));
FileList.updateSelectionSummary();
} else {
- var filename=$(this).parent().parent().attr('data-file');
- var tr = FileList.findFileEl(filename);
- var renaming=tr.data('renaming');
+ var filename = $tr.attr('data-file');
+ var renaming = $tr.data('renaming');
if (!renaming) {
- FileActions.currentFile = $(this).parent();
+ FileActions.currentFile = $tr.find('td');
var mime=FileActions.getCurrentMimeType();
var type=FileActions.getCurrentType();
var permissions = FileActions.getCurrentPermissions();
}
}
}
-
},
/**
* Event handler for when clicking on a file's checkbox
*/
- _onClickFileCheckbox: function(event) {
- // FIXME: not sure what the difference is supposed to be with FileList._onClickFile
- if (event.shiftKey) {
- var last = $(FileList._lastChecked).parent().parent().prevAll().length;
- var first = $(this).parent().parent().prevAll().length;
- var start = Math.min(first, last);
- var end = Math.max(first, last);
- var rows = $(this).parent().parent().parent().children('tr');
- for (var i = start; i < end; i++) {
- $(rows).each(function(index) {
- if (index === i) {
- var checkbox = $(this).children().children('input:checkbox');
- $(checkbox).attr('checked', 'checked');
- $(checkbox).parent().parent().addClass('selected');
- }
- });
- }
- }
- var selectedCount=$('td.filename input:checkbox:checked').length;
- $(this).parent().parent().toggleClass('selected');
- if (!$(this).attr('checked')) {
- $('#select_all').attr('checked',false);
- } else {
- if (selectedCount===$('td.filename input:checkbox').length) {
- $('#select_all').attr('checked',true);
- }
- }
+ _onClickFileCheckbox: function() {
+ var $tr = $(this).closest('tr');
+ FileList._selectFileEl($tr, !$tr.hasClass('selected'));
+ FileList._lastChecked = $tr;
FileList.updateSelectionSummary();
},
/**
* Event handler for when selecting/deselecting all files
*/
- _onClickSelectAll: function(e) {
+ _onClickSelectAll: function() {
var checked = $(this).prop('checked');
FileList.$fileList.find('td.filename input:checkbox').prop('checked', checked)
- .parent().parent().toggleClass('selected', checked);
+ .closest('tr').toggleClass('selected', checked);
+ FileList._selectedFiles = {};
+ if (checked) {
+ for (var i = 0; i < FileList.files.length; i++) {
+ var fileData = FileList.files[i];
+ FileList._selectedFiles[fileData.id] = fileData;
+ FileList._selectionSummary.add(fileData);
+ }
+ }
+ else {
+ FileList._selectionSummary.clear();
+ }
FileList.updateSelectionSummary();
},
dir = OC.dirname(dir) || '/';
}
else {
- files = FileList.getSelectedFiles('name');
+ files = _.pluck(FileList.getSelectedFiles(), 'name');
}
OC.Notification.show(t('files','Your download is being prepared. This might take some time if the files are big.'));
OC.redirect(Files.getDownloadUrl(files, dir));
_onClickDeleteSelected: function(event) {
var files = null;
if (!FileList.isAllSelected()) {
- files = FileList.getSelectedFiles('name');
+ files = _.pluck(FileList.getSelectedFiles(), 'name');
}
FileList.do_delete(files);
event.preventDefault();
var index = this.$fileList.children().length,
count = this.pageSize,
tr,
+ fileData,
newTrs = [],
- selected = this.isAllSelected();
+ isAllSelected = this.isAllSelected();
if (index >= this.files.length) {
return;
this.pageNumber++;
while (count > 0 && index < this.files.length) {
- tr = this._renderRow(this.files[index], {updateSummary: false});
+ fileData = this.files[index];
+ tr = this._renderRow(fileData, {updateSummary: false});
this.$fileList.append(tr);
- if (selected) {
+ if (isAllSelected || this._selectedFiles[fileData.id]) {
tr.addClass('selected');
tr.find('input:checkbox').prop('checked', true);
}
this.$fileList.empty();
// clear "Select all" checkbox
- $('#select_all').prop('checked', false);
+ this.$el.find('#select_all').prop('checked', false);
this.isEmpty = this.files.length === 0;
this._nextPage();
previousDir: currentDir
}
));
- FileList.reload();
+ this._selectedFiles = {};
+ this._selectionSummary.clear();
+ this.reload();
},
linkTo: function(dir) {
return OC.linkTo('files', 'index.php')+"?dir="+ encodeURIComponent(dir).replace(/%2F/g, '/');
if (!fileEl.length) {
return null;
}
+ if (this._selectedFiles[fileEl.data('id')]) {
+ // remove from selection first
+ this._selectFileEl(fileEl, false);
+ }
if (fileEl.data('permissions') & OC.PERMISSION_DELETE) {
// file is only draggable when delete permissions are set
fileEl.find('td.filename').draggable('destroy');
* Update UI based on the current selection
*/
updateSelectionSummary: function() {
- var allSelected = this.isAllSelected();
- var selected;
- var summary = {
- totalFiles: 0,
- totalDirs: 0,
- totalSize: 0
- };
-
- if (allSelected) {
- summary = this.fileSummary.summary;
- }
- else {
- selected = this.getSelectedFiles();
- for (var i = 0; i < selected.length; i++ ){
- if (selected[i].type === 'dir') {
- summary.totalDirs++;
- }
- else {
- summary.totalFiles++;
- }
- summary.totalSize += parseInt(selected[i].size, 10) || 0;
- }
- }
+ var summary = this._selectionSummary.summary;
if (summary.totalFiles === 0 && summary.totalDirs === 0) {
$('#headerName span.name').text(t('files','Name'));
$('#headerSize').text(t('files','Size'));
$('#modified').text(t('files','Modified'));
$('table').removeClass('multiselect');
$('.selectedActions').addClass('hidden');
- $('#select_all').removeAttr('checked');
}
else {
$('.selectedActions').removeClass('hidden');
- $('#headerSize').text(humanFileSize(summary.totalSize));
+ $('#headerSize').text(OC.Util.humanFileSize(summary.totalSize));
var selection = '';
if (summary.totalDirs > 0) {
selection += n('files', '%n folder', '%n folders', summary.totalDirs);
},
/**
- * @brief get a list of selected files
- * @param {string} property (option) the property of the file requested
- * @return {array}
+ * Returns the file info of the selected files
*
- * possible values for property: name, mime, size and type
- * if property is set, an array with that property for each file is returnd
- * if it's ommited an array of objects with all properties is returned
+ * @return array of file names
*/
- getSelectedFiles: function(property) {
- var elements=$('td.filename input:checkbox:checked').parent().parent();
- var files=[];
- elements.each(function(i,element) {
- // TODO: make the json format the same as in FileList.add()
- var file = FileList.elementToFile($(element));
- // FIXME: legacy attributes
- file.origin = file.id;
- file.mime = file.mimetype;
- if (property) {
- files.push(file[property]);
- } else {
- files.push(file);
- }
- });
- return files;
+ getSelectedFiles: function() {
+ return _.values(this._selectedFiles);
}
-}
+};
$(document).ready(function() {
FileList.initialize();
var testFiles, alertStub, notificationStub,
pushStateStub;
+ /**
+ * Generate test file data
+ */
+ function generateFiles(startIndex, endIndex) {
+ var files = [];
+ var name;
+ for (var i = startIndex; i <= endIndex; i++) {
+ name = 'File with index ';
+ if (i < 10) {
+ // do not rely on localeCompare here
+ // and make the sorting predictable
+ // cross-browser
+ name += '0';
+ }
+ name += i + '.txt';
+ files.push({
+ id: i,
+ type: 'file',
+ name: name,
+ mimetype: 'text/plain',
+ size: i * 2,
+ etag: 'abc'
+ });
+ }
+ return files;
+ }
+
beforeEach(function() {
// init horrible parameters
var $body = $('body');
});
});
describe('Rendering next page on scroll', function() {
-
- function generateFiles(startIndex, endIndex) {
- var files = [];
- var name;
- for (var i = startIndex; i <= endIndex; i++) {
- name = 'File with index ';
- if (i < 10) {
- // do not rely on localeCompare here
- // and make the sorting predictable
- // cross-browser
- name += '0';
- }
- name += i + '.txt';
- files.push({
- id: i,
- type: 'file',
- name: name,
- mimetype: 'text/plain',
- size: i * 2,
- etag: 'abc'
- });
- }
- return files;
- }
-
beforeEach(function() {
FileList.setFiles(generateFiles(0, 64));
});
expect($tr.find('input:checkbox').prop('checked')).toEqual(true);
});
+ it('Selects/deselect a file when clicking on the name while holding Ctrl', function() {
+ var $tr = FileList.findFileEl('One.txt');
+ var $tr2 = FileList.findFileEl('Three.pdf');
+ var e;
+ expect($tr.find('input:checkbox').prop('checked')).toEqual(false);
+ expect($tr2.find('input:checkbox').prop('checked')).toEqual(false);
+ e = new $.Event('click');
+ e.ctrlKey = true;
+ $tr.find('td.filename .name').trigger(e);
+
+ expect($tr.find('input:checkbox').prop('checked')).toEqual(true);
+ expect($tr2.find('input:checkbox').prop('checked')).toEqual(false);
+
+ // click on second entry, does not clear the selection
+ e = new $.Event('click');
+ e.ctrlKey = true;
+ $tr2.find('td.filename .name').trigger(e);
+ expect($tr.find('input:checkbox').prop('checked')).toEqual(true);
+ expect($tr2.find('input:checkbox').prop('checked')).toEqual(true);
+
+ expect(_.pluck(FileList.getSelectedFiles(), 'name')).toEqual(['One.txt', 'Three.pdf']);
+
+ // deselect now
+ e = new $.Event('click');
+ e.ctrlKey = true;
+ $tr2.find('td.filename .name').trigger(e);
+ expect($tr.find('input:checkbox').prop('checked')).toEqual(true);
+ expect($tr2.find('input:checkbox').prop('checked')).toEqual(false);
+ expect(_.pluck(FileList.getSelectedFiles(), 'name')).toEqual(['One.txt']);
+ });
+ it('Selects a range when clicking on one file then Shift clicking on another one', function() {
+ var $tr = FileList.findFileEl('One.txt');
+ var $tr2 = FileList.findFileEl('Three.pdf');
+ var e;
+ $tr.find('td.filename input:checkbox').click();
+ e = new $.Event('click');
+ e.shiftKey = true;
+ $tr2.find('td.filename .name').trigger(e);
+
+ expect($tr.find('input:checkbox').prop('checked')).toEqual(true);
+ expect($tr2.find('input:checkbox').prop('checked')).toEqual(true);
+ expect(FileList.findFileEl('Two.jpg').find('input:checkbox').prop('checked')).toEqual(true);
+ var selection = _.pluck(FileList.getSelectedFiles(), 'name');
+ expect(selection.length).toEqual(3);
+ expect(selection).toContain('One.txt');
+ expect(selection).toContain('Two.jpg');
+ expect(selection).toContain('Three.pdf');
+ });
+ it('Selects a range when clicking on one file then Shift clicking on another one that is above the first one', function() {
+ var $tr = FileList.findFileEl('One.txt');
+ var $tr2 = FileList.findFileEl('Three.pdf');
+ var e;
+ $tr2.find('td.filename input:checkbox').click();
+ e = new $.Event('click');
+ e.shiftKey = true;
+ $tr.find('td.filename .name').trigger(e);
+
+ expect($tr.find('input:checkbox').prop('checked')).toEqual(true);
+ expect($tr2.find('input:checkbox').prop('checked')).toEqual(true);
+ expect(FileList.findFileEl('Two.jpg').find('input:checkbox').prop('checked')).toEqual(true);
+ var selection = _.pluck(FileList.getSelectedFiles(), 'name');
+ expect(selection.length).toEqual(3);
+ expect(selection).toContain('One.txt');
+ expect(selection).toContain('Two.jpg');
+ expect(selection).toContain('Three.pdf');
+ });
it('Selecting all files will automatically check "select all" checkbox', function() {
expect($('#select_all').prop('checked')).toEqual(false);
$('#fileList tr td.filename input:checkbox').click();
expect($('#select_all').prop('checked')).toEqual(true);
});
+ it('Selecting all files on the first visible page will not automatically check "select all" checkbox', function() {
+ FileList.setFiles(generateFiles(0, 41));
+ expect($('#select_all').prop('checked')).toEqual(false);
+ $('#fileList tr td.filename input:checkbox').click();
+ expect($('#select_all').prop('checked')).toEqual(false);
+ });
it('Clicking "select all" will select/deselect all files', function() {
+ FileList.setFiles(generateFiles(0, 41));
$('#select_all').click();
expect($('#select_all').prop('checked')).toEqual(true);
$('#fileList tr input:checkbox').each(function() {
expect($(this).prop('checked')).toEqual(true);
});
+ expect(_.pluck(FileList.getSelectedFiles(), 'name').length).toEqual(42);
$('#select_all').click();
expect($('#select_all').prop('checked')).toEqual(false);
$('#fileList tr input:checkbox').each(function() {
expect($(this).prop('checked')).toEqual(false);
});
+ expect(_.pluck(FileList.getSelectedFiles(), 'name').length).toEqual(0);
});
it('Clicking "select all" then deselecting a file will uncheck "select all"', function() {
$('#select_all').click();
$tr.find('input:checkbox').click();
expect($('#select_all').prop('checked')).toEqual(false);
+ expect(_.pluck(FileList.getSelectedFiles(), 'name').length).toEqual(3);
+ });
+ it('Auto-selects files on next page when "select all" is checked', function() {
+ FileList.setFiles(generateFiles(0, 41));
+ $('#select_all').click();
+
+ expect(FileList.$fileList.find('tr input:checkbox:checked').length).toEqual(20);
+ FileList._nextPage(true);
+ expect(FileList.$fileList.find('tr input:checkbox:checked').length).toEqual(40);
+ FileList._nextPage(true);
+ expect(FileList.$fileList.find('tr input:checkbox:checked').length).toEqual(42);
+ expect(_.pluck(FileList.getSelectedFiles(), 'name').length).toEqual(42);
});
it('Selecting files updates selection summary', function() {
var $summary = $('#headerName span.name');
FileList.changeDirectory('/');
fakeServer.respond();
expect($('#select_all').prop('checked')).toEqual(false);
+ expect(_.pluck(FileList.getSelectedFiles(), 'name')).toEqual([]);
+ });
+ it('getSelectedFiles returns the selected files even when they are on the next page', function() {
+ var selectedFiles;
+ FileList.setFiles(generateFiles(0, 41));
+ $('#select_all').click();
+ // unselect one to not have the "allFiles" case
+ FileList.$fileList.find('tr input:checkbox:first').click();
+
+ // only 20 files visible, must still return all the selected ones
+ selectedFiles = _.pluck(FileList.getSelectedFiles(), 'name');
+
+ expect(selectedFiles.length).toEqual(41);
});
describe('Actions', function() {
beforeEach(function() {
FileList.findFileEl('Three.pdf').find('input:checkbox').click();
FileList.findFileEl('somedir').find('input:checkbox').click();
});
- it('getSelectedFiles returns the selected files', function() {
+ it('getSelectedFiles returns the selected file data', function() {
var files = FileList.getSelectedFiles();
expect(files.length).toEqual(3);
expect(files[0]).toEqual({
id: 1,
name: 'One.txt',
- mime: 'text/plain',
mimetype: 'text/plain',
type: 'file',
size: 12,
- etag: 'abc',
- origin: 1
+ etag: 'abc'
});
expect(files[1]).toEqual({
id: 3,
type: 'file',
name: 'Three.pdf',
- mime: 'application/pdf',
mimetype: 'application/pdf',
size: 58009,
- etag: '123',
- origin: 3
+ etag: '123'
});
expect(files[2]).toEqual({
id: 4,
type: 'dir',
name: 'somedir',
- mime: 'httpd/unix-directory',
mimetype: 'httpd/unix-directory',
size: 250,
- etag: '456',
- origin: 4
+ etag: '456'
+ });
+ });
+ it('Removing a file removes it from the selection', function() {
+ FileList.remove('Three.pdf');
+ var files = FileList.getSelectedFiles();
+ expect(files.length).toEqual(2);
+ expect(files[0]).toEqual({
+ id: 1,
+ name: 'One.txt',
+ mimetype: 'text/plain',
+ type: 'file',
+ size: 12,
+ etag: 'abc'
+ });
+ expect(files[1]).toEqual({
+ id: 4,
+ type: 'dir',
+ name: 'somedir',
+ mimetype: 'httpd/unix-directory',
+ size: 250,
+ etag: '456'
});
});
describe('Download', function() {
projects / nextcloud-server.git / commitdiff