` and create
* an overlaying button, which will will execute the given actions (like `ng-href`, `ng-click`).
*
* We create an overlaying button, instead of wrapping all content inside of the button,
* because otherwise some elements may not be clickable inside of the button.
*
* ---
* When using a secondary item inside of your list item, the `md-list-item` component will
* automatically create a secondary container at the end of the `md-list-item`, which contains all
* secondary items.
*
* The secondary item container is not static, because that would cause issues with the overflow
* of the list item.
*/
function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
var proxiedTypes = ['md-checkbox', 'md-switch', 'md-menu'];
return {
restrict: 'E',
controller: 'MdListController',
compile: function(tElement, tAttrs) {
// Check for proxy controls (no ng-click on parent, and a control inside)
var secondaryItems = tElement[0].querySelectorAll('.md-secondary');
var hasProxiedElement;
var proxyElement;
var itemContainer = tElement;
tElement[0].setAttribute('role', 'listitem');
if (tAttrs.ngClick || tAttrs.ngDblclick || tAttrs.ngHref || tAttrs.href || tAttrs.uiSref || tAttrs.ngAttrUiSref) {
wrapIn('button');
} else if (!tElement.hasClass('md-no-proxy')) {
for (var i = 0, type; i < proxiedTypes.length; ++i) {
proxyElement = tElement[0].querySelector(proxiedTypes[i]);
if (proxyElement !== null) {
hasProxiedElement = true;
break;
}
}
if (hasProxiedElement) {
wrapIn('div');
} else {
tElement.addClass('md-no-proxy');
}
}
wrapSecondaryItems();
setupToggleAria();
if (hasProxiedElement && proxyElement.nodeName === "MD-MENU") {
setupProxiedMenu();
}
function setupToggleAria() {
var toggleTypes = ['md-switch', 'md-checkbox'];
var toggle;
for (var i = 0, toggleType; i < toggleTypes.length; ++i) {
toggle = tElement.find(toggleTypes[i])[0];
if (toggle) {
if (!toggle.hasAttribute('aria-label')) {
var labelElement = tElement.find('p')[0];
if (!labelElement) {
labelElement = tElement.find('span')[0];
}
if (!labelElement) return;
toggle.setAttribute('aria-label', 'Toggle ' + labelElement.textContent);
}
}
}
}
function setupProxiedMenu() {
var menuEl = angular.element(proxyElement);
var isEndAligned = menuEl.parent().hasClass('md-secondary-container') ||
proxyElement.parentNode.firstElementChild !== proxyElement;
var xAxisPosition = 'left';
if (isEndAligned) {
// When the proxy item is aligned at the end of the list, we have to set the origin to the end.
xAxisPosition = 'right';
}
// Set the position mode / origin of the proxied menu.
if (!menuEl.attr('md-position-mode')) {
menuEl.attr('md-position-mode', xAxisPosition + ' target');
}
// Apply menu open binding to menu button
var menuOpenButton = menuEl.children().eq(0);
if (!hasClickEvent(menuOpenButton[0])) {
menuOpenButton.attr('ng-click', '$mdMenu.open($event)');
}
if (!menuOpenButton.attr('aria-label')) {
menuOpenButton.attr('aria-label', 'Open List Menu');
}
}
/**
* @param {'div'|'button'} type
*/
function wrapIn(type) {
if (type === 'div') {
itemContainer = angular.element('
');
itemContainer.append(tElement.contents());
tElement.addClass('md-proxy-focus');
} else {
// Element which holds the default list-item content.
itemContainer = angular.element(
'
'
);
// Button which shows ripple and executes primary action.
var buttonWrap = angular.element('
');
moveAttributes(tElement[0], buttonWrap[0]);
// If there is no aria-label set on the button (previously copied over if present)
// we determine the label from the content and copy it to the button.
if (!buttonWrap.attr('aria-label')) {
buttonWrap.attr('aria-label', $mdAria.getText(tElement));
// If we set the button's aria-label to the text content, then make the content hidden
// from screen readers so that it isn't read/traversed twice.
var listItemInner = itemContainer[0].querySelector('.md-list-item-inner');
if (listItemInner) {
listItemInner.setAttribute('aria-hidden', 'true');
}
}
// We allow developers to specify the `md-no-focus` class, to disable the focus style
// on the button executor. Once more classes should be forwarded, we should probably make
// the class forward more generic.
if (tElement.hasClass('md-no-focus')) {
buttonWrap.addClass('md-no-focus');
}
// Append the button wrap before our list-item content, because it will overlay in
// relative.
itemContainer.prepend(buttonWrap);
itemContainer.children().eq(1).append(tElement.contents());
tElement.addClass('_md-button-wrap');
}
tElement[0].setAttribute('tabindex', '-1');
tElement.append(itemContainer);
}
function wrapSecondaryItems() {
var secondaryItemsWrapper = angular.element('
');
angular.forEach(secondaryItems, function(secondaryItem) {
wrapSecondaryItem(secondaryItem, secondaryItemsWrapper);
});
itemContainer.append(secondaryItemsWrapper);
}
/**
* @param {HTMLElement} secondaryItem
* @param {HTMLDivElement} container
*/
function wrapSecondaryItem(secondaryItem, container) {
// If the current secondary item is not a button, but contains a ng-click attribute,
// the secondary item will be automatically wrapped inside of a button.
if (secondaryItem && !isButton(secondaryItem) && secondaryItem.hasAttribute('ng-click')) {
$mdAria.expect(secondaryItem, 'aria-label');
var buttonWrapper = angular.element('');
// Move the attributes from the secondary item to the generated button.
// We also support some additional attributes from the secondary item,
// because some developers may use a ngIf, ngHide, ngShow on their item.
moveAttributes(secondaryItem, buttonWrapper[0], ['ng-if', 'ng-hide', 'ng-show']);
secondaryItem.setAttribute('tabindex', '-1');
buttonWrapper.append(secondaryItem);
secondaryItem = buttonWrapper[0];
}
if (secondaryItem &&
(!hasClickEvent(secondaryItem) ||
(!tAttrs.ngClick && isProxiedElement(secondaryItem)))) {
// In this case we remove the secondary class, so we can identify it later, when searching
// for the proxy items.
angular.element(secondaryItem).removeClass('md-secondary');
}
tElement.addClass('md-with-secondary');
container.append(secondaryItem);
}
/**
* Moves attributes from a source element to the destination element.
* By default, the function will copy the most necessary attributes, supported
* by the button executor for clickable list items.
* @param {Element} source Element with the specified attributes
* @param {Element} destination Element which will receive the attributes
* @param {string|string[]} extraAttrs Additional attributes, which will be moved over
*/
function moveAttributes(source, destination, extraAttrs) {
var copiedAttrs = $mdUtil.prefixer([
'ng-if', 'ng-click', 'ng-dblclick', 'aria-label', 'ng-disabled', 'ui-sref',
'href', 'ng-href', 'rel', 'target', 'ng-attr-ui-sref', 'ui-sref-opts', 'download'
]);
if (extraAttrs) {
copiedAttrs = copiedAttrs.concat($mdUtil.prefixer(extraAttrs));
}
angular.forEach(copiedAttrs, function(attr) {
if (source.hasAttribute(attr)) {
destination.setAttribute(attr, source.getAttribute(attr));
source.removeAttribute(attr);
}
});
}
/**
* @param {HTMLElement} element
* @return {boolean} true if the element has one of the proxied tags, false otherwise
*/
function isProxiedElement(element) {
return proxiedTypes.indexOf(element.nodeName.toLowerCase()) !== -1;
}
/**
* @param {HTMLElement} element
* @return {boolean} true if the element is a button or md-button, false otherwise
*/
function isButton(element) {
var nodeName = element.nodeName.toUpperCase();
return nodeName === "MD-BUTTON" || nodeName === "BUTTON";
}
/**
* @param {Element} element
* @return {boolean} true if the element has an ng-click attribute, false otherwise
*/
function hasClickEvent(element) {
var attr = element.attributes;
for (var i = 0; i < attr.length; i++) {
if (tAttrs.$normalize(attr[i].name) === 'ngClick') {
return true;
}
}
return false;
}
return postLink;
function postLink($scope, $element, $attr, ctrl) {
$element.addClass('_md'); // private md component indicator for styling
var proxies = [],
firstElement = $element[0].firstElementChild,
isButtonWrap = $element.hasClass('_md-button-wrap'),
clickChild = isButtonWrap ? firstElement.firstElementChild : firstElement,
hasClick = clickChild && hasClickEvent(clickChild),
noProxies = $element.hasClass('md-no-proxy');
computeProxies();
computeClickable();
if (proxies.length) {
angular.forEach(proxies, function(proxy) {
proxy = angular.element(proxy);
$scope.mouseActive = false;
proxy.on('mousedown', function() {
$scope.mouseActive = true;
$timeout(function() {
$scope.mouseActive = false;
}, 100);
})
.on('focus', function() {
if ($scope.mouseActive === false) { $element.addClass('md-focused'); }
proxy.on('blur', function proxyOnBlur() {
$element.removeClass('md-focused');
proxy.off('blur', proxyOnBlur);
});
});
});
}
function computeProxies() {
if (firstElement && firstElement.children && !hasClick && !noProxies) {
angular.forEach(proxiedTypes, function(type) {
// All elements which are not capable of being used as a proxy have the .md-secondary
// class applied. These items were identified in the secondary wrap function.
angular.forEach(firstElement.querySelectorAll(type + ':not(.md-secondary)'), function(child) {
proxies.push(child);
});
});
}
}
function computeClickable() {
if (proxies.length === 1 || hasClick) {
$element.addClass('md-clickable');
if (!hasClick) {
ctrl.attachRipple($scope, angular.element($element[0].querySelector('.md-no-style')));
}
}
}
/**
* @param {MouseEvent} event
* @return {boolean}
*/
function isEventFromControl(event) {
var forbiddenControls = ['md-slider'];
var eventBubblePath = $mdUtil.getEventPath(event);
// If there is no bubble path, then the event was not bubbled.
if (!eventBubblePath || eventBubblePath.length === 0) {
return forbiddenControls.indexOf(event.target.tagName.toLowerCase()) !== -1;
}
// We iterate the event bubble path up and check for a possible component.
// Our maximum index to search, is the list item root.
var maxPath = eventBubblePath.indexOf($element.children()[0]);
for (var i = 0; i < maxPath; i++) {
if (forbiddenControls.indexOf(eventBubblePath[i].tagName.toLowerCase()) !== -1) {
return true;
}
}
return false;
}
/**
* @param {KeyboardEvent} keypressEvent
*/
var clickChildKeypressListener = function(keypressEvent) {
if (keypressEvent.target.nodeName !== 'INPUT' &&
keypressEvent.target.nodeName !== 'TEXTAREA' &&
!keypressEvent.target.isContentEditable) {
var keyCode = keypressEvent.which || keypressEvent.keyCode;
if (keyCode === $mdConstant.KEY_CODE.SPACE) {
if (clickChild) {
clickChild.click();
keypressEvent.preventDefault();
keypressEvent.stopPropagation();
}
}
}
};
if (!hasClick && !proxies.length) {
clickChild && clickChild.addEventListener('keypress', clickChildKeypressListener);
}
$element.off('click');
$element.off('keypress');
// Disable ng-aria's "helpful" keydown event that causes our ng-click handlers to be called
// twice.
$element.off('keydown');
if (proxies.length === 1 && clickChild) {
$element.children().eq(0).on('click', function(clickEvent) {
// When the event is coming from a control and it should not trigger the proxied element
// then we are skipping.
if (isEventFromControl(clickEvent)) return;
var parentButton = $mdUtil.getClosest(clickEvent.target, 'BUTTON');
if (!parentButton && clickChild.contains(clickEvent.target)) {
angular.forEach(proxies, function(proxy) {
if (clickEvent.target !== proxy && !proxy.contains(clickEvent.target)) {
if (proxy.nodeName === 'MD-MENU') {
proxy = proxy.children[0];
}
angular.element(proxy).triggerHandler('click');
}
});
}
});
}
$scope.$on('$destroy', function () {
clickChild && clickChild.removeEventListener('keypress', clickChildKeypressListener);
});
}
}
};
}
/*
* @private
* @ngdoc controller
* @name MdListController
* @module material.components.list
*/
function MdListController($scope, $element, $mdListInkRipple) {
var ctrl = this;
ctrl.attachRipple = attachRipple;
function attachRipple (scope, element) {
var options = {};
$mdListInkRipple.attach(scope, element, options);
}
}
================================================
FILE: src/components/list/list.scss
================================================
$dense-baseline-grid: $baseline-grid * 0.5 !default;
$list-h3-margin: 0 0 0 0 !default;
$list-h4-margin: 3px 0 1px 0 !default;
$list-h4-font-weight: 400 !default;
$list-header-line-height: 1.2em !default;
$list-p-margin: 0 0 0 0 !default;
$list-p-line-height: 1.6em !default;
$list-padding-top: $baseline-grid !default;
$list-padding-right: 0px !default;
$list-padding-left: 0px !default;
$list-padding-bottom: $baseline-grid !default;
$item-padding-top: 0px !default;
$item-padding-right: 0px !default;
$item-padding-left: 0px !default;
$item-padding-bottom: 0px !default;
$list-item-padding-vertical: 0px !default;
$list-item-padding-horizontal: $baseline-grid * 2 !default;
$list-item-primary-width: $baseline-grid * 7 !default;
$list-item-primary-avatar-width: $baseline-grid * 5 !default;
$list-item-primary-icon-width: $baseline-grid * 3 !default;
$list-item-secondary-left-margin: $baseline-grid * 2 !default;
$list-item-secondary-button-width: $baseline-grid * 6 !default;
$list-item-inset-divider-offset: 9 * $baseline-grid !default;
$list-item-height: 6 * $baseline-grid !default;
$list-item-two-line-height: 9 * $baseline-grid !default;
$list-item-three-line-height: 11 * $baseline-grid !default;
$list-item-dense-height: 10 * $dense-baseline-grid !default;
$list-item-dense-two-line-height: 15 * $dense-baseline-grid !default;
$list-item-dense-three-line-height: 19 * $dense-baseline-grid !default;
$list-item-dense-primary-icon-width: $dense-baseline-grid * 5 !default;
$list-item-dense-primary-avatar-width: $dense-baseline-grid * 9 !default;
$list-item-dense-header-font-size: round($subhead-font-size-base * 0.8) !default;
$list-item-dense-font-size: round($body-font-size-base * 0.85) !default;
$list-item-dense-line-height: 1.05 !default;
md-list {
display: block;
padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
.md-subheader {
font-size: $body-font-size-base;
font-weight: 500;
letter-spacing: 0.010em;
line-height: $list-header-line-height;
}
&.md-dense:not(.md-dense-disabled) {
md-list-item {
&,
.md-list-item-inner {
min-height: $list-item-dense-height;
@include ie11-min-height-flexbug($list-item-dense-height);
// Layout for controls in primary or secondary divs, or auto-inferred first child
md-icon:first-child {
width: $list-item-dense-primary-icon-width;
height: $list-item-dense-primary-icon-width;
}
> md-icon:first-child:not(.md-avatar-icon) {
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-icon-width, auto);
margin-top: $dense-baseline-grid;
margin-bottom: $dense-baseline-grid;
}
.md-avatar, .md-avatar-icon {
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-avatar-width, auto);
margin-top: $dense-baseline-grid + 2px;
margin-bottom: $dense-baseline-grid + 2px;
}
.md-avatar {
flex: none;
width: $list-item-dense-primary-avatar-width;
height: $list-item-dense-primary-avatar-width;
}
.md-secondary-container {
.md-secondary.md-button {
margin-top: $dense-baseline-grid;
margin-bottom: $dense-baseline-grid;
}
md-checkbox:not(.md-dense-disabled) {
min-height: $icon-button-height;
}
}
}
&.md-2-line,
&.md-3-line {
&, & > .md-no-style {
.md-list-item-text {
&.md-offset {
@include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);
}
h3,
h4,
p {
line-height: $list-item-dense-line-height;
font-size: $list-item-dense-font-size;
padding-bottom: 4px;
}
h3 {
font-size: $list-item-dense-header-font-size;
}
}
}
}
&.md-2-line {
&, & > .md-no-style {
min-height: $list-item-dense-two-line-height;
@include ie11-min-height-flexbug($list-item-dense-two-line-height);
> .md-avatar, .md-avatar-icon {
margin-top: $baseline-grid * 1.5;
}
}
}
&.md-3-line {
&, & > .md-no-style {
min-height: $list-item-dense-three-line-height;
@include ie11-min-height-flexbug($list-item-dense-three-line-height);
> md-icon:first-child,
> .md-avatar {
margin-top: $baseline-grid * 2;
}
}
}
}
.md-subheader-inner {
padding-top: $dense-baseline-grid * 3;
padding-bottom: $dense-baseline-grid * 3;
}
}
}
md-list-item {
// Ensure nested dividers are properly positioned
position: relative;
&.md-proxy-focus.md-focused .md-no-style {
transition: background-color 0.15s linear;
}
&._md-button-wrap {
position: relative;
> div.md-button:first-child {
// Layout - Vertically align the item content.
display: flex;
align-items: center;
justify-content: flex-start;
padding: $list-item-padding-vertical $list-item-padding-horizontal;
margin: 0;
font-weight: 400;
@include rtl(text-align, left, right);
border: medium none;
// The button executor should fill the whole list item.
> .md-button:first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
margin: 0;
padding: 0;
}
.md-list-item-inner {
// The list item content should fill the complete width.
width: 100%;
@include ie11-min-height-flexbug(inherit);
}
}
}
&.md-no-proxy,
.md-no-style {
position: relative;
padding: $list-item-padding-vertical $list-item-padding-horizontal;
// Layout [flex='auto']
flex: 1 1 auto;
&.md-button {
font-size: inherit;
height: inherit;
@include rtl(text-align, left, right);
text-transform: none;
width: 100%;
white-space: normal;
flex-direction: inherit;
align-items: inherit;
border-radius: 0;
margin: 0;
& > .md-ripple-container {
border-radius: 0;
}
}
&:focus {
outline: none
}
}
&.md-clickable:hover {
cursor: pointer;
}
md-divider {
position: absolute;
bottom: 0;
@include rtl-prop(left, right, 0, auto);
width: 100%;
&[md-inset] {
@include rtl-prop(left, right, $list-item-inset-divider-offset, auto);
width: calc(100% - #{$list-item-inset-divider-offset});
margin: 0 !important;
}
}
&,
.md-list-item-inner {
// Layout [flex layout-align='start center']
display: flex;
justify-content: flex-start;
align-items: center;
min-height: $list-item-height;
@include ie11-min-height-flexbug($list-item-height);
height: auto;
// Layout for controls in primary or secondary divs, or auto-infered first child
& > div.md-primary > md-icon:not(.md-avatar-icon),
& > div.md-secondary > md-icon:not(.md-avatar-icon),
& > md-icon:first-child:not(.md-avatar-icon),
> md-icon.md-secondary:not(.md-avatar-icon) {
width: $list-item-primary-icon-width;
margin-top: 16px;
margin-bottom: 12px;
box-sizing: content-box;
}
& > div.md-primary > md-checkbox,
& > div.md-secondary > md-checkbox,
& > md-checkbox,
md-checkbox.md-secondary {
align-self: center;
.md-label {
display: none;
}
}
& > md-icon:first-child:not(.md-avatar-icon) {
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-icon-width, auto);
}
& .md-avatar, .md-avatar-icon {
margin-top: $baseline-grid;
margin-bottom: $baseline-grid;
@include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-avatar-width, auto);
border-radius: 50%;
box-sizing: content-box;
}
& .md-avatar {
flex: none;
width: $list-item-primary-avatar-width;
height: $list-item-primary-avatar-width;
}
& .md-avatar-icon {
padding: 8px;
// Set the width/height to the same as the icon to fix issue on iOS Safari where the
// height: 100% was causing it to be larger than it's parent
svg {
width: $icon-size;
height: $icon-size;
}
}
& > md-checkbox {
width: 3 * $baseline-grid;
min-height: $icon-button-height;
@include rtl(margin-left, 0px, 29px);
@include rtl(margin-right, 29px, 0px);
}
.md-secondary-container {
display: flex;
align-items: center;
// Ensure the secondary button is not behind the primary button if its template is provided by
// a directive.
position: relative;
// Per W3C: https://www.w3.org/TR/css-flexbox/#flex-common
// By default, flex items won’t shrink below their minimum content size.
// Safari doesn't follow that specification due to a bug and expects the developer to
// explicitly disable flex shrinking.
flex-shrink: 0;
// Using margin auto to move them to the end of the list item is more elegant, because it has
// a lower priority than a flex filler and isn't introducing any overflow issues.
// The margin on the top is important to align multiple secondary items vertically.
margin: auto;
@include rtl(margin-right, 0, auto);
@include rtl(margin-left, auto, 0);
.md-button, .md-icon-button {
&:last-of-type {
// Reset 6px margin for the button.
@include rtl-prop(margin-right, margin-left, 0, auto);
}
}
md-checkbox {
margin: 0 6px;
padding: 0 8px;
min-height: $icon-button-height;
&:last-child {
width: $icon-button-width;
@include rtl-prop(margin-right, margin-left, 0, auto);
}
}
md-switch {
margin-top: 0;
margin-bottom: 0;
@include rtl-prop(margin-right, margin-left, -6px, auto);
}
}
& > p, & > .md-list-item-inner > p {
flex: 1 1 auto;
margin: 0;
}
}
&.md-2-line,
&.md-3-line {
&, & > .md-no-style {
align-items: flex-start;
justify-content: center;
&.md-long-text {
margin-top: $baseline-grid;
margin-bottom: $baseline-grid;
}
.md-list-item-text {
flex: 1 1 auto;
margin: auto;
text-overflow: ellipsis;
overflow: hidden;
&.md-offset {
@include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);
}
h3 {
font-size: $subhead-font-size-base;
font-weight: 400;
letter-spacing: 0.010em;
margin: $list-h3-margin;
line-height: $list-header-line-height;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
h4 {
font-size: $body-font-size-base;
letter-spacing: 0.010em;
margin: $list-h4-margin;
font-weight: $list-h4-font-weight;
line-height: $list-header-line-height;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p {
font-size: $body-font-size-base;
font-weight: 500;
letter-spacing: 0.010em;
margin: $list-p-margin;
line-height: $list-p-line-height;
}
}
}
}
&.md-2-line {
&, & > .md-no-style {
height: auto;
min-height: $list-item-two-line-height;
@include ie11-min-height-flexbug($list-item-two-line-height);
> .md-avatar, .md-avatar-icon {
margin-top: $baseline-grid * 1.5;
}
> md-icon:first-child {
align-self: flex-start;
}
.md-list-item-text {
flex: 1 1 auto;
}
}
}
&.md-3-line {
&, & > .md-no-style {
height: auto;
min-height: $list-item-three-line-height;
@include ie11-min-height-flexbug($list-item-three-line-height);
> md-icon:first-child,
> .md-avatar {
margin-top: $baseline-grid * 2;
}
}
}
}
================================================
FILE: src/components/list/list.spec.js
================================================
describe('mdListItem directive', function() {
var attachedElements = [];
var $compile, $rootScope;
beforeEach(module(
'material.components.list',
'material.components.checkbox',
'material.components.switch',
'material.components.button'
));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
afterEach(function() {
attachedElements.forEach(function(element) {
element.remove();
});
attachedElements = [];
});
function setup(html) {
var el;
inject(function($compile, $rootScope) {
el = $compile(html)($rootScope);
$rootScope.$apply();
});
attachedElements.push(el);
return el;
}
describe('md-list-item', function() {
it('should have `._md` class indicator', inject(function($compile, $rootScope) {
var element = $compile('')($rootScope.$new());
expect(element.find('md-list-item').hasClass('_md')).toBe(true);
}));
});
it('forwards click events for md-checkbox', function() {
var listItem = setup(
'' +
'' +
'');
var cntr = listItem[0].querySelector('div');
cntr.click();
expect($rootScope.modelVal).toBe(true);
cntr.click();
expect($rootScope.modelVal).toBe(false);
});
it('forwards click events for md-switch', function() {
var listItem = setup(
'' +
'' +
'');
var cntr = listItem[0].querySelector('div');
cntr.click();
expect($rootScope.modelVal).toBe(true);
cntr.click();
expect($rootScope.modelVal).toBe(false);
});
it('should not wrap when proxies are disabled', function() {
var listItem = setup(
'' +
'' +
''
);
var switchEl = listItem[0].querySelector('md-switch');
// If proxies are disabled, the list will not wrap anything.
expect(switchEl.parentNode).toBe(listItem[0]);
listItem.triggerHandler('click');
expect($rootScope.modelVal).toBeFalsy();
switchEl.click();
expect($rootScope.modelVal).toBeTruthy();
expect(listItem).not.toHaveClass('md-clickable')
});
it('should not trigger the proxy element, when clicking on a slider', function() {
var listItem = setup(
'' +
'' +
'' +
'');
var slider = listItem.find('md-slider')[0];
slider.click();
expect($rootScope.modelVal).toBeFalsy();
});
it('should convert spacebar keypress events as clicks', inject(function($mdConstant) {
var listItem = setup(
'' +
'' +
'');
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(
'' +
'