add check for editorState.getCurrent to find the current editor (relevant in infinite editors), and throw a warning if an editor completely misses the current node context (#13778)

disable drag&drop entirely if the property editor did not get a node through bindings or editorState
This commit is contained in:
Jacob Overgaard
2023-02-03 10:20:23 +01:00
parent 5871fd2097
commit c90a0ecfdc
2 changed files with 25 additions and 14 deletions

View File

@@ -2,13 +2,14 @@
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
<div
<div
class="dropzone"
ngf-drop
ngf-change="vm.handleFiles($files, $invalidFiles)"
ngf-drag-over-class="'drag-over'"
ngf-multiple="{{vm.model.config.multiple}}"
ngf-allow-dir="{{ vm.allowDir }}"
ngf-drop-disabled="{{!vm.allowDropMedia}}"
ng-disabled="vm.readonly">
<div class="drop-overlay">
@@ -44,7 +45,7 @@
</div>
</div>
<img
<img
ng-if="media.$dataURL"
ng-src="{{media.$dataURL}}"
title="{{media.name}}"
@@ -56,22 +57,22 @@
text="{{media.name}}"
extension="{{media.$extension}}">
</umb-file-icon>
<button
type="button"
class="btn-reset __info"
ng-click="vm.editMedia(media, $index, $event)"
<button
type="button"
class="btn-reset __info"
ng-click="vm.editMedia(media, $index, $event)"
ng-disabled="media.$uploadProgress < 100">
<div class="__name" ng-bind="media.name"></div>
</button>
<div class="__actions">
<button
ng-if="vm.allowRemoveMedia"
type="button" class="btn-reset __action umb-outline"
localize="title"
title="general_remove"
ng-click="vm.removeMedia(media); $event.stopPropagation();"
<button
ng-if="vm.allowRemoveMedia"
type="button" class="btn-reset __action umb-outline"
localize="title"
title="general_remove"
ng-click="vm.removeMedia(media); $event.stopPropagation();"
ng-disabled="media.$uploadProgress < 100">
<umb-icon icon="icon-trash" class="icon"></umb-icon>
</button>

View File

@@ -29,7 +29,7 @@
}
});
function MediaPicker3Controller($scope, editorService, clipboardService, localizationService, overlayService, userService, entityResource, $attrs, umbRequestHelper, $injector, uploadTracker) {
function MediaPicker3Controller($scope, $element, editorService, clipboardService, localizationService, overlayService, userService, entityResource, $attrs, umbRequestHelper, $injector, uploadTracker, editorState) {
const mediaUploader = $injector.instantiate(Utilities.MediaUploader);
let uploadInProgress = false;
@@ -50,6 +50,7 @@
vm.allowAddMedia = true;
vm.allowRemoveMedia = true;
vm.allowEditMedia = true;
vm.allowDropMedia = true;
vm.handleFiles = handleFiles;
@@ -74,11 +75,20 @@
vm.allowAddMedia = !vm.readonly;
vm.allowRemoveMedia = !vm.readonly;
vm.allowEditMedia = !vm.readonly;
vm.allowDropMedia = !vm.readonly;
vm.sortableOptions.disabled = vm.readonly;
});
vm.$onInit = function() {
vm.node = vm.node || editorState.getCurrent();
// If we do not have a node on the scope, then disallow drop media
if (!vm.node?.key) {
console.warn('An Umbraco.MediaPicker3 did not detect a valid content node and disabled drag & drop.', $element[0]);
vm.allowDropMedia = false;
}
vm.validationLimit = vm.model.config.validationLimit || {};
// If single-mode we only allow 1 item as the maximum:
if(vm.model.config.multiple === false) {