From d608daa87bbcd2cd79cb3a4a661be7402f9ad347 Mon Sep 17 00:00:00 2001 From: Shannon Date: Fri, 10 Aug 2018 14:48:58 +1000 Subject: [PATCH] Gets new images syncing between instances on image cropper --- .../imaging/umbimagegravity.directive.js | 4 +- .../upload/umbpropertyfileupload.directive.js | 75 ++++++++++++++----- .../fileupload/fileupload.html | 2 +- .../imagecropper/imagecropper.controller.js | 16 +++- .../imagecropper/imagecropper.html | 3 +- 5 files changed, 77 insertions(+), 23 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 2048194f04..4759b59d45 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 @@ -138,7 +138,9 @@ /** Watches the one way binding changes */ function onChanges(changes) { - if (changes.center && !changes.center.isFirstChange() && !angular.equals(changes.center.currentValue, changes.center.previousValue)) { + if (changes.center && !changes.center.isFirstChange() + && changes.center.currentValue + && !angular.equals(changes.center.currentValue, changes.center.previousValue)) { //when center changes update the dimensions setDimensions(); } diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbpropertyfileupload.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbpropertyfileupload.directive.js index 4e250d8dee..0efe303bc5 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbpropertyfileupload.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/upload/umbpropertyfileupload.directive.js @@ -32,10 +32,11 @@ vm.files = []; //notify the callback - notifyValueChanged(null); + notifyFilesSelected(null); + notifyFilesChanged(null); } - function notifyValueChanged(val, files) { + function notifyFilesSelected(val, files) { if (!val) { val = null; @@ -45,12 +46,21 @@ } //notify the callback - vm.onValueChanged({ value: val, files: files }); + vm.onFilesSelected({ value: val, files: files }); //need to explicity setDirty here to track changes vm.fileUploadForm.$setDirty(); } + function notifyFilesChanged(files) { + if (!files) { + files = null; + } + + //notify the callback + vm.onFilesChanged({ files: files }); + } + function notifyInit(val, files) { if (!val) { val = null; @@ -84,19 +94,10 @@ //TODO: need to figure out what we can do for things like Nested Content - //check the file manager to see if there's already local files pending for this editor - var existingClientFiles = _.map( - _.filter(fileManager.getFiles(), - function(f) { - return f.alias === vm.propertyAlias && f.culture === vm.culture; - }), - function(f) { - return f.file; - }); - + var existingClientFiles = checkPendingClientFiles(); //create the property to show the list of files currently saved if (existingClientFiles.length > 0) { - updateModelFromSelectedFiles(existingClientFiles).then(function(newVal) { + updateModelFromSelectedFiles(existingClientFiles).then(function (newVal) { //notify the callback notifyInit(newVal, vm.files); }); @@ -126,6 +127,25 @@ } } + function checkPendingClientFiles() { + + //normalize culture to null if it's not there + if (!vm.culture) { + vm.culture = null; + } + + //check the file manager to see if there's already local files pending for this editor + var existingClientFiles = _.map( + _.filter(fileManager.getFiles(), + function (f) { + return f.alias === vm.propertyAlias && f.culture === vm.culture; + }), + function (f) { + return f.file; + }); + return existingClientFiles; + } + ///** Method required by the valPropertyValidator directive (returns true if the property editor has at least one file selected) */ //function validateMandatory() { // return { @@ -143,10 +163,23 @@ if (changes.value && !changes.value.isFirstChange() && changes.value.currentValue !== changes.value.previousValue) { - //if the value has been cleared, clear the files (ignore if the previous value is also falsy) if (!changes.value.currentValue && changes.value.previousValue) { + //if the value has been cleared, clear the files (ignore if the previous value is also falsy) vm.files = []; } + else if (changes.value.currentValue && !changes.value.previousValue && vm.files.length === 0) { + //if a new value has been added after being cleared + + var existingClientFiles = checkPendingClientFiles(); + //create the property to show the list of files currently saved + if (existingClientFiles.length > 0) { + updateModelFromSelectedFiles(existingClientFiles).then(function () { + //raise this event which means the files have changed but this wasn't the instance that + //added the file + notifyFilesChanged(vm.files); + }); + } + } //// here we need to check if the value change needs to trigger an update in the UI. //// if the value is only changed in the controller and not in the server values, we do not @@ -250,7 +283,8 @@ angularHelper.safeApply($scope, function() { //pass in the file names and the model files - notifyValueChanged(newVal, vm.files); + notifyFilesSelected(newVal, vm.files); + notifyFilesChanged(vm.files); }); }); } @@ -268,7 +302,14 @@ propertyAlias: "@", value: "<", hideSelection: "<", - onValueChanged: "&", + /** + * Called when a file is selected on this instance + */ + onFilesSelected: "&", + /** + * Called when the file collection changes (i.e. a new file has been selected but maybe it wasn't this instance that caused the change) + */ + onFilesChanged: "&", onInit: "&" }, transclude: true, diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html index e5692e3f89..8f97456c60 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/fileupload/fileupload.html @@ -2,6 +2,6 @@ + on-files-selected="fileChanged(value)"> 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 8816893018..04bfe98284 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 @@ -4,7 +4,8 @@ angular.module('umbraco') var config = angular.copy($scope.model.config); - $scope.fileChanged = onFileChanged; + $scope.filesSelected = onFileSelected; + $scope.filesChanged = onFilesChanged; $scope.fileUploaderInit = onFileUploaderInit; $scope.crop = crop; $scope.done = done; @@ -55,12 +56,21 @@ angular.module('umbraco') } /** - * Called when the file selection value changes + * Called when the a new file is selected * @param {any} value */ - function onFileChanged(value, files) { + function onFileSelected(value, files) { setModelValueWithSrc(value); + //set form to dirty to track changes + $scope.imageCropperForm.$setDirty(); + } + /** + * Called when the file collection changes + * @param {any} value + * @param {any} files + */ + function onFilesChanged(files) { if (files && files[0]) { $scope.imageSrc = files[0].fileSrc; //set form to dirty to track changes 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 dd74dd9e9f..7b4287ba5a 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 @@ -6,7 +6,8 @@