nextcloud/apps/files/js/sidebarpreviewmanager.js

143 lines
4.3 KiB
JavaScript
Raw Normal View History

2016-07-04 13:02:07 +03:00
/*
* Copyright (c) 2016
2016-07-04 13:02:07 +03:00
*
* This file is licensed under the Affero General Public License version 3
* or later.
*
* See the COPYING-README file.
*
*/
(function () {
var SidebarPreviewManager = function (fileList) {
2016-07-04 13:02:07 +03:00
this._fileList = fileList;
this._previewHandlers = {};
OC.Plugins.attach('OCA.Files.SidebarPreviewManager', this);
2016-07-04 13:02:07 +03:00
};
SidebarPreviewManager.prototype = {
addPreviewHandler: function (mime, handler) {
this._previewHandlers[mime] = handler;
},
getMimeTypePreviewHandler: function(mime) {
var mimePart = mime.split('/').shift();
if (this._previewHandlers[mime]) {
return this._previewHandlers[mime];
} else if (this._previewHandlers[mimePart]) {
return this._previewHandlers[mimePart];
} else {
return null;
}
},
getPreviewHandler: function (mime) {
var mimetypeHandler = this.getMimeTypePreviewHandler(mime);
if (mimetypeHandler) {
return mimetypeHandler;
} else {
return this.fallbackPreview.bind(this);
}
},
2016-07-04 13:02:07 +03:00
loadPreview: function (model, $thumbnailDiv, $thumbnailContainer) {
if (model.get('hasPreview') === false && this.getMimeTypePreviewHandler(model.get('mimetype')) === null) {
var mimeIcon = OC.MimeType.getIconUrl(model.get('mimetype'));
$thumbnailDiv.removeClass('icon-loading icon-32');
$thumbnailContainer.removeClass('image'); //fall back to regular view
$thumbnailDiv.css({
'background-image': 'url("' + mimeIcon + '")'
});
} else {
var handler = this.getPreviewHandler(model.get('mimetype'));
var fallback = this.fallbackPreview.bind(this, model, $thumbnailDiv, $thumbnailContainer);
handler(model, $thumbnailDiv, $thumbnailContainer, fallback);
}
2016-07-04 13:02:07 +03:00
},
// previews for images and mimetype icons
fallbackPreview: function (model, $thumbnailDiv, $thumbnailContainer) {
var isImage = model.isImage();
var maxImageWidth = $thumbnailContainer.parent().width() + 50; // 50px for negative margins
var maxImageHeight = maxImageWidth / (16 / 9);
var smallPreviewSize = 75;
var isLandscape = function (img) {
return img.width > (img.height * 1.2);
};
var isSmall = function (img) {
return (img.width * 1.1) < (maxImageWidth * window.devicePixelRatio);
};
var getTargetHeight = function (img) {
if (isImage) {
var targetHeight = img.height / window.devicePixelRatio;
if (targetHeight <= smallPreviewSize) {
targetHeight = smallPreviewSize;
}
return targetHeight;
} else {
return smallPreviewSize;
}
};
var getTargetRatio = function (img) {
var ratio = img.width / img.height;
if (ratio > 16 / 9) {
return ratio;
} else {
return 16 / 9;
}
};
this._fileList.lazyLoadPreview({
fileId: model.get('id'),
2016-07-04 13:02:07 +03:00
path: model.getFullPath(),
mime: model.get('mimetype'),
etag: model.get('etag'),
y: isImage ? maxImageHeight : smallPreviewSize,
x: isImage ? maxImageWidth : smallPreviewSize,
a: isImage ? 1 : null,
mode: isImage ? 'cover' : null,
callback: function (previewUrl, img) {
$thumbnailDiv.previewImg = previewUrl;
// as long as we only have the mimetype icon, we only save it in case there is no preview
if (!img) {
return;
}
$thumbnailDiv.removeClass('icon-loading icon-32');
var targetHeight = getTargetHeight(img);
if (isImage && targetHeight > smallPreviewSize) {
$thumbnailContainer.addClass((isLandscape(img) && !isSmall(img)) ? 'landscape' : 'portrait');
$thumbnailContainer.addClass('large');
2016-07-04 13:02:07 +03:00
}
// only set background when we have an actual preview
// when we don't have a preview we show the mime icon in the error handler
$thumbnailDiv.css({
'background-image': 'url("' + previewUrl + '")',
height: (targetHeight > smallPreviewSize) ? 'auto' : targetHeight,
'max-height': isSmall(img) ? targetHeight : null
});
var targetRatio = getTargetRatio(img);
$thumbnailDiv.find('.stretcher').css({
'padding-bottom': (100 / targetRatio) + '%'
});
},
error: function () {
$thumbnailDiv.removeClass('icon-loading icon-32');
$thumbnailContainer.removeClass('image'); //fall back to regular view
$thumbnailDiv.css({
'background-image': 'url("' + $thumbnailDiv.previewImg + '")'
});
}
});
}
};
OCA.Files.SidebarPreviewManager = SidebarPreviewManager;
})();