enhance(slideBox): re-add update() method

Author: ajoslin

js/angular/controller/slideBoxController.js

@@ -36,6 +36,7 @@ function(scope, element, $$ionicAttachDrag, $interval) {
   self.loop = slideList.loop;
   self.delta = slideList.delta;
 
+  self.update = update;
   self.enableSlide = enableSlide;
   self.autoPlay = autoPlay;
   self.add = add;
@@ -73,6 +74,18 @@ function(scope, element, $$ionicAttachDrag, $interval) {
     return slideList.next(index);
   }
 
+  function update() {
+    var selectedIndex = scope.selectedIndex;
+    for (var i = self.count() - 1; i >= 0; i--) {
+      slideList.remove(i);
+    }
+    var slideNodes = element[0].querySelectorAll('ion-slide');
+    for (var j = 0, jj = slideNodes.length; j < jj; j++) {
+      slideList.add(jqLite(slideNodes[j]).controller('ionSlide'));
+    }
+    self.select(selectedIndex);
+  }
+
   function enableSlide(isEnabled) {
     if (arguments.length) {
       self.dragDisabled = !isEnabled;
@@ -95,7 +108,7 @@ function(scope, element, $$ionicAttachDrag, $interval) {
    */
   function add(slide, index) {
     var newIndex = slideList.add(slide, index);
-    slide.onAdded(slidesParent);
+    slide.onAdded();
 
     // If we are waiting for a certain scope.selectedIndex and this is it,
     // select the slide
@@ -126,12 +139,12 @@ function(scope, element, $$ionicAttachDrag, $interval) {
     if (index === -1) return;
 
     // If the slide is current, next, or previous, save so we can re-select after moving.
-    var isRelevant = self.isRelevant(targetIndex);
+    var isRelevant = self.selected() === index || self.isRelevant(targetIndex);
     slideList.remove(index);
     slideList.add(slide, targetIndex);
 
     if (isRelevant) {
-      enqueueRefresh();
+      self.select(targetIndex);
     }
   }
 

js/angular/controller/slideController.js

@@ -26,9 +26,7 @@ function(scope, element, $q) {
   // Public Methods
   // ***
 
-  function onAdded(parentElement) {
-    self.parentElement = parentElement;
-
+  function onAdded() {
     // Set default state
     self.setState('detached');
   }
@@ -85,19 +83,21 @@ function(scope, element, $q) {
   // ***
 
   function attachSlide() {
-    if (!self.element[0].parentNode) {
-      self.parentElement.append(self.element);
-      ionic.Utils.reconnectScope(scope);
-    }
+    // if (!self.element[0].parentNode) {
+    //   self.parentElement.append(self.element);
+    //   ionic.Utils.reconnectScope(scope);
+    // }
+    ionic.Utils.reconnectScope(scope);
   }
 
   function detachSlide() {
     // Don't use self.element.remove(), that will destroy the element's data
-    var parent = self.element[0].parentNode;
-    if (parent) {
-      parent.removeChild(self.element[0]);
-      ionic.Utils.disconnectScope(scope);
-    }
+    // var parent = self.element[0].parentNode;
+    // if (parent) {
+    //   parent.removeChild(self.element[0]);
+    //   ionic.Utils.disconnectScope(scope);
+    // }
+    ionic.Utils.disconnectScope(scope);
   }
 
   var transitionDeferred;

js/angular/directive/slide.js

@@ -38,18 +38,6 @@ IonicModule
       slideBoxCtrl.remove(slideCtrl);
     });
 
-    element.one('$animate:after', watchNgRepeatIndexOnInsertElement);
-    element.on('$animate:after', refreshStateOnInsertElement);
-
-    // If this element is inserted later by an ng-if or ng-repeat, remove it
-    // from the DOM again if it's irrelevant (not selected or adjacent).
-    function refreshStateOnInsertElement() {
-      var slideIndex = slideBoxCtrl.indexOf(slideCtrl);
-      if (!slideBoxCtrl.isRelevant(slideIndex)) {
-        slideCtrl.setState('detached');
-      }
-    }
-
     // Move with ng-repeat if this slide is part of ng-repeat.
     // scope.$index only appears after the first time ng-repaet inserts the element.
     function watchNgRepeatIndexOnInsertElement() {

js/angular/service/slideBoxDelegate.js

@@ -88,7 +88,16 @@ IonicModule
    * @name $ionicSlideBoxDelegate#count
    * @returns `number` The number of slides there are currently.
    */
-  'count'
+  'count',
+  /**
+   * @ngdoc method
+   * @name $ionicSlideBoxDelegate#update
+   * @description Causes the slidebox to re-scan all of the child slide
+   * elements and reorganize itself again.
+   * You only need to call update if you are moving slides around in the DOM
+   * (for example, ng-repeat moving an element from the middle to the end).
+   */
+  'update',
   /**
    * @ngdoc method
    * @name $ionicSlideBoxDelegate#$getByHandle

test/html/slideBox.html

@@ -41,7 +41,7 @@
       }
     </style>
   </head>
-  <body ng-init="$root.selectedIndex = 3">
+  <body ng-init="$root.selectedIndex = 0">
 
     <div ng-controller="SlideCtrl" ng-init="$root.hasBox = true">
       <ion-content>
@@ -94,7 +94,7 @@ <h3>item {{i}}</h3>
 
       .controller('SlideCtrl', function($scope, $timeout) {
           $scope.items = [];
-          for (var i = 0; i < 50; i++) {
+          for (var i = 0; i < 1000; i++) {
             $scope.items.push(i);
           }
 

test/unit/angular/controller/slideController.unit.js

@@ -28,28 +28,23 @@ describe('$ionSlide controller', function() {
 
   it('#setState()', function() {
     var ctrl = makeCtrl();
-    ctrl.onAdded(angular.element('<div>'));
+    ctrl.onAdded();
 
-    expect(ctrl.element.parent().length).toBe(0);
     ctrl.setState('selected');
     expect(ctrl.element.attr('slide-state')).toBe('selected');
     expect(ctrl.element.attr('slide-previous-state')).toBe('detached');
-    expect(ctrl.element.parent()[0]).toBe(ctrl.parentElement[0]);
 
     ctrl.setState('previous');
     expect(ctrl.element.attr('slide-state')).toBe('previous');
     expect(ctrl.element.attr('slide-previous-state')).toBe('selected');
-    expect(ctrl.element.parent()[0]).toBe(ctrl.parentElement[0]);
 
     ctrl.setState('detached');
     expect(ctrl.element.attr('slide-state')).toBe('detached');
     expect(ctrl.element.attr('slide-previous-state')).toBe('previous');
-    expect(ctrl.element.parent().length).toBe(0);
 
     ctrl.setState('next');
     expect(ctrl.element.attr('slide-state')).toBe('next');
     expect(ctrl.element.attr('slide-previous-state')).toBe('detached');
-    expect(ctrl.element.parent()[0]).toBe(ctrl.parentElement[0]);
 
   });
 });