owncloud/core

View on GitHub
apps/files_versions/js/versionstabview.js

Summary

Maintainability
D
2 days
Test Coverage
/*
 * Copyright (c) 2015
 *
 * This file is licensed under the Affero General Public License version 3
 * or later.
 *
 * See the COPYING-README file.
 *
 */

(function() {

    function getPreviewUrl(model) {
        var mime = model.get('mimetype');

        var enabledPreviewProviders = OC.appConfig.core.enabledPreviewProviders || [];
        if (enabledPreviewProviders.length > 0) {
            var allMimesPattern = new RegExp(enabledPreviewProviders.join('|'));
            if (OC.appConfig.core.previewsEnabled && allMimesPattern.test(mime)) {
                return model.getPreviewUrl();
            }
        }

        return OC.MimeType.getIconUrl(mime);
    }

    var TEMPLATE_CURRENT =
        '<li data-revision="{{versionId}}" class="current-version">' +
        '<div>' +
        '<div class="preview-container">' +
        '<img class="preview" src="{{previewUrl}}"/>' +
        '<span class="has-tooltip" title="{{versionTag}}">{{versionTag}}</span>' +
        '</div>' +
        '<div class="version-container">' +
        '<div class="version-headline">' +
        '<a href="{{downloadUrl}}" class="downloadVersion"><img src="{{downloadIconUrl}}" />' +
        '<span class="versiondate has-tooltip" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>' +
        '<span class="versionstatus"> · {{currentVersionLabel}}</span>' +
        '</a>' +
        '</div>' +
        '{{#hasDetails}}' +
        '<div class="version-details">' +
        '<span class="size has-tooltip" title="{{altSize}}">{{humanReadableSize}}</span>' +
        '<span class="has-tooltip" title="{{editedBy}}">{{editedByName}}</span>' +
        '</div>' +
        '{{/hasDetails}}' +
        '</div>' +
        '<div class="action-container">' +
        '{{#canPublish}}' +
        '<a href="#" class="publishVersion" title="{{publishLabel}}"><img src="{{publishIconUrl}}" /></a>' +
        '{{/canPublish}}' +
        '</div>' +
        '</div>' +
        '</li>';

    var TEMPLATE_VERSION =
        '<li data-revision="{{versionId}}">' +
        '<div>' +
        '<div class="preview-container">' +
        '<img class="preview" src="{{previewUrl}}"/>' +
        '<span class="has-tooltip" title="{{versionTag}}">{{versionTag}}</span>' +
        '</div>' +
        '<div class="version-container">' +
        '<div class="version-headline">' +
        '<a href="{{downloadUrl}}" class="downloadVersion"><img src="{{downloadIconUrl}}" />' +
        '<span class="versiondate has-tooltip" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>' +
        '<span class="versionstatus">{{#isMajorVersion}} · {{/isMajorVersion}}{{majorVersionlabel}}</span>' +
        '</a>' +
        '</div>' +
        '{{#hasDetails}}' +
        '<div class="version-details">' +
        '<span class="size has-tooltip" title="{{altSize}}">{{humanReadableSize}}</span>' +
        '<span class="has-tooltip" title="{{editedBy}}">{{editedByName}}</span>' +
        '</div>' +
        '{{/hasDetails}}' +
        '</div>' +
        '<div class="action-container">' +
        '{{#canRevert}}' +
        '<a href="#" class="revertVersion" title="{{revertLabel}}"><img src="{{revertIconUrl}}" /></a>' +
        '{{/canRevert}}' +
        '</div>' +
        '</div>' +
        '</li>';

    var TEMPLATE =
        '<ul class="versions"></ul>' +
        '<div class="clear-float"></div>' +
        '<div class="empty hidden">{{emptyResultLabel}}</div>' +
        '<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 .publishVersion': '_onClickPublishVersion'
        },

        initialize: function() {
            OCA.Files.DetailTabView.prototype.initialize.apply(this, arguments);

            // versions collection root - current version
            this.versionsRoot = new OCA.Versions.VersionsRootModel();
            this.versionsRoot.on('sync', this._onAddVersionsRootModel, this);

            // versions collection - noncurrent versions
            this.collection = new OCA.Versions.VersionCollection();
            this.collection.on('request', this._onCollectionRequest, this);
            this.collection.on('sync', this._onCollectionEndRequest, this);
            this.collection.on('update', this._onUpdate, this);
            this.collection.on('error', this._onError, this);
            this.collection.on('add', this._onAddVersionModel, this);
        },

        getLabel: function() {
            return t('files_versions', 'Versions');
        },

        nextPage: function() {
            if (this._loading) {
                return;
            }

            if (this.collection.getFileInfo() && this.collection.getFileInfo().isDirectory()) {
                return;
            }
            this.collection.fetch();
        },

        _onClickRevertVersion: function(ev) {
            var self = this;
            var $target = $(ev.target);
            var fileInfoModel = this.versionsRoot.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.$versionsContainer.empty();

                    self.versionsRoot.setFileInfo(fileInfoModel);
                    self.versionsRoot.fetch();

                    self.collection.setFileInfo(fileInfoModel);
                    self.collection.reset([], {silent: true});
                    self.collection.fetch();

                    self.$el.find('.versions').removeClass('hidden');

                    // 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')
                    });
                    OC.Notification.show(
                        t('files_versions', 
                            'File {file} has been reverted and marked as new current version',
                            {
                                file: versionModel.getFullPath()
                            }
                        ),
                        { timeout: 7 }
                    );
                },

                error: function() {
                    fileInfoModel.trigger('busy', fileInfoModel, false);
                    self.$el.find('.versions').removeClass('hidden');
                    self._toggleLoading(false);
                    OC.Notification.show(
                        t('files_versions', 
                            'Failed to revert {file} to revision {timestamp}.',
                            {
                                file: versionModel.getFullPath(),
                                timestamp: OC.Util.formatDate(versionModel.get('timestamp') * 1000)
                            }
                        ),
                        {
                            type: 'error'
                        }
                    );
                }
            });

            // spinner
            this._toggleLoading(true);
            fileInfoModel.trigger('busy', fileInfoModel, true);
        },

        _onClickPublishVersion: function(ev) {
            var self = this;
            var fileInfoModel = this.versionsRoot.getFileInfo();
            ev.preventDefault();

            this.versionsRoot.publish({
                success: function() {
                    // reset and re-fetch the updated root for publishing metadata, 
                    // and collection just in case new version got generated in the meanwhile by other process
                    self.$versionsContainer.empty();

                    self.versionsRoot.setFileInfo(fileInfoModel);
                    self.versionsRoot.fetch();

                    self.collection.setFileInfo(fileInfoModel);
                    self.collection.reset([], {silent: true});
                    self.collection.fetch();

                    self.$el.find('.versions').removeClass('hidden');
                },
                error: function() {
                    self.$el.find('.versions').removeClass('hidden');
                    self._toggleLoading(false);
                    OC.Notification.show(t('files_versions', 'Failed to publish version'),{type: 'error'});
                }
            });
        },

        _toggleLoading: function(state) {
            this._loading = state;
            this.$el.find('.loading').toggleClass('hidden', !state);
        },

        _onCollectionRequest: function() {
            this._toggleLoading(true);
        },

        _onCollectionEndRequest: function() {
            this._toggleLoading(false);

            this.$el.find('.empty').toggleClass('hidden', !!this.collection.length);
        },

        _onAddVersionModel: function(model) {
            // add version to the list (collection child)
            var $el = $(this.versionTemplate(this._formatVersion(model)));
            this.$versionsContainer.append($el);
            $el.find('.has-tooltip').tooltip();
        },

        _onAddVersionsRootModel: function(model) {
            // add current version (versions root) as first item in the list
            var $el = $(this.currentTemplate(this._formatCurrent(model)));
            this.$versionsContainer.prepend($el);
            $el.find('.has-tooltip').tooltip();
        },

        template: function(data) {
            if (!this._template) {
                this._template = Handlebars.compile(TEMPLATE);
            }

            return this._template(data);
        },

        versionTemplate: function(data) {
            if (!this._versionTemplate) {
                this._versionTemplate = Handlebars.compile(TEMPLATE_VERSION);
            }

            return this._versionTemplate(data);
        },

        currentTemplate: function(data) {
            if (!this._currentTemplate) {
                this._currentTemplate = Handlebars.compile(TEMPLATE_CURRENT);
            }

            return this._currentTemplate(data);
        },

        setFileInfo: function(fileInfo) {
            if (fileInfo) {
                this.render();

                this.versionsRoot.setFileInfo(fileInfo);
                this.versionsRoot.fetch();

                this.collection.setFileInfo(fileInfo);
                this.collection.reset([], {silent: true});
                this.nextPage();
            } else {
                this.render();
                this.collection.reset();
            }
        },

        _formatVersion: function(version) {
            var timestamp = version.get('timestamp') * 1000;
            var size = version.has('size') ? version.get('size') : 0;
            var isMajorVersion = version.has('versionTag') && version.get('versionTag').indexOf('.0', version.get('versionTag').length - '.0'.length) !== -1;

            return _.extend({
                versionId: version.get('id'),
                formattedTimestamp: OC.Util.formatDate(timestamp),
                relativeTimestamp: OC.Util.relativeModifiedDate(timestamp),
                humanReadableSize: OC.Util.humanFileSize(size, true),
                altSize: n('files', '%n byte', '%n bytes', size),
                hasDetails: version.has('size'),
                downloadUrl: version.getDownloadUrl(),
                downloadIconUrl: OC.imagePath('core', 'actions/download'),
                revertIconUrl: OC.imagePath('core', 'actions/history'),
                previewUrl: getPreviewUrl(version),
                revertLabel: t('files_versions', 'Restore'),
                canRevert: (this.collection.getFileInfo().get('permissions') & OC.PERMISSION_UPDATE) !== 0,
                editedBy: version.has('editedBy'),
                editedByName: version.has('editedByName'),
                versionTag: version.has('versionTag'),
                isMajorVersion: isMajorVersion,
                majorVersionlabel: isMajorVersion ? t('files_versions', 'persistent') : ''
            }, version.attributes);
        },

        _formatCurrent: function(current) {
            var size = current.has('size') ? current.get('size') : 0;

            return _.extend({
                versionId: current.get('id'),
                formattedTimestamp: OC.Util.formatDate(current.get('mtime')),
                relativeTimestamp: OC.Util.relativeModifiedDate(current.get('mtime')),
                humanReadableSize: OC.Util.humanFileSize(size, true),
                altSize: n('files', '%n byte', '%n bytes', size),
                hasDetails: current.has('size'),
                downloadUrl: current.getDownloadUrl(),
                downloadIconUrl: OC.imagePath('core', 'actions/download'),
                publishIconUrl: OC.imagePath('core', 'actions/checkmark'),
                previewUrl: getPreviewUrl(current),
                publishLabel: t('files_versions', 'Publish version'),
                canPublish: current.has('versionTag') && (current.get('versionTag') !== ''),
                editedBy: current.has('editedBy'),
                editedByName: current.has('editedByName'),
                versionTag: current.has('versionTag'),
                currentVersionLabel: t('files_versions', 'current')
            }, current.attributes);
        },

        /**
         * Renders this details view
         */
        render: function() {
            this.$el.html(this.template({
                emptyResultLabel: '', // not needed anymore as we always display current file
            }));
            this.$el.find('.has-tooltip').tooltip();
            this.$versionsContainer = this.$el.find('ul.versions');
            this.delegateEvents();
        },

        /**
         * Returns true for files, false for folders.
         *
         * @return {bool} true for files, false for folders
         */
        canDisplay: function(fileInfo) {
            if (!fileInfo) {
                return false;
            }
            return !fileInfo.isDirectory();
        }
    });

    OCA.Versions = OCA.Versions || {};

    OCA.Versions.VersionsTabView = VersionsTabView;
})();