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

Adjust sorting of block grid editor groups to y-axis only (#13225)

Browse Source 
fixes https://github.com/umbraco/Umbraco-CMS/issues/13180
This commit is contained in:
Bjarne Fyrstenborg
2022-11-22 10:57:31 +01:00
committed by nikolajlauridsen
parent 2e54579a2f
commit dc1b10f324
1 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js
View File

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