2015-07-15 10:06:13 +00:00
|
|
|
/*
|
|
|
|
* 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 =
|
2015-09-28 12:14:18 +00:00
|
|
|
'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"><div class="stretcher"/></a></div>' +
|
2015-08-30 12:17:18 +00:00
|
|
|
'<div class="file-details-container">' +
|
|
|
|
'<div class="fileName"><h3 title="{{name}}" class="ellipsis">{{name}}</h3></div>' +
|
|
|
|
' <div class="file-details ellipsis">' +
|
|
|
|
' <a href="#" ' +
|
|
|
|
' class="action action-favorite favorite">' +
|
2015-10-07 16:01:31 +00:00
|
|
|
' <img class="svg" alt="{{starAltText}}" src="{{starIcon}}" />' +
|
2015-08-30 12:17:18 +00:00
|
|
|
' </a>' +
|
|
|
|
' {{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' +
|
|
|
|
' </div>' +
|
2015-07-15 15:05:25 +00:00
|
|
|
'</div>';
|
2015-07-15 10:06:13 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @class OCA.Files.MainFileInfoDetailView
|
|
|
|
* @classdesc
|
|
|
|
*
|
|
|
|
* Displays main details about a file
|
|
|
|
*
|
|
|
|
*/
|
2015-08-12 15:30:20 +00:00
|
|
|
var MainFileInfoDetailView = OCA.Files.DetailFileInfoView.extend(
|
2015-07-15 10:06:13 +00:00
|
|
|
/** @lends OCA.Files.MainFileInfoDetailView.prototype */ {
|
2015-08-12 15:30:20 +00:00
|
|
|
|
|
|
|
className: 'mainFileInfoView',
|
2015-07-15 10:06:13 +00:00
|
|
|
|
|
|
|
/**
|
2015-08-12 15:30:20 +00:00
|
|
|
* Associated file list instance, for file actions
|
|
|
|
*
|
|
|
|
* @type {OCA.Files.FileList}
|
2015-07-15 10:06:13 +00:00
|
|
|
*/
|
2015-08-12 15:30:20 +00:00
|
|
|
_fileList: null,
|
2015-07-15 10:06:13 +00:00
|
|
|
|
|
|
|
/**
|
2015-08-12 15:30:20 +00:00
|
|
|
* File actions
|
|
|
|
*
|
|
|
|
* @type {OCA.Files.FileActions}
|
2015-07-15 10:06:13 +00:00
|
|
|
*/
|
2015-08-12 15:30:20 +00:00
|
|
|
_fileActions: null,
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click a.action-favorite': '_onClickFavorite',
|
|
|
|
'click a.action-default': '_onClickDefaultAction'
|
|
|
|
},
|
2015-07-15 10:06:13 +00:00
|
|
|
|
2015-08-12 15:30:20 +00:00
|
|
|
template: function(data) {
|
2015-07-15 10:06:13 +00:00
|
|
|
if (!this._template) {
|
|
|
|
this._template = Handlebars.compile(TEMPLATE);
|
|
|
|
}
|
2015-08-12 15:30:20 +00:00
|
|
|
return this._template(data);
|
|
|
|
},
|
2015-07-15 10:06:13 +00:00
|
|
|
|
2015-08-12 15:30:20 +00:00
|
|
|
initialize: function(options) {
|
|
|
|
options = options || {};
|
|
|
|
this._fileList = options.fileList;
|
|
|
|
this._fileActions = options.fileActions;
|
|
|
|
if (!this._fileList) {
|
2015-10-15 14:30:50 +00:00
|
|
|
throw 'Missing required parameter "fileList"';
|
2015-08-12 15:30:20 +00:00
|
|
|
}
|
|
|
|
if (!this._fileActions) {
|
2015-10-15 14:30:50 +00:00
|
|
|
throw 'Missing required parameter "fileActions"';
|
2015-08-12 15:30:20 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_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();
|
|
|
|
},
|
|
|
|
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Renders this details view
|
|
|
|
*/
|
|
|
|
render: function() {
|
|
|
|
if (this.model) {
|
|
|
|
var isFavorite = (this.model.get('tags') || []).indexOf(OC.TAG_FAVORITE) >= 0;
|
|
|
|
this.$el.html(this.template({
|
2015-08-28 15:51:26 +00:00
|
|
|
type: this.model.isImage()? 'image': '',
|
2015-07-15 14:09:00 +00:00
|
|
|
nameLabel: t('files', 'Name'),
|
2015-08-25 09:29:35 +00:00
|
|
|
name: this.model.get('displayName') || this.model.get('name'),
|
2015-07-15 14:09:00 +00:00
|
|
|
pathLabel: t('files', 'Path'),
|
2015-08-12 15:30:20 +00:00
|
|
|
path: this.model.get('path'),
|
2015-08-25 09:29:35 +00:00
|
|
|
hasSize: this.model.has('size'),
|
2015-07-15 14:09:00 +00:00
|
|
|
sizeLabel: t('files', 'Size'),
|
2015-08-12 15:30:20 +00:00
|
|
|
size: OC.Util.humanFileSize(this.model.get('size'), true),
|
|
|
|
altSize: n('files', '%n byte', '%n bytes', this.model.get('size')),
|
2015-07-15 14:09:00 +00:00
|
|
|
dateLabel: t('files', 'Modified'),
|
2015-08-12 15:30:20 +00:00
|
|
|
altDate: OC.Util.formatDate(this.model.get('mtime')),
|
|
|
|
date: OC.Util.relativeModifiedDate(this.model.get('mtime')),
|
2015-07-15 15:05:25 +00:00
|
|
|
starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
|
|
|
|
starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star')
|
2015-07-15 14:09:00 +00:00
|
|
|
}));
|
|
|
|
|
|
|
|
// TODO: we really need OC.Previews
|
2015-07-16 10:49:34 +00:00
|
|
|
var $iconDiv = this.$el.find('.thumbnail');
|
2015-09-11 13:25:42 +00:00
|
|
|
var $container = this.$el.find('.thumbnailContainer');
|
2015-08-12 15:30:20 +00:00
|
|
|
if (!this.model.isDirectory()) {
|
2015-09-15 13:40:42 +00:00
|
|
|
$iconDiv.addClass('icon-loading icon-32');
|
2015-09-11 13:25:42 +00:00
|
|
|
this.loadPreview(this.model.getFullPath(), this.model.get('mimetype'), this.model.get('etag'), $iconDiv, $container, this.model.isImage());
|
2015-07-15 14:09:00 +00:00
|
|
|
} else {
|
2015-10-28 16:43:36 +00:00
|
|
|
var iconUrl = this.model.get('icon') || OC.MimeType.getIconUrl('dir');
|
|
|
|
$iconDiv.css('background-image', 'url("' + iconUrl + '")');
|
2015-09-29 16:15:15 +00:00
|
|
|
OC.Util.scaleFixForIE8($iconDiv);
|
2015-07-15 14:09:00 +00:00
|
|
|
}
|
2015-08-07 10:33:50 +00:00
|
|
|
this.$el.find('[title]').tooltip({placement: 'bottom'});
|
2015-08-12 15:30:20 +00:00
|
|
|
} else {
|
|
|
|
this.$el.empty();
|
2015-07-15 10:06:13 +00:00
|
|
|
}
|
2015-08-12 15:30:20 +00:00
|
|
|
this.delegateEvents();
|
2015-09-11 13:25:42 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
loadPreview: function(path, mime, etag, $iconDiv, $container, isImage) {
|
2015-09-25 14:00:05 +00:00
|
|
|
var maxImageWidth = $container.parent().width() + 50; // 50px for negative margins
|
|
|
|
var maxImageHeight = maxImageWidth / (16/9);
|
2015-09-11 13:25:42 +00:00
|
|
|
var smallPreviewSize = 75;
|
|
|
|
|
|
|
|
var isLandscape = function(img) {
|
|
|
|
return img.width > (img.height * 1.2);
|
|
|
|
};
|
|
|
|
|
2015-09-28 12:04:43 +00:00
|
|
|
var isSmall = function(img) {
|
|
|
|
return (img.width * 1.1) < (maxImageWidth * window.devicePixelRatio);
|
|
|
|
};
|
|
|
|
|
2015-09-11 13:25:42 +00:00
|
|
|
var getTargetHeight = function(img) {
|
|
|
|
if(isImage) {
|
|
|
|
var targetHeight = img.height / window.devicePixelRatio;
|
|
|
|
if (targetHeight <= smallPreviewSize) {
|
|
|
|
targetHeight = smallPreviewSize;
|
|
|
|
}
|
|
|
|
return targetHeight;
|
|
|
|
}else{
|
|
|
|
return smallPreviewSize;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2015-09-28 12:14:18 +00:00
|
|
|
var getTargetRatio = function(img){
|
|
|
|
var ratio = img.width / img.height;
|
|
|
|
if (ratio > 16/9) {
|
|
|
|
return ratio;
|
|
|
|
} else {
|
|
|
|
return 16/9;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2015-09-11 13:25:42 +00:00
|
|
|
this._fileList.lazyLoadPreview({
|
|
|
|
path: path,
|
|
|
|
mime: mime,
|
|
|
|
etag: etag,
|
|
|
|
y: isImage ? maxImageHeight : smallPreviewSize,
|
2015-09-25 14:00:05 +00:00
|
|
|
x: isImage ? maxImageWidth : smallPreviewSize,
|
2015-09-11 13:25:42 +00:00
|
|
|
a: isImage ? 1 : null,
|
2015-09-25 14:00:05 +00:00
|
|
|
mode: isImage ? 'cover' : null,
|
2015-09-11 13:25:42 +00:00
|
|
|
callback: function (previewUrl, img) {
|
|
|
|
$iconDiv.previewImg = previewUrl;
|
|
|
|
|
|
|
|
// as long as we only have the mimetype icon, we only save it in case there is no preview
|
|
|
|
if (!img) {
|
|
|
|
return;
|
|
|
|
}
|
2015-09-15 13:40:42 +00:00
|
|
|
$iconDiv.removeClass('icon-loading icon-32');
|
2015-09-11 13:25:42 +00:00
|
|
|
var targetHeight = getTargetHeight(img);
|
|
|
|
if (this.model.isImage() && targetHeight > smallPreviewSize) {
|
2015-09-28 12:04:43 +00:00
|
|
|
$container.addClass((isLandscape(img) && !isSmall(img))? 'landscape': 'portrait');
|
2015-09-11 13:25:42 +00:00
|
|
|
$container.addClass('image');
|
|
|
|
}
|
|
|
|
|
|
|
|
// only set background when we have an actual preview
|
2016-03-09 14:14:05 +00:00
|
|
|
// when we don't have a preview we show the mime icon in the error handler
|
2015-09-11 13:25:42 +00:00
|
|
|
$iconDiv.css({
|
|
|
|
'background-image': 'url("' + previewUrl + '")',
|
2015-09-28 12:04:43 +00:00
|
|
|
height: (targetHeight > smallPreviewSize)? 'auto': targetHeight,
|
|
|
|
'max-height': isSmall(img)? targetHeight: null
|
2015-09-11 13:25:42 +00:00
|
|
|
});
|
2015-09-28 12:14:18 +00:00
|
|
|
|
|
|
|
var targetRatio = getTargetRatio(img);
|
|
|
|
$iconDiv.find('.stretcher').css({
|
|
|
|
'padding-bottom': (100 / targetRatio) + '%'
|
|
|
|
});
|
2015-09-11 13:25:42 +00:00
|
|
|
}.bind(this),
|
|
|
|
error: function () {
|
2015-09-15 13:40:42 +00:00
|
|
|
$iconDiv.removeClass('icon-loading icon-32');
|
2015-09-11 13:25:42 +00:00
|
|
|
this.$el.find('.thumbnailContainer').removeClass('image'); //fall back to regular view
|
|
|
|
$iconDiv.css({
|
|
|
|
'background-image': 'url("' + $iconDiv.previewImg + '")'
|
|
|
|
});
|
2015-09-29 16:15:15 +00:00
|
|
|
OC.Util.scaleFixForIE8($iconDiv);
|
2015-09-11 13:25:42 +00:00
|
|
|
}.bind(this)
|
|
|
|
});
|
2015-07-15 10:06:13 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
OCA.Files.MainFileInfoDetailView = MainFileInfoDetailView;
|
|
|
|
})();
|