yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds another overload for GetBigThumbnail, adds better thumbnail err checking to the folder browser thing and updates the file uploader to use this thumbnail proxy, now upgrades should be good.

Browse Source
This commit is contained in:
Shannon
2013-10-08 16:20:22 +11:00
parent 8b358da2f0
commit 881d922f30
4 changed files with 150 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
src/Umbraco.Web.UI.Client/src/common/directives/html/umbphotofolder.directive.js
View File

@@ -4,161 +4,164 @@
* @restrict E
**/
angular.module("umbraco.directives.html")
.directive('umbPhotoFolder', function ($compile, $log, $timeout, $filter, imageHelper) {
.directive('umbPhotoFolder', function ($compile, $log, $timeout, $filter, imageHelper, umbRequestHelper) {
return {
restrict: 'E',
replace: true,
require: '?ngModel',
terminate: true,
templateUrl: 'views/directives/html/umb-photo-folder.html',
link: function(scope, element, attrs, ngModel) {
function renderCollection(scope, photos) {
// get row width - this is fixed.
var w = scope.lastWidth;
var rows = [];
function _renderCollection(scope, photos){
// get row width - this is fixed.
var w = scope.lastWidth;
var rows = [];
// initial height - effectively the maximum height +/- 10%;
var h = Math.max(scope.minHeight, Math.floor(w / 5));
// initial height - effectively the maximum height +/- 10%;
var h = Math.max(scope.minHeight,Math.floor(w / 5));
// store relative widths of all images (scaled to match estimate height above)
var ws = [];
$.each(photos, function (key, val) {
// store relative widths of all images (scaled to match estimate height above)
var ws = [];
$.each(photos, function(key, val) {
val.width_n = $.grep(val.properties, function (v, index) { return (v.alias === "umbracoWidth"); })[0];
val.height_n = $.grep(val.properties, function (v, index) { return (v.alias === "umbracoHeight"); })[0];
val.width_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoWidth");})[0];
val.height_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoHeight");})[0];
//val.url_n = imageHelper.getThumbnail({ imageModel: val, scope: scope });
if(val.width_n && val.height_n){
//val.url_n = imageHelper.getThumbnail({ imageModel: val, scope: scope });
if (val.width_n && val.height_n) {
var wt = parseInt(val.width_n.value, 10);
var ht = parseInt(val.height_n.value, 10);
if( ht !== h ) {
wt = Math.floor(wt * (h / ht));
if (ht !== h) {
wt = Math.floor(wt * (h / ht));
}
ws.push(wt);
}else{
} else {
//if its files or folders, we make them square
ws.push(scope.minHeight);
}
});
}
});
var rowNum = 0;
var limit = photos.length;
while(scope.baseline < limit)
{
rowNum++;
// number of images appearing in this row
var c = 0;
// total width of images in this row - including margins
var tw = 0;
var rowNum = 0;
var limit = photos.length;
while (scope.baseline < limit) {
rowNum++;
// number of images appearing in this row
var c = 0;
// total width of images in this row - including margins
var tw = 0;
// calculate width of images and number of images to view in this row.
while( (tw * 1.1 < w) && (scope.baseline + c < limit))
{
// calculate width of images and number of images to view in this row.
while ((tw * 1.1 < w) && (scope.baseline + c < limit)) {
tw += ws[scope.baseline + c++] + scope.border * 2;
}
}
// Ratio of actual width of row to total width of images to be used.
var r = w / tw;
// image number being processed
var i = 0;
// reset total width to be total width of processed images
tw = 0;
// Ratio of actual width of row to total width of images to be used.
var r = w / tw;
// image number being processed
var i = 0;
// reset total width to be total width of processed images
tw = 0;
// new height is not original height * ratio
var ht = Math.floor(h * r);
// new height is not original height * ratio
var ht = Math.floor(h * r);
var row = {};
row.photos = [];
row.style = {};
row.style = {"height": ht + scope.border * 2, "width": scope.lastWidth};
rows.push(row);
var row = {};
row.photos = [];
row.style = {};
row.style = { "height": ht + scope.border * 2, "width": scope.lastWidth };
rows.push(row);
while( i < c )
{
while (i < c) {
var photo = photos[scope.baseline + i];
// Calculate new width based on ratio
var wt = Math.floor(ws[scope.baseline + i] * r);
// add to total width with margins
tw += wt + scope.border * 2;
// Create image, set src, width, height and margin
//var purl = photo.url_n;
photo.thumbnail = imageHelper.getThumbnail({ imageModel: photo, scope: scope });
if(!photo.thumbnail){
photo.thumbnail = "none";
//get the image property (if one exists)
var imageProp = imageHelper.getImagePropertyValue({ imageModel: photo });
if (!imageProp) {
//TODO: Do something better than this!!
photo.thumbnail = "none";
}
photo.style = {"width": wt, "height": ht, "margin": scope.border+"px", "cursor": "pointer"};
else {
//get the proxy url for big thumbnails (this ensures one is always generated)
var thumbnailUrl = umbRequestHelper.getApiUrl(
"mediaApiBaseUrl",
"GetBigThumbnail",
[{ mediaId: photo.id }]);
photo.thumbnail = thumbnailUrl;
}
photo.style = { "width": wt, "height": ht, "margin": scope.border + "px", "cursor": "pointer" };
row.photos.push(photo);
i++;
}
}
// set row height to actual height + margins
scope.baseline += c;
// set row height to actual height + margins
scope.baseline += c;
// if total width is slightly smaller than
// actual div width then add 1 to each
// photo width till they match
i = 0;
while( tw < w )
{
// if total width is slightly smaller than
// actual div width then add 1 to each
// photo width till they match
i = 0;
while (tw < w) {
row.photos[i].style.width++;
i = (i + 1) % c;
tw++;
}
}
// if total width is slightly bigger than
// actual div width then subtract 1 from each
// photo width till they match
i = 0;
while( tw > w )
{
// if total width is slightly bigger than
// actual div width then subtract 1 from each
// photo width till they match
i = 0;
while (tw > w) {
row.photos[i].style.width--;
i = (i + 1) % c;
tw--;
}
}
return rows;
}
ngModel.$render = function() {
if(ngModel.$modelValue){
$timeout(function(){
var photos = ngModel.$modelValue;
scope.baseline = element.attr('baseline') ? parseInt(element.attr('baseline'),10) : 0;
scope.minWidth = element.attr('min-width') ? parseInt(element.attr('min-width'),10) : 420;
scope.minHeight = element.attr('min-height') ? parseInt(element.attr('min-height'),10) : 200;
scope.border = element.attr('border') ? parseInt(element.attr('border'),10) : 5;
scope.clickHandler = scope.$eval(element.attr('on-click'));
scope.lastWidth = Math.max(element.width(), scope.minWidth);
scope.rows = _renderCollection(scope, photos);
if(attrs.filterBy){
scope.$watch(attrs.filterBy, function(newVal, oldVal){
if(newVal !== oldVal){
var p = $filter('filter')(photos, newVal, false);
scope.baseline = 0;
var m = _renderCollection(scope, p);
scope.rows = m;
}
});
}
}, 500); //end timeout
} //end if modelValue
}; //end $render
return rows;
}
};
return {
restrict: 'E',
replace: true,
require: '?ngModel',
terminate: true,
templateUrl: 'views/directives/html/umb-photo-folder.html',
link: function (scope, element, attrs, ngModel) {
ngModel.$render = function () {
if (ngModel.$modelValue) {
$timeout(function () {
var photos = ngModel.$modelValue;
scope.baseline = element.attr('baseline') ? parseInt(element.attr('baseline'), 10) : 0;
scope.minWidth = element.attr('min-width') ? parseInt(element.attr('min-width'), 10) : 420;
scope.minHeight = element.attr('min-height') ? parseInt(element.attr('min-height'), 10) : 200;
scope.border = element.attr('border') ? parseInt(element.attr('border'), 10) : 5;
scope.clickHandler = scope.$eval(element.attr('on-click'));
scope.lastWidth = Math.max(element.width(), scope.minWidth);
scope.rows = renderCollection(scope, photos);
if (attrs.filterBy) {
scope.$watch(attrs.filterBy, function (newVal, oldVal) {
if (newVal !== oldVal) {
var p = $filter('filter')(photos, newVal, false);
scope.baseline = 0;
var m = renderCollection(scope, p);
scope.rows = m;
}
});
}
}, 500); //end timeout
} //end if modelValue
}; //end $render
}
};
});

5
src/Umbraco.Web.UI.Client/src/common/services/util.service.js
View File

@@ -93,6 +93,11 @@ function imageHelper() {
var imageProp = _.find(props, function (item) {
return item.alias === 'umbracoFile';
});
if (!imageProp) {
return "";
}
var imageVal;
//our default images might store one or many images (as csv)

10
src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.controller.js
View File

@@ -13,7 +13,7 @@
* for the editors to check if the value has changed and to re-bind the property if that is true.
*
*/
function fileUploadController($scope, $element, $compile, imageHelper, fileManager) {
function fileUploadController($scope, $element, $compile, imageHelper, fileManager, umbRequestHelper) {
/** Clears the file collections when content is saving (if we need to clear) or after saved */
function clearFiles() {
@@ -55,7 +55,13 @@ function fileUploadController($scope, $element, $compile, imageHelper, fileManag
}
_.each($scope.persistedFiles, function (file) {
file.thumbnail = imageHelper.getThumbnailFromPath(file.file);
var thumbnailUrl = umbRequestHelper.getApiUrl(
"mediaApiBaseUrl",
"GetBigThumbnail",
[{ originalImagePath: file.file }]);
file.thumbnail = thumbnailUrl;
});
$scope.clearFiles = false;

21
src/Umbraco.Web/Editors/MediaController.cs
View File

@@ -70,7 +70,7 @@ namespace Umbraco.Web.Editors
/// <param name="mediaId"></param>
/// <returns></returns>
/// <remarks>
/// If there is no image property then this will return not found.
/// If there is no media, image property or image file is found then this will return not found.
/// </remarks>
public HttpResponseMessage GetBigThumbnail(int mediaId)
{
@@ -86,7 +86,21 @@ namespace Umbraco.Web.Editors
}
var imagePath = imageProp.Value.ToString();
var bigThumbPath = imagePath.Substring(0, imagePath.LastIndexOf('.')) + "_big-thumb" + ".jpg";
return GetBigThumbnail(imagePath);
}
/// <summary>
/// Gets the big thumbnail image for the original image path
/// </summary>
/// <param name="originalImagePath"></param>
/// <returns></returns>
/// <remarks>
/// If there is no original image is found then this will return not found.
/// </remarks>
public HttpResponseMessage GetBigThumbnail(string originalImagePath)
{
var imagePath = originalImagePath;
var bigThumbPath = imagePath.Substring(0, imagePath.LastIndexOf('.')) + "_big-thumb" + ".jpg";
var thumbFilePath = IOHelper.MapPath(bigThumbPath);
if (System.IO.File.Exists(thumbFilePath) == false)
{
@@ -108,7 +122,7 @@ namespace Umbraco.Web.Editors
string.Format("{0}_{1}.jpg", origFilePath.Substring(0, origFilePath.LastIndexOf(".")), "big-thumb"),
Path.GetExtension(origFilePath).Substring(1).ToLowerInvariant(),
mediaFileSystem);
}
}
}
}
@@ -121,6 +135,7 @@ namespace Umbraco.Web.Editors
return result;
}
/// <summary>
/// Gets an empty content item for the
/// </summary>