From 310d79728447ecf69f18d0b61a527397bd961888 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Tue, 1 Sep 2015 19:29:55 +0200 Subject: [PATCH] Add versions tab to files sidebar - move versions to a tab in the files sidebar - added mechanism to auto-update the row in the FileList whenever values are set to the FileInfoModel given to the sidebar - updated tags/favorite action to make use of that new mechanism --- apps/files/js/detailsview.js | 2 +- apps/files/js/detailtabview.js | 7 + apps/files/js/filelist.js | 40 ++++ apps/files/js/tagsplugin.js | 16 +- apps/files/tests/js/tagspluginspec.js | 18 +- apps/files_versions/ajax/getVersions.php | 2 +- apps/files_versions/ajax/preview.php | 5 +- apps/files_versions/css/versions.css | 27 ++- apps/files_versions/js/filesplugin.js | 34 +++ apps/files_versions/js/versioncollection.js | 91 ++++++++ apps/files_versions/js/versionmodel.js | 77 +++++++ apps/files_versions/js/versions.js | 193 ---------------- apps/files_versions/js/versionstabview.js | 198 +++++++++++++++++ apps/files_versions/lib/hooks.php | 12 + .../tests/js/versioncollectionSpec.js | 161 ++++++++++++++ .../tests/js/versionmodelSpec.js | 96 ++++++++ .../tests/js/versionstabviewSpec.js | 208 ++++++++++++++++++ tests/karma.config.js | 10 + 18 files changed, 976 insertions(+), 221 deletions(-) create mode 100644 apps/files_versions/js/filesplugin.js create mode 100644 apps/files_versions/js/versioncollection.js create mode 100644 apps/files_versions/js/versionmodel.js delete mode 100644 apps/files_versions/js/versions.js create mode 100644 apps/files_versions/js/versionstabview.js create mode 100644 apps/files_versions/tests/js/versioncollectionSpec.js create mode 100644 apps/files_versions/tests/js/versionmodelSpec.js create mode 100644 apps/files_versions/tests/js/versionstabviewSpec.js diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js index 83d7fd4a17..3a775c29ec 100644 --- a/apps/files/js/detailsview.js +++ b/apps/files/js/detailsview.js @@ -35,7 +35,7 @@ var DetailsView = OC.Backbone.View.extend({ id: 'app-sidebar', tabName: 'div', - className: 'detailsView', + className: 'detailsView scroll-container', _template: null, diff --git a/apps/files/js/detailtabview.js b/apps/files/js/detailtabview.js index b0e170bc4e..449047cf25 100644 --- a/apps/files/js/detailtabview.js +++ b/apps/files/js/detailtabview.js @@ -84,6 +84,13 @@ */ getFileInfo: function() { return this.model; + }, + + /** + * Load the next page of results + */ + nextPage: function() { + // load the next page, if applicable } }); DetailTabView._TAB_COUNT = 0; diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 9593ee79e6..3f0ee932d1 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -291,6 +291,7 @@ * @return {OCA.Files.FileInfoModel} file info model */ getModelForFile: function(fileName) { + var self = this; var $tr; // jQuery object ? if (fileName.is) { @@ -318,6 +319,21 @@ if (!model.has('path')) { model.set('path', this.getCurrentDirectory(), {silent: true}); } + + model.on('change', function(model) { + // re-render row + var highlightState = $tr.hasClass('highlighted'); + $tr = self.updateRow( + $tr, + _.extend({isPreviewAvailable: true}, model.toJSON()), + {updateSummary: true, silent: false, animate: true} + ); + $tr.toggleClass('highlighted', highlightState); + }); + model.on('busy', function(model, state) { + self.showFileBusyState($tr, state); + }); + return model; }, @@ -341,6 +357,9 @@ if (!fileName) { OC.Apps.hideAppSidebar(this._detailsView.$el); this._detailsView.setFileInfo(null); + if (this._currentFileModel) { + this._currentFileModel.off(); + } this._currentFileModel = null; return; } @@ -1223,6 +1242,10 @@ reload: function() { this._selectedFiles = {}; this._selectionSummary.clear(); + if (this._currentFileModel) { + this._currentFileModel.off(); + } + this._currentFileModel = null; this.$el.find('.select-all').prop('checked', false); this.showMask(); if (this._reloadCall) { @@ -1554,6 +1577,23 @@ }, + /** + * Updates the given row with the given file info + * + * @param {Object} $tr row element + * @param {OCA.Files.FileInfo} fileInfo file info + * @param {Object} options options + * + * @return {Object} new row element + */ + updateRow: function($tr, fileInfo, options) { + this.files.splice($tr.index(), 1); + $tr.remove(); + $tr = this.add(fileInfo, _.extend({updateSummary: false, silent: true}, options)); + this.$fileList.trigger($.Event('fileActionsReady', {fileList: this, $files: $tr})); + return $tr; + }, + /** * Triggers file rename input field for the given file name. * If the user enters a new name, the file will be renamed. diff --git a/apps/files/js/tagsplugin.js b/apps/files/js/tagsplugin.js index 609e38ca9a..9f45da9a6e 100644 --- a/apps/files/js/tagsplugin.js +++ b/apps/files/js/tagsplugin.js @@ -92,6 +92,7 @@ actionHandler: function(fileName, context) { var $actionEl = context.$file.find('.action-favorite'); var $file = context.$file; + var fileInfo = context.fileList.files[$file.index()]; var dir = context.dir || context.fileList.getCurrentDirectory(); var tags = $file.attr('data-tags'); if (_.isUndefined(tags)) { @@ -106,9 +107,11 @@ } else { tags.push(OC.TAG_FAVORITE); } + + // pre-toggle the star toggleStar($actionEl, !isFavorite); - context.fileInfoModel.set('tags', tags); + context.fileInfoModel.trigger('busy', context.fileInfoModel, true); self.applyFileTags( dir + '/' + fileName, @@ -116,17 +119,16 @@ $actionEl, isFavorite ).then(function(result) { + context.fileInfoModel.trigger('busy', context.fileInfoModel, false); // response from server should contain updated tags var newTags = result.tags; if (_.isUndefined(newTags)) { newTags = tags; } - var fileInfo = context.fileList.files[$file.index()]; - // read latest state from result - toggleStar($actionEl, (newTags.indexOf(OC.TAG_FAVORITE) >= 0)); - $file.attr('data-tags', newTags.join('|')); - $file.attr('data-favorite', !isFavorite); - fileInfo.tags = newTags; + context.fileInfoModel.set({ + 'tags': newTags, + 'favorite': !isFavorite + }); }); } }); diff --git a/apps/files/tests/js/tagspluginspec.js b/apps/files/tests/js/tagspluginspec.js index 950fb75425..533aa63362 100644 --- a/apps/files/tests/js/tagspluginspec.js +++ b/apps/files/tests/js/tagspluginspec.js @@ -79,12 +79,12 @@ describe('OCA.Files.TagsPlugin tests', function() { it('sends request to server and updates icon', function() { var request; fileList.setFiles(testFiles); - $tr = fileList.$el.find('tbody tr:first'); - $action = $tr.find('.action-favorite'); + var $tr = fileList.findFileEl('One.txt'); + var $action = $tr.find('.action-favorite'); $action.click(); expect(fakeServer.requests.length).toEqual(1); - var request = fakeServer.requests[0]; + request = fakeServer.requests[0]; expect(JSON.parse(request.requestBody)).toEqual({ tags: ['tag1', 'tag2', OC.TAG_FAVORITE] }); @@ -92,12 +92,18 @@ describe('OCA.Files.TagsPlugin tests', function() { tags: ['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE] })); + // re-read the element as it was re-inserted + $tr = fileList.findFileEl('One.txt'); + $action = $tr.find('.action-favorite'); + expect($tr.attr('data-favorite')).toEqual('true'); expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]); expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]); expect($action.find('img').attr('src')).toEqual(OC.imagePath('core', 'actions/starred')); $action.click(); + + expect(fakeServer.requests.length).toEqual(2); request = fakeServer.requests[1]; expect(JSON.parse(request.requestBody)).toEqual({ tags: ['tag1', 'tag2', 'tag3'] @@ -106,7 +112,11 @@ describe('OCA.Files.TagsPlugin tests', function() { tags: ['tag1', 'tag2', 'tag3'] })); - expect($tr.attr('data-favorite')).toEqual('false'); + // re-read the element as it was re-inserted + $tr = fileList.findFileEl('One.txt'); + $action = $tr.find('.action-favorite'); + + expect($tr.attr('data-favorite')).toBeFalsy(); expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3']); expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3']); expect($action.find('img').attr('src')).toEqual(OC.imagePath('core', 'actions/star')); diff --git a/apps/files_versions/ajax/getVersions.php b/apps/files_versions/ajax/getVersions.php index 20d6024017..59bd30f434 100644 --- a/apps/files_versions/ajax/getVersions.php +++ b/apps/files_versions/ajax/getVersions.php @@ -44,6 +44,6 @@ if( $versions ) { } else { - \OCP\JSON::success(array('data' => array('versions' => false, 'endReached' => true))); + \OCP\JSON::success(array('data' => array('versions' => [], 'endReached' => true))); } diff --git a/apps/files_versions/ajax/preview.php b/apps/files_versions/ajax/preview.php index 8a9a5fba14..2f33f0278e 100644 --- a/apps/files_versions/ajax/preview.php +++ b/apps/files_versions/ajax/preview.php @@ -53,7 +53,10 @@ try { $preview->setScalingUp($scalingUp); $preview->showPreview(); -}catch(\Exception $e) { +} catch (\OCP\Files\NotFoundException $e) { + \OC_Response::setStatus(404); + \OCP\Util::writeLog('core', $e->getmessage(), \OCP\Util::DEBUG); +} catch (\Exception $e) { \OC_Response::setStatus(500); \OCP\Util::writeLog('core', $e->getmessage(), \OCP\Util::DEBUG); } diff --git a/apps/files_versions/css/versions.css b/apps/files_versions/css/versions.css index e3ccfc3c86..ec0f0cc989 100644 --- a/apps/files_versions/css/versions.css +++ b/apps/files_versions/css/versions.css @@ -1,19 +1,18 @@ -#dropdown.drop-versions { - width: 360px; +.versionsTabView .clear-float { + clear: both; } - -#found_versions li { +.versionsTabView li { width: 100%; cursor: default; height: 56px; float: left; border-bottom: 1px solid rgba(100,100,100,.1); } -#found_versions li:last-child { +.versionsTabView li:last-child { border-bottom: none; } -#found_versions li > * { +.versionsTabView li > * { padding: 7px; float: left; vertical-align: top; @@ -22,34 +21,34 @@ opacity: .5; } -#found_versions li > a, -#found_versions li > span { +.versionsTabView li > a, +.versionsTabView li > span { padding: 17px 7px; } -#found_versions li > *:hover, -#found_versions li > *:focus { +.versionsTabView li > *:hover, +.versionsTabView li > *:focus { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } -#found_versions img { +.versionsTabView img { cursor: pointer; padding-right: 4px; } -#found_versions img.preview { +.versionsTabView img.preview { cursor: default; opacity: 1; } -#found_versions .versionDate { +.versionsTabView .versionDate { min-width: 100px; vertical-align: text-bottom; } -#found_versions .revertVersion { +.versionsTabView .revertVersion { cursor: pointer; float: right; max-width: 130px; diff --git a/apps/files_versions/js/filesplugin.js b/apps/files_versions/js/filesplugin.js new file mode 100644 index 0000000000..42075ce646 --- /dev/null +++ b/apps/files_versions/js/filesplugin.js @@ -0,0 +1,34 @@ +/* + * Copyright (c) 2015 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +(function() { + OCA.Versions = OCA.Versions || {}; + + /** + * @namespace + */ + OCA.Versions.Util = { + /** + * Initialize the versions plugin. + * + * @param {OCA.Files.FileList} fileList file list to be extended + */ + attach: function(fileList) { + if (fileList.id === 'trashbin' || fileList.id === 'files.public') { + return; + } + + fileList.registerTabView(new OCA.Versions.VersionsTabView('versionsTabView')); + } + }; +})(); + +OC.Plugins.register('OCA.Files.FileList', OCA.Versions.Util); + diff --git a/apps/files_versions/js/versioncollection.js b/apps/files_versions/js/versioncollection.js new file mode 100644 index 0000000000..3f8214cde8 --- /dev/null +++ b/apps/files_versions/js/versioncollection.js @@ -0,0 +1,91 @@ +/* + * Copyright (c) 2015 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +(function() { + /** + * @memberof OCA.Versions + */ + var VersionCollection = OC.Backbone.Collection.extend({ + model: OCA.Versions.VersionModel, + + /** + * @var OCA.Files.FileInfoModel + */ + _fileInfo: null, + + _endReached: false, + _currentIndex: 0, + + url: function() { + var url = OC.generateUrl('/apps/files_versions/ajax/getVersions.php'); + var query = { + source: this._fileInfo.getFullPath(), + start: this._currentIndex + }; + return url + '?' + OC.buildQueryString(query); + }, + + setFileInfo: function(fileInfo) { + this._fileInfo = fileInfo; + // reset + this._endReached = false; + this._currentIndex = 0; + }, + + getFileInfo: function() { + return this._fileInfo; + }, + + hasMoreResults: function() { + return !this._endReached; + }, + + fetch: function(options) { + if (!options || options.remove) { + this._currentIndex = 0; + } + return OC.Backbone.Collection.prototype.fetch.apply(this, arguments); + }, + + /** + * Fetch the next set of results + */ + fetchNext: function() { + if (!this.hasMoreResults()) { + return null; + } + if (this._currentIndex === 0) { + return this.fetch(); + } + return this.fetch({remove: false}); + }, + + parse: function(result) { + var results = _.map(result.data.versions, function(version) { + var revision = parseInt(version.version, 10); + return { + id: revision, + name: version.name, + fullPath: version.path, + timestamp: revision, + size: version.size + }; + }); + this._endReached = result.data.endReached; + this._currentIndex += results.length; + return results; + } + }); + + OCA.Versions = OCA.Versions || {}; + + OCA.Versions.VersionCollection = VersionCollection; +})(); + diff --git a/apps/files_versions/js/versionmodel.js b/apps/files_versions/js/versionmodel.js new file mode 100644 index 0000000000..dc610fc214 --- /dev/null +++ b/apps/files_versions/js/versionmodel.js @@ -0,0 +1,77 @@ +/* + * Copyright (c) 2015 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +(function() { + /** + * @memberof OCA.Versions + */ + var VersionModel = OC.Backbone.Model.extend({ + + /** + * Restores the original file to this revision + */ + revert: function(options) { + options = options ? _.clone(options) : {}; + var model = this; + var file = this.getFullPath(); + var revision = this.get('timestamp'); + + $.ajax({ + type: 'GET', + url: OC.generateUrl('/apps/files_versions/ajax/rollbackVersion.php'), + dataType: 'json', + data: { + file: file, + revision: revision + }, + success: function(response) { + if (response.status === 'error') { + if (options.error) { + options.error.call(options.context, model, response, options); + } + model.trigger('error', model, response, options); + } else { + if (options.success) { + options.success.call(options.context, model, response, options); + } + model.trigger('revert', model, response, options); + } + } + }); + }, + + getFullPath: function() { + return this.get('fullPath'); + }, + + getPreviewUrl: function() { + var url = OC.generateUrl('/apps/files_versions/preview'); + var params = { + file: this.get('fullPath'), + version: this.get('timestamp') + }; + return url + '?' + OC.buildQueryString(params); + }, + + getDownloadUrl: function() { + var url = OC.generateUrl('/apps/files_versions/download.php'); + var params = { + file: this.get('fullPath'), + revision: this.get('timestamp') + }; + return url + '?' + OC.buildQueryString(params); + } + }); + + OCA.Versions = OCA.Versions || {}; + + OCA.Versions.VersionModel = VersionModel; +})(); + diff --git a/apps/files_versions/js/versions.js b/apps/files_versions/js/versions.js deleted file mode 100644 index e86bb4c330..0000000000 --- a/apps/files_versions/js/versions.js +++ /dev/null @@ -1,193 +0,0 @@ -/* - * Copyright (c) 2014 - * - * This file is licensed under the Affero General Public License version 3 - * or later. - * - * See the COPYING-README file. - * - */ - -/* global scanFiles, escapeHTML, formatDate */ -$(document).ready(function(){ - - // TODO: namespace all this as OCA.FileVersions - - if ($('#isPublic').val()){ - // no versions actions in public mode - // beware of https://github.com/owncloud/core/issues/4545 - // as enabling this might hang Chrome - return; - } - - if (OCA.Files) { - // Add versions button to 'files/index.php' - OCA.Files.fileActions.register( - 'file', - 'Versions', - OC.PERMISSION_UPDATE, - function() { - // Specify icon for hitory button - return OC.imagePath('core','actions/history'); - }, function(filename, context){ - // Action to perform when clicked - if (scanFiles.scanning){return;}//workaround to prevent additional http request block scanning feedback - - var file = context.dir.replace(/(?!<=\/)$|\/$/, '/' + filename); - var createDropDown = true; - // Check if drop down is already visible for a different file - if (($('#dropdown').length > 0) ) { - if ( $('#dropdown').hasClass('drop-versions') && file == $('#dropdown').data('file')) { - createDropDown = false; - } - $('#dropdown').slideUp(OC.menuSpeed); - $('#dropdown').remove(); - $('tr').removeClass('mouseOver'); - } - - if(createDropDown === true) { - createVersionsDropdown(filename, file, context.fileList); - } - }, t('files_versions', 'Versions') - ); - } - - $(document).on("click", 'span[class="revertVersion"]', function() { - var revision = $(this).attr('id'); - var file = $(this).attr('value'); - revertFile(file, revision); - }); - -}); - -function revertFile(file, revision) { - - $.ajax({ - type: 'GET', - url: OC.linkTo('files_versions', 'ajax/rollbackVersion.php'), - dataType: 'json', - data: {file: file, revision: revision}, - async: false, - success: function(response) { - if (response.status === 'error') { - OC.Notification.show( t('files_version', 'Failed to revert {file} to revision {timestamp}.', {file:file, timestamp:formatDate(revision * 1000)}) ); - } else { - $('#dropdown').slideUp(OC.menuSpeed, function() { - $('#dropdown').closest('tr').find('.modified:first').html(relative_modified_date(revision)); - $('#dropdown').remove(); - $('tr').removeClass('mouseOver'); - }); - } - } - }); - -} - -function goToVersionPage(url){ - window.location.assign(url); -} - -function createVersionsDropdown(filename, files, fileList) { - - var start = 0; - var fileEl; - - var html = '