Imaging directives moved into components

src/Umbraco.Web.UI.Client/src/common/directives/_obsolete/umbuploaddropzone.directive.js

@@ -8,6 +8,6 @@ angular.module("umbraco.directives.html")
 		return {
 			restrict: 'E',
 			replace: true,
-			templateUrl: 'views/directives/html/umb-upload-dropzone.html'
+			templateUrl: 'views/directives/_obsolete/umb-upload-dropzone.html'
 		};
-	});
+	});

src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagecrop.directive.js

@@ -5,12 +5,12 @@
 * @function
 **/
 angular.module("umbraco.directives")
-	.directive('umbImageCrop', 
+	.directive('umbImageCrop',
 		function ($timeout, localizationService, cropperHelper,  $log) {
 	    return {
 				restrict: 'E',
 				replace: true,
-				templateUrl: 'views/directives/imaging/umb-image-crop.html',
+				templateUrl: 'views/components/imaging/umb-image-crop.html',
 				scope: {
 					src: '=',
 					width: '@',
@@ -39,15 +39,15 @@ angular.module("umbraco.directives")
 
 					//live rendering of viewport and image styles
 					scope.style = function () {
-						return { 
+						return {
 							'height': (parseInt(scope.dimensions.viewport.height, 10)) + 'px',
-							'width': (parseInt(scope.dimensions.viewport.width, 10)) + 'px' 
+							'width': (parseInt(scope.dimensions.viewport.width, 10)) + 'px'
 						};
 					};
-				
+
 
 					//elements
-					var $viewport = element.find(".viewport"); 
+					var $viewport = element.find(".viewport");
 					var $image = element.find("img");
 					var $overlay = element.find(".overlay");
 					var $container = element.find(".crop-container");
@@ -64,7 +64,7 @@ angular.module("umbraco.directives")
 					};
 
 
-					var setDimensions = function(originalImage){	
+					var setDimensions = function(originalImage){
 						originalImage.width("auto");
 						originalImage.height("auto");
 
@@ -86,15 +86,15 @@ angular.module("umbraco.directives")
 						var _viewPortH =  parseInt(scope.height, 10);
 
 						//if we set a constraint we will scale it down if needed
-						if(scope.maxSize){	
+						if(scope.maxSize){
 							var ratioCalculation = cropperHelper.scaleToMaxSize(
-									_viewPortW, 
+									_viewPortW,
 									_viewPortH,
 									scope.maxSize);
 
 							//so if we have a max size, override the thumb sizes
 							_viewPortW = ratioCalculation.width;
-							_viewPortH = ratioCalculation.height;	
+							_viewPortH = ratioCalculation.height;
 						}
 
 						scope.dimensions.viewport.width = _viewPortW + 2 * scope.dimensions.margin;
@@ -106,12 +106,12 @@ angular.module("umbraco.directives")
 
 					//when loading an image without any crop info, we center and fit it
 					var resizeImageToEditor = function(){
-						//returns size fitting the cropper	
+						//returns size fitting the cropper
 						var size = cropperHelper.calculateAspectRatioFit(
-								scope.dimensions.image.width, 
-								scope.dimensions.image.height, 
-								scope.dimensions.cropper.width, 
-								scope.dimensions.cropper.height, 
+								scope.dimensions.image.width,
+								scope.dimensions.image.height,
+								scope.dimensions.cropper.width,
+								scope.dimensions.cropper.height,
 								true);
 
 						//sets the image size and updates the scope
@@ -145,16 +145,16 @@ angular.module("umbraco.directives")
 					//resize the image to a predefined crop coordinate
 					var resizeImageToCrop = function(){
 						scope.dimensions.image = cropperHelper.convertToStyle(
-												scope.crop, 
+												scope.crop,
 												{width: scope.dimensions.image.originalWidth, height: scope.dimensions.image.originalHeight},
 												scope.dimensions.cropper,
 												scope.dimensions.margin);
 
 						var ratioCalculation = cropperHelper.calculateAspectRatioFit(
-								scope.dimensions.image.originalWidth, 
-								scope.dimensions.image.originalHeight, 
-								scope.dimensions.cropper.width, 
-								scope.dimensions.cropper.height, 
+								scope.dimensions.image.originalWidth,
+								scope.dimensions.image.originalHeight,
+								scope.dimensions.cropper.width,
+								scope.dimensions.cropper.height,
 								true);
 
 						scope.dimensions.scale.current = scope.dimensions.image.ratio;
@@ -169,7 +169,7 @@ angular.module("umbraco.directives")
 					var validatePosition = function(left, top){
 						if(left > constraints.left.max)
 						{
-							left = constraints.left.max; 
+							left = constraints.left.max;
 						}
 
 						if(left <= constraints.left.min){
@@ -178,7 +178,7 @@ angular.module("umbraco.directives")
 
 						if(top > constraints.top.max)
 						{
-							top = constraints.top.max; 
+							top = constraints.top.max;
 						}
 						if(top <= constraints.top.min){
 							top = constraints.top.min;
@@ -186,17 +186,17 @@ angular.module("umbraco.directives")
 
 						if(scope.dimensions.image.left !== left){
 							scope.dimensions.image.left = left;
-						}	
-						
+						}
+
 						if(scope.dimensions.image.top !== top){
 							scope.dimensions.image.top = top;
 						}
-					};	
+					};
 
 
-					//sets scope.crop to the recalculated % based crop	
+					//sets scope.crop to the recalculated % based crop
 					var calculateCropBox = function(){
-						scope.crop = cropperHelper.pixelsToCoordinates(scope.dimensions.image, scope.dimensions.cropper.width, scope.dimensions.cropper.height, scope.dimensions.margin);	
+						scope.crop = cropperHelper.pixelsToCoordinates(scope.dimensions.image, scope.dimensions.cropper.width, scope.dimensions.cropper.height, scope.dimensions.margin);
 					};
 
 
@@ -218,7 +218,7 @@ angular.module("umbraco.directives")
 							});
 						}
 					});
-					
+
 
 
 					var init = function(image){
@@ -252,10 +252,10 @@ angular.module("umbraco.directives")
 
 					var throttledResizing = _.throttle(function(){
 						resizeImageToScale(scope.dimensions.scale.current);
-						calculateCropBox();	
+						calculateCropBox();
 					}, 100);
 
-					
+
 					//happens when we change the scale
 					scope.$watch("dimensions.scale.current", function(){
 						if(scope.loaded){
@@ -270,9 +270,9 @@ angular.module("umbraco.directives")
 							scope.$apply(function(){
 								scope.dimensions.scale.current = ranger.val();
 							});
-						});	
+						});
 					}
-					
+
 					//// INIT /////
 					$image.load(function(){
 						$timeout(function(){
@@ -281,4 +281,4 @@ angular.module("umbraco.directives")
 					});
 				}
 			};
-		});
+		});

src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js

@@ -3,7 +3,7 @@
 * @name umbraco.directives.directive:umbCropsy
 * @restrict E
 * @function
-* @description 
+* @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")
@@ -11,13 +11,13 @@ angular.module("umbraco.directives")
 	    return {
 				restrict: 'E',
 				replace: true,
-				templateUrl: 'views/directives/imaging/umb-image-gravity.html',
+				templateUrl: 'views/components/imaging/umb-image-gravity.html',
 				scope: {
 					src: '=',
 					center: "="
 				},
 				link: function(scope, element, attrs) {
-					
+
 					//Internal values for keeping track of the dot and the size of the editor
 					scope.dimensions = {
 						width: 0,
@@ -27,10 +27,10 @@ angular.module("umbraco.directives")
 					};
 
 					//elements
-					var $viewport = element.find(".viewport"); 
+					var $viewport = element.find(".viewport");
 					var $image = element.find("img");
 					var $overlay = element.find(".overlay");
-					
+
 					scope.style = function () {
 						if(scope.dimensions.width <= 0){
 							setDimensions();
@@ -38,7 +38,7 @@ angular.module("umbraco.directives")
 
 						return {
 							'top': scope.dimensions.top + 'px',
-							'left': scope.dimensions.left + 'px' 
+							'left': scope.dimensions.left + 'px'
 						};
 					};
 
@@ -52,7 +52,7 @@ angular.module("umbraco.directives")
 						}else{
 							scope.center = { left: 0.5, top: 0.5 };
 						}
-					};	
+					};
 
 					var calculateGravity = function(){
 						scope.dimensions.left = $overlay[0].offsetLeft;
@@ -61,13 +61,13 @@ angular.module("umbraco.directives")
 						scope.center.left =  (scope.dimensions.left+10) / scope.dimensions.width;
 						scope.center.top =  (scope.dimensions.top+10) / scope.dimensions.height;
 					};
-					
+
 					var lazyEndEvent = _.debounce(function(){
 						scope.$apply(function(){
 							scope.$emit("imageFocalPointStop");
 						});
 					}, 2000);
-					
+
 
 					//Drag and drop positioning, using jquery ui draggable
 					//TODO ensure that the point doesnt go outside the box
@@ -95,4 +95,4 @@ angular.module("umbraco.directives")
 					});
 				}
 			};
-		});
+		});

src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagethumbnail.directive.js

@@ -3,17 +3,17 @@
 * @name umbraco.directives.directive:umbCropsy
 * @restrict E
 * @function
-* @description 
+* @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', 
+	.directive('umbImageThumbnail',
 		function ($timeout, localizationService, cropperHelper, $log) {
 	    return {
 				restrict: 'E',
 				replace: true,
-				templateUrl: 'views/directives/imaging/umb-image-thumbnail.html',
-				
+				templateUrl: 'views/components/imaging/umb-image-thumbnail.html',
+
 				scope: {
 					src: '=',
 					width: '@',
@@ -22,7 +22,7 @@ angular.module("umbraco.directives")
 					crop: "=",
 					maxSize: '@'
 				},
-				
+
 				link: function(scope, element, attrs) {
 					//// INIT /////
 					var $image = element.find("img");
@@ -40,10 +40,10 @@ angular.module("umbraco.directives")
 							//we do not compare to the image dimensions, but the thumbs
 							if(scope.maxSize){
 								var ratioCalculation = cropperHelper.calculateAspectRatioFit(
-										scope.width, 
+										scope.width,
 										scope.height,
-										scope.maxSize, 
-										scope.maxSize, 
+										scope.maxSize,
+										scope.maxSize,
 										false);
 
 								//so if we have a max size, override the thumb sizes
@@ -51,7 +51,7 @@ angular.module("umbraco.directives")
 								scope.height = ratioCalculation.height;
 							}
 
-							setPreviewStyle();	
+							setPreviewStyle();
 						});
 					});
 
@@ -65,22 +65,22 @@ angular.module("umbraco.directives")
 					scope.$watch("center", function(){
 						setPreviewStyle();
 					}, true);
-					
+
 					function setPreviewStyle(){
 						if(scope.crop && scope.image){
 							scope.preview = cropperHelper.convertToStyle(
-												scope.crop, 
+												scope.crop,
 												scope.image,
 												{width: scope.width, height: scope.height},
 												0);
 						}else if(scope.image){
 
-							//returns size fitting the cropper	
+							//returns size fitting the cropper
 							var p = cropperHelper.calculateAspectRatioFit(
-									scope.image.width, 
-									scope.image.height, 
-									scope.width, 
-									scope.height, 
+									scope.image.width,
+									scope.image.height,
+									scope.width,
+									scope.height,
 									true);
 
 
@@ -98,4 +98,4 @@ angular.module("umbraco.directives")
 					}
 				}
 			};
-		});
+		});