Fix initial upload for svg and correct the way the cropper elements are hidden when cropping is not possible
This commit is contained in:
Sebastiaan Janssen
@@ -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
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
<div class="umb-cropper-gravity">
|
||||
<div class="gravity-container" ng-show="loaded">
|
||||
<div class="viewport">
|
||||
<img ng-src="{{src}}" style="max-width: 100%; max-height: 100%" ng-click="setFocalPoint($event)" draggable="false" />
|
||||
<div class="viewport">
|
||||
|
||||
<div class="overlay" ng-style="style()">
|
||||
<img ng-show="isCroppable" ng-src="{{src}}" style="max-width: 100%; max-height: 100%" ng-click="setFocalPoint($event)" draggable="false"/>
|
||||
<img ng-show="!isCroppable && !hasDimensions" ng-src="{{src}}" width="200" height="200" draggable="false" style="cursor: default;"/>
|
||||
|
||||
</div>
|
||||
<div ng-show="isCroppable" ng-when="isCroppable" class="overlay" ng-style="style()">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<div class="umb-editor umb-mediapicker"
|
||||
ng-controller="Umbraco.PropertyEditors.ImageCropperController">
|
||||
|
||||
|
||||
<span class="fileinput-button umb-upload-button-big"
|
||||
style="margin-bottom: 5px;"
|
||||
ng-hide="imageSrc">
|
||||
@@ -42,12 +41,12 @@
|
||||
<umb-image-gravity
|
||||
src="imageSrc"
|
||||
center="model.value.focalPoint"
|
||||
on-image-loaded="imageLoaded">
|
||||
on-image-loaded="imageLoaded(isCroppable, hasDimensions)">
|
||||
</umb-image-gravity>
|
||||
<a href class="btn btn-link btn-crop-delete" ng-click="clear()"><i class="icon-delete red"></i> <localize key="content_uploadClear">Remove file</localize></a>
|
||||
</div>
|
||||
|
||||
<ul ng-if="!imageSrc.endsWith('.svg')" class="umb-sortable-thumbnails cropList clearfix">
|
||||
|
||||
<ul ng-if="isCroppable" class="umb-sortable-thumbnails cropList clearfix">
|
||||
<li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}" ng-click="crop(value)">
|
||||
|
||||
<umb-image-thumbnail center="model.value.focalPoint"
|
||||
|
||||
Reference in New Issue
Block a user