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

Imaging directives (crop, gravity and preview)

Browse Source
This commit is contained in:
perploug
2014-01-29 13:44:34 +01:00
parent 9ce79e98a3
commit 8024bde429
7 changed files with 132 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagecrop.directive.js
View File

@@ -9,12 +9,11 @@ angular.module("umbraco.directives")
return {
restrict: 'E',
replace: true,
templateUrl: 'views/directives/umb-image-crop.html',
templateUrl: 'views/directives/imaging/umb-image-crop.html',
scope: {
src: '@',
width: '@',
height: '@',
presets: '@',
src: '=',
width: '=',
height: '=',
crop: "="
},
link: function(scope, element, attrs) {
@@ -44,6 +43,7 @@ angular.module("umbraco.directives")
};
};
//elements
var $viewport = element.find(".viewport");
var $image = element.find("img");
@@ -238,6 +238,7 @@ angular.module("umbraco.directives")
if(scope.crop && scope.crop.top){
calculatePosition(scope.crop);
}else{
scope.crop = {};
fitImage();
}
@@ -262,4 +263,4 @@ angular.module("umbraco.directives")
});
}
};
});
});

84
src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagegravity.directive.js
View File

@@ -11,43 +11,25 @@ angular.module("umbraco.directives")
return {
restrict: 'E',
replace: true,
templateUrl: 'views/directives/umb-image-gravity.html',
templateUrl: 'views/directives/imaging/umb-image-gravity.html',
scope: {
src: '@',
width: '@',
height: '@',
src: '=',
width: "=",
height: "=",
gravity: "="
},
link: function(scope, element, attrs) {
scope.scale = 100;
//if image is over this, we re-calculate the editors global ratio
//this will not have an effect on the result, since that is returned in percentage
scope.maxHeight = 500;
scope.maxWidth = 600;
scope.width = 400;
scope.height = 320;
scope.dimensions = {
image: {},
viewport:{},
ratio: 1
};
scope.style = function () {
return {
'height': parseInt(scope.height, 10) + 'px',
'width': parseInt(scope.width, 10) + 'px'
};
};
//elements
var $viewport = element.find(".viewport");
var $image = element.find("img");
var $overlay = element.find(".overlay");
var $container = element.find(".crop-container");
var setDimensions = function(){
scope.imagewidth = $image.width();
scope.imageheight = $image.height();
};
var setImageSize = function(width, height){
$image.width(width);
@@ -55,23 +37,20 @@ angular.module("umbraco.directives")
$viewport.width(width);
$viewport.height(height);
scope.dimensions.image.width = width;
scope.dimensions.image.height = height;
};
//when loading an image without any crop info, we center and fit it
var fitImage = function(){
fitToViewPort($image);
centerImage($image);
$log.log("centered and fitted");
};
//utill for centering scaled image
var centerImage = function(img) {
img.css({
'position': 'absolute',
'left': scope.dimensions.viewport.width / 2 - scope.dimensions.image.width / 2,
'top': scope.dimensions.viewport.height / 2 - scope.dimensions.image.height / 2
'left': scope.width / 2 - scope.imageWidth / 2,
'top': scope.height / 2 - scope.imageHeight / 2
});
};
@@ -79,29 +58,16 @@ angular.module("umbraco.directives")
var fitToViewPort = function(img) {
//returns size fitting the cropper
var size = calculateAspectRatioFit(
scope.dimensions.image.width,
scope.dimensions.image.height,
scope.dimensions.viewport.width,
scope.dimensions.viewport.height,
true);
scope.imageWidth,
scope.imageHeight,
scope.width,
scope.height,
false);
//sets the image size and updates the scope
setImageSize(size.width, size.height);
scope.minScale = size.ratio;
scope.maxScale = size.ratio * 3;
scope.currentScale = scope.minScale;
scope.scale = scope.currentScale;
};
var resizeImageToScale = function(img, ratio){
//do stuff
var size = calculateSizeToRatio(scope.dimensions.image.originalWidth, scope.dimensions.image.originalHeight, ratio);
setImageSize(size.width, size.height);
centerImage(img);
scope.currentScale = scope.scale;
};
//utill for getting either min/max aspect ratio to scale image after
var calculateAspectRatioFit = function(srcWidth, srcHeight, maxWidth, maxHeight, maximize) {
@@ -116,11 +82,6 @@ angular.module("umbraco.directives")
return { width:srcWidth*ratio, height:srcHeight*ratio, ratio: ratio};
};
//utill for scaling width / height given a ratio
var calculateSizeToRatio= function(srcWidth, srcHeight, ratio) {
return { width:srcWidth*ratio, height:srcHeight*ratio, ratio: ratio};
};
var calculateGravity = function(){
scope.gravity.left = $overlay[0].offsetLeft + 10;
scope.gravity.top = $overlay[0].offsetTop + 10;
@@ -135,18 +96,17 @@ angular.module("umbraco.directives")
}
});
//// INIT /////
$image.load(function(){
$timeout(function(){
$image.width("auto");
$image.height("auto");
scope.dimensions.image.originalWidth = $image.width();
scope.dimensions.image.originalHeight = $image.height();
setDimensions();
fitImage();
scope.loaded = true;
});
});
@@ -154,4 +114,4 @@ angular.module("umbraco.directives")
}
};
});
});

31
src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbimagethumbnail.directive.js Normal file
View File

@@ -0,0 +1,31 @@
/**
* @ngdoc directive
* @name umbraco.directives.directive:umbCropsy
* @restrict E
* @function
* @description
* Used by editors that require naming an entity. Shows a textbox/headline with a required validator within it's own form.
**/
angular.module("umbraco.directives")
.directive('umbImageThumbnail', function ($timeout, localizationService, $log) {
return {
restrict: 'E',
replace: true,
templateUrl: 'views/directives/imaging/umb-image-thumbnail.html',
scope: {
src: '=',
width: '=',
height: '=',
gravity: "=",
crop: "="
},
link: function(scope, element, attrs) {
scope.marginLeft = 0-Math.abs( scope.width * scope.gravity.left);
scope.marginTop = 0-Math.abs( scope.width * scope.gravity.top);
}
};
});

50
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -158,7 +158,8 @@ ul.color-picker li a {
background: white;
margin: 5px;
position: relative;
text-align: center
text-align: center;
vertical-align: top;
}
.umb-sortable-thumbnails li:hover a{
@@ -173,6 +174,11 @@ ul.color-picker li a {
display:block;
}
.umb-sortable-thumbnails li img.noScale{
max-width: none !important;
max-height: none !important;
}
.umb-sortable-thumbnails .icon-holder .icon{
font-size: 60px;
line-height: 70px;
@@ -188,28 +194,27 @@ ul.color-picker li a {
// Cropper
// -------------------------------------------------
.umb-cropper .crop-container .viewport img {
position: absolute;
top: 0;
left: 0;
}
.umb-cropper img, .umb-cropper-gravity img{
position: absolute;
top: 0;
left: 0;
}
.umb-cropper .overlay {
.umb-cropper .overlay, .umb-cropper-gravity .overlay {
top: 0;
left: 0;
cursor: move;
z-index: 6001;
}
.umb-cropper .viewport {
.umb-cropper .viewport, .umb-cropper-gravity .viewport {
overflow: hidden;
position: relative;
border:1px solid @grayLight;
width: 600px;
height: 400px;
border:1px solid #ccc;
background-image: url('images/viewport_background.gif');
}
height: 480px;
}
.umb-cropper .viewport:after {
content: "";
@@ -227,15 +232,20 @@ ul.color-picker li a {
box-shadow: inset 0 0 0 20px white,inset 0 0 0 21px rgba(0,0,0,.1),inset 0 0 20px 21px rgba(0,0,0,.2);
}
.umb-cropper-gravity .pointer{
width: 20px;
height: 20px;
top: 0;
left: 0;
cursor: move;
z-index: 6001;
.umb-cropper-gravity .overlay{
width: 26px;
height: 26px;
text-align: center;
border-radius: 20px;
opacity: 0.6;
background: white;
}
.umb-cropper-gravity .overlay i{
font-size: 26px;
line-height: 26px;
opacity: 0.8 !important;
}
//

7
src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-gravity.html
View File

@@ -1,4 +1,4 @@
<div class="umb-cropper umb-cropper-gravity" ng-show="src">
<div class="umb-cropper-gravity">
<div class="gravity-container">
<div class="viewport" ng-style="style()">
<img src="{{src}}" />
@@ -6,12 +6,7 @@
<div class="overlay">
<i class="icon-crosshair"></i>
</div>
</div>
</div>
<pre>
{{gravity | json}}
</pre>
</div>

5
src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-thumbnail.html Normal file
View File

@@ -0,0 +1,5 @@
<div class="umb-crop-thumbnail-container"
ng-style="{height: height, width: width, border: '1px solid red', overflow: 'hidden'}">
<img src="{{src}}"
ng-style="{'margin-left': marginLeft, 'margin-top': marginTop}" class="noScale" />
</div>

36
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html
View File

@@ -1,5 +1,41 @@
<div class="umb-editor umb-mediapicker" ng-controller="Umbraco.PropertyEditors.MediaPickerController">
<div ng-if="cropper.image">
<div ng-if="cropper.crop">
<umb-image-crop
crop="cropper.crop"
gravity="cropper.image.gravity"
src="cropper.image.src" />
</div>
<div ng-if="cropper.grav">
<umb-image-gravity
height="'300px'"
width= "'480px'"
src="cropper.grav.src"
gravity="cropper.grav.gravity" />
</div>
<ul class="umb-sortable-thumbnails">
<li class="span2">
<img ng-src="{{cropper.image.src}}"
ng-click="cropper.crop = undefined; cropper.grav = cropper.image" />
</li>
<li ng-repeat="crop in cropper.image.crops">
<a href ng-click="cropper.crop = crop; cropper.grav = undefined">
<umb-image-thumbnail
gravity="cropper.image.gravity"
crop="cropper.image.crop"
src="cropper.image.src"
height="crop.height"
width="crop.width">
</a>
</li>
</ul>
</div>
<ul ui-sortable="sortableOptions" ng-model="images" class="umb-sortable-thumbnails">
<li style="width: 120px; height: 100px; overflow: hidden;" ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="" ng-show="image.src">