angular-dashboard-framework · bojanbass · Oct 16, 2015 · Jul 26, 2017 · Jul 26, 2017
diff --git a/.editorconfig b/.editorconfig
@@ -10,4 +10,4 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-ident_size = 2
+indent_size = 2
diff --git a/dependencies.yml b/dependencies.yml
@@ -0,0 +1,11 @@
+collectors:
+
+- type: js-npm
+  path: /
+  actors:
+  # pull requests for updates to our major version
+  - type: js-npm
+    versions: "L.Y.Y"
+  # create issues for new major versions
+  - type: repo-issue
+    versions: "Y.0.0"
diff --git a/sample/index.html b/sample/index.html
@@ -125,6 +125,7 @@
     <!-- build:js js/sample.min.js -->
     <!-- Sortable -->
     <script type="text/javascript" src="components/Sortable/Sortable.js"></script>
+    <script type="text/javascript" src="components/Sortable/ng-sortable.js"></script>
 
     <!-- angular-bootstrap -->
     <script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap.js"></script>

diff --git a/sample/scripts/sample.js b/sample/scripts/sample.js
@@ -30,7 +30,7 @@ angular.module('sample', [
   'adf.widget.github', 'adf.widget.version',
   'adf.widget.clock', 'LocalStorageModule',
   'sample-01', 'sample-02', 'sample-03',
-  'sample-04', 'sample-05', 'ngRoute'
+  'sample-04', 'sample-05', 'ngRoute', 'ng-sortable'
 ])
 .config(function(dashboardProvider, $routeProvider, localStorageServiceProvider){
   dashboardProvider.widgetsPath('widgets/');

diff --git a/src/scripts/column.js b/src/scripts/column.js
@@ -28,136 +28,18 @@ angular.module('adf')
   .directive('adfDashboardColumn', function ($log, $compile, $rootScope, adfTemplatePath, rowTemplate, dashboard) {
     'use strict';
 
-    /**
-     * moves a widget in between a column
-     */
-    function moveWidgetInColumn($scope, column, evt){
-      var widgets = column.widgets;
-      // move widget and apply to scope
-      $scope.$apply(function(){
-        widgets.splice(evt.newIndex, 0, widgets.splice(evt.oldIndex, 1)[0]);
-        $rootScope.$broadcast('adfWidgetMovedInColumn');
-      });
-    }
-
-    /**
-     * finds a widget by its id in the column
-     */
-    function findWidget(column, index){
-      var widget = null;
-      for (var i=0; i<column.widgets.length; i++){
-        var w = column.widgets[i];
-        if (w.wid === index){
-          widget = w;
-          break;
-        }
-      }
-      return widget;
-    }
-
-    /**
-     * finds a column by its id in the model
-     */
-    function findColumn(model, index){
-      var column = null;
-      for (var i=0; i<model.rows.length; i++){
-        var r = model.rows[i];
-        for (var j=0; j<r.columns.length; j++){
-          var c = r.columns[j];
-          if ( c.cid === index ){
-            column = c;
-            break;
-          } else if (c.rows){
-            column = findColumn(c, index);
-          }
-        }
-        if (column){
-          break;
-        }
-      }
-      return column;
-    }
-
-    /**
-     * get the adf id from an html element
-     */
-    function getId(el){
-      var id = el.getAttribute('adf-id');
-      return id ? parseInt(id) : -1;
-    }
-
-    /**
-     * adds a widget to a column
-     */
-    function addWidgetToColumn($scope, model, targetColumn, evt){
-      // find source column
-      var cid = getId(evt.from);
-      var sourceColumn = findColumn(model, cid);
-
-      if (sourceColumn){
-        // find moved widget
-        var wid = getId(evt.item);
-        var widget = findWidget(sourceColumn, wid);
-
-        if (widget){
-          // add new item and apply to scope
-          $scope.$apply(function(){
-      			if (!targetColumn.widgets) {
-      				targetColumn.widgets = [];
-      			}
-            targetColumn.widgets.splice(evt.newIndex, 0, widget);
-
-            $rootScope.$broadcast('adfWidgetAddedToColumn');
-          });
-        } else {
-          $log.warn('could not find widget with id ' + wid);
-        }
-      } else {
-        $log.warn('could not find column with id ' + cid);
-      }
-    }
-
-    /**
-     * removes a widget from a column
-     */
-    function removeWidgetFromColumn($scope, column, evt){
-      // remove old item and apply to scope
-      $scope.$apply(function(){
-        column.widgets.splice(evt.oldIndex, 1);
-        $rootScope.$broadcast('adfWidgetRemovedFromColumn');
-      });
-    }
-
     /**
      * enable sortable
      */
-    function applySortable($scope, $element, model, column){
+    function applySortable($scope){
+
       // enable drag and drop
-      var el = $element[0];
-      var sortable = Sortable.create(el, {
+      $scope.sortableConfig = {
         group: 'widgets',
         handle: '.adf-move',
         ghostClass: 'placeholder',
-        animation: 150,
-        onAdd: function(evt){
-          addWidgetToColumn($scope, model, column, evt);
-        },
-        onRemove: function(evt){
-          removeWidgetFromColumn($scope, column, evt);
-        },
-        onUpdate: function(evt){
-          moveWidgetInColumn($scope, column, evt);
-        }
-      });
-
-      // destroy sortable on column destroy event
-      $element.on('$destroy', function () {
-        // check sortable element, before calling destroy
-        // see https://github.com/sdorra/angular-dashboard-framework/issues/118
-        if (sortable.el){
-          sortable.destroy();
-        }
-      });
+        animation: 150
+      };
     }
 
     return {
@@ -171,22 +53,33 @@ angular.module('adf')
         options: '='
       },
       templateUrl: adfTemplatePath + 'dashboard-column.html',
+      controller: function($scope) {
+
+        $scope.hasNestedRows = function(){
+          return angular.isDefined($scope.column.rows) && angular.isArray($scope.column.rows);
+        };
+
+        if(!$scope.hasNestedRows()) {
+          applySortable($scope);
+        }
+      },
       link: function ($scope, $element) {
         // set id
         var col = $scope.column;
         if (!col.cid){
           col.cid = dashboard.id();
         }
 
-        if (angular.isDefined(col.rows) && angular.isArray(col.rows)) {
+        if ($scope.hasNestedRows()) {
           // be sure to tell Angular about the injected directive and push the new row directive to the column
           $compile(rowTemplate)($scope, function(cloned) {
             $element.append(cloned);
           });
-        } else {
-          // enable drag and drop for widget only columns
-          applySortable($scope, $element, $scope.adfModel, col);
         }
+        //else {
+        //  // enable drag and drop for widget only columns
+        //  applySortable($scope);
+        //}
       }
     };
   });
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -41,6 +41,14 @@
   border-radius: 5px;
 }
 
+.edit .adf-widgets {
+  min-height: 90px;
+}
+
+.edit .disabled-placeholder {
+  min-height: 0;
+}
+
 pre.edit {
   margin-top: 15px;
 }

diff --git a/src/templates/dashboard-column.html b/src/templates/dashboard-column.html
@@ -1,10 +1,17 @@
 <div adf-id="{{column.cid}}" class="column" ng-class="column.styleClass" ng-model="column.widgets">
-    <adf-widget ng-repeat="definition in column.widgets"
-                definition="definition"
-                column="column"
-                edit-mode="editMode"
-                options="options"
-                widget-state="widgetState"
-    />
+
+  <div ng-sortable="sortableConfig" class="adf-widgets" ng-class="{'disabled-placeholder':hasNestedRows()}">
+
+      <adf-widget ng-repeat="definition in column.widgets"
+                    definition="definition"
+                    column="column"
+                    edit-mode="editMode"
+                    options="options"
+                    widget-state="widgetState"
+        />
+
+  </div>
+
     <!-- If present, a new row will be injected here -->
 </div>
+