From c90e7735f90cabdf7aea89b7574cc84d4c588702 Mon Sep 17 00:00:00 2001 From: Sebastiaan Janssen Date: Tue, 2 Oct 2018 15:24:51 +0200 Subject: [PATCH] Fix initial upload for svg and correct the way the cropper elements are hidden when cropping is not possible --- .../imaging/umbimagegravity.directive.js | 52 ++++++++++++------- .../components/imaging/umb-image-gravity.html | 12 +++-- .../imagecropper/imagecropper.controller.js | 6 ++- .../imagecropper/imagecropper.html | 7 ++- 4 files changed, 48 insertions(+), 29 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js index a7f053fcae..d0ccc4647e 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js @@ -14,7 +14,7 @@ angular.module("umbraco.directives") scope: { src: '=', center: "=", - onImageLoaded: "=" + onImageLoaded: "&" }, link: function(scope, element, attrs) { @@ -56,23 +56,17 @@ angular.module("umbraco.directives") }; var setDimensions = function () { - if (scope.src.endsWith(".svg")) { - // svg files don't automatically get a size by - // loading them set a default size for now - $image.attr("width", "200"); - $image.attr("height", "200"); - // can't crop an svg file, don't show the focal point - $overlay.remove(); + if (scope.isCroppable) { + scope.dimensions.width = $image.width(); + scope.dimensions.height = $image.height(); + + if(scope.center){ + scope.dimensions.left = scope.center.left * scope.dimensions.width -10; + scope.dimensions.top = scope.center.top * scope.dimensions.height -10; + }else{ + scope.center = { left: 0.5, top: 0.5 }; + } } - scope.dimensions.width = $image.width(); - scope.dimensions.height = $image.height(); - - if(scope.center){ - scope.dimensions.left = scope.center.left * scope.dimensions.width -10; - scope.dimensions.top = scope.center.top * scope.dimensions.height -10; - }else{ - scope.center = { left: 0.5, top: 0.5 }; - } }; var calculateGravity = function(offsetX, offsetY){ @@ -113,10 +107,32 @@ angular.module("umbraco.directives") //// INIT ///// $image.load(function() { $timeout(function() { + scope.isCroppable = true; + scope.hasDimensions = true; + + if (scope.src !== "undefined") { + if (scope.src.endsWith(".svg")) { + scope.isCroppable = false; + scope.hasDimensions = false; + } else { + // From: https://stackoverflow.com/a/51789597/5018 + var type = scope.src.substring(scope.src.indexOf("/") + 1, scope.src.indexOf(";base64")); + if (type.startsWith("svg")) { + scope.isCroppable = false; + scope.hasDimensions = false; + } + } + } + setDimensions(); scope.loaded = true; if (angular.isFunction(scope.onImageLoaded)) { - scope.onImageLoaded(); + scope.onImageLoaded( + { + "isCroppable": scope.isCroppable, + "hasDimensions": scope.hasDimensions + } + ); } }); }); diff --git a/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html b/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html index 21500e7c84..ddb5ed2af1 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/imaging/umb-image-gravity.html @@ -1,12 +1,14 @@
-
- +
-
+ + -
+
-
+
+ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js index 749d3b4faa..bc2dd91722 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js @@ -72,8 +72,10 @@ angular.module('umbraco') } }; - $scope.imageLoaded = function() { + $scope.imageLoaded = function (isCroppable, hasDimensions) { $scope.imageIsLoaded = true; + $scope.isCroppable = isCroppable; + $scope.hasDimensions = hasDimensions; }; //on image selected, update the cropper @@ -114,7 +116,7 @@ angular.module('umbraco') }) .run(function (mediaHelper, umbRequestHelper) { if (mediaHelper && mediaHelper.registerFileResolver) { - + //NOTE: The 'entity' can be either a normal media entity or an "entity" returned from the entityResource // they contain different data structures so if we need to query against it we need to be aware of this. mediaHelper.registerFileResolver("Umbraco.ImageCropper", function (property, entity, thumbnail) { diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html index 5c6f156aab..18f528fbd2 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html @@ -1,7 +1,6 @@
- @@ -42,12 +41,12 @@ + on-image-loaded="imageLoaded(isCroppable, hasDimensions)"> Remove file
- -