Merge branch 'tepez-extra_elems-rebase' into v0.14.x-dev

feat(sortable): allow extra element before/after ng-repeat

Author: thgreasi

README.md

@@ -43,9 +43,9 @@ Apply the directive to your form elements:
 **Developing Notes:**
 
 * `ng-model` is required, so that the directive knows which model to update.
-* `ui-sortable` element should only contain one `ng-repeat` and not any other elements (above or below).  
-  Otherwise the index matching of the generated DOM elements and the `ng-model`'s items will break.  
-  **In other words: The items of `ng-model` must match the indexes of the generated DOM elements.**
+* `ui-sortable` element should contain only one `ng-repeat`, but other non-repeater elements above or below may still exist.
+  Otherwise the index matching of the `ng-model`'s items and the DOM elements generated by the `ng-repeat` will break.  
+  **In other words: The items of `ng-model` must match the indexes of the DOM elements generated by the `ng-repeat`.**
 * `ui-sortable` lists containing many 'types' of items can be implemented by using dynamic template loading [with ng-include](http://stackoverflow.com/questions/14607879/angularjs-load-dynamic-template-html-within-directive/14621927#14621927) or a [loader directive](https://github.com/thgreasi/tg-dynamic-directive), to determine how each model item should be rendered. Also take a look at the [Tree with dynamic template](http://codepen.io/thgreasi/pen/uyHFC) example.
 
 ### Options

src/sortable.js

@@ -37,11 +37,48 @@ angular.module('ui.sortable', [])
             return null;
           }
 
+          function getPlaceholderElement (element) {
+            var placeholder = element.sortable('option','placeholder');
+
+            // placeholder.element will be a function if the placeholder, has
+            // been created (placeholder will be an object).  If it hasn't
+            // been created, either placeholder will be false if no
+            // placeholder class was given or placeholder.element will be
+            // undefined if a class was given (placeholder will be a string)
+            if (placeholder && placeholder.element && typeof placeholder.element === 'function') {
+              var result = placeholder.element();
+              // workaround for jquery ui 1.9.x,
+              // not returning jquery collection
+              result = angular.element(result);
+              return result;
+            }
+            return null;
+          }
+
+          function getPlaceholderExcludesludes (element, placeholder) {
+            // exact match with the placeholder's class attribute to handle
+            // the case that multiple connected sortables exist and
+            // the placehoilder option equals the class of sortable items
+            var excludes = element.find('[class="' + placeholder.attr('class') + '"]:not([ng-repeat], [data-ng-repeat])');
+            return excludes;
+          }
+
           function hasSortingHelper (element, ui) {
             var helperOption = element.sortable('option','helper');
             return helperOption === 'clone' || (typeof helperOption === 'function' && ui.item.sortable.isCustomHelperUsed());
           }
 
+          function getSortingHelper (element, ui, savedNodes) {
+            var result = null;
+            if (hasSortingHelper(element, ui) &&
+                element.sortable( 'option', 'appendTo' ) === 'parent') {
+              // The .ui-sortable-helper element (that's the default class name)
+              // is placed last.
+              result = savedNodes.last();
+            }
+            return result;
+          }
+
           // thanks jquery-ui
           function isFloating (item) {
             return (/left|right/).test(item.css('float')) || (/inline|table-cell/).test(item.css('display'));
@@ -63,7 +100,20 @@ angular.module('ui.sortable', [])
             ui.item.sortable._destroy();
           }
 
-          var opts = {};
+          // return the index of ui.item among the items
+          // we can't just do ui.item.index() because there it might have siblings
+          // which are not items
+          function getItemIndex(ui) {
+            return ui.item.parent().find('> [ng-repeat],> [data-ng-repeat],> [x-ng-repeat]')
+              .index(ui.item);
+          }
+
+          var opts = {
+            // the default for jquery-ui sortable is "> *", we need to restrict this to
+            // ng-repeat items
+            // if the user uses
+            items: '> [ng-repeat],> [data-ng-repeat],> [x-ng-repeat]'
+          };
 
           // directive specific options
           var directiveOpts = {
@@ -114,9 +164,10 @@ angular.module('ui.sortable', [])
               }
 
               // Save the starting position of dragged item
+              var index = getItemIndex(ui);
               ui.item.sortable = {
-                model: ngModel.$modelValue[ui.item.index()],
-                index: ui.item.index(),
+                model: ngModel.$modelValue[index],
+                index: index,
                 source: ui.item.parent(),
                 sourceModel: ngModel.$modelValue,
                 cancel: function () {
@@ -147,24 +198,9 @@ angular.module('ui.sortable', [])
 
               // If this list has a placeholder (the connected lists won't),
               // don't inlcude it in saved nodes.
-              var placeholder = element.sortable('option','placeholder');
-
-              // placeholder.element will be a function if the placeholder, has
-              // been created (placeholder will be an object).  If it hasn't
-              // been created, either placeholder will be false if no
-              // placeholder class was given or placeholder.element will be
-              // undefined if a class was given (placeholder will be a string)
-              if (placeholder && placeholder.element && typeof placeholder.element === 'function') {
-                var phElement = placeholder.element();
-                // workaround for jquery ui 1.9.x,
-                // not returning jquery collection
-                phElement = angular.element(phElement);
-
-                // exact match with the placeholder's class attribute to handle
-                // the case that multiple connected sortables exist and
-                // the placehoilder option equals the class of sortable items
-                var excludes = element.find('[class="' + phElement.attr('class') + '"]:not([ng-repeat], [data-ng-repeat])');
-
+              var placeholder = getPlaceholderElement(element);
+              if (placeholder && placeholder.length) {
+                var excludes = getPlaceholderExcludesludes(element, placeholder);
                 savedNodes = savedNodes.not(excludes);
               }
 
@@ -184,7 +220,7 @@ angular.module('ui.sortable', [])
               // update that happens when moving between lists because then
               // the value will be overwritten with the old value
               if(!ui.item.sortable.received) {
-                ui.item.sortable.dropindex = ui.item.index();
+                ui.item.sortable.dropindex = getItemIndex(ui);
                 var droptarget = ui.item.parent();
                 ui.item.sortable.droptarget = droptarget;
 
@@ -203,11 +239,11 @@ angular.module('ui.sortable', [])
               // the start and stop of repeat sections and sortable doesn't
               // respect their order (even if we cancel, the order of the
               // comments are still messed up).
-              if (hasSortingHelper(element, ui) && !ui.item.sortable.received &&
-                  element.sortable( 'option', 'appendTo' ) === 'parent') {
-                // restore all the savedNodes except .ui-sortable-helper element
-                // (which is placed last). That way it will be garbage collected.
-                savedNodes = savedNodes.not(savedNodes.last());
+              var sortingHelper = !ui.item.sortable.received && getSortingHelper(element, ui, savedNodes);
+              if (sortingHelper && sortingHelper.length) {
+                // Restore all the savedNodes except from the sorting helper element.
+                // That way it will be garbage collected.
+                savedNodes = savedNodes.not(sortingHelper);
               }
               savedNodes.appendTo(element);
 
@@ -248,7 +284,15 @@ angular.module('ui.sortable', [])
                 // if the item was not moved, then restore the elements
                 // so that the ngRepeat's comment are correct.
                 if ((!('dropindex' in ui.item.sortable) || ui.item.sortable.isCanceled()) &&
-                    !hasSortingHelper(element, ui)) {
+                    !angular.equals(element.contents(), savedNodes)) {
+
+                  var sortingHelper = getSortingHelper(element, ui, savedNodes);
+                  if (sortingHelper && sortingHelper.length) {
+                    // Restore all the savedNodes except from the sorting helper element.
+                    // That way it will be garbage collected.
+                    savedNodes = savedNodes.not(sortingHelper);
+                  }
+                  savedNodes.appendTo(element);
                   savedNodes.appendTo(element);
                 }
               }
@@ -325,6 +369,10 @@ angular.module('ui.sortable', [])
                     value = wrappers[key](value);
                   }
 
+                  if (key === 'items' && !value) {
+                    value = '> [ng-repeat],> [data-ng-repeat],> [x-ng-repeat]';
+                  }
+
                   opts[key] = value;
                   element.sortable('option', key, value);
                 });