fix(ionList): show reorder/delete on item creation if list is showing

Fixes #1181
ionic-team · Apr 21, 2014 · 09a7729 · 09a7729
1 parent 3e7d185
commit 09a7729
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 14 deletions.
diff --git a/js/angular/directive/itemDeleteButton.js b/js/angular/directive/itemDeleteButton.js
@@ -30,21 +30,27 @@ var ITEM_TPL_DELETE_BUTTON =
 * ```
 */
 IonicModule
-.directive('ionDeleteButton', [function() {
+.directive('ionDeleteButton', ['$animate', function($animate) {
   return {
     restrict: 'E',
-    require: '^ionItem',
+    require: ['^ionItem', '^ionList'],
     //Run before anything else, so we can move it before other directives process
     //its location (eg ngIf relies on the location of the directive in the dom)
     priority: Number.MAX_VALUE,
     compile: function($element, $attr) {
       //Add the classes we need during the compile phase, so that they stay
       //even if something else like ngIf removes the element and re-addss it
       $attr.$set('class', ($attr.class || '') + ' button icon button-icon', true);
-      return function($scope, $element, $attr, itemCtrl) {
+      return function($scope, $element, $attr, ctrls) {
+        var itemCtrl = ctrls[0];
+        var listCtrl = ctrls[1];
         var container = angular.element(ITEM_TPL_DELETE_BUTTON);
         container.append($element);
         itemCtrl.$element.append(container).addClass('item-left-editable');
+
+        if (listCtrl.showDelete()) {
+          $animate.removeClass(container, 'ng-hide');
+        }
       };
     }
   };

diff --git a/js/angular/directive/itemReorderButton.js b/js/angular/directive/itemReorderButton.js
@@ -46,15 +46,17 @@ var ITEM_TPL_REORDER_BUTTON =
 * Parameters given: $fromIndex, $toIndex.
 */
 IonicModule
-.directive('ionReorderButton', [function() {
+.directive('ionReorderButton', ['$animate', function($animate) {
   return {
     restrict: 'E',
-    require: '^ionItem',
+    require: ['^ionItem', '^ionList'],
     priority: Number.MAX_VALUE,
     compile: function($element, $attr) {
       $attr.$set('class', ($attr.class || '') + ' button icon button-icon', true);
       $element[0].setAttribute('data-prevent-scroll', true);
-      return function($scope, $element, $attr, itemCtrl) {
+      return function($scope, $element, $attr, ctrls) {
+        var itemCtrl = ctrls[0];
+        var listCtrl = ctrls[1];
         $scope.$onReorder = function(oldIndex, newIndex) {
           $scope.$eval($attr.onReorder, {
             $fromIndex: oldIndex,
@@ -65,6 +67,10 @@ IonicModule
         var container = angular.element(ITEM_TPL_REORDER_BUTTON);
         container.append($element);
         itemCtrl.$element.append(container).addClass('item-right-editable');
+
+        if (listCtrl.showReorder()) {
+          $animate.removeClass(container, 'ng-hide');
+        }
       };
     }
   };

diff --git a/test/unit/angular/directive/list.unit.js b/test/unit/angular/directive/list.unit.js
@@ -256,41 +256,72 @@ describe('ionItem directive', function() {
 describe('ionDeleteButton directive', function() {
   beforeEach(module('ionic'));
   it('should have delete button', inject(function($compile, $rootScope) {
-    var setSpy = jasmine.createSpy('setDeleteButton')
+    var setSpy = jasmine.createSpy('setDeleteButton');
     var el = angular.element('<ion-item><ion-delete-button></ion-delete-button></ion-item>');
-    el.data('$ionListController', {});
+    el.data('$ionListController', {
+      showDelete: function() { return false; }
+    });
     $compile(el)($rootScope.$new());
     $rootScope.$apply();
 
-    var deleteContainer = angular.element(el[0].querySelector('.item-left-edit.item-delete'));
+    var deleteContainer = angular.element(el[0].querySelector('.item-left-edit.item-delete.ng-hide'));
     expect(deleteContainer.length).toBe(1);
     expect(deleteContainer.children().hasClass('button icon button-icon')).toBe(true);
   }));
+  it('should unhide if delete is shown', inject(function($compile, $rootScope) {
+    var setSpy = jasmine.createSpy('setDeleteButton');
+    var el = angular.element('<ion-item><ion-delete-button></ion-delete-button></ion-item>');
+    el.data('$ionListController', {
+      showDelete: function() { return true; }
+    });
+    $compile(el)($rootScope.$new());
+    $rootScope.$apply();
+
+    var deleteContainer = angular.element(el[0].querySelector('.item-left-edit.item-delete'));
+    expect(deleteContainer.length).toBe(1);
+    expect(deleteContainer.hasClass('ng-hide')).toBe(false);
+  }));
 });
 
 describe('ionReorderButton directive', function() {
   beforeEach(module('ionic'));
   it('should have reorder button', inject(function($compile, $rootScope) {
-    var setSpy = jasmine.createSpy('setReorderButton')
+    var setSpy = jasmine.createSpy('setReorderButton');
     var el = angular.element('<ion-item><ion-reorder-button></ion-reorder-button></ion-item>');
-    el.data('$ionListController', {});
+    el.data('$ionListController', {
+      showReorder: function() { return false; }
+    });
     $compile(el)($rootScope.$new());
     $rootScope.$apply();
 
-    var reorderContainer = angular.element(el[0].querySelector('.item-right-edit.item-reorder'));
+    var reorderContainer = angular.element(el[0].querySelector('.item-right-edit.item-reorder.ng-hide'));
     expect(reorderContainer.length).toBe(1);
     expect(reorderContainer.children().hasClass('button icon button-icon')).toBe(true);
     expect(reorderContainer.attr('data-prevent-scroll')).toBe('true');
     expect(reorderContainer.children().attr('data-prevent-scroll')).toBe('true');
   }));
+  it('should remove ng-hide if reorder is already active', inject(function($compile, $rootScope) {
+    var setSpy = jasmine.createSpy('setReorderButton');
+    var el = angular.element('<ion-item><ion-reorder-button></ion-reorder-button></ion-item>');
+    el.data('$ionListController', {
+      showReorder: function() { return true; }
+    });
+    $compile(el)($rootScope.$new());
+    $rootScope.$apply();
+    var reorderContainer = angular.element(el[0].querySelector('.item-right-edit.item-reorder'));
+    expect(reorderContainer.length).toBe(1);
+    expect(reorderContainer.hasClass('ng-hide')).toBe(false);
+  }));
 });
 
 describe('ionOptionButton directive', function() {
   beforeEach(module('ionic'));
   it('should have option button', inject(function($compile, $rootScope) {
-    var setSpy = jasmine.createSpy('setOptionButton')
+    var setSpy = jasmine.createSpy('setOptionButton');
     var el = angular.element('<ion-item><ion-option-button></ion-option-button></ion-item>');
-    el.data('$ionListController', {});
+    el.data('$ionListController', {
+      showDelete: function() { return false; }
+    });
     $compile(el)($rootScope.$new());
     $rootScope.$apply();