Merge pull request #444 from thgreasi/michaschwab-waitForNotDisabled0.14

feat(sortable): postpone sortable init when initially disabled

Author: thgreasi

src/sortable.js

@@ -230,8 +230,7 @@ angular.module('ui.sortable', [])
             return;
           }
 
-          if (ngModel) {
-
+          function wireUp () {
             // When we add or remove elements, we need the sortable to 'refresh'
             // so it can find the new/removed elements.
             scope.$watchCollection('ngModel', function() {
@@ -443,13 +442,32 @@ angular.module('ui.sortable', [])
             }, true);
 
             patchUISortableOptions(opts);
+          }
+
+          function watchOnce (watchExpr, fn) {
+            var cancelWatcher = scope.$watch(watchExpr, function () {
+              fn.apply(this, arguments);
+              cancelWatcher();
+            });
+          }
 
-          } else {
-            $log.info('ui.sortable: ngModel not provided!', element);
+          function lazyInit () {
+            if (scope.uiSortable && scope.uiSortable.disabled) {
+              watchOnce('uiSortable.disabled', lazyInit);
+            } else {
+
+              if (ngModel) {
+                wireUp();
+              } else {
+                $log.info('ui.sortable: ngModel not provided!', element);
+              }
+              
+              // Create sortable
+              element.sortable(opts);
+            }
           }
 
-          // Create sortable
-          element.sortable(opts);
+          lazyInit();
         }
       };
     }

test/sortable.spec.js

@@ -302,6 +302,67 @@ describe('uiSortable', function() {
 
       });
 
+      it('should not initialize a disabled sortable', function() {
+        inject(function($compile, $rootScope) {
+          var element;
+          var childScope = $rootScope.$new();
+          spyOn(angular.element.fn, 'sortable');
+
+          childScope.items = ['One', 'Two', 'Three'];
+          childScope.opts = {
+            disabled: true
+          };
+          element = $compile('<ul ui-sortable="opts" ng-model="items"><li ng-repeat="item in items">{{ item }}</li></ul>')(childScope);
+
+          expect(angular.element.fn.sortable).not.toHaveBeenCalled();
+        });
+      });
+
+      it('should lazily initialize a latelly enabled sortable (set disabled = false)', function() {
+        inject(function($compile, $rootScope) {
+          var element;
+          var childScope = $rootScope.$new();
+          spyOn(angular.element.fn, 'sortable');
+
+          childScope.items = ['One', 'Two', 'Three'];
+          childScope.opts = {
+            disabled: true
+          };
+          element = $compile('<ul ui-sortable="opts" ng-model="items"><li ng-repeat="item in items">{{ item }}</li></ul>')(childScope);
+
+          expect(angular.element.fn.sortable).not.toHaveBeenCalled();
+
+          $rootScope.$apply(function() {
+            childScope.opts.disabled = false;
+          });
+
+          expect(angular.element.fn.sortable).toHaveBeenCalled();
+        });
+      });
+
+      it('should lazily initialize a latelly enabled sortable (delete disabled option)', function() {
+        inject(function($compile, $rootScope) {
+          var element;
+          var childScope = $rootScope.$new();
+          spyOn(angular.element.fn, 'sortable');
+
+          childScope.items = ['One', 'Two', 'Three'];
+          childScope.opts = {
+            disabled: true
+          };
+          element = $compile('<ul ui-sortable="opts" ng-model="items"><li ng-repeat="item in items">{{ item }}</li></ul>')(childScope);
+
+          expect(angular.element.fn.sortable).not.toHaveBeenCalled();
+
+          $rootScope.$apply(function() {
+            childScope.opts = {};
+          });
+
+          expect(angular.element.fn.sortable).toHaveBeenCalled();
+        });
+      });
+
+
     });