fix(ionList): disable tap on element being edited

Addresses #1202
ionic-team · Apr 25, 2014 · 634b397 · 634b397
1 parent 8e3a3d0
commit 634b397
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/js/angular/directive/list.js b/js/angular/directive/list.js
@@ -137,6 +137,7 @@ function($animate, $timeout) {
 
             $element.children().toggleClass('list-left-editing', isShown);
             toggleNgHide('.item-delete.item-left-edit', isShown);
+            toggleTapDisabled('.item-content', isShown);
           });
           $scope.$watch(function() {
             return listCtrl.showReorder();
@@ -149,14 +150,26 @@ function($animate, $timeout) {
 
             $element.children().toggleClass('list-right-editing', isShown);
             toggleNgHide('.item-reorder.item-right-edit', isShown);
+            toggleTapDisabled('.item-content', isShown);
           });
 
           function toggleNgHide(selector, shouldShow) {
             angular.forEach($element[0].querySelectorAll(selector), function(node) {
-              if (shouldShow) $animate.removeClass(angular.element(node), 'ng-hide');
-              else $animate.addClass(angular.element(node), 'ng-hide');
+              if (shouldShow) {
+                $animate.removeClass(angular.element(node), 'ng-hide');
+              } else {
+                $animate.addClass(angular.element(node), 'ng-hide');
+              }
             });
           }
+          function toggleTapDisabled(selector, shouldDisable) {
+            var el = angular.element($element[0].querySelectorAll(selector));
+            if (shouldDisable) {
+              el.attr('data-tap-disabled', 'true');
+            } else {
+              el.removeAttr('data-tap-disabled');
+            }
+          }
         }
 
       };

diff --git a/test/html/list.html b/test/html/list.html
@@ -1,5 +1,6 @@
 <html ng-app="ionicApp">
   <head>
+
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title>Ionic List Directive</title>
@@ -51,7 +52,7 @@ <h1 class="title">Ionic Delete/Option Buttons</h1>
   		Type 1
   		</div>
         <ion-item ng-repeat="item in items"
-                  href="#{{item.id}}"
+                  ng-click="alert(item.id)"
                   class="item item-avatar-left item-icon-right"
                   type="item-avatar" >
           <img src="{{item.image}}">
@@ -69,7 +70,7 @@ <h2>Item {{ item.id }}</h2>
                              ng-click="share(item)">
             Share
           </ion-option-button>
-          <ion-reorder-button class="ion-navicon" on-reoder="moveItem(item, fromIndex, toIndex)"></ion-reorder-button>
+          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
         </ion-item>
 
       </ion-list>
@@ -85,18 +86,22 @@ <h2>Item {{ item.id }}</h2>
     showDelete: false
   };
 
+  $scope.moveItem = function(item, from, to) {
+    console.log('beforeReorder', item, from, to, $scope.items.slice(0,5));
+    $scope.items.splice(from, 1);
+    $scope.items.splice(to, 0, item);
+    console.log('afterReorder', $scope.items.slice(0,5));
+  };
+
+  $scope.alert = window.alert.bind(window);
+
   $scope.edit = function(item) {
     alert('Edit Item: ' + item.id);
   };
   $scope.share = function(item) {
     alert('Share Item: ' + item.id);
   };
 
-  $scope.moveItem = function(item, fromIndex, toIndex) {
-    $scope.items.splice(fromIndex, 1);
-    $scope.items.splice(toIndex, 0, item);
-  };
-
   $scope.onItemDelete = function(item) {
     $scope.items.splice($scope.items.indexOf(item), 1);
   };

diff --git a/test/unit/angular/directive/list.unit.js b/test/unit/angular/directive/list.unit.js
@@ -1,5 +1,3 @@
-describe('',function(){
-
 describe('$ionicList controller', function() {
   beforeEach(module('ionic'));
   function setup(attrs) {
@@ -332,5 +330,3 @@ describe('ionOptionButton directive', function() {
     expect(optionContainer.children().hasClass('button')).toBe(true);
   }));
 });
-
-});