diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbImageCrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbImageCrop.directive.js deleted file mode 100644 index 2f8cf5ca60..0000000000 --- a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbImageCrop.directive.js +++ /dev/null @@ -1,265 +0,0 @@ -/** -* @ngdoc directive -* @name umbraco.directives.directive:umbImageCrop -* @restrict E -* @function -**/ -angular.module("umbraco.directives") - .directive('umbImageCrop', function ($timeout, localizationService, $log) { - return { - restrict: 'E', - replace: true, - templateUrl: 'views/directives/umb-image-crop.html', - scope: { - src: '@', - width: '@', - height: '@', - presets: '@', - crop: "=" - }, - 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: {}, - cropper:{}, - viewport:{}, - margin: 20, - ratio: 1 - }; - - scope.style = function () { - return { - 'height': (parseInt(scope.height, 10) + 2 * scope.dimensions.margin) + 'px', - 'width': (parseInt(scope.width, 10) + 2 * scope.dimensions.margin) + 'px' - }; - }; - - //elements - var $viewport = element.find(".viewport"); - var $image = element.find("img"); - var $overlay = element.find(".overlay"); - var $container = element.find(".crop-container"); - - //default constraints for drag n drop - var constraints = {left: {max: 20, min: 20}, top: {max: 20, min: 20}, }; - - var setDimensions = function(){ - scope.dimensions.image.width = $image.width(); - scope.dimensions.image.height = $image.height(); - - scope.dimensions.viewport.width = $viewport.width(); - scope.dimensions.viewport.height = $viewport.height(); - - scope.dimensions.cropper.width = scope.dimensions.viewport.width - 2 * scope.dimensions.margin; - scope.dimensions.cropper.height = scope.dimensions.viewport.height - 2 * scope.dimensions.margin; - }; - - var setImageSize = function(width, height){ - $image.width(width); - $image.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); - syncOverLay(); - setConstraints($image); - }; - - //utill for centering scaled image - var centerImage = function(img) { - var image_width = img.width(), - image_height = img.height(), - mask_width = $viewport.width(), - mask_height = $viewport.height(); - - 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 - }); - }; - - //utill for scaling image to fit viewport - var fitToViewPort = function(img) { - //returns size fitting the cropper - var size = calculateAspectRatioFit( - 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 - 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; - - syncOverLay(); - }; - - //set constaints for cropping drag and drop - var setConstraints = function(img){ - //do stuff - var w = img.width(), - h = img.height(), - crop_width = $viewport.width() - 2 * 20, - crop_height = $viewport.height() - 2 * 20; - - constraints.left.min = 20 + crop_width - w; - constraints.top.min = 20 + crop_height - h; - }; - - //utill for getting either min/max aspect ratio to scale image after - var calculateAspectRatioFit = function(srcWidth, srcHeight, maxWidth, maxHeight, maximize) { - var ratio = [maxWidth / srcWidth, maxHeight / srcHeight ]; - - if(maximize){ - ratio = Math.max(ratio[0], ratio[1]); - }else{ - ratio = Math.min(ratio[0], ratio[1]); - } - - 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 calculateCropBox = function(){ - scope.crop.left = Math.abs($image[0].offsetLeft - scope.dimensions.margin) / scope.dimensions.image.width; - scope.crop.top = Math.abs($image[0].offsetTop - scope.dimensions.margin) / scope.dimensions.image.height; - - scope.crop.right = 1 - Math.abs(scope.dimensions.cropper.width - (scope.dimensions.image.width - scope.crop.left)) / scope.dimensions.image.width; - scope.crop.bottom = 1 - Math.abs(scope.dimensions.cropper.height - (scope.dimensions.image.height - scope.crop.top)) / scope.dimensions.image.height; - }; - - var calculatePosition = function(crop){ - - var left = (crop.left * scope.dimensions.image.originalWidth); - var top = (crop.top * scope.dimensions.image.originalHeight); - - var cropped_width = scope.dimensions.image.originalWidth - left; - var ratio = cropped_width / scope.dimensions.image.originalWidth; - - scope.scale = ratio; - resizeImageToScale($image, ratio); - - $image.css({ - "top": -top, - "left": -left - }); - - syncOverLay(); - }; - - - - var syncOverLay = function(){ - $overlay.height($image.height()); - $overlay.width($image.width()); - - $overlay.css({ - "top": $image[0].offsetTop, - "left": $image[0].offsetLeft - }); - - calculateCropBox(); - }; - - //Drag and drop positioning, using jquery ui draggable - var onStartDragPosition, top, left; - $overlay.draggable({ - start: function(event, ui) { - syncOverLay(); - }, - drag: function(event, ui) { - - - if(ui.position.left <= constraints.left.max && ui.position.left >= constraints.left.min){ - $image.css({ - 'left': ui.position.left - }); - } - - if(ui.position.top <= constraints.top.max && ui.position.top >= constraints.top.min){ - $image.css({ - 'top': ui.position.top - }); - } - }, - stop: function() { - syncOverLay(); - } - }); - - - - - - //// 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(); - - if(scope.crop && scope.crop.top){ - calculatePosition(scope.crop); - }else{ - fitImage(); - } - - scope.loaded = true; - }); - }); - - - /// WATCHERS //// - scope.$watch("scale", function(){ - if(scope.loaded && scope.scale !== scope.currentScale){ - resizeImageToScale($image, scope.scale); - setConstraints($image); - } - }); - - /// WATCHERS //// - scope.$watch("crop", function(newVal, oldVal){ - if(scope.loaded && newVal !== oldVal){ - calculatePosition(scope.crop); - } - }); - } - }; - }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbImageGravity.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbImageGravity.directive.js deleted file mode 100644 index 418e0f0709..0000000000 --- a/src/Umbraco.Web.UI.Client/src/common/directives/imaging/umbImageGravity.directive.js +++ /dev/null @@ -1,157 +0,0 @@ -/** -* @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('umbImageGravity', function ($timeout, localizationService, $log) { - return { - restrict: 'E', - replace: true, - templateUrl: 'views/directives/umb-image-gravity.html', - scope: { - 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 setImageSize = function(width, height){ - $image.width(width); - $image.height(height); - - $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); - }; - - //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 - }); - }; - - //utill for scaling image to fit viewport - 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); - - //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) { - var ratio = [maxWidth / srcWidth, maxHeight / srcHeight ]; - - if(maximize){ - ratio = Math.max(ratio[0], ratio[1]); - }else{ - ratio = Math.min(ratio[0], ratio[1]); - } - - 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; - }; - - - //Drag and drop positioning, using jquery ui draggable - var onStartDragPosition, top, left; - $overlay.draggable({ - stop: function() { - calculateGravity(); - } - }); - - //// 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; - }); - }); - - - } - }; - }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 6291c1066c..6ffde599a6 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -184,60 +184,6 @@ ul.color-picker li a { } -// -// Cropper -// ------------------------------------------------- - -.umb-cropper .crop-container .viewport img { - position: absolute; - top: 0; - left: 0; -} - - -.umb-cropper .overlay { - top: 0; - left: 0; - cursor: move; - z-index: 6001; -} - -.umb-cropper .viewport { - overflow: hidden; - position: relative; - width: 600px; - height: 400px; - border:1px solid #ccc; - background-image: url('images/viewport_background.gif'); -} - -.umb-cropper .viewport:after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 5999; - -moz-opacity: .75; - opacity: .75; - filter: alpha(opacity=7); - -webkit-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); - -moz-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); - 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; -} - - // // folder-browser // -------------------------------------------------- diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-crop.html b/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-crop.html deleted file mode 100644 index 82f83d56d6..0000000000 --- a/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-crop.html +++ /dev/null @@ -1,32 +0,0 @@ -
-
-
- -
-
-
- - - -
-		{{dimensions | json}}
-
- -
-		{{box | json}}
-
- - -
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-gravity.html b/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-gravity.html deleted file mode 100644 index 97acd321d2..0000000000 --- a/src/Umbraco.Web.UI.Client/src/views/directives/imaging/umb-image-gravity.html +++ /dev/null @@ -1,17 +0,0 @@ -
-
-
- - -
- -
- -
-
- -
-		{{gravity | json}}
-
- -
\ No newline at end of file