javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Addresses #1202
This commit is contained in:
Andy Joslin
2014-04-25 06:49:17 -06:00
parent a845ff3489
commit 81676e6ef7
3 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
js/angular/directive/list.js vendored
View File

@@ -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);

14
test/html/list.html
View File

@@ -41,9 +41,7 @@
-->
<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 @@
<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

20
test/unit/angular/directive/list.unit.js
View File

@@ -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();
}));
});