Gets new images syncing between instances on image cropper

This commit is contained in:
Shannon
2018-08-10 14:48:58 +10:00
parent 2d1bda54be
commit d608daa87b
5 changed files with 77 additions and 23 deletions

View File

@@ -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();
}

View File

@@ -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,

View File

@@ -2,6 +2,6 @@
<umb-property-file-upload culture="{{model.culture}}"
property-alias="{{model.alias}}"
value="model.value"
on-value-changed="fileChanged(value)">
on-files-selected="fileChanged(value)">
</umb-property-file-upload>
</div>

View File

@@ -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

View File

@@ -6,7 +6,8 @@
<umb-property-file-upload culture="{{model.culture}}"
property-alias="{{model.alias}}"
value="model.value.src"
on-value-changed="fileChanged(value, files)"
on-files-selected="filesSelected(value, files)"
on-files-changed="filesChanged(files)"
on-init="fileUploaderInit(value, files)"
hide-selection="true">