diff --git a/js/angular/directive/itemDeleteButton.js b/js/angular/directive/itemDeleteButton.js index 19059e3c241..c279c93474e 100644 --- a/js/angular/directive/itemDeleteButton.js +++ b/js/angular/directive/itemDeleteButton.js @@ -30,10 +30,10 @@ 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, @@ -41,10 +41,16 @@ IonicModule //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 index 85ff338a315..c2f58951d52 100644 --- 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 index 94fde82e7b7..99302a4f382 100644 --- 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(''); - 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(''); + 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(''); - 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(''); + 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(''); - el.data('$ionListController', {}); + el.data('$ionListController', { + showDelete: function() { return false; } + }); $compile(el)($rootScope.$new()); $rootScope.$apply();