From d9dced55c4ed86ef979b34277534fd48f852013b Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Thu, 8 Jun 2023 11:31:16 +0200 Subject: [PATCH] Disable sortable if readonly or max is limited to one item (#14252) * Disable sortable if readonly or max is set limited to one item * Disable sortable on single URL picker * Don't disable block list sorting based on validation limit, but do for single block mode * Disable sorting in media picker 3 in single mode * Remove extra whitespace * Disable draggable * Tweaked wording of "item(s)" --------- Co-authored-by: Sebastiaan Janssen Co-authored-by: Emma Garland --- .../EmbeddedResources/Lang/en.xml | 2 +- .../EmbeddedResources/Lang/en_us.xml | 2 +- .../components/mediacard/umb-media-card.html | 5 +- .../umbBlockListPropertyEditor.component.js | 58 +++++++++++-------- .../contentpicker/contentpicker.controller.js | 29 +++++----- .../contentpicker/contentpicker.html | 12 ++-- .../umb-media-picker3-property-editor.html | 5 +- ...umbMediaPicker3PropertyEditor.component.js | 42 +++++++------- .../multiurlpicker.controller.js | 18 ++++-- .../multiurlpicker/multiurlpicker.html | 5 +- 10 files changed, 97 insertions(+), 81 deletions(-) diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml index 3b8b70c360..56ef69985b 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/en.xml @@ -2275,7 +2275,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont items URL(s) URL(s) selected - items selected + item(s) selected Invalid date Not a number Not a valid numeric step size diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml index 9136f09c5e..0ee6e48050 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml @@ -2371,7 +2371,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont items URL(s) URL(s) selected - items selected + item(s) selected Invalid date Not a number Not a valid numeric step size diff --git a/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.html b/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.html index e54cc3e898..a4aa220eb5 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/mediacard/umb-media-card.html @@ -12,13 +12,14 @@ Not allowed

- + {{vm.media.name}} + alt="{{vm.media.name}}" + draggable="false" /> { vm.readonly = value !== undefined; - vm.sortableOptions.disabled = vm.readonly; + vm.sortableOptions.disabled = vm.readonly || vm.singleBlockMode; vm.blockEditorApi.readonly = vm.readonly; if (deleteAllBlocksAction) { @@ -107,11 +107,13 @@ inlineEditing = vm.model.config.useInlineEditingAsDefault; liveEditing = vm.model.config.useLiveEditing; + vm.singleBlockMode = vm.model.config.validationLimit.min == 1 && vm.model.config.validationLimit.max == 1 && vm.model.config.blocks.length == 1 && vm.model.config.useSingleBlockMode; + vm.blockEditorApi.singleBlockMode = vm.singleBlockMode; vm.validationLimit = vm.model.config.validationLimit; @@ -123,16 +125,32 @@ } // We need to ensure that the property model value is an object, this is needed for modelObject to recive a reference and keep that updated. - if(typeof vm.model.value !== 'object' || vm.model.value === null) {// testing if we have null or undefined value or if the value is set to another type than Object. + if (typeof vm.model.value !== 'object' || vm.model.value === null) {// testing if we have null or undefined value or if the value is set to another type than Object. vm.model.value = {}; } var scopeOfExistence = $scope; - if(vm.umbVariantContentEditors && vm.umbVariantContentEditors.getScope) { + if (vm.umbVariantContentEditors && vm.umbVariantContentEditors.getScope) { scopeOfExistence = vm.umbVariantContentEditors.getScope(); } else if(vm.umbElementEditorContent && vm.umbElementEditorContent.getScope) { scopeOfExistence = vm.umbElementEditorContent.getScope(); } + + vm.sortableOptions = { + axis: "y", + containment: "parent", + cursor: "grabbing", + handle: ".blockelement__draggable-element", + cancel: "input,textarea,select,option", + classes: ".blockelement--dragging", + distance: 5, + tolerance: "pointer", + scroll: true, + disabled: vm.readonly || vm.singleBlockMode, + update: function (ev, ui) { + setDirty(); + } + }; copyAllBlocksAction = { labelKey: "clipboard_labelForCopyAllEntries", @@ -167,9 +185,9 @@ if (vm.umbProperty) { if (vm.singleBlockMode) { - vm.umbProperty.setPropertyActions(propertyActionsForSingleBlockMode); + vm.umbProperty.setPropertyActions(propertyActionsForSingleBlockMode); } else { - vm.umbProperty.setPropertyActions(propertyActions); + vm.umbProperty.setPropertyActions(propertyActions); } } @@ -519,6 +537,7 @@ } vm.requestShowCreate = requestShowCreate; + function requestShowCreate(createIndex, mouseEvent) { if (vm.blockTypePicker) { @@ -539,12 +558,15 @@ } } + vm.requestShowClipboard = requestShowClipboard; + function requestShowClipboard(createIndex) { showCreateDialog(createIndex, true); } vm.showCreateDialog = showCreateDialog; + function showCreateDialog(createIndex, openClipboard) { if (vm.blockTypePicker) { @@ -616,6 +638,7 @@ editorService.open(blockPickerModel); }; + function userFlowWhenBlockWasCreated(createIndex) { if (vm.layout.length > createIndex) { var blockObject = vm.layout[createIndex].$block; @@ -676,7 +699,7 @@ return b.date - a.date }); - if(firstTime !== true && vm.clipboardItems.length > oldAmount) { + if (firstTime !== true && vm.clipboardItems.length > oldAmount) { jumpClipboard(); } @@ -686,7 +709,7 @@ var jumpClipboardTimeout; function jumpClipboard() { - if(jumpClipboardTimeout) { + if (jumpClipboardTimeout) { return; } @@ -745,8 +768,8 @@ if (vm.singleBlockMode) { if (vm.layout.length > 0) { - deleteBlock(vm.layout[0].$block); - index = 1; + deleteBlock(vm.layout[0].$block); + index = 1; } } @@ -835,28 +858,13 @@ singleBlockMode: vm.singleBlockMode }; - vm.sortableOptions = { - axis: "y", - containment: "parent", - cursor: "grabbing", - handle: ".blockelement__draggable-element", - cancel: "input,textarea,select,option", - classes: ".blockelement--dragging", - distance: 5, - tolerance: "pointer", - scroll: true, - disabled: vm.readonly, - update: function (ev, ui) { - setDirty(); - } - }; - function onAmountOfBlocksChanged() { // enable/disable property actions if (copyAllBlocksAction) { copyAllBlocksAction.isDisabled = vm.layout.length === 0; } + if (deleteAllBlocksAction) { deleteAllBlocksAction.isDisabled = vm.layout.length === 0 || vm.readonly; } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js index 52f147bce0..4deb10d0de 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js @@ -103,20 +103,6 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso } }; - // sortable options - $scope.sortableOptions = { - axis: "y", - containment: "parent", - distance: 10, - opacity: 0.7, - tolerance: "pointer", - scroll: true, - zIndex: 6000, - update: function (e, ui) { - setDirty(); - } - }; - let removeAllEntriesAction = { labelKey: "clipboard_labelForRemoveAllEntries", labelTokens: [], @@ -153,6 +139,21 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso $scope.maxNumberOfItems = $scope.model.config.maxNumber ? parseInt($scope.model.config.maxNumber) : 0; } + // sortable options + $scope.sortableOptions = { + axis: "y", + containment: "parent", + distance: 10, + opacity: 0.7, + tolerance: "pointer", + scroll: true, + zIndex: 6000, + disabled: $scope.readonly || $scope.maxNumberOfItems === 1, + update: function (e, ui) { + setDirty(); + } + }; + //Umbraco persists boolean for prevalues as "0" or "1" so we need to convert that! $scope.model.config.multiPicker = Object.toBoolean($scope.model.config.multiPicker); $scope.model.config.showOpenButton = Object.toBoolean($scope.model.config.showOpenButton); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html index 6c2f8ba58a..9e8561cc57 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html @@ -34,9 +34,9 @@ - Add between {{minNumberOfItems}} and {{maxNumberOfItems}} items + Add between {{minNumberOfItems}} and {{maxNumberOfItems}} item(s) - You can only have {{maxNumberOfItems}} items selected + You can only have {{maxNumberOfItems}} item(s) selected @@ -44,7 +44,7 @@ Add {{minNumberOfItems - renderModel.length}} item(s) - You can only have {{maxNumberOfItems}} items selected + You can only have {{maxNumberOfItems}} item(s) selected @@ -52,7 +52,7 @@ Add up to {{maxNumberOfItems}} items - You can only have {{maxNumberOfItems}} items selected + You can only have {{maxNumberOfItems}} item(s) selected @@ -71,12 +71,12 @@
- You need to add at least {{minNumberOfItems}} items + You need to add at least {{minNumberOfItems}} item(s)
- You can only have {{maxNumberOfItems}} items selected + You can only have {{maxNumberOfItems}} item(s) selected
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html index a5757860c9..d5cad18630 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umb-media-picker3-property-editor.html @@ -38,7 +38,7 @@
-
+
Waiting...
{{media.$uploadProgress}}%
@@ -49,7 +49,8 @@ ng-if="media.$dataURL" ng-src="{{media.$dataURL}}" title="{{media.name}}" - alt="{{media.name}}" /> + alt="{{media.name}}" + draggable="false" /> { + mediaPicker.clipboardItems.sort((a, b) => { return b.date - a.date }); @@ -392,7 +406,7 @@ // make a clone to avoid editing model directly. var mediaEntryClone = Utilities.copy(mediaEntry); - var mediaEditorModel = { + const mediaEditorModel = { $parentScope: $scope, // pass in a $parentScope, this maintains the scope inheritance in infinite editing $parentForm: vm.propertyForm, // pass in a $parentForm, this maintains the FormController hierarchy with the infinite editing view (if it contains a form) createFlow: options.createFlow === true, @@ -502,20 +516,6 @@ }); } - vm.sortableOptions = { - cursor: "grabbing", - handle: "umb-media-card, .umb-media-card", - cancel: "input,textarea,select,option", - classes: ".umb-media-card--dragging", - distance: 5, - tolerance: "pointer", - scroll: true, - disabled: vm.readonly, - update: function (ev, ui) { - setDirty(); - } - }; - function onAmountOfMediaChanged() { // enable/disable property actions diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.controller.js index 09facf96b5..6f201eaf3f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.controller.js @@ -21,12 +21,18 @@ function multiUrlPickerController($scope, localizationService, entityResource, i $scope.renderModel = []; - if ($scope.model.config && parseInt($scope.model.config.maxNumber) !== 1 && $scope.umbProperty) { - var propertyActions = [ - removeAllEntriesAction - ]; + if ($scope.model.config) { - $scope.umbProperty.setPropertyActions(propertyActions); + $scope.minNumberOfItems = $scope.model.config.minNumber ? parseInt($scope.model.config.minNumber) : 0; + $scope.maxNumberOfItems = $scope.model.config.maxNumber ? parseInt($scope.model.config.maxNumber) : 0; + + if ($scope.umbProperty && $scope.maxNumberOfItems !== 1) { + let propertyActions = [ + removeAllEntriesAction + ]; + + $scope.umbProperty.setPropertyActions(propertyActions); + } } if (!Array.isArray($scope.model.value)) { @@ -41,7 +47,7 @@ function multiUrlPickerController($scope, localizationService, entityResource, i tolerance: "pointer", scroll: true, zIndex: 6000, - disabled: $scope.readonly, + disabled: $scope.readonly || $scope.maxNumberOfItems === 1, update: function () { setDirty(); } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.html index 60593b071d..cb0fcc7d9c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/multiurlpicker/multiurlpicker.html @@ -1,4 +1,4 @@ -
+

You have picked a content item currently deleted or in the recycle bin

You have picked content items currently deleted or in the recycle bin

@@ -29,12 +29,11 @@
- Add between {{model.config.minNumber}} and {{model.config.maxNumber}} items - You can only have {{model.config.maxNumber}} items selected + You can only have {{model.config.maxNumber}} item(s) selected