');
+ container.append(tEl.contents());
+ tEl.addClass('md-proxy-focus');
+ } else {
+ // Element which holds the default list-item content.
+ container = angular.element('
');
+
+ // Button which shows ripple and executes primary action.
+ var buttonWrap = angular.element('
');
+ buttonWrap[0].setAttribute('aria-label', tEl[0].textContent);
+ copyAttributes(tEl[0], buttonWrap[0]);
+
+ // Append the button wrap before our list-item content, because it will overlay in relative.
+ container.prepend(buttonWrap);
+ container.children().eq(1).append(tEl.contents());
+
+ tEl.addClass('md-button-wrap');
+ }
+
+ tEl[0].setAttribute('tabindex', '-1');
+ tEl.append(container);
+ }
+
+ function wrapSecondaryItems() {
+ if (secondaryItems.length === 1) {
+ wrapSecondaryItem(secondaryItems[0], tEl);
+ } else if (secondaryItems.length > 1) {
+ var secondaryItemsWrapper = angular.element('
');
+ angular.forEach(secondaryItems, function(secondaryItem) {
+ wrapSecondaryItem(secondaryItem, secondaryItemsWrapper, true);
+ });
+ tEl.append(secondaryItemsWrapper);
+ }
+ }
+
+ function wrapSecondaryItem(secondaryItem, container, hasSecondaryItemsWrapper) {
+ if (secondaryItem && !isButton(secondaryItem) && secondaryItem.hasAttribute('ng-click')) {
+ $mdAria.expect(secondaryItem, 'aria-label');
+ var buttonWrapper;
+ if (hasSecondaryItemsWrapper) {
+ buttonWrapper = angular.element('');
+ } else {
+ buttonWrapper = angular.element('');
+ }
+ copyAttributes(secondaryItem, buttonWrapper[0]);
+ secondaryItem.setAttribute('tabindex', '-1');
+ secondaryItem.classList.remove('md-secondary');
+ buttonWrapper.append(secondaryItem);
+ secondaryItem = buttonWrapper[0];
+ }
+
+ // Check for a secondary item and move it outside
+ if ( secondaryItem && (
+ secondaryItem.hasAttribute('ng-click') ||
+ ( tAttrs.ngClick &&
+ isProxiedElement(secondaryItem) )
+ )) {
+ // When using multiple secondary items we need to remove their secondary class to be
+ // orderd correctly in the list-item
+ if (hasSecondaryItemsWrapper) {
+ secondaryItem.classList.remove('md-secondary');
+ }
+ tEl.addClass('md-with-secondary');
+ container.append(secondaryItem);
+ }
+ }
+
+ function copyAttributes(item, wrapper) {
+ var copiedAttrs = ['ng-if', '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;
+ }
+
+ function isButton(el) {
+ var nodeName = el.nodeName.toUpperCase();
+
+ return nodeName == "MD-BUTTON" || nodeName == "BUTTON";
+ }
+
+ return postLink;
+
+ function postLink($scope, $element, $attr, ctrl) {
+
+ var proxies = [],
+ firstChild = $element[0].firstElementChild,
+ hasClick = firstChild && hasClickEvent(firstChild);
+
+ computeProxies();
+ computeClickable();
+
+ if ($element.hasClass('md-proxy-focus') && 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 hasClickEvent (element) {
+ var attr = element.attributes;
+ for (var i = 0; i < attr.length; i++) {
+ if ($attr.$normalize(attr[i].name) === 'ngClick') return true;
+ }
+ return false;
+ }
+
+ function computeProxies() {
+ var children = $element.children();
+ if (children.length && !children[0].hasAttribute('ng-click')) {
+ angular.forEach(proxiedTypes, function(type) {
+ angular.forEach(firstChild.querySelectorAll(type), 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')));
+ }
+ }
+ }
+
+ if (!hasClick && !proxies.length) {
+ firstChild && firstChild.addEventListener('keypress', function(e) {
+ if (e.target.nodeName != 'INPUT' && e.target.nodeName != 'TEXTAREA') {
+ var keyCode = e.which || e.keyCode;
+ if (keyCode == $mdConstant.KEY_CODE.SPACE) {
+ if (firstChild) {
+ firstChild.click();
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ }
+ }
+ });
+ }
+
+ $element.off('click');
+ $element.off('keypress');
+
+ if (proxies.length == 1 && firstChild) {
+ $element.children().eq(0).on('click', function(e) {
+ var parentButton = $mdUtil.getClosest(e.target, 'BUTTON');
+ if (!parentButton && firstChild.contains(e.target)) {
+ angular.forEach(proxies, function(proxy) {
+ if (e.target !== proxy && !proxy.contains(e.target)) {
+ angular.element(proxy).triggerHandler('click');
+ }
+ });
+ }
+ });
+ }
+ }
}
};
}
+
+/*
+ * @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);
+ }
+}
+
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
new file mode 100644
index 0000000000..4290f34f11
--- /dev/null
+++ b/src/components/list/list.scss
@@ -0,0 +1,299 @@
+$list-h3-margin: 0 0 0px 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: 12 * $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;
+
+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-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;
+
+ > .md-button:first-child {
+ padding: 0;
+ margin: 0;
+ font-weight: 400;
+ background-color: inherit;
+ text-align: left;
+ border: medium none;
+
+ > .md-button:first-child {
+ height: 100%;
+ position: absolute;
+ margin: 0;
+ padding: 0;
+ }
+
+ .md-list-item-inner {
+ padding: 0 16px;
+ }
+
+ }
+
+ }
+
+ &.md-no-proxy,
+ .md-no-style {
+ position: relative;
+ padding: $list-item-padding-vertical $list-item-padding-horizontal;
+ flex: 1 1 auto;
+
+ &.md-button {
+ font-size: inherit;
+ height: inherit;
+ text-align: left;
+ text-transform: none;
+ width: 100%;
+ white-space: normal;
+ flex-direction: inherit;
+ align-items: inherit;
+ border-radius: 0;
+
+ & > .md-ripple-container {
+ border-radius: 0;
+ }
+ }
+ &:focus {
+ outline: none
+ }
+ }
+ &.md-with-secondary {
+ position: relative;
+ }
+ &.md-clickable:hover {
+ cursor: pointer;
+ }
+
+ md-divider {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ &[md-inset] {
+ left: $list-item-inset-divider-offset;
+ width: calc(100% - #{$list-item-inset-divider-offset});
+ margin: 0;
+ }
+ }
+}
+
+md-list-item, md-list-item .md-list-item-inner {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ min-height: $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) {
+ margin-right: $list-item-primary-width - $list-item-primary-icon-width;
+ }
+ & > md-checkbox {
+ width: 3 * $baseline-grid;
+ margin-left: 3px;
+ margin-right: 29px;
+ margin-top: 16px;
+ }
+ & .md-avatar, .md-avatar-icon {
+ margin-top: $baseline-grid;
+ margin-bottom: $baseline-grid;
+ margin-right: $list-item-primary-width - $list-item-primary-avatar-width;
+ border-radius: 50%;
+ box-sizing: content-box;
+ }
+ & .md-avatar {
+ width: $list-item-primary-avatar-width;
+ height: $list-item-primary-avatar-width;
+ }
+ & .md-avatar-icon {
+ padding: 8px;
+ }
+
+ md-checkbox.md-secondary,
+ md-switch.md-secondary {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ md-checkbox.md-secondary {
+ margin-right: 0;
+ }
+
+ md-switch.md-secondary {
+ margin-right: -6px;
+ }
+
+ button.md-button.md-secondary-container {
+ background-color: transparent;
+ align-self: center;
+ border-radius: 50%;
+ margin: 0px;
+ min-width: 0px;
+ .md-ripple,
+ .md-ripple-container {
+ border-radius: 50%;
+ }
+
+ &.md-icon-button {
+ // Make icon buttons align with checkboxes and other controls
+ margin-right: -12px;
+ }
+ }
+
+ .md-secondary-container,
+ .md-secondary {
+ position: absolute;
+ top: 50%;
+ right: $list-item-padding-horizontal;
+ margin: 0 0 0 $list-item-secondary-left-margin;
+ transform: translate3d(0, -50%, 0);
+ }
+
+ & > .md-button.md-secondary-container > .md-secondary {
+ margin-left: 0;
+ position: static;
+ }
+
+ & > p, & > .md-list-item-inner > p {
+ flex: 1;
+ margin: 0;
+ }
+}
+
+
+md-list-item.md-2-line,
+md-list-item.md-2-line > .md-no-style,
+md-list-item.md-3-line,
+md-list-item.md-3-line > .md-no-style {
+ align-items: flex-start;
+ justify-content: center;
+
+ .md-list-item-text {
+ flex: 1;
+ margin: auto;
+ text-overflow: ellipsis;
+
+ &.md-offset {
+ margin-left: $list-item-primary-width;
+ }
+
+ 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-list-item.md-2-line,
+md-list-item.md-2-line > .md-no-style {
+ height:auto;
+ min-height: $list-item-two-line-height;
+ &.md-long-text {
+ margin:1.6em;
+ }
+
+ > .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;
+ }
+}
+
+md-list-item.md-3-line,
+md-list-item.md-3-line > .md-no-style {
+ height:auto;
+ min-height: $list-item-three-line-height;
+
+ &.md-long-text {
+ margin:1.6em;
+ }
+
+ > md-icon:first-child,
+ > .md-avatar {
+ margin-top: $baseline-grid * 2;
+ }
+}
diff --git a/src/components/list/list.spec.js b/src/components/list/list.spec.js
index 6bc0fa793d..1d5066555e 100644
--- a/src/components/list/list.spec.js
+++ b/src/components/list/list.spec.js
@@ -1,11 +1,251 @@
-describe('mdList directive', function() {
- function setup(attrs) {
- module('material.components.list');
+describe('mdListItem directive', function() {
+ var attachedElements = [];
+ var $compile, $rootScope;
+
+ beforeEach(module('material.components.list', 'material.components.checkbox', 'material.components.switch'));
+ 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('')($rootScope.$new());
+ el = $compile(html)($rootScope);
$rootScope.$apply();
});
+ attachedElements.push(el);
+
return el;
}
+
+ it('supports empty list items', function() {
+ var list = setup('\
+ \
+ \
+ '
+ );
+
+ var cntr = list[0].querySelector('div');
+
+ if (cntr && cntr.click) {
+ cntr.click();
+ expect($rootScope.modelVal).toBe(false);
+ }
+
+ });
+
+ it('forwards click events for md-checkbox', function() {
+ var listItem = setup('');
+ var cntr = listItem[0].querySelector('div');
+
+ if (cntr && cntr.click) {
+ cntr.click();
+ expect($rootScope.modelVal).toBe(true);
+ }
+
+ });
+
+ it('forwards click events for md-switch', function() {
+ var listItem = setup('');
+ var cntr = listItem[0].querySelector('div');
+
+ 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('');
+ 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('