Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

fix(list): Copy md-icon.md-secondary attributes to button. #5716

Closed
wants to merge 1 commit into from
Closed

fix(list): Copy md-icon.md-secondary attributes to button. #5716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions src/components/list/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,14 +136,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
tEl.addClass('md-proxy-focus');
} else {
container = angular.element('<md-button class="md-no-style"><div class="md-list-item-inner"></div></md-button>');
var copiedAttrs = ['ng-click', 'aria-label', 'ng-disabled',
'ui-sref', 'href', 'ng-href', 'ng-attr-ui-sref'];
angular.forEach(copiedAttrs, function(attr) {
if (tEl[0].hasAttribute(attr)) {
container[0].setAttribute(attr, tEl[0].getAttribute(attr));
tEl[0].removeAttribute(attr);
}
});
copyAttributes(tEl[0], container[0]);
container.children().eq(0).append(tEl.contents());
}

Expand All @@ -153,8 +146,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
if (secondaryItem && !isButton(secondaryItem) && secondaryItem.hasAttribute('ng-click')) {
$mdAria.expect(secondaryItem, 'aria-label');
var buttonWrapper = angular.element('<md-button class="md-secondary-container md-icon-button">');
buttonWrapper.attr('ng-click', secondaryItem.getAttribute('ng-click'));
secondaryItem.removeAttribute('ng-click');
copyAttributes(secondaryItem, buttonWrapper[0]);
secondaryItem.setAttribute('tabindex', '-1');
secondaryItem.classList.remove('md-secondary');
buttonWrapper.append(secondaryItem);
Expand All @@ -172,6 +164,17 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
}
}

function copyAttributes(item, wrapper) {
var copiedAttrs = ['ng-click', 'aria-label', 'ng-disabled',
'ui-sref', 'href', 'ng-href', 'ng-attr-ui-sref'];
angular.forEach(copiedAttrs, function(attr) {
if (item.hasAttribute(attr)) {
wrapper.setAttribute(attr, item.getAttribute(attr));
item.removeAttribute(attr);
}
});
}

function isProxiedElement(el) {
return proxiedTypes.indexOf(el.nodeName.toLowerCase()) != -1;
}
Expand Down
79 changes: 47 additions & 32 deletions src/components/list/list.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ describe('mdListItem directive', function() {
var $compile, $rootScope;

beforeEach(module('material.components.list', 'material.components.checkbox', 'material.components.switch'));
beforeEach(inject(function(_$compile_, _$rootScope_){
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
Expand All @@ -26,16 +26,16 @@ describe('mdListItem directive', function() {
return el;
}

it('supports empty list items',function() {
it('supports empty list items', function() {
var list = setup('\
<md-list>\
<md-list-item></md-list-item>\
</md-list>'
);
);

var cntr = list[0].querySelector('div');

if (cntr && cntr.click ) {
if (cntr && cntr.click) {
cntr.click();
expect($rootScope.modelVal).toBe(false);
}
Expand All @@ -46,7 +46,7 @@ describe('mdListItem directive', function() {
var listItem = setup('<md-list-item><md-checkbox ng-model="modelVal"></md-checkbox></md-list-item>');
var cntr = listItem[0].querySelector('div');

if (cntr && cntr.click ) {
if (cntr && cntr.click) {
cntr.click();
expect($rootScope.modelVal).toBe(true);
}
Expand All @@ -57,48 +57,48 @@ describe('mdListItem directive', function() {
var listItem = setup('<md-list-item><md-switch ng-model="modelVal"></md-switch></md-list-item>');
var cntr = listItem[0].querySelector('div');

if (cntr && cntr.click ) {
if (cntr && cntr.click) {
cntr.click();
expect($rootScope.modelVal).toBe(true);
}

});

it('should convert spacebar keypress events as clicks', inject(function($mdConstant) {
var listItem = setup('<md-list-item><md-checkbox ng-model="modelVal"></md-checkbox></md-list-item>');
var checkbox = angular.element(listItem[0].querySelector('md-checkbox'));

expect($rootScope.modelVal).toBeFalsy();
checkbox.triggerHandler({
type: 'keypress',
keyCode: $mdConstant.KEY_CODE.SPACE
});
expect($rootScope.modelVal).toBe(true);
var listItem = setup('<md-list-item><md-checkbox ng-model="modelVal"></md-checkbox></md-list-item>');
var checkbox = angular.element(listItem[0].querySelector('md-checkbox'));

expect($rootScope.modelVal).toBeFalsy();
checkbox.triggerHandler({
type: 'keypress',
keyCode: $mdConstant.KEY_CODE.SPACE
});
expect($rootScope.modelVal).toBe(true);
}));

it('should not convert spacebar keypress for text areas', inject(function($mdConstant) {
var listItem = setup('<md-list-item><textarea ng-model="modelVal"></md-list-item>');
var inputEl = angular.element(listItem[0].querySelector('textarea')[0]);

expect($rootScope.modelVal).toBeFalsy();
inputEl.triggerHandler({
type: 'keypress',
keyCode: $mdConstant.KEY_CODE.SPACE
});
expect($rootScope.modelVal).toBeFalsy();
var listItem = setup('<md-list-item><textarea ng-model="modelVal"></md-list-item>');
var inputEl = angular.element(listItem[0].querySelector('textarea')[0]);

expect($rootScope.modelVal).toBeFalsy();
inputEl.triggerHandler({
type: 'keypress',
keyCode: $mdConstant.KEY_CODE.SPACE
});
expect($rootScope.modelVal).toBeFalsy();
}));

xit('should not convert spacebar keypress for text inputs', inject(function($mdConstant) {

var listItem = setup('<md-list-item><input ng-keypress="pressed = true" type="text"></md-list-item>');
var inputEl = angular.element(listItem[0].querySelector('input')[0]);
var listItem = setup('<md-list-item><input ng-keypress="pressed = true" type="text"></md-list-item>');
var inputEl = angular.element(listItem[0].querySelector('input')[0]);

expect($rootScope.pressed).toBeFalsy();
inputEl.triggerHandler({
type: 'keypress',
keyCode: $mdConstant.KEY_CODE.SPACE
});
expect($rootScope.pressed).toBe(true);
expect($rootScope.pressed).toBeFalsy();
inputEl.triggerHandler({
type: 'keypress',
keyCode: $mdConstant.KEY_CODE.SPACE
});
expect($rootScope.pressed).toBe(true);
}));


Expand Down Expand Up @@ -157,6 +157,21 @@ describe('mdListItem directive', function() {
expect(listItem.hasClass('md-no-proxy')).toBeTruthy();
});

it('should copy md-icon.md-secondary attributes to the button', function() {
var listItem = setup(
'<md-list-item>' +
' <div>Content Here</div>' +
' <md-checkbox></md-checkbox>' +
' <md-icon class="md-secondary" ng-click="sayHello()" ng-disabled="true">Hello</md-icon>' +
'</md-list-item>'
);

var button = listItem.find('md-button');

expect(button[0].hasAttribute('ng-click')).toBeTruthy();
expect(button[0].hasAttribute('ng-disabled')).toBeTruthy();
});

describe('with a clickable item', function() {

it('should wrap secondary icons in a md-button', function() {
Expand Down