\
- \
+
+ template: '\
+
\
+ \
\
- \
+ \
+
\
+ \
\
- \
- \
-
\
- \
- \
+ \
',
link: function($scope, $element, $attr, list) {
- // Grab the parent list controller
- if(list[0]) {
- list = list[0];
- } else if(list[1]) {
- list = list[1];
- }
+ if(!list) return;
+
+ var $parentScope = list.scope;
+ var $parentAttrs = list.attrs;
$attr.$observe('href', function(value) {
- $scope.href = value;
+ if(value) $scope.href = value.trim();
});
- // Add the list item type class
- $element.addClass($attr.type || 'item-complex');
+ // Set this item's class, first from the item directive attr, and then the list attr if item not set
+ $scope.itemClass = $scope.itemType || $parentScope.itemType;
- if($attr.type !== 'item-complex') {
- $scope.canSwipe = false;
+ // Decide if this item can do stuff, and follow a certain priority
+ // depending on where the value comes from
+ if(($attr.canDelete ? $scope.canDelete : $parentScope.canDelete) !== "false") {
+ if($attr.onDelete || $parentAttrs.onDelete) {
+
+ // only assign this method when we need to
+ // and use its existence to decide if the delete should show or not
+ $scope.deleteClick = function() {
+ if($attr.onDelete) {
+ // this item has an on-delete attribute
+ $scope.onDelete($scope.item);
+ } else if($parentAttrs.onDelete) {
+ // run the parent list's onDelete method
+ // if it doesn't exist nothing will happen
+ $parentScope.onDelete($scope.item);
+ }
+ };
+
+ // Set which icons to use for deleting
+ $scope.deleteIconClass = $scope.deleteIcon || $parentScope.deleteIcon || 'ion-minus-circled';
+ }
}
- $scope.isEditing = false;
- $scope.deleteIcon = list.scope.deleteIcon;
- $scope.reorderIcon = list.scope.reorderIcon;
- $scope.showOptions = true;
+ // set the reorder Icon Class only if the item or list set can-reorder="true"
+ if(($attr.canReorder ? $scope.canReorder : $parentScope.canReorder) === "true") {
+ $scope.reorderIconClass = $scope.reorderIcon || $parentScope.reorderIcon || 'ion-navicon';
+ }
- $scope.buttonClicked = function(button) {
- button.onButtonClicked && button.onButtonClicked($scope.item, button);
- };
-
- var deregisterListWatch = list.scope.$watch('isEditing', function(v) {
- $scope.isEditing = v;
-
- // Add a delay before we allow the options layer to show, to avoid any odd
- // animation issues
- if(!v) {
- $timeout(function() {
- $scope.showOptions = true;
- }, 200);
- } else {
- $scope.showOptions = false;
+ // Set the option buttons which can be revealed by swiping to the left
+ // if canSwipe was set to false don't even bother
+ if(($attr.canSwipe ? $scope.canSwipe : $parentScope.canSwipe) !== "false") {
+ $scope.itemOptionButtons = $scope.optionButtons();
+ if(typeof $scope.itemOptionButtons === "undefined") {
+ $scope.itemOptionButtons = $parentScope.optionButtons();
}
- });
+ }
- $scope.$on('$destroy', function () {
- deregisterListWatch();
- });
}
};
}])
-.directive('item', ['$timeout', function($timeout) {
+.directive('list', ['$timeout', function($timeout) {
return {
restrict: 'E',
- require: ['?^list'],
replace: true,
transclude: true,
+
scope: {
- item: '=',
- onSelect: '&',
- onDelete: '&',
+ itemType: '@',
canDelete: '@',
canReorder: '@',
canSwipe: '@',
- buttons: '=',
- type: '@',
- },
- template: '\
- ',
-
- link: function($scope, $element, $attr, list) {
- // Grab the parent list controller
- if(list[0]) {
- list = list[0];
- } else if(list[1]) {
- list = list[1];
- }
-
- // Add the list item type class
- $element.addClass($attr.type || 'item-complex');
-
- if($attr.type !== 'item-complex') {
- $scope.canSwipe = false;
- }
-
- $scope.isEditing = false;
- $scope.deleteIcon = list.scope.deleteIcon;
- $scope.reorderIcon = list.scope.reorderIcon;
- $scope.showOptions = true;
-
- $scope.buttonClicked = function(button) {
- button.onButtonClicked && button.onButtonClicked($scope.item, button);
- };
-
- var deregisterListWatch = list.scope.$watch('isEditing', function(v) {
- $scope.isEditing = v;
-
- // Add a delay before we allow the options layer to show, to avoid any odd
- // animation issues
- if(!v) {
- $timeout(function() {
- $scope.showOptions = true;
- }, 200);
- } else {
- $scope.showOptions = false;
- }
- });
-
- $scope.$on('$destroy', function () {
- deregisterListWatch();
- });
- }
- };
-}])
-
-.directive('list', function() {
- return {
- restrict: 'E',
- replace: true,
- transclude: true,
-
- scope: {
- isEditing: '=',
- deleteIcon: '@',
- reorderIcon: '@',
+ showDelete: '=',
+ showReorder: '=',
hasPullToRefresh: '@',
onRefresh: '&',
onRefreshOpening: '&',
- onReorder: '&',
- refreshComplete: '='
+ refreshComplete: '=',
+ onSelect: '&',
+ onDelete: '&',
+ optionButtons: '&',
+ deleteIcon: '@',
+ reorderIcon: '@'
},
- controller: function($scope) {
- var _this = this;
+ template: '',
+ controller: function($scope, $attrs) {
this.scope = $scope;
-
- $scope.$watch('isEditing', function(v) {
- _this.isEditing = true;
- });
+ this.attrs = $attrs;
},
- template: '
\
- \
-
\
- \
- \
- \
-
\
- \
- - \
-
\
+
',
+
+ link: function($scope, $element, $attr, list) {
+ if(!list) return;
+
+ var $parentScope = list.scope;
+ var $parentAttrs = list.attrs;
+
+ // Set this item's class, first from the item directive attr, and then the list attr if item not set
+ $scope.itemClass = $scope.itemType || $parentScope.itemType;
+
+ // Decide if this item can do stuff, and follow a certain priority
+ // depending on where the value comes from
+ if(($attr.canDelete ? $scope.canDelete : $parentScope.canDelete) !== "false") {
+ if($attr.onDelete || $parentAttrs.onDelete) {
+
+ // only assign this method when we need to
+ // and use its existence to decide if the delete should show or not
+ $scope.deleteClick = function() {
+ if($attr.onDelete) {
+ // this item has an on-delete attribute
+ $scope.onDelete($scope.item);
+ } else if($parentAttrs.onDelete) {
+ // run the parent list's onDelete method
+ // if it doesn't exist nothing will happen
+ $parentScope.onDelete($scope.item);
+ }
+ };
+
+ // Set which icons to use for deleting
+ $scope.deleteIconClass = $scope.deleteIcon || $parentScope.deleteIcon || 'ion-minus-circled';
+ }
+ }
+
+ if($attr.onSelect || $parentAttrs.onSelect) {
+ // only assign this method when we need to
+ $scope.selectClick = function() {
+ if($attr.onSelect) {
+ // this item has an on-delete attribute
+ $scope.onSelect($scope.item);
+ } else if($parentAttrs.onSelect) {
+ // run the parent list's onDelete method
+ // if it doesn't exist nothing will happen
+ $parentScope.onSelect($scope.item);
+ }
+ };
+ }
+
+ // set the reorder Icon Class only if the item or list set can-reorder="true"
+ if(($attr.canReorder ? $scope.canReorder : $parentScope.canReorder) === "true") {
+ $scope.reorderIconClass = $scope.reorderIcon || $parentScope.reorderIcon || 'ion-navicon';
+ }
+
+ // Set the option buttons which can be revealed by swiping to the left
+ // if canSwipe was set to false don't even bother
+ if(($attr.canSwipe ? $scope.canSwipe : $parentScope.canSwipe) !== "false") {
+ $scope.itemOptionButtons = $scope.optionButtons();
+ if(typeof $scope.itemOptionButtons === "undefined") {
+ $scope.itemOptionButtons = $parentScope.optionButtons();
+ }
+ }
+
+ }
+ };
+}])
+
+.directive('linkItem', [function() {
+ return {
+ restrict: 'E',
+ require: '?^list',
+ replace: true,
+ transclude: true,
+
+ scope: {
+ item: '=',
+ itemType: '@',
+ canDelete: '@',
+ canReorder: '@',
+ canSwipe: '@',
+ onSelect: '&',
+ onDelete: '&',
+ optionButtons: '&',
+ deleteIcon: '@',
+ reorderIcon: '@',
href: '@'
},
- template: '\
- \
+ \
+
\
+ \
+ \
+ \
+
\
+ \
+ \
- \
+
+ template: '\
+
\
+ \
\
- \
+ \
+
\
+ \
\
- \
- \
-
\
- \
- \
+ \
',
link: function($scope, $element, $attr, list) {
- // Grab the parent list controller
- if(list[0]) {
- list = list[0];
- } else if(list[1]) {
- list = list[1];
- }
+ if(!list) return;
+
+ var $parentScope = list.scope;
+ var $parentAttrs = list.attrs;
$attr.$observe('href', function(value) {
- $scope.href = value;
+ if(value) $scope.href = value.trim();
});
- // Add the list item type class
- $element.addClass($attr.type || 'item-complex');
+ // Set this item's class, first from the item directive attr, and then the list attr if item not set
+ $scope.itemClass = $scope.itemType || $parentScope.itemType;
- if($attr.type !== 'item-complex') {
- $scope.canSwipe = false;
+ // Decide if this item can do stuff, and follow a certain priority
+ // depending on where the value comes from
+ if(($attr.canDelete ? $scope.canDelete : $parentScope.canDelete) !== "false") {
+ if($attr.onDelete || $parentAttrs.onDelete) {
+
+ // only assign this method when we need to
+ // and use its existence to decide if the delete should show or not
+ $scope.deleteClick = function() {
+ if($attr.onDelete) {
+ // this item has an on-delete attribute
+ $scope.onDelete($scope.item);
+ } else if($parentAttrs.onDelete) {
+ // run the parent list's onDelete method
+ // if it doesn't exist nothing will happen
+ $parentScope.onDelete($scope.item);
+ }
+ };
+
+ // Set which icons to use for deleting
+ $scope.deleteIconClass = $scope.deleteIcon || $parentScope.deleteIcon || 'ion-minus-circled';
+ }
}
- $scope.isEditing = false;
- $scope.deleteIcon = list.scope.deleteIcon;
- $scope.reorderIcon = list.scope.reorderIcon;
- $scope.showOptions = true;
+ // set the reorder Icon Class only if the item or list set can-reorder="true"
+ if(($attr.canReorder ? $scope.canReorder : $parentScope.canReorder) === "true") {
+ $scope.reorderIconClass = $scope.reorderIcon || $parentScope.reorderIcon || 'ion-navicon';
+ }
- $scope.buttonClicked = function(button) {
- button.onButtonClicked && button.onButtonClicked($scope.item, button);
- };
-
- var deregisterListWatch = list.scope.$watch('isEditing', function(v) {
- $scope.isEditing = v;
-
- // Add a delay before we allow the options layer to show, to avoid any odd
- // animation issues
- if(!v) {
- $timeout(function() {
- $scope.showOptions = true;
- }, 200);
- } else {
- $scope.showOptions = false;
+ // Set the option buttons which can be revealed by swiping to the left
+ // if canSwipe was set to false don't even bother
+ if(($attr.canSwipe ? $scope.canSwipe : $parentScope.canSwipe) !== "false") {
+ $scope.itemOptionButtons = $scope.optionButtons();
+ if(typeof $scope.itemOptionButtons === "undefined") {
+ $scope.itemOptionButtons = $parentScope.optionButtons();
}
- });
+ }
- $scope.$on('$destroy', function () {
- deregisterListWatch();
- });
}
};
}])
-.directive('item', ['$timeout', function($timeout) {
+.directive('list', ['$timeout', function($timeout) {
return {
restrict: 'E',
- require: ['?^list'],
replace: true,
transclude: true,
+
scope: {
- item: '=',
- onSelect: '&',
- onDelete: '&',
+ itemType: '@',
canDelete: '@',
canReorder: '@',
canSwipe: '@',
- buttons: '=',
- type: '@',
- },
- template: '\
- ',
-
- link: function($scope, $element, $attr, list) {
- // Grab the parent list controller
- if(list[0]) {
- list = list[0];
- } else if(list[1]) {
- list = list[1];
- }
-
- // Add the list item type class
- $element.addClass($attr.type || 'item-complex');
-
- if($attr.type !== 'item-complex') {
- $scope.canSwipe = false;
- }
-
- $scope.isEditing = false;
- $scope.deleteIcon = list.scope.deleteIcon;
- $scope.reorderIcon = list.scope.reorderIcon;
- $scope.showOptions = true;
-
- $scope.buttonClicked = function(button) {
- button.onButtonClicked && button.onButtonClicked($scope.item, button);
- };
-
- var deregisterListWatch = list.scope.$watch('isEditing', function(v) {
- $scope.isEditing = v;
-
- // Add a delay before we allow the options layer to show, to avoid any odd
- // animation issues
- if(!v) {
- $timeout(function() {
- $scope.showOptions = true;
- }, 200);
- } else {
- $scope.showOptions = false;
- }
- });
-
- $scope.$on('$destroy', function () {
- deregisterListWatch();
- });
- }
- };
-}])
-
-.directive('list', function() {
- return {
- restrict: 'E',
- replace: true,
- transclude: true,
-
- scope: {
- isEditing: '=',
- deleteIcon: '@',
- reorderIcon: '@',
+ showDelete: '=',
+ showReorder: '=',
hasPullToRefresh: '@',
onRefresh: '&',
onRefreshOpening: '&',
- onReorder: '&',
- refreshComplete: '='
+ refreshComplete: '=',
+ onSelect: '&',
+ onDelete: '&',
+ optionButtons: '&',
+ deleteIcon: '@',
+ reorderIcon: '@'
},
- controller: function($scope) {
- var _this = this;
+ template: '',
+ controller: function($scope, $attrs) {
this.scope = $scope;
-
- $scope.$watch('isEditing', function(v) {
- _this.isEditing = true;
- });
+ this.attrs = $attrs;
},
- template: '
\
- \
-
\
- \
- \
- \
-
\
- \
- - \
-
- ');
+ listElement = _$compile_(listElement)(scope);
+
+ listCtrl = listElement.controller('list');
+
+ scope.$digest();
+ }));
+
it('Should init', function() {
var element = compile('
- ' + + '
- ' + '
- ').appendTo(list);
- element = _$compile_(element)($rootScope);
+ itemElement = angular.element('
- ').appendTo(listElement); + itemElement = _$compile_(itemElement)($rootScope); $rootScope.$digest(); - scope = element.isolateScope(); + itemScope = itemElement.isolateScope(); })); - it('Should show options when the list is not in edit mode', inject(function ($timeout) { - scope.canSwipe = true; + it('Should set item type from item attribute', inject(function ($timeout) { + itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); $rootScope.$digest(); - $timeout.flush(); + itemScope = itemElement.isolateScope(); + expect(itemScope.itemClass).toBe(undefined); - expect(scope.isEditing).toBe(false); - expect(element.find('.item-options').length).toBe(1); - })); - - it('Should hide options when the list is in edit mode', inject(function ($timeout) { - scope.canSwipe = true; - $rootScope.isEditing = true; + itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); $rootScope.$digest(); - $timeout.flush(); - - expect(scope.isEditing).toBe(true); - expect(element.find('.item-options').length).toBe(0); + itemScope = itemElement.isolateScope(); + expect(itemScope.itemClass).toBe("item-type-test"); + expect(itemElement.hasClass('item-type-test')).toBe(true); })); - it('Should deregister watcher when scope destroyed', inject(function ($timeout) { - $rootScope.isEditing = true; - scope.$destroy(); + it('Should set item type from list attribute', inject(function ($timeout) { + listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
$rootScope.$digest();
- $timeout.flush();
-
- expect(scope.isEditing).toBe(false);
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.itemClass).toBe('list-item-type-test');
+ expect(itemElement.hasClass('list-item-type-test')).toBe(true);
}));
+
+ it('Should item option buttons from item attribute', inject(function ($timeout) {
+ itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.optionButtons()).toBe(undefined); + expect(itemScope.itemOptionButtons).toBe(undefined); + expect(itemElement.find('.item-options').length).toBe(0); + + $rootScope.buttons = [ + { text: 'Edit' }, { text: 'Cancel' } + ]; + itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.optionButtons().length).toBe(2); + expect(itemScope.itemOptionButtons.length).toBe(2); + expect(itemElement.find('.item-options').find('button').length).toBe(2); + })); + + it('Should item option buttons from list attribute', inject(function ($timeout) { + $rootScope.buttons = [ + { text: 'Edit' }, { text: 'Cancel' } + ]; + + listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+ expect(listScope.optionButtons().length ).toBe(2);
+
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+
+ expect(itemScope.optionButtons()).toBe(undefined);
+ expect(itemScope.itemOptionButtons.length).toBe(2);
+ expect(itemElement.find('.item-options').find('button').length).toBe(2);
+ }));
+
+ it('Should have no option buttons by disabling item canSwipe', inject(function ($timeout) {
+ $rootScope.buttons = [
+ { text: 'Edit' }, { text: 'Cancel' }
+ ];
+
+ itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + + expect(itemScope.itemOptionButtons).toBe(undefined); + })); + + it('Should have no option buttons by disabling list canSwipe', inject(function ($timeout) { + $rootScope.buttons = [ + { text: 'Edit' }, { text: 'Cancel' } + ]; + + listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+ expect(listScope.optionButtons().length ).toBe(2);
+
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+
+ expect(itemScope.itemOptionButtons).toBe(undefined);
+ }));
+
+ it('Should hide delete w/ item can-delete attribute true but no list or item onDelete', inject(function ($timeout) {
+ itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.deleteClick).toBe(undefined); + expect(itemElement.find('.item-edit').length).toBe(0); + })); + + it('Should hide delete w/ item can-delete attribute false but with item onDelete', inject(function ($timeout) { + $rootScope.onDelete = function() {}; + itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.deleteClick).toBe(undefined); + expect(itemElement.find('.item-edit').length).toBe(0); + })); + + it('Should show delete w/ no item can-delete attribute but with item onDelete', inject(function ($timeout) { + $rootScope.onDelete = function() {}; + itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.deleteClick).not.toBe(undefined); + expect(itemElement.find('.item-edit').length).toBe(1); + expect(itemScope.deleteIconClass).toBe("test-icon"); + })); + + it('Should hide delete w/ list can-delete attribute true but no list or item onDelete', inject(function ($timeout) { + $rootScope.onDelete = function() {}; + listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.deleteClick).toBe(undefined);
+ expect(itemElement.find('.item-edit').length).toBe(0);
+ }));
+
+ it('Should hide delete w/ list can-delete attribute false but with list onDelete', inject(function ($timeout) {
+ $rootScope.onDelete = function() {};
+ listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.deleteClick).toBe(undefined);
+ expect(itemElement.find('.item-edit').length).toBe(0);
+ }));
+
+ it('Should hide delete w/ list can-delete attribute false but with item onDelete', inject(function ($timeout) {
+ $rootScope.onDelete = function() {};
+ listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.deleteClick).toBe(undefined);
+ expect(itemElement.find('.item-edit').length).toBe(0);
+ }));
+
+ it('Should show delete w/ no can-delete attribute but with list onDelete', inject(function ($timeout) {
+ $rootScope.onDelete = function() {};
+ listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.deleteClick).not.toBe(undefined);
+ expect(itemElement.find('.item-edit').length).toBe(1);
+
+ expect(itemScope.deleteIconClass).toBe("test-icon");
+ }));
+
+ it('Should not be able to reorder cuz no item or list can-reorder attribute true', inject(function ($timeout) {
+ itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.reorderIconClass).toBe(undefined); + expect(itemElement.find('.item-drag').length).toBe(0); + })); + + it('Should be able to reorder cuz item can-reorder attribute true', inject(function ($timeout) { + itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.reorderIconClass).toBe('test-icon'); + expect(itemElement.find('.item-drag').length).toBe(1); + })); + + it('Should be able to reorder cuz list can-reorder attribute true', inject(function ($timeout) { + listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.reorderIconClass).toBe('test-icon');
+ expect(itemElement.find('.item-drag').length).toBe(1);
+ }));
+
+ it('Should not have options cuz no optionButtons', inject(function ($timeout) {
+ itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.itemOptionButtons).toBe(undefined); + expect(itemElement.find('.item-options').length).toBe(0); + })); + + it('Should be able to reorder cuz list can-reorder attribute false and item can-reorder true', inject(function ($timeout) { + listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.reorderIconClass).toBe('ion-navicon');
+ expect(itemElement.find('.item-drag').length).toBe(1);
+ }));
+
+ it('Should not have options cuz item can-swipe false', inject(function ($timeout) {
+ $rootScope.optionButtons = [{text:'BUTTON'}];
+ itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.itemOptionButtons).toBe(undefined); + expect(itemElement.find('.item-options').length).toBe(0); + })); + + it('Should not have options cuz list can-swipe false', inject(function ($timeout) { + $rootScope.optionButtons = [{text:'BUTTON'}]; + listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.itemOptionButtons).toBe(undefined);
+ expect(itemElement.find('.item-options').length).toBe(0);
+ }));
+
+ it('Should have options cuz item option-buttons and no can-swipe false', inject(function ($timeout) {
+ $rootScope.optionButtons = [{text:'BUTTON'}];
+ itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.itemOptionButtons.length).toBe(1); + expect(itemElement.find('.item-options').find('button').length).toBe(1); + })); + + it('Should have options cuz list option-buttons and no can-swipe false', inject(function ($timeout) { + $rootScope.optionButtons = [{text:'BUTTON'}]; + listElement = angular.element('
- ');
+ listElement = $compile(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.itemOptionButtons.length).toBe(1);
+ expect(itemElement.find('.item-options').find('button').length).toBe(1);
+ }));
+
+});
+
+describe('Ionic Link Item Directive', function () {
+ var $rootScope, $compile, listCtrl, options, listScope, itemScope, listElement, itemElement;
+
+ beforeEach(module('ionic.ui.list'));
+
+ beforeEach(inject(function (_$compile_, _$rootScope_) {
+ $rootScope = _$rootScope_;
+ $compile = _$compile_;
+
+ listElement = angular.element('
- ');
+ listElement = _$compile_(listElement)($rootScope);
+ listScope = listElement.isolateScope();
+
+ listCtrl = listElement.controller('list');
+
+ itemElement = angular.element('
-
+
+
-
+
+
+
- + + Repeat Item: {{ item.text }} + + + +
- + + Individual item directive, but can't do much. Overrides list attributes with its own left and right icons. + + + + +
- - - {{item.text}} - - -
+ Me Divider, just plain ol' HTML nested in the list directive. ++ + +
').appendTo(listElement); + itemElement = _$compile_(itemElement)($rootScope); + + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + })); + + it('Should set link-item href', inject(function ($timeout) { + itemElement = angular.element(' ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.href).toBe("http://drifty.com/"); + expect(itemElement.attr('href')).toBe("http://drifty.com/"); + })); + }); diff --git a/js/ext/angular/test/list.html b/js/ext/angular/test/list.html index 688b255332..889854f68f 100644 --- a/js/ext/angular/test/list.html +++ b/js/ext/angular/test/list.html @@ -7,86 +7,128 @@ - + - -+ option-buttons="optionButtons2"> + + Individual item directive and overrides list attrs with item attributes +- --
-
+ + + -List Tests
+ +
+
+
+ -
+
+
+ Below is NOT using the item directive, but just nested HTML ++ + +++ + + + {{ item.text }} + + +
+ Nic Cage
+I am not a demon. I am a lizard, a shark, a heat-seeking panther. I want to be Bob Denver on acid playing the accordion.
+Pull To Refresh + + + + + + + + + + ++ + + + + + + + + + + + + + diff --git a/scss/_button.scss b/scss/_button.scss index 5712a544b4..5ed1a2f4dd 100644 --- a/scss/_button.scss +++ b/scss/_button.scss @@ -148,7 +148,6 @@ min-width: initial; border-color: transparent; background: none; - background: none; &.button:active, &.button.active { border-color: transparent; diff --git a/scss/_items.scss b/scss/_items.scss index b1bc18ad3a..c5296497f2 100644 --- a/scss/_items.scss +++ b/scss/_items.scss @@ -496,7 +496,7 @@ button.item-button-right:after { } -// Item Animations +// Item Editing // ------------------------------- .item-sliding { @@ -512,12 +512,12 @@ button.item-button-right:after { opacity: 0.7; } + /** * The left-side edit area of a complex list item. This area shows * whe the list item is in edit mode. */ .item-edit { - @include transition(left 0.2s ease-in-out, opacity 0.2s ease-in-out); position: absolute; top: 0; @@ -529,11 +529,13 @@ button.item-button-right:after { .button { height: 100%; - .icon, i { + + &.icon { @include display-flex(); @include align-items(center); position: absolute; top: 0; + left: 0; height: 100%; color: $assertive; font-size: 24px; @@ -564,20 +566,22 @@ button.item-button-right:after { position: absolute; top: 0; right: 0; - z-index: $z-index-item-drag; + z-index: 0; + width: 50px; height: 100%; + background: inherit; .button { height: 100%; - border: none; - border-radius: 0; - .icon, i { + min-width: 42px; + + &.icon:before { @include display-flex(); @include align-items(center); position: absolute; top: 0; height: 100%; - font-size: 24px; + font-size: 32px; } } } @@ -598,3 +602,7 @@ button.item-button-right:after { border-radius: 0; } } + +.item-options-hide .item-options { + display: none; +} diff --git a/scss/_list.scss b/scss/_list.scss index eb61e61db9..6319aeb0b1 100644 --- a/scss/_list.scss +++ b/scss/_list.scss @@ -14,14 +14,21 @@ /** * List editing styles. These trigger when the entire list goes into - * "edit mode" + * "edit mode" or reordering list items */ .list-editing { .item-content { - margin-right: 50px; margin-left: 50px; } } +.list-reordering { + .item-content { + margin-right: 50px; + } + .item-drag { + z-index: 1; + } +} /**+ + + +Pull To Refresh
++ + + +-
+
+
- + Item: {{ item.text }} + + +
+ + - ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.itemOptionButtons.length).toBe(1); + expect(itemElement.find('.item-options').find('button').length).toBe(1); + })); + + it('Should have options cuz list option-buttons and no can-swipe false', inject(function ($timeout) { + $rootScope.optionButtons = [{text:'BUTTON'}]; + listElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.itemOptionButtons).toBe(undefined); + expect(itemElement.find('.item-options').length).toBe(0); + })); + + it('Should not have options cuz list can-swipe false', inject(function ($timeout) { + $rootScope.optionButtons = [{text:'BUTTON'}]; + listElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.itemOptionButtons).toBe(undefined); + expect(itemElement.find('.item-options').length).toBe(0); + })); + + it('Should be able to reorder cuz list can-reorder attribute false and item can-reorder true', inject(function ($timeout) { + listElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.reorderIconClass).toBe(undefined); + expect(itemElement.find('.item-drag').length).toBe(0); + })); + + it('Should be able to reorder cuz item can-reorder attribute true', inject(function ($timeout) { + itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.deleteClick).not.toBe(undefined);
+ expect(itemElement.find('.item-edit').length).toBe(1);
+
+ expect(itemScope.deleteIconClass).toBe("test-icon");
+ }));
+
+ it('Should not be able to reorder cuz no item or list can-reorder attribute true', inject(function ($timeout) {
+ itemElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.deleteClick).toBe(undefined);
+ expect(itemElement.find('.item-edit').length).toBe(0);
+ }));
+
+ it('Should show delete w/ no can-delete attribute but with list onDelete', inject(function ($timeout) {
+ $rootScope.onDelete = function() {};
+ listElement = angular.element('
- ').appendTo(listElement);
+ itemElement = $compile(itemElement)($rootScope);
+ $rootScope.$digest();
+ itemScope = itemElement.isolateScope();
+ expect(itemScope.deleteClick).toBe(undefined);
+ expect(itemElement.find('.item-edit').length).toBe(0);
+ }));
+
+ it('Should hide delete w/ list can-delete attribute false but with item onDelete', inject(function ($timeout) {
+ $rootScope.onDelete = function() {};
+ listElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.deleteClick).toBe(undefined); + expect(itemElement.find('.item-edit').length).toBe(0); + })); + + it('Should hide delete w/ item can-delete attribute false but with item onDelete', inject(function ($timeout) { + $rootScope.onDelete = function() {}; + itemElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + + expect(itemScope.itemOptionButtons).toBe(undefined); + })); + + it('Should have no option buttons by disabling list canSwipe', inject(function ($timeout) { + $rootScope.buttons = [ + { text: 'Edit' }, { text: 'Cancel' } + ]; + + listElement = angular.element('
- ').appendTo(listElement); + itemElement = $compile(itemElement)($rootScope); + $rootScope.$digest(); + itemScope = itemElement.isolateScope(); + expect(itemScope.optionButtons()).toBe(undefined); + expect(itemScope.itemOptionButtons).toBe(undefined); + expect(itemElement.find('.item-options').length).toBe(0); + + $rootScope.buttons = [ + { text: 'Edit' }, { text: 'Cancel' } + ]; + itemElement = angular.element('
- ').appendTo(listElement); + itemElement = _$compile_(itemElement)($rootScope); $rootScope.$digest(); - scope = element.isolateScope(); + itemScope = itemElement.isolateScope(); })); - it('Should show options when the list is not in edit mode', inject(function ($timeout) { - scope.canSwipe = true; + it('Should set item type from item attribute', inject(function ($timeout) { + itemElement = angular.element('
- ' +
- '
- ')(scope);
+ expect(element.hasClass('my-animation')).toBe(true);
+ });
- beforeEach(module('ionic.ui.list'));
+ it('Should add list-editing class', function() {
+ expect(listElement.hasClass('list-editing')).toBe(false);
+ scope.showDelete = true;
+ scope.$digest();
+ expect(listElement.hasClass('list-editing')).toBe(true);
+ });
- beforeEach(inject(function (_$compile_, _$rootScope_) {
- $rootScope = _$rootScope_;
- $rootScope.isEditing = false;
+ it('Should add list-reordering class', function() {
+ expect(listElement.hasClass('list-reordering')).toBe(false);
+ scope.showReorder = true;
+ scope.$digest();
+ expect(listElement.hasClass('list-reordering')).toBe(true);
+ });
- var list = angular.element('
- ');
- list = _$compile_(list)($rootScope);
-
- listCtrl = list.controller('list');
-
- $rootScope.buttons = [];
-
- element = angular.element('
- ');
- list = _$compile_(list)($rootScope);
+ listElement = angular.element('
- ');
+ listElement = _$compile_(listElement)($rootScope);
+ listScope = listElement.isolateScope();
- listCtrl = list.controller('list');
+ listCtrl = listElement.controller('list');
- $rootScope.buttons = [];
-
- element = angular.element('