wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #19373 from owncloud/sidebar-preview-cover

Browse source 
Cover both width and height for the sidebar preview
This commit is contained in:
Thomas Müller 2015-09-30 11:07:18 +02:00
commit 10978a7a61
4 changed files with 75 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/files/css/detailsView.css
View file

@ -40,7 +40,7 @@
height: auto;
}
#app-sidebar .image.landscape .thumbnail::before {
#app-sidebar .image .thumbnail .stretcher {
content: '';
display: block;
padding-bottom: 56.25%; /* sets height of .thumbnail to 9/16 of the width */

31
apps/files/js/mainfileinfodetailview.js
View file

@ -10,7 +10,7 @@
(function() {
var TEMPLATE =
'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"></a></div>' +
'<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></div>' +
' <div class="file-details ellipsis">' +
@ -140,13 +140,18 @@
},
loadPreview: function(path, mime, etag, $iconDiv, $container, isImage) {
var maxImageHeight = ($container.parent().width() + 50) / (16/9); // 30px for negative margin
var maxImageWidth = $container.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;
@ -159,13 +164,23 @@
}
};
var getTargetRatio = function(img){
var ratio = img.width / img.height;
if (ratio > 16/9) {
return ratio;
} else {
return 16/9;
}
};
this._fileList.lazyLoadPreview({
path: path,
mime: mime,
etag: etag,
y: isImage ? maxImageHeight : smallPreviewSize,
x: isImage ? 99999 /* only limit on y */ : smallPreviewSize,
x: isImage ? maxImageWidth : smallPreviewSize,
a: isImage ? 1 : null,
mode: isImage ? 'cover' : null,
callback: function (previewUrl, img) {
$iconDiv.previewImg = previewUrl;
@ -176,7 +191,7 @@
$iconDiv.removeClass('icon-loading icon-32');
var targetHeight = getTargetHeight(img);
if (this.model.isImage() && targetHeight > smallPreviewSize) {
$container.addClass(isLandscape(img)? 'landscape': 'portrait');
$container.addClass((isLandscape(img) && !isSmall(img))? 'landscape': 'portrait');
$container.addClass('image');
}
@ -184,7 +199,13 @@
// when we dont have a preview we show the mime icon in the error handler
$iconDiv.css({
'background-image': 'url("' + previewUrl + '")',
height: (isLandscape(img) && targetHeight > smallPreviewSize)? 'auto': targetHeight
height: (targetHeight > smallPreviewSize)? 'auto': targetHeight,
'max-height': isSmall(img)? targetHeight: null
});
var targetRatio = getTargetRatio(img);
$iconDiv.find('.stretcher').css({
'padding-bottom': (100 / targetRatio) + '%'
});
}.bind(this),
error: function () {

16
lib/private/preview.php
View file

@ -837,6 +837,11 @@ class Preview {
$askedWidth = $this->getMaxX();
$askedHeight = $this->getMaxY();
if ($this->mode === self::MODE_COVER) {
list($askedWidth, $askedHeight) =
$this->applyCover($askedWidth, $askedHeight, $previewWidth, $previewHeight);
}
/**
* Phase 1: If required, adjust boundaries to keep aspect ratio
*/
@ -845,20 +850,12 @@ class Preview {
$this->applyAspectRatio($askedWidth, $askedHeight, $previewWidth, $previewHeight);
}
if ($this->mode === self::MODE_COVER) {
list($scaleWidth, $scaleHeight) =
$this->applyCover($askedWidth, $askedHeight, $previewWidth, $previewHeight);
} else {
$scaleWidth = $askedWidth;
$scaleHeight = $askedHeight;
}
/**
* Phase 2: Resizes preview to try and match requirements.
* Takes the scaling ratio into consideration
*/
list($newPreviewWidth, $newPreviewHeight) = $this->scale(
$image, $scaleWidth, $scaleHeight, $previewWidth, $previewHeight
$image, $askedWidth, $askedHeight, $previewWidth, $previewHeight
);
// The preview has been resized and should now have the asked dimensions
@ -890,6 +887,7 @@ class Preview {
return;
}
// The preview is smaller, but we can't touch it
$this->storePreview($fileId, $newPreviewWidth, $newPreviewHeight);
}

41
tests/lib/preview.php
View file

@ -874,4 +874,45 @@ class Preview extends TestCase {
return [(int)$askedWidth, (int)$askedHeight];
}
public function testKeepAspectRatio() {
$originalWidth = 1680;
$originalHeight = 1050;
$originalAspectRation = $originalWidth / $originalHeight;
$preview = new \OC\Preview(
self::TEST_PREVIEW_USER1, 'files/', 'testimage.jpg',
150,
150
);
$preview->setKeepAspect(true);
$image = $preview->getPreview();
$aspectRatio = $image->width() / $image->height();
$this->assertEquals(round($originalAspectRation, 2), round($aspectRatio, 2));
$this->assertLessThanOrEqual(150, $image->width());
$this->assertLessThanOrEqual(150, $image->height());
}
public function testKeepAspectRatioCover() {
$originalWidth = 1680;
$originalHeight = 1050;
$originalAspectRation = $originalWidth / $originalHeight;
$preview = new \OC\Preview(
self::TEST_PREVIEW_USER1, 'files/', 'testimage.jpg',
150,
150
);
$preview->setKeepAspect(true);
$preview->setMode(\OC\Preview::MODE_COVER);
$image = $preview->getPreview();
$aspectRatio = $image->width() / $image->height();
$this->assertEquals(round($originalAspectRation, 2), round($aspectRatio, 2));
$this->assertGreaterThanOrEqual(150, $image->width());
$this->assertGreaterThanOrEqual(150, $image->height());
}
}