123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220 |
- /*
- * 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 =
- '<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"><div class="stretcher"/></a></div>' +
- '<div class="file-details-container">' +
- '<div class="fileName">' +
- '<h3 title="{{name}}" class="ellipsis">{{name}}</h3>' +
- '<a class="permalink" href="{{permalink}}" title="{{permalinkTitle}}" data-clipboard-text="{{permalink}}">' +
- '<span class="icon icon-clippy"></span>' +
- '<span class="hidden-visually">{{permalinkTitle}}</span>' +
- '</a>' +
- '</div>' +
- ' <div class="file-details ellipsis">' +
- ' <a href="#" class="action action-favorite favorite permanent">' +
- ' <span class="icon {{starClass}}" title="{{starAltText}}"></span>' +
- ' </a>' +
- ' {{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</span>' +
- ' </div>' +
- '</div>' +
- '<div class="hidden permalink-field">' +
- '<input type="text" value="{{permalink}}" placeholder="{{permalinkTitle}}" readonly="readonly"/>' +
- '</div>';
-
- /**
- * @class OCA.Files.MainFileInfoDetailView
- * @classdesc
- *
- * Displays main details about a file
- *
- */
- var MainFileInfoDetailView = OCA.Files.DetailFileInfoView.extend(
- /** @lends OCA.Files.MainFileInfoDetailView.prototype */ {
-
- className: 'mainFileInfoView',
-
- /**
- * Associated file list instance, for file actions
- *
- * @type {OCA.Files.FileList}
- */
- _fileList: null,
-
- /**
- * File actions
- *
- * @type {OCA.Files.FileActions}
- */
- _fileActions: null,
-
- /**
- * @type {OCA.Files.SidebarPreviewManager}
- */
- _previewManager: null,
-
- events: {
- 'click a.action-favorite': '_onClickFavorite',
- 'click a.action-default': '_onClickDefaultAction',
- 'click a.permalink': '_onClickPermalink',
- 'focus .permalink-field>input': '_onFocusPermalink'
- },
-
- template: function(data) {
- if (!this._template) {
- this._template = Handlebars.compile(TEMPLATE);
- }
- return this._template(data);
- },
-
- initialize: function(options) {
- options = options || {};
- this._fileList = options.fileList;
- this._fileActions = options.fileActions;
- if (!this._fileList) {
- throw 'Missing required parameter "fileList"';
- }
- if (!this._fileActions) {
- throw 'Missing required parameter "fileActions"';
- }
- this._previewManager = new OCA.Files.SidebarPreviewManager(this._fileList);
-
- this._setupClipboard();
- },
-
- _setupClipboard: function() {
- var clipboard = new Clipboard('.permalink');
- clipboard.on('success', function(e) {
- var $el = $(e.trigger);
- $el.tooltip('hide')
- .attr('data-original-title', t('core', 'Copied!'))
- .tooltip('fixTitle')
- .tooltip({placement: 'bottom', trigger: 'manual'})
- .tooltip('show');
- _.delay(function() {
- $el.tooltip('hide');
- $el.attr('data-original-title', t('files', 'Copy direct link (only works for users who have access to this file/folder)'))
- .tooltip('fixTitle');
- }, 3000);
- });
- clipboard.on('error', function(e) {
- var $row = this.$('.permalink-field');
- $row.toggleClass('hidden');
- if (!$row.hasClass('hidden')) {
- $row.find('>input').focus();
- }
- });
- },
-
- _onClickPermalink: function(e) {
- e.preventDefault();
- return;
- },
-
- _onFocusPermalink: function() {
- this.$('.permalink-field>input').select();
- },
-
- _onClickFavorite: function(event) {
- event.preventDefault();
- this._fileActions.triggerAction('Favorite', this.model, this._fileList);
- },
-
- _onClickDefaultAction: function(event) {
- event.preventDefault();
- this._fileActions.triggerAction(null, this.model, this._fileList);
- },
-
- _onModelChanged: function() {
- // simply re-render
- this.render();
- },
-
- _makePermalink: function(fileId) {
- var baseUrl = OC.getProtocol() + '://' + OC.getHost();
- return baseUrl + OC.generateUrl('/f/{fileId}', {fileId: fileId});
- },
-
- setFileInfo: function(fileInfo) {
- if (this.model) {
- this.model.off('change', this._onModelChanged, this);
- }
- this.model = fileInfo;
- if (this.model) {
- this.model.on('change', this._onModelChanged, this);
- }
-
- if (this.model) {
- var properties = [];
- if( !this.model.has('size') ) {
- properties.push(OC.Files.Client.PROPERTY_SIZE);
- properties.push(OC.Files.Client.PROPERTY_GETCONTENTLENGTH);
- }
-
- if( properties.length > 0){
- this.model.reloadProperties(properties);
- }
- }
-
- this.render();
- },
-
- /**
- * Renders this details view
- */
- render: function() {
- this.trigger('pre-render');
-
- if (this.model) {
- var isFavorite = (this.model.get('tags') || []).indexOf(OC.TAG_FAVORITE) >= 0;
- this.$el.html(this.template({
- type: this.model.isImage()? 'image': '',
- nameLabel: t('files', 'Name'),
- name: this.model.get('displayName') || this.model.get('name'),
- pathLabel: t('files', 'Path'),
- path: this.model.get('path'),
- hasSize: this.model.has('size'),
- sizeLabel: t('files', 'Size'),
- size: OC.Util.humanFileSize(this.model.get('size'), true),
- altSize: n('files', '%n byte', '%n bytes', this.model.get('size')),
- dateLabel: t('files', 'Modified'),
- altDate: OC.Util.formatDate(this.model.get('mtime')),
- timestamp: this.model.get('mtime'),
- date: OC.Util.relativeModifiedDate(this.model.get('mtime')),
- starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
- starClass: isFavorite ? 'icon-starred' : 'icon-star',
- permalink: this._makePermalink(this.model.get('id')),
- permalinkTitle: t('files', 'Copy direct link (only works for users who have access to this file/folder)')
- }));
-
- // TODO: we really need OC.Previews
- var $iconDiv = this.$el.find('.thumbnail');
- var $container = this.$el.find('.thumbnailContainer');
- if (!this.model.isDirectory()) {
- $iconDiv.addClass('icon-loading icon-32');
- this._previewManager.loadPreview(this.model, $iconDiv, $container);
- } else {
- var iconUrl = this.model.get('icon') || OC.MimeType.getIconUrl('dir');
- $iconDiv.css('background-image', 'url("' + iconUrl + '")');
- OC.Util.scaleFixForIE8($iconDiv);
- }
- this.$el.find('[title]').tooltip({placement: 'bottom'});
- } else {
- this.$el.empty();
- }
- this.delegateEvents();
-
- this.trigger('post-render');
- }
- });
-
- OCA.Files.MainFileInfoDetailView = MainFileInfoDetailView;
- })();
|