From cae505bf7f045ae546ae357ea5a734b70bc44223 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Fri, 7 Jul 2023 00:44:11 +0200
Subject: [PATCH] Make it possible to remove blocks using tab key in block grid
 configuration

---
 ...blockgrid.blockconfiguration.controller.js | 29 ++++++++++++-------
 .../blockgrid.blockconfiguration.html         | 20 +++++++------
 ...blocklist.blockconfiguration.controller.js | 12 ++++----
 3 files changed, 36 insertions(+), 25 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 85c31dfc6bdc..ade5e9829a93 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
@@ -114,22 +114,29 @@
             });
         }
 
-        vm.requestRemoveBlockByIndex = function (index) {
-            localizationService.localizeMany(["general_delete", "blockEditor_confirmDeleteBlockTypeMessage", "blockEditor_confirmDeleteBlockTypeNotice"]).then(function (data) {
+        vm.requestRemoveBlockByIndex = function (index, event) {
+
+            const labelKeys = [
+              "general_delete",
+              "blockEditor_confirmDeleteBlockTypeMessage",
+              "blockEditor_confirmDeleteBlockTypeNotice"
+            ];
+
+            localizationService.localizeMany(labelKeys).then(data => {
                 var contentElementType = vm.getElementTypeByKey($scope.model.value[index].contentElementTypeKey);
                 overlayService.confirmDelete({
                     title: data[0],
                     content: localizationService.tokenReplace(data[1], [contentElementType ? contentElementType.name : "(Unavailable ElementType)"]),
                     confirmMessage: data[2],
-                    close: function () {
-                        overlayService.close();
-                    },
-                    submit: function () {
+                    submit: () => {
                         vm.removeBlockByIndex(index);
                         overlayService.close();
-                    }
+                    },
+                    close: overlayService.close()
                 });
             });
+
+            event.stopPropagation();
         }
 
         vm.removeBlockByIndex = function (index) {
@@ -164,7 +171,7 @@
             placeholder: '--sortable-placeholder',
             forcePlaceHolderSize: true,
             stop: function(e, ui) {
-                if(ui.item.sortable.droptarget && ui.item.sortable.droptarget.length > 0) {
+                if (ui.item.sortable.droptarget && ui.item.sortable.droptarget.length > 0) {
                     // We do not want sortable to actually move the data, as we are using the same ng-model. Instead we just change the groupKey and cancel the transfering.
                     ui.item.sortable.model.groupKey = ui.item.sortable.droptarget[0].dataset.groupKey || null;
                     ui.item.sortable.cancel();
@@ -346,7 +353,7 @@
 
                             // Then remove group:
                             const groupIndex = vm.blockGroups.indexOf(blockGroup);
-                            if(groupIndex !== -1) {
+                            if (groupIndex !== -1) {
                                 vm.blockGroups.splice(groupIndex, 1);
                                 removeReferencesToGroupKey(blockGroup.key);
                             }
@@ -375,7 +382,7 @@
 
                         const groupName = "Demo Blocks";
                         var sampleGroup =  vm.blockGroups.find(x => x.name === groupName);
-                        if(!sampleGroup) {
+                        if (!sampleGroup) {
                             sampleGroup = {
                                 key: String.CreateGuid(),
                                 name: groupName
@@ -394,6 +401,7 @@
                         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"});
+
                         const twoColumnLayoutAreas = [
                             {
                                 'key': String.CreateGuid(),
@@ -414,6 +422,7 @@
                                 'specifiedAllowance': []
                             }
                         ];
+                        
                         initSampleBlock(data.umbBlockGridDemoTwoColumnLayoutBlock, sampleGroup.key, {"label": "Two Column Layout", "view": "~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoTwoColumnLayoutBlock.html", "allowInAreas": false, "areas": twoColumnLayoutAreas});
 
                         vm.showSampleDataCTA = false;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.html
index e78d94d4863d..a30ef4e8dbdb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.html
@@ -19,12 +19,12 @@ <h3><localize key="blockEditor_getSampleHeadline">Install Sample Configuration</
                 ng-class="{'--isOpen':vm.openBlock === block}"
                 ng-click="vm.openBlockOverlay(block)"
                 data-content-element-type-key="{{block.contentElementTypeKey}}">
-                <div class="__actions">
-                    <button ng-if="block.areas.length > 0" type="button" class="btn-reset __action umb-outline" ng-click="vm.openBlockOverlay(block, true); $event.stopPropagation();">
+                <div class="__actions" ng-click="$event.stopPropagation()" tabindex="-1">
+                    <button type="button" ng-if="block.areas.length > 0" class="btn-reset __action umb-outline" ng-click="vm.openBlockOverlay(block, true); $event.stopPropagation();">
                         <umb-icon icon="icon-layout" class="icon"></umb-icon>
                         <localize key="blockEditor_tabAreas" class="sr-only">Areas</localize>
                     </button>
-                    <button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index); $event.stopPropagation();">
+                    <button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index, $event)">
                         <umb-icon icon="icon-trash" class="icon"></umb-icon>
                         <localize key="general_delete" class="sr-only">Delete</localize>
                     </button>
@@ -46,11 +46,13 @@ <h3><localize key="blockEditor_getSampleHeadline">Install Sample Configuration</
     <div ui-sortable="vm.groupSortableOptions" ng-model="vm.blockGroups">
         <div class="umb-block-card-group" ng-repeat="blockGroup in vm.blockGroups track by blockGroup.key">
 
-
             <div class="__controls">
-                <div class="__handle"><umb-icon icon="icon-navigation"></umb-icon></div>
                 
-                <input class="__title" title="group name" type="text" ng-model="blockGroup.name"/>
+                <div class="__handle">
+                  <umb-icon icon="icon-navigation"></umb-icon>
+                </div>
+                
+                <input type="text" class="__title" title="group name" ng-model="blockGroup.name" />
 
                 <button 
                     type="button" 
@@ -76,12 +78,12 @@ <h3><localize key="blockEditor_getSampleHeadline">Install Sample Configuration</
                     ng-class="{'--isOpen':vm.openBlock === block}"
                     ng-click="vm.openBlockOverlay(block)"
                     data-content-element-type-key="{{block.contentElementTypeKey}}">
-                    <div class="__actions">
-                        <button ng-if="block.areas.length > 0" type="button" class="btn-reset __action umb-outline" ng-click="vm.openBlockOverlay(block, true); $event.stopPropagation();">
+                    <div class="__actions" ng-click="$event.stopPropagation()" tabindex="-1">
+                        <button type="button" ng-if="block.areas.length > 0" class="btn-reset __action umb-outline" ng-click="vm.openBlockOverlay(block, true); $event.stopPropagation();">
                             <umb-icon icon="icon-layout" class="icon"></umb-icon>
                             <localize key="blockEditor_tabAreas" class="sr-only">Areas</localize>
                         </button>
-                        <button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index); $event.stopPropagation();">
+                        <button type="button" class="btn-reset __action umb-outline" ng-click="vm.requestRemoveBlockByIndex($index, $event)">
                             <umb-icon icon="icon-trash" class="icon"></umb-icon>
                             <localize key="general_delete" class="sr-only">Delete</localize>
                         </button>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
index 93d439812556..63ab76b553b2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
@@ -51,13 +51,13 @@
 
         vm.requestRemoveBlockByIndex = function (index, event) {
 
-          const labelKeys = [
-            "general_delete",
-            "blockEditor_confirmDeleteBlockTypeMessage",
-            "blockEditor_confirmDeleteBlockTypeNotice"
-          ];
+            const labelKeys = [
+              "general_delete",
+              "blockEditor_confirmDeleteBlockTypeMessage",
+              "blockEditor_confirmDeleteBlockTypeNotice"
+            ];
 
-          localizationService.localizeMany(labelKeys).then(data => {
+            localizationService.localizeMany(labelKeys).then(data => {
                 var contentElementType = vm.getElementTypeByKey($scope.model.value[index].contentElementTypeKey);
                 overlayService.confirmDelete({
                     title: data[0],