Merge pull request #70 from kevin9092/v1/dev

Fix re-sizable BlockGridItems
rickbutterfield · Oct 1, 2024 · cb00ba2 · cb00ba2
2 parents c7c1e64 + ff8ed7e
commit cb00ba2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 6 deletions.
diff --git a/src/Umbraco.Community.BlockPreview/Services/BlockPreviewService.cs b/src/Umbraco.Community.BlockPreview/Services/BlockPreviewService.cs
@@ -105,16 +105,34 @@ public async Task<string> RenderGridBlock(
             if (blockInstance == null)
                 return string.Empty;
 
-            string? layoutItemJson = blockData?.Layout?.FirstOrDefault().Value.FirstOrDefault()!.ToString();
+            List<string>? layoutItems = blockData?.Layout?.FirstOrDefault().Value.Select(layout => layout.ToString()).ToList();
             BlockGridLayoutItem? layoutItem = null;
 
-            if (!string.IsNullOrEmpty(layoutItemJson))
+            if (layoutItems != null)
             {
-                layoutItem = JsonConvert.DeserializeObject<BlockGridLayoutItem>(layoutItemJson);
-                if (layoutItem != null)
+                foreach (var layoutItemJson in layoutItems)
                 {
-                    blockInstance.RowSpan = layoutItem.RowSpan!.Value;
-                    blockInstance.ColumnSpan = layoutItem.ColumnSpan!.Value;
+                    layoutItem = JsonConvert.DeserializeObject<BlockGridLayoutItem>(layoutItemJson);
+                    if (layoutItem == null) continue;
+
+                    if (layoutItem.ContentUdi == blockInstance.ContentUdi)
+                    {
+                        blockInstance.RowSpan = layoutItem.RowSpan!.Value;
+                        blockInstance.ColumnSpan = layoutItem.ColumnSpan!.Value;
+                    }
+                    else
+                    {
+                        foreach (var area in layoutItem.Areas)
+                        {
+                            foreach (var item in area.Items)
+                            {
+                                if (item.ContentUdi != blockInstance.ContentUdi) continue;
+                                blockInstance.RowSpan = item.RowSpan!.Value;
+                                blockInstance.ColumnSpan = item.ColumnSpan!.Value;
+                                break;
+                            }
+                        }
+                    }
                 }
             }
 

diff --git a/...oot/App_Plugins/Umbraco.Community.BlockPreview/js/controllers/block-preview.controller.js b/...oot/App_Plugins/Umbraco.Community.BlockPreview/js/controllers/block-preview.controller.js
@@ -132,6 +132,26 @@
 
             var timeoutPromise;
 
+            $scope.$watch('block.layout.columnSpan', function (newValue, oldValue) {
+                if (newValue !== oldValue) {
+                    $timeout.cancel(timeoutPromise);
+
+                    timeoutPromise = $timeout(function () {   //Set timeout
+                        loadPreview(newValue, null);
+                    }, 500);
+                }
+            }, true);
+
+            $scope.$watch('block.layout.rowSpan', function (newValue, oldValue) {
+                if (newValue !== oldValue) {
+                    $timeout.cancel(timeoutPromise);
+
+                    timeoutPromise = $timeout(function () {   //Set timeout
+                        loadPreview(newValue, null);
+                    }, 500);
+                }
+            }, true);
+
             $scope.$watch('block.data', function (newValue, oldValue) {
                 if (newValue !== oldValue) {
                     $timeout.cancel(timeoutPromise);