From c04fee2ababc37411c8a16d8ff800c0c7e72be53 Mon Sep 17 00:00:00 2001
From: antoine <antoine@lecoati.com>
Date: Wed, 3 Sep 2014 17:26:18 +0200
Subject: [PATCH] Grid controls sortable first approach

---
 .../propertyeditors/grid/grid.controller.js   | 46 +++++++++++++----
 .../src/views/propertyeditors/grid/grid.html  | 50 +++++++++++--------
 2 files changed, 64 insertions(+), 32 deletions(-)

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 8bc728fc8d..827dfbc99d 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
@@ -2,15 +2,15 @@ angular.module("umbraco")
     .controller("Umbraco.PropertyEditors.GridController",
     function ($scope, $http, assetsService, $rootScope, dialogService, gridService, mediaResource, imageHelper, $timeout) {
 
-        // Grid status variables 
+        // Grid status variables   
         $scope.currentRow = null;
-        $scope.currentCell = null;
+        $scope.currentCell = null; 
         $scope.currentToolsControl = null;
         $scope.currentControl = null;
-        $scope.openRTEToolbarId = null;
+        $scope.openRTEToolbarId = null;   
 
         
-        // *********************************************
+        // *********************************************   
         // Sortable options
         // *********************************************
 
@@ -32,6 +32,25 @@ angular.module("umbraco")
             }
         };
 
+        $scope.sortableOptionsCell = {
+            distance: 10,
+            cursor: "move",
+            placeholder: "ui-sortable-placeholder",
+            handle: '.cell-tools-move',
+            connectWith: ".usky-cell",
+            start: function (e, ui) {
+                ui.item.find('.mceNoEditor').each(function () {
+                    tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id'));
+
+                });
+            },
+            stop: function (e, ui) {
+                ui.item.find('.mceNoEditor').each(function () {
+                    tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id'));
+                });
+            }
+        };
+
         // *********************************************
         // Template management functions
         // *********************************************
@@ -58,6 +77,13 @@ angular.module("umbraco")
             $scope.currentRow = null;
         };
 
+        $scope.setCurrentMovedRow = function (Row) {
+            $scope.currentMovedRow = Row;
+        };
+
+        $scope.disableCurrentMovedRow = function (Row) {
+            $scope.currentMovedRow = null;
+        };
         
         $scope.getAllowedLayouts = function(column){
             var layouts = $scope.model.config.items.layouts;
@@ -71,8 +97,6 @@ angular.module("umbraco")
             } 
         };
 
-      
-
         $scope.addRow = function (section, layout) {
             //copy the selected layout into the rows collection
             var row = angular.copy(layout);
@@ -92,7 +116,7 @@ angular.module("umbraco")
             }
         };
 
-
+         
         // *********************************************
         // Cell management functions
         // *********************************************
@@ -144,12 +168,12 @@ angular.module("umbraco")
             $scope.currentRemoveControl = null;
         };
 
-        $scope.setCurrentMoveControl = function (Control) {
-            $scope.currentMoveControl = Control;
+        $scope.setCurrentMovedControl = function (Control) {
+            $scope.currentMovedControl = Control;
         };
 
-        $scope.disableCurrentMoveControl = function (Control) {
-            $scope.currentMoveControl = null;
+        $scope.disableCurrentMovedControl = function (Control) {
+            $scope.currentMovedControl = null;
         };
 
         $scope.setUniqueId = function (cell, index) {
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 8ec76dd642..5ab4c07794 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
@@ -27,25 +27,24 @@
 
     <!-- Grids -->
     <div class="usky-grid-width">
-        <div class="tb">
+        <div class="tb" >
 
             <!-- for each column in model -->
-            <div 
-                class="usky-column td" 
-                ng-class="{last:$last}" 
-                ng-repeat="section in model.value.sections"
-                ng-init="initSection(section)"
-                style="width:{{section.$percentage}}%">
+            <div class="usky-column td"
+                 ng-class="{last:$last}"
+                 ng-repeat="section in model.value.sections"
+                 ng-init="initSection(section)"
+                 style="width:{{section.$percentage}}%">
+
+                <!--<div ui-sortable="sortableOptionsTest" ng-model="section.rows">-->
+                <div ng-model="section.rows">
 
-                <div ui-sortable="sortableOptions" ng-model="section.rows">
-                    
                     <!-- for each row in template section -->
-                    <div 
-                         ng-repeat="row in section.rows"
+                    <div ng-repeat="row in section.rows"
                          class="usky-row"
                          ng-mouseover="setCurrentRow(row)"
                          ng-mouseleave="disableCurrentRow()"
-                         ng-class="{removingControl:currentRemoveControl == row, movingControl:currentMoveControl == row}">
+                         ng-class="{removingControl:currentRemoveControl == row, movingControl:currentMovedRow == row}">
 
                         <!-- Row tool -->
                         <div class="row-tools" ng-animate="'fade'"
@@ -56,7 +55,7 @@
                                 <div class="iconBox"
                                      ng-click="deletePrompt = true"
                                      ng-mouseover="setCurrentRemoveControl(row)"
-                                     ng-mouseleave="disableCurrentRemoveControl(row)">
+                                     ng-mouseleave="disableCurrentRemoveControl(row)">  
 
                                     <span ng-if="deletePrompt">
                                         Are you sure?
@@ -69,8 +68,8 @@
 
                             <div class="cell-tools-move">
                                 <div class="iconBox"
-                                     ng-mouseover="setCurrentMoveControl(row)"
-                                     ng-mouseleave="disableCurrentMoveControl(row)">
+                                     ng-mouseover="setCurrentMovedRow(row)"
+                                     ng-mouseleave="disableCurrentMovedRow(row)">
                                     <i class="icon icon-navigation"></i>
                                 </div>
                             </div>
@@ -88,8 +87,7 @@
                                         <div style="width:{{ area.$percentage }}%"
                                              ng-class="{last:$last,first:$first}"
                                              class="td mainTd usky-cell"
-                                             ng-repeat="area in row.areas">
-
+                                             ng-repeat="area in row.areas" ui-sortable="sortableOptionsCell" ng-model="area.controls">
 
                                             <!-- if area is empty tools -->
                                             <div class="usky-control usky-control-placeholder"
@@ -125,10 +123,10 @@
                                                 </div>
                                             </div>
 
-
                                             <!-- Controls in cell -->
                                             <div ng-repeat="control in area.controls"
                                                  ng-class="{last:$last,
+                                                            movingControl:currentMovedControl == control,
                                                             removingControl:currentRemoveControl == control,
                                                             toolsControl:currentToolsControl == control,
                                                             selectedControl:currentControl == control}"
@@ -171,9 +169,21 @@
                                                                 <a href style="text-decoration: underline" ng-click="removeControl(area, $parent.$index)">Yes</a>
                                                             </span>
 
+
                                                             <i ng-if="!deletePrompt" class="icon icon-trash"></i>
+
                                                         </div>
                                                     </div>
+
+                                                    <!-- move cell -->
+                                                    <div class="cell-tools-move">
+                                                        <div class="iconBox"
+                                                             ng-mouseover="setCurrentMovedControl(control)"
+                                                             ng-mouseleave="disableCurrentMovedControl(control)">
+                                                            <i class="icon icon-navigation"></i>
+                                                        </div>
+                                                    </div>
+
                                                 </div>
 
                                                 <!-- Redering the editor for specific control -->
@@ -198,8 +208,6 @@
 
                 </div>
                 <!-- row sortable end -->
-
-              
                 <!-- column tools -->
                 <div class="usky-templates-columns tb">
 
@@ -224,7 +232,7 @@
                     </div>
                     <div class="tr">
                         <div class="td middle">
-                            <br/>
+                            <br />
                             <span class="help-text">Add rows to your layout</span>
                         </div>
                     </div>