yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add option to remove/cancel added crops (#10267)

Browse Source 
* Add option to remove/cancel added crops

* Move vm functions to top

* Only show cancel button for empty/new crop
This commit is contained in:
Bjarne Fyrstenborg
2021-05-20 01:00:23 +02:00
committed by GitHub
parent a2c461bcdb
commit 710ecf2537
3 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/prevalue/mediapicker3.crops.controller.js
View File

@@ -22,7 +22,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.MediaPicker3.CropC
crop.editMode = true;
};
$scope.addNewCrop = function (evt) {
$scope.addNewCrop = function (evt) {
evt.preventDefault();
var crop = {};
@@ -30,7 +30,8 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.MediaPicker3.CropC
$scope.model.value.push(crop);
$scope.validate(crop);
}
};
$scope.setChanges = function (crop) {
$scope.validate(crop);
if(
@@ -42,22 +43,31 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.MediaPicker3.CropC
window.dispatchEvent(new Event('resize.umbImageGravity'));
}
};
$scope.isEmpty = function (crop) {
return !crop.label && !crop.alias && !crop.width && !crop.height;
};
$scope.useForAlias = function (crop) {
if (crop.alias == null || crop.alias === "") {
crop.alias = (crop.label || "").toCamelCase();
}
};
$scope.validate = function(crop) {
$scope.validate = function (crop) {
$scope.validateWidth(crop);
$scope.validateHeight(crop);
$scope.validateAlias(crop);
}
};
$scope.validateWidth = function (crop) {
crop.hasWidthError = !(Utilities.isNumber(crop.width) && crop.width > 0);
};
$scope.validateHeight = function (crop) {
crop.hasHeightError = !(Utilities.isNumber(crop.height) && crop.height > 0);
};
$scope.validateAlias = function (crop, $event) {
var exists = $scope.model.value.find( x => crop !== x && crop.alias === x.alias);
if (exists !== undefined || crop.alias === "") {
@@ -67,7 +77,6 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.MediaPicker3.CropC
// everything was good:
crop.hasAliasError = false;
}
};
$scope.confirmChanges = function (crop, event) {
@@ -76,6 +85,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.MediaPicker3.CropC
event.preventDefault();
}
};
$scope.focusNextField = function (event) {
if (event.keyCode == 13) {

4
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/prevalue/mediapicker3.crops.html
View File

@@ -20,7 +20,7 @@
</div>
</div>
</div>
<div ui-sortable="sortableOptions" class="umb-table-body" ng-model="model.value">
<div class="umb-table-body" ui-sortable="sortableOptions" ng-model="model.value">
<div class="umb-table-row" ng-repeat="crop in model.value">
@@ -33,7 +33,6 @@
<button type="button" class="btn-reset umb-outline umb-outline--surrounding" ng-click="remove(crop, $event)"><localize key="general_remove">Remove</localize></button>
</div>
<div ng-if="crop.editMode === true" class="umb-table-cell not-fixed">
<input type="text"
ng-model="crop.label"
@@ -83,6 +82,7 @@
</div>
<div ng-if="crop.editMode === true" class="umb-table-cell">
<button type="button" class="btn-reset umb-outline umb-outline--surrounding" ng-click="setChanges(crop, $event)"><localize key="general_submit">Submit</localize></button>
<button type="button" class="btn-reset umb-outline umb-outline--surrounding" ng-click="remove(crop, $event)" ng-if="isEmpty(crop)"><localize key="general_cancel">Cancel</localize></button>
</div>
</div>

44
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js
View File

@@ -40,8 +40,13 @@
vm.loading = true;
vm.activeMediaEntry = null;
vm.supportCopy = clipboardService.isSupported();
vm.addMediaAt = addMediaAt;
vm.editMedia = editMedia;
vm.removeMedia = removeMedia;
vm.copyMedia = copyMedia;
vm.labels = {};
@@ -121,7 +126,6 @@
}
}
vm.addMediaAt = addMediaAt;
function addMediaAt(createIndex, $event) {
var mediaPicker = {
startNodeId: vm.model.config.startNodeId,
@@ -164,7 +168,7 @@
}
}
if(vm.model.config.filter) {
if (vm.model.config.filter) {
mediaPicker.filter = vm.model.config.filter;
}
@@ -182,6 +186,7 @@
// To be used by infinite editor. (defined here cause we need configuration from property editor)
function changeMediaFor(mediaEntry, onSuccess) {
var mediaPicker = {
startNodeId: vm.model.config.startNodeId,
startNodeIsVirtual: vm.model.config.startNodeIsVirtual,
@@ -199,16 +204,16 @@
mediaEntry.focalPoint = null;
updateMediaEntryData(mediaEntry);
if(onSuccess) {
if (onSuccess) {
onSuccess();
}
},
close: function () {
editorService.close();
}
}
};
if(vm.model.config.filter) {
if (vm.model.config.filter) {
mediaPicker.filter = vm.model.config.filter;
}
@@ -238,26 +243,23 @@
}
});
mediaEntry.crops = newCrops;
}
vm.removeMedia = removeMedia;
function removeMedia(media) {
var index = vm.model.value.indexOf(media);
if(index !== -1) {
if (index !== -1) {
vm.model.value.splice(index, 1);
}
}
function deleteAllMedias() {
vm.model.value = [];
}
vm.activeMediaEntry = null;
function setActiveMedia(mediaEntryOrNull) {
vm.activeMediaEntry = mediaEntryOrNull;
}
vm.editMedia = editMedia;
function editMedia(mediaEntry, options, $event) {
if($event)
@@ -304,13 +306,13 @@
editorService.open(mediaEditorModel);
}
var getDocumentNameAndIcon = function() {
var getDocumentNameAndIcon = function () {
// get node name
var contentNodeName = "?";
var contentNodeIcon = null;
if(vm.umbVariantContent) {
if (vm.umbVariantContent) {
contentNodeName = vm.umbVariantContent.editor.content.name;
if(vm.umbVariantContentEditors) {
if (vm.umbVariantContentEditors) {
contentNodeIcon = vm.umbVariantContentEditors.content.icon.split(" ")[0];
} else if (vm.umbElementEditorContent) {
contentNodeIcon = vm.umbElementEditorContent.model.documentType.icon.split(" ")[0];
@@ -324,9 +326,9 @@
name: contentNodeName,
icon: contentNodeIcon
}
}
};
var requestCopyAllMedias = function() {
var requestCopyAllMedias = function () {
var mediaKeys = vm.model.value.map(x => x.mediaKey)
entityResource.getByIds(mediaKeys, "Media").then(function (entities) {
@@ -338,18 +340,18 @@
var documentInfo = getDocumentNameAndIcon();
localizationService.localize("clipboard_labelForArrayOfItemsFrom", [vm.model.label, documentInfo.name]).then(function(localizedLabel) {
localizationService.localize("clipboard_labelForArrayOfItemsFrom", [vm.model.label, documentInfo.name]).then(function (localizedLabel) {
clipboardService.copyArray(clipboardService.TYPES.MEDIA, aliases, vm.model.value, localizedLabel, documentInfo.icon || "icon-thumbnail-list", vm.model.id);
});
});
}
};
vm.copyMedia = copyMedia;
function copyMedia(mediaEntry) {
entityResource.getById(mediaEntry.mediaKey, "Media").then(function (mediaEntity) {
clipboardService.copy(clipboardService.TYPES.MEDIA, mediaEntity.metaData.ContentTypeAlias, mediaEntry, mediaEntity.name, mediaEntity.icon, mediaEntry.key);
});
}
function requestPasteFromClipboard(createIndex, pasteEntry, pasteType) {
if (pasteEntry === undefined) {
@@ -362,9 +364,7 @@
updateMediaEntryData(pasteEntry);
vm.model.value.splice(createIndex, 0, pasteEntry);
return true;
}
function requestRemoveAllMedia() {
@@ -383,7 +383,6 @@
});
}
vm.sortableOptions = {
cursor: "grabbing",
handle: "umb-media-card",
@@ -397,7 +396,6 @@
}
};
function onAmountOfMediaChanged() {
// enable/disable property actions