From a67163fd03de221b71b71eaf5a79c2f082ca783f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <nsl@umbraco.dk>
Date: Thu, 28 Feb 2019 15:29:28 +0100
Subject: [PATCH] hack for not using scope() in grid redordering

---
 .../propertyeditors/grid/grid.controller.js   | 27 ++++++++++---------
 .../grid/grid.getScopeHack.controller.js      | 25 +++++++++++++++++
 .../src/views/propertyeditors/grid/grid.html  |  3 ++-
 3 files changed, 41 insertions(+), 14 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.getScopeHack.controller.js

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
index b40305f5f5..e5a9711458 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -122,24 +122,25 @@ angular.module("umbraco")
             },
 
             over: function (event, ui) {
-                var area = $(event.target).scope().area;
+                
+                var area = event.target.getScope_HackForSortable().area;
                 var allowedEditors = area.allowed;
-
-                if (($.inArray(ui.item.scope().control.editor.alias, allowedEditors) < 0 && allowedEditors) ||
+                
+                if (($.inArray(ui.item[0].getScope_HackForSortable().control.editor.alias, allowedEditors) < 0 && allowedEditors) ||
                         (startingArea != area && area.maxItems != '' && area.maxItems > 0 && area.maxItems < area.controls.length + 1)) {
 
                     $scope.$apply(function () {
-                        $(event.target).scope().area.dropNotAllowed = true;
+                        event.target.getScope_HackForSortable().area.dropNotAllowed = true;
                     });
 
                     ui.placeholder.hide();
                     cancelMove = true;
                 }
                 else {
-                    if ($(event.target).scope().area.controls.length == 0){
+                    if (event.target.getScope_HackForSortable().area.controls.length == 0){
 
                         $scope.$apply(function () {
-                            $(event.target).scope().area.dropOnEmpty = true;
+                            event.target.getScope_HackForSortable().area.dropOnEmpty = true;
                         });
                         ui.placeholder.hide();
                     } else {
@@ -151,8 +152,9 @@ angular.module("umbraco")
 
             out: function(event, ui) {
                 $scope.$apply(function () {
-                    $(event.target).scope().area.dropNotAllowed = false;
-                    $(event.target).scope().area.dropOnEmpty = false;
+                    var dropArea = event.target.getScope_HackForSortable().area;
+                    dropArea.dropNotAllowed = false;
+                    dropArea.dropOnEmpty = false;
                 });
             },
 
@@ -178,10 +180,9 @@ angular.module("umbraco")
                 currentForm.$setDirty();
             },
 
-            start: function (e, ui) {
-
+            start: function (event, ui) {
                 //Get the starting area for reference
-                var area = $(e.target).scope().area;
+                var area = event.target.getScope_HackForSortable().area;
                 startingArea = area;
 
                 // fade out control when sorting
@@ -207,7 +208,7 @@ angular.module("umbraco")
                 });
             },
 
-            stop: function (e, ui) {
+            stop: function (event, ui) {
 
                 // Fade in control when sorting stops
                 ui.item[0].style.opacity = "1";
@@ -236,7 +237,7 @@ angular.module("umbraco")
 
                 $scope.$apply(function () {
 
-                    var cell = $(e.target).scope().area;
+                    var cell = event.target.getScope_HackForSortable().area;
                     cell.hasActiveChild = hasActiveChild(cell, cell.controls);
                     cell.active = false;
                 });
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.getScopeHack.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.getScopeHack.controller.js
new file mode 100644
index 0000000000..f631b70086
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.getScopeHack.controller.js
@@ -0,0 +1,25 @@
+(function () {
+    "use strict";
+
+    function umbGridHackScope() {
+        
+        function link($scope, $element) {
+            
+            // Since the grid used the el.scope() method, which should only be used by debugging, and only are avilable in debug-mode. I had to make a replica method doig the same:
+            $element[0].getScope_HackForSortable = function() {
+                return $scope;
+            }
+        }
+        
+        var directive = {
+            restrict: "A",
+            link: link
+        };
+
+        return directive;
+
+    }
+    
+    angular.module("umbraco.directives").directive("umbGridHackScope", umbGridHackScope);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index 22e72daff9..7f476755e1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -159,7 +159,7 @@
                                                          </div>
                                                       </div>
 
-                                                      <div class="umb-cell-inner" ui-sortable="sortableOptionsCell" ng-model="area.controls">
+                                                      <div class="umb-cell-inner" ui-sortable="sortableOptionsCell" umb-grid-hack-scope ng-model="area.controls">
 
                                                           <!-- Control placeholder -->
                                                           <div class="umb-cell-placeholder" ng-if="area.controls.length === 0" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
@@ -171,6 +171,7 @@
 
                                                           <!-- for each control in areas -->
                                                           <div class="umb-control"
+                                                              umb-grid-hack-scope
                                                               ng-repeat="control in area.controls"
                                                               ng-click="clickControl($index, area.controls, area)"
                                                               ng-class="{'-active': control.active}"