fix(ionList): disable swiping of items while option buttons are shown

Addresses #1202
ionic-team · Apr 25, 2014 · 81676e6 · 81676e6
1 parent a845ff3
commit 81676e6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/js/angular/directive/list.js b/js/angular/directive/list.js
@@ -134,6 +134,7 @@ function($animate, $timeout) {
             if (!isShown && !wasShown) { return; }
 
             if (isShown) listCtrl.closeOptionButtons();
+            listCtrl.canSwipeItems(!isShown);
 
             $element.children().toggleClass('list-left-editing', isShown);
             toggleNgHide('.item-delete.item-left-edit', isShown);
@@ -146,7 +147,7 @@ function($animate, $timeout) {
             if (!isShown && !wasShown) { return; }
 
             if (isShown) listCtrl.closeOptionButtons();
-            listCtrl.showReorder(isShown);
+            listCtrl.canSwipeItems(!isShown);
 
             $element.children().toggleClass('list-right-editing', isShown);
             toggleNgHide('.item-reorder.item-right-edit', isShown);

diff --git a/test/html/list.html b/test/html/list.html
@@ -41,9 +41,7 @@ <h1 class="title">Ionic Delete/Option Buttons</h1>
       -->
       <div class="padding">
         <div class="button-bar bar-outline bar-positive">
-          <a class="button button-positive" ng-click="Modal.show()">Button 1</a>
-          <a class="button button-positive" ng-click="Modal.show()">Button 2</a>
-          <a class="button button-positive" ng-click="Modal.show()">Button 3</a>
+          <a class="button-block button button-positive" ng-click="toggleCanSwipe()">Toggle Can Swipe (is {{canSwipe()}})</a>
         </div>
       </div>
 
@@ -80,7 +78,15 @@ <h2>Item {{ item.id }}</h2>
     <script>
 angular.module('ionicApp', ['ionic'])
 
-.controller('MyCtrl', function($scope) {
+.controller('MyCtrl', function($scope, $ionicListDelegate) {
+
+  $scope.toggleCanSwipe = function() {
+  $ionicListDelegate.canSwipeItems(!$scope.canSwipe());
+  };
+  $scope.canSwipe = function() {
+  return $ionicListDelegate.canSwipeItems();
+  };
+
 
   $scope.data = {
     showDelete: false

diff --git a/test/unit/angular/directive/list.unit.js b/test/unit/angular/directive/list.unit.js
@@ -144,23 +144,27 @@ describe('ionList directive', function() {
   });
 
   it('should watch ctrl.showDelete when true', inject(function($animate) {
-    var el = setup('', '<div class="item-delete item-left-edit ng-hide"></div><div></div>');
+    var el = setup('', '<div class="item-delete item-left-edit ng-hide"></div><div></div><div class="item-content"></div></div>');
     flush();
 
     spyOn(el.controller('ionList'), 'closeOptionButtons');
 
     el.controller('ionList').showDelete(true);
+    expect(el.controller('ionList').canSwipeItems()).toBe(true);
     el.scope().$apply();
 
+    expect(el.controller('ionList').canSwipeItems()).toBe(false);
     expect(el.controller('ionList').closeOptionButtons).toHaveBeenCalled();
     var deleteButtons = angular.element(el[0].querySelectorAll('.item-delete.item-left-edit'));
     expect(deleteButtons.length).not.toBe(0);
     expect(deleteButtons.hasClass('ng-hide')).toBe(false);
     expect(el.children().hasClass('list-left-editing')).toBe(true);
+    var content = angular.element(el[0].querySelectorAll('.item-content'));
+    expect(content.attr('data-tap-disabled')).toEqual('true');
   }));
 
   it('should watch ctrl.showDelete when false from true', inject(function($animate) {
-    var el = setup('', '<div class="item-delete item-left-edit"></div><div></div>');
+    var el = setup('', '<div class="item-delete item-left-edit"></div><div></div><div class="item-content">');
     flush();
 
     spyOn(el.controller('ionList'), 'closeOptionButtons');
@@ -170,27 +174,34 @@ describe('ionList directive', function() {
     el.controller('ionList').showDelete(false);
     el.scope().$apply();
 
+    expect(el.controller('ionList').canSwipeItems()).toBe(true);
     expect(el.controller('ionList').closeOptionButtons.callCount).toBe(1);
     var deleteButtons = angular.element(el[0].querySelectorAll('.item-delete.item-left-edit'));
     expect(deleteButtons.hasClass('ng-hide')).toBe(true);
     expect(deleteButtons.length).not.toBe(0);
     expect(el.children().hasClass('list-left-editing')).toBe(false);
+    var content = angular.element(el[0].querySelectorAll('.item-content'));
+    expect(content.attr('data-tap-disabled')).toBeFalsy();
   }));
 
   it('should watch ctrl.showReorder when true', inject(function($animate) {
-    var el = setup('show-reorder="shouldReorder"', '<div class="item-reorder item-right-edit ng-hide"></div><div></div>');
+    var el = setup('show-reorder="shouldReorder"', '<div class="item-reorder item-right-edit ng-hide"></div><div class="item-content"></div><div></div>');
     flush();
 
     spyOn(el.controller('ionList'), 'closeOptionButtons');
 
     el.controller('ionList').showReorder(true);
+    expect(el.controller('ionList').canSwipeItems()).toBe(true);
     el.scope().$apply();
 
     expect(el.controller('ionList').closeOptionButtons).toHaveBeenCalled();
+    expect(el.controller('ionList').canSwipeItems()).toBe(false);
     var reorderButtons = angular.element(el[0].querySelectorAll('.item-reorder.item-right-edit'));
     expect(reorderButtons.length).not.toBe(0);
     expect(reorderButtons.hasClass('ng-hide')).toBe(false);
     expect(el.children().hasClass('list-right-editing')).toBe(true);
+    var content = angular.element(el[0].querySelectorAll('.item-content'));
+    expect(content.attr('data-tap-disabled')).toEqual('true');
   }));
 
   it('should watch ctrl.showReorder when false from true', inject(function($animate) {
@@ -204,11 +215,14 @@ describe('ionList directive', function() {
     el.controller('ionList').showReorder(false);
     el.scope().$apply();
 
+    expect(el.controller('ionList').canSwipeItems()).toBe(true);
     expect(el.controller('ionList').closeOptionButtons.callCount).toBe(1);
     var reorderButtons = angular.element(el[0].querySelectorAll('.item-reorder.item-right-edit'));
     expect(reorderButtons.length).not.toBe(0);
     expect(reorderButtons.hasClass('ng-hide')).toBe(true);
     expect(el.children().hasClass('list-right-editing')).toBe(false);
+    var content = angular.element(el[0].querySelectorAll('.item-content'));
+    expect(content.attr('data-tap-disabled')).toBeFalsy();
   }));
 });