diff options
Diffstat (limited to 'apps/files_versions/js/versionstabview.js')
| -rw-r--r-- | apps/files_versions/js/versionstabview.js | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/apps/files_versions/js/versionstabview.js b/apps/files_versions/js/versionstabview.js new file mode 100644 index 00000000000..1f84428e616 --- /dev/null +++ b/apps/files_versions/js/versionstabview.js @@ -0,0 +1,198 @@ +/* + * Copyright (c) 2015 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +(function() { + var TEMPLATE_ITEM = + '<li data-revision="{{timestamp}}">' + + '<img class="preview" src="{{previewUrl}}"/>' + + '<a href="{{downloadUrl}}" class="downloadVersion"><img src="{{downloadIconUrl}}" />' + + '<span class="versiondate has-tooltip" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>' + + '</a>' + + '<a href="#" class="revertVersion"><img src="{{revertIconUrl}}" />{{revertLabel}}</a>' + + '</li>'; + + var TEMPLATE = + '<ul class="versions"></ul>' + + '<div class="clear-float"></div>' + + '<div class="empty hidden">{{emptyResultLabel}}</div>' + + '<input type="button" class="showMoreVersions hidden" value="{{moreVersionsLabel}}"' + + ' name="show-more-versions" id="show-more-versions" />' + + '<div class="loading hidden" style="height: 50px"></div>'; + + /** + * @memberof OCA.Versions + */ + var VersionsTabView = OCA.Files.DetailTabView.extend( + /** @lends OCA.Versions.VersionsTabView.prototype */ { + id: 'versionsTabView', + className: 'tab versionsTabView', + + _template: null, + + $versionsContainer: null, + + events: { + 'click .revertVersion': '_onClickRevertVersion', + 'click .showMoreVersions': '_onClickShowMoreVersions' + }, + + initialize: function() { + this.collection = new OCA.Versions.VersionCollection(); + this.collection.on('request', this._onRequest, this); + this.collection.on('sync', this._onEndRequest, this); + this.collection.on('update', this._onUpdate, this); + this.collection.on('error', this._onError, this); + this.collection.on('add', this._onAddModel, this); + }, + + getLabel: function() { + return t('files_versions', 'Versions'); + }, + + nextPage: function() { + if (this._loading || !this.collection.hasMoreResults()) { + return; + } + + if (this.collection.getFileInfo() && this.collection.getFileInfo().isDirectory()) { + return; + } + this.collection.fetchNext(); + }, + + _onClickShowMoreVersions: function(ev) { + ev.preventDefault(); + this.nextPage(); + }, + + _onClickRevertVersion: function(ev) { + var self = this; + var $target = $(ev.target); + var fileInfoModel = this.collection.getFileInfo(); + var revision; + if (!$target.is('li')) { + $target = $target.closest('li'); + } + + ev.preventDefault(); + revision = $target.attr('data-revision'); + + var versionModel = this.collection.get(revision); + versionModel.revert({ + success: function() { + // reset and re-fetch the updated collection + self.collection.setFileInfo(fileInfoModel); + self.collection.fetch(); + + // update original model + fileInfoModel.trigger('busy', fileInfoModel, false); + fileInfoModel.set({ + size: versionModel.get('size'), + mtime: versionModel.get('timestamp') * 1000, + // temp dummy, until we can do a PROPFIND + etag: versionModel.get('id') + versionModel.get('timestamp') + }); + }, + + error: function() { + OC.Notification.showTemporary( + t('files_version', 'Failed to revert {file} to revision {timestamp}.', { + file: versionModel.getFullPath(), + timestamp: OC.Util.formatDate(versionModel.get('timestamp') * 1000) + }) + ); + } + }); + + // spinner + this._toggleLoading(true); + fileInfoModel.trigger('busy', fileInfoModel, true); + }, + + _toggleLoading: function(state) { + this._loading = state; + this.$el.find('.loading').toggleClass('hidden', !state); + }, + + _onRequest: function() { + this._toggleLoading(true); + this.$el.find('.showMoreVersions').addClass('hidden'); + }, + + _onEndRequest: function() { + this._toggleLoading(false); + this.$el.find('.empty').toggleClass('hidden', !!this.collection.length); + this.$el.find('.showMoreVersions').toggleClass('hidden', !this.collection.hasMoreResults()); + }, + + _onAddModel: function(model) { + this.$versionsContainer.append(this.itemTemplate(this._formatItem(model))); + }, + + template: function(data) { + if (!this._template) { + this._template = Handlebars.compile(TEMPLATE); + } + + return this._template(data); + }, + + itemTemplate: function(data) { + if (!this._itemTemplate) { + this._itemTemplate = Handlebars.compile(TEMPLATE_ITEM); + } + + return this._itemTemplate(data); + }, + + setFileInfo: function(fileInfo) { + if (fileInfo) { + this.render(); + this.collection.setFileInfo(fileInfo); + this.collection.reset({silent: true}); + this.nextPage(); + } else { + this.render(); + this.collection.reset(); + } + }, + + _formatItem: function(version) { + var timestamp = version.get('timestamp') * 1000; + return _.extend({ + formattedTimestamp: OC.Util.formatDate(timestamp), + relativeTimestamp: OC.Util.relativeModifiedDate(timestamp), + downloadUrl: version.getDownloadUrl(), + downloadIconUrl: OC.imagePath('core', 'actions/download'), + revertIconUrl: OC.imagePath('core', 'actions/history'), + previewUrl: version.getPreviewUrl(), + revertLabel: t('files_versions', 'Restore'), + }, version.attributes); + }, + + /** + * Renders this details view + */ + render: function() { + this.$el.html(this.template({ + emptyResultLabel: t('files_versions', 'No other versions available'), + moreVersionsLabel: t('files_versions', 'More versions...') + })); + this.$el.find('.has-tooltip').tooltip(); + this.$versionsContainer = this.$el.find('ul.versions'); + this.delegateEvents(); + } + }); + + OCA.Versions = OCA.Versions || {}; + + OCA.Versions.VersionsTabView = VersionsTabView; +})(); + |