From dc1b10f324635b34a7f52229d52fcd69ddf0a91c Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Tue, 22 Nov 2022 10:57:31 +0100 Subject: [PATCH] Adjust sorting of block grid editor groups to y-axis only (#13225) fixes https://github.com/umbraco/Umbraco-CMS/issues/13180 --- ...blockgrid.blockconfiguration.controller.js | 76 ++++++++++--------- 1 file changed, 40 insertions(+), 36 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js index 993088e2eb..85c31dfc6b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js @@ -38,12 +38,12 @@ "groupKey": null }; - function BlockConfigurationController($scope, $element, $http, elementTypeResource, overlayService, localizationService, editorService, eventsService, udiService, dataTypeResource, umbRequestHelper) { var unsubscribe = []; - var vm = this; + const vm = this; + vm.openBlock = null; vm.showSampleDataCTA = false; @@ -57,6 +57,7 @@ if (blockGroupModel.value == null) { blockGroupModel.value = []; } + vm.blockGroups = blockGroupModel.value; if (!$scope.model.value) { @@ -72,12 +73,10 @@ }); loadElementTypes(); - } - function loadElementTypes() { - return elementTypeResource.getAll().then(function (elementTypes) { + return elementTypeResource.getAll().then(elementTypes => { vm.elementTypes = elementTypes; }); } @@ -90,13 +89,14 @@ } } } + unsubscribe.push(eventsService.on("editors.documentType.saved", updateUsedElementTypes)); function removeReferencesToElementTypeKey(contentElementTypeKey) { // Clean up references to this one: $scope.model.value.forEach(blockType => { blockType.areas.forEach(area => { - area.specifiedAllowance = area.specifiedAllowance?.filter(allowance => + area.specifiedAllowance = area.specifiedAllowance?.filter(allowance => allowance.elementTypeKey !== contentElementTypeKey ) || []; }); @@ -107,7 +107,7 @@ // Clean up references to this one: $scope.model.value.forEach(blockType => { blockType.areas.forEach(area => { - area.specifiedAllowance = area.specifiedAllowance?.filter(allowance => + area.specifiedAllowance = area.specifiedAllowance?.filter(allowance => allowance.groupKey !== groupKey ) || []; }); @@ -134,27 +134,29 @@ vm.removeBlockByIndex = function (index) { const blockType = $scope.model.value[index]; - if(blockType) { + if (blockType) { $scope.model.value.splice(index, 1); removeReferencesToElementTypeKey(blockType.contentElementTypeKey); } }; const defaultOptions = { - axis: '', tolerance: "pointer", opacity: 0.7, scroll: true }; + vm.groupSortableOptions = { - ...defaultOptions, + ...defaultOptions, + axis: 'y', handle: '.__handle', items: ".umb-block-card-group", cursor: "grabbing", placeholder: 'umb-block-card-group --sortable-placeholder' }; + vm.blockSortableOptions = { - ...defaultOptions, + ...defaultOptions, "ui-floating": true, connectWith: ".umb-block-card-grid", items: "umb-block-card", @@ -170,7 +172,6 @@ } }; - vm.getAvailableElementTypes = function () { return vm.elementTypes.filter(function (type) { return !$scope.model.value.find(function (entry) { @@ -201,18 +202,18 @@ if (node.metaData.isElement === true) { var key = udiService.getKey(node.udi); // If a Block with this ElementType as content already exists, we will emit it as a possible option. - return $scope.model.value.find(function (entry) { + return $scope.model.value.find(function(entry) { return key === entry.contentElementTypeKey; }); } return true; }, filterCssClass: "not-allowed", - select: function (node) { + select: function(node) { vm.addBlockFromElementTypeKey(udiService.getKey(node.udi), groupKey); editorService.close(); }, - close: function () { + close: function() { editorService.close(); }, extraActions: [ @@ -241,13 +242,13 @@ infiniteMode: true, noTemplate: true, isElement: true, - submit: function (model) { - loadElementTypes().then( function () { + submit: function(model) { + loadElementTypes().then(function() { callback(model.documentTypeKey); }); editorService.close(); }, - close: function () { + close: function() { editorService.close(); } }; @@ -261,24 +262,19 @@ $scope.model.value.push(blockType); vm.openBlockOverlay(blockType); - }; - - - - vm.openBlockOverlay = function (block, openAreas) { var elementType = vm.getElementTypeByKey(block.contentElementTypeKey); - if(elementType) { + if (elementType) { localizationService.localize("blockEditor_blockConfigurationOverlayTitle", [elementType.name]).then(function (data) { var clonedBlockData = Utilities.copy(block); vm.openBlock = block; - var overlayModel = { + const overlayModel = { block: clonedBlockData, allBlockTypes: $scope.model.value, allBlockGroups: vm.blockGroups, @@ -291,7 +287,7 @@ submit: function(overlayModel) { loadElementTypes()// lets load elementType again, to ensure we are up to date. TransferProperties(overlayModel.block, block);// transfer properties back to block object. (Doing this cause we dont know if block object is added to model jet, therefor we cant use index or replace the object.) - + overlayModel.close(); }, close: function() { @@ -305,14 +301,24 @@ }); } else { - alert("Cannot be edited cause ElementType does not exist."); + + const overlay = { + close: () => { + overlayService.close() + } + }; + + localizationService.localize("blockEditor_elementTypeDoesNotExist").then(data => { + overlay.content = data; + overlayService.open(overlay); + }); } }; vm.requestRemoveGroup = function(blockGroup) { - if(blockGroup.key) { + if (blockGroup.key) { localizationService.localizeMany(["general_delete", "blockEditor_confirmDeleteBlockGroupMessage", "blockEditor_confirmDeleteBlockGroupNotice"]).then(function (data) { overlayService.confirmDelete({ title: data[0], @@ -331,7 +337,7 @@ return false; } else { - return true; + return true; } } ); @@ -354,10 +360,8 @@ } } - - dataTypeResource.getAll().then(function(dataTypes) { - if(dataTypes.filter(x => x.alias === "Umbraco.BlockGrid").length === 0) { + if (dataTypes.filter(x => x.alias === "Umbraco.BlockGrid").length === 0) { vm.showSampleDataCTA = true; } }); @@ -378,7 +382,7 @@ }; vm.blockGroups.push(sampleGroup); } - + function initSampleBlock(udi, groupKey, options) { const key = udiService.getKey(udi); if ($scope.model.value.find(X => X.contentElementTypeKey === key) === undefined) { @@ -386,7 +390,7 @@ $scope.model.value.push(blockType); } } - + initSampleBlock(data.umbBlockGridDemoHeadlineBlock, sampleGroup.key, {"label": "Headline ({{headline | truncate:true:36}})", "view": "~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoHeadlineBlock.html"}); initSampleBlock(data.umbBlockGridDemoImageBlock, sampleGroup.key, {"label": "Image", "view": "~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoImageBlock.html"}); initSampleBlock(data.umbBlockGridDemoRichTextBlock, sampleGroup.key, { "label": "Rich Text ({{richText | ncRichText | truncate:true:36}})", "view": "~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoRichTextBlock.html"}); @@ -411,10 +415,10 @@ } ]; initSampleBlock(data.umbBlockGridDemoTwoColumnLayoutBlock, sampleGroup.key, {"label": "Two Column Layout", "view": "~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoTwoColumnLayoutBlock.html", "allowInAreas": false, "areas": twoColumnLayoutAreas}); - + vm.showSampleDataCTA = false; }); - + }); }