list.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. goog.provide('ng.material.components.list');
  8. goog.require('ng.material.core');
  9. /**
  10. * @ngdoc module
  11. * @name material.components.list
  12. * @description
  13. * List module
  14. */
  15. angular.module('material.components.list', [
  16. 'material.core'
  17. ])
  18. .controller('MdListController', MdListController)
  19. .directive('mdList', mdListDirective)
  20. .directive('mdListItem', mdListItemDirective);
  21. /**
  22. * @ngdoc directive
  23. * @name mdList
  24. * @module material.components.list
  25. *
  26. * @restrict E
  27. *
  28. * @description
  29. * The `<md-list>` directive is a list container for 1..n `<md-list-item>` tags.
  30. *
  31. * @usage
  32. * <hljs lang="html">
  33. * <md-list>
  34. * <md-list-item class="md-2-line" ng-repeat="item in todos">
  35. * <md-checkbox ng-model="item.done"></md-checkbox>
  36. * <div class="md-list-item-text">
  37. * <h3>{{item.title}}</h3>
  38. * <p>{{item.description}}</p>
  39. * </div>
  40. * </md-list-item>
  41. * </md-list>
  42. * </hljs>
  43. */
  44. function mdListDirective($mdTheming) {
  45. return {
  46. restrict: 'E',
  47. compile: function(tEl) {
  48. tEl[0].setAttribute('role', 'list');
  49. return $mdTheming;
  50. }
  51. };
  52. }
  53. mdListDirective.$inject = ["$mdTheming"];
  54. /**
  55. * @ngdoc directive
  56. * @name mdListItem
  57. * @module material.components.list
  58. *
  59. * @restrict E
  60. *
  61. * @description
  62. * The `<md-list-item>` directive is a container intended for row items in a `<md-list>` container.
  63. *
  64. * ## CSS
  65. * `.md-avatar` - class for image avatars
  66. *
  67. * `.md-avatar-icon` - class for icon avatars
  68. *
  69. * `.md-offset` - on content without an avatar
  70. *
  71. * @usage
  72. * <hljs lang="html">
  73. * <md-list>
  74. * <md-list-item>
  75. * <img class="md-avatar" ng-src="path/to/img"/>
  76. * <span>Item content in list</span>
  77. * </md-list-item>
  78. * <md-list-item>
  79. * <md-icon class="md-avatar-icon" md-svg-icon="communication:phone"></md-icon>
  80. * <span>Item content in list</span>
  81. * </md-list-item>
  82. * </md-list>
  83. * </hljs>
  84. *
  85. */
  86. function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
  87. var proxiedTypes = ['md-checkbox', 'md-switch'];
  88. return {
  89. restrict: 'E',
  90. controller: 'MdListController',
  91. compile: function(tEl, tAttrs) {
  92. // Check for proxy controls (no ng-click on parent, and a control inside)
  93. var secondaryItem = tEl[0].querySelector('.md-secondary');
  94. var hasProxiedElement;
  95. var proxyElement;
  96. tEl[0].setAttribute('role', 'listitem');
  97. if (!tAttrs.ngClick) {
  98. for (var i = 0, type; type = proxiedTypes[i]; ++i) {
  99. if (proxyElement = tEl[0].querySelector(type)) {
  100. hasProxiedElement = true;
  101. break;
  102. }
  103. }
  104. if (hasProxiedElement) {
  105. wrapIn('div');
  106. } else if (!tEl[0].querySelector('md-button')) {
  107. tEl.addClass('md-no-proxy');
  108. }
  109. } else {
  110. wrapIn('button');
  111. }
  112. setupToggleAria();
  113. function setupToggleAria() {
  114. var toggleTypes = ['md-switch', 'md-checkbox'];
  115. var toggle;
  116. for (var i = 0, toggleType; toggleType = toggleTypes[i]; ++i) {
  117. if (toggle = tEl.find(toggleType)[0]) {
  118. if (!toggle.hasAttribute('aria-label')) {
  119. var p = tEl.find('p')[0];
  120. if (!p) return;
  121. toggle.setAttribute('aria-label', 'Toggle ' + p.textContent);
  122. }
  123. }
  124. }
  125. }
  126. function wrapIn(type) {
  127. var container;
  128. if (type == 'div') {
  129. container = angular.element('<div class="md-no-style md-list-item-inner">');
  130. container.append(tEl.contents());
  131. tEl.addClass('md-proxy-focus');
  132. } else {
  133. container = angular.element('<md-button class="md-no-style"><div class="md-list-item-inner"></div></md-button>');
  134. var copiedAttrs = ['ng-click', 'aria-label', 'ng-disabled'];
  135. angular.forEach(copiedAttrs, function(attr) {
  136. if (tEl[0].hasAttribute(attr)) {
  137. container[0].setAttribute(attr, tEl[0].getAttribute(attr));
  138. tEl[0].removeAttribute(attr);
  139. }
  140. });
  141. container.children().eq(0).append(tEl.contents());
  142. }
  143. tEl[0].setAttribute('tabindex', '-1');
  144. tEl.append(container);
  145. if (secondaryItem && secondaryItem.hasAttribute('ng-click')) {
  146. $mdAria.expect(secondaryItem, 'aria-label');
  147. var buttonWrapper = angular.element('<md-button class="md-secondary-container md-icon-button">');
  148. buttonWrapper.attr('ng-click', secondaryItem.getAttribute('ng-click'));
  149. secondaryItem.removeAttribute('ng-click');
  150. secondaryItem.setAttribute('tabindex', '-1');
  151. secondaryItem.classList.remove('md-secondary');
  152. buttonWrapper.append(secondaryItem);
  153. secondaryItem = buttonWrapper[0];
  154. }
  155. // Check for a secondary item and move it outside
  156. if ( secondaryItem && (
  157. secondaryItem.hasAttribute('ng-click') ||
  158. ( tAttrs.ngClick &&
  159. isProxiedElement(secondaryItem) )
  160. )) {
  161. tEl.addClass('md-with-secondary');
  162. tEl.append(secondaryItem);
  163. }
  164. }
  165. function isProxiedElement(el) {
  166. return proxiedTypes.indexOf(el.nodeName.toLowerCase()) != -1;
  167. }
  168. return postLink;
  169. function postLink($scope, $element, $attr, ctrl) {
  170. var proxies = [],
  171. firstChild = $element[0].firstElementChild,
  172. hasClick = firstChild && firstChild.hasAttribute('ng-click');
  173. computeProxies();
  174. computeClickable();
  175. if ($element.hasClass('md-proxy-focus') && proxies.length) {
  176. angular.forEach(proxies, function(proxy) {
  177. proxy = angular.element(proxy);
  178. $scope.mouseActive = false;
  179. proxy.on('mousedown', function() {
  180. $scope.mouseActive = true;
  181. $timeout(function(){
  182. $scope.mouseActive = false;
  183. }, 100);
  184. })
  185. .on('focus', function() {
  186. if ($scope.mouseActive === false) { $element.addClass('md-focused'); }
  187. proxy.on('blur', function proxyOnBlur() {
  188. $element.removeClass('md-focused');
  189. proxy.off('blur', proxyOnBlur);
  190. });
  191. });
  192. });
  193. }
  194. function computeProxies() {
  195. var children = $element.children();
  196. if (children.length && !children[0].hasAttribute('ng-click')) {
  197. angular.forEach(proxiedTypes, function(type) {
  198. angular.forEach(firstChild.querySelectorAll(type), function(child) {
  199. proxies.push(child);
  200. });
  201. });
  202. }
  203. }
  204. function computeClickable() {
  205. if (proxies.length || hasClick) {
  206. $element.addClass('md-clickable');
  207. ctrl.attachRipple($scope, angular.element($element[0].querySelector('.md-no-style')));
  208. }
  209. }
  210. if (!hasClick && !proxies.length) {
  211. firstChild && firstChild.addEventListener('keypress', function(e) {
  212. if (e.target.nodeName != 'INPUT' && e.target.nodeName != 'TEXTAREA') {
  213. var keyCode = e.which || e.keyCode;
  214. if (keyCode == $mdConstant.KEY_CODE.SPACE) {
  215. if (firstChild) {
  216. firstChild.click();
  217. e.preventDefault();
  218. e.stopPropagation();
  219. }
  220. }
  221. }
  222. });
  223. }
  224. $element.off('click');
  225. $element.off('keypress');
  226. if (proxies.length && firstChild) {
  227. $element.children().eq(0).on('click', function(e) {
  228. var parentButton = $mdUtil.getClosest(e.target, 'BUTTON');
  229. if (!parentButton && firstChild.contains(e.target)) {
  230. angular.forEach(proxies, function(proxy) {
  231. if (e.target !== proxy && !proxy.contains(e.target)) {
  232. angular.element(proxy).triggerHandler('click');
  233. }
  234. });
  235. }
  236. });
  237. }
  238. }
  239. }
  240. };
  241. }
  242. mdListItemDirective.$inject = ["$mdAria", "$mdConstant", "$mdUtil", "$timeout"];
  243. /*
  244. * @private
  245. * @ngdoc controller
  246. * @name MdListController
  247. * @module material.components.list
  248. *
  249. */
  250. function MdListController($scope, $element, $mdListInkRipple) {
  251. var ctrl = this;
  252. ctrl.attachRipple = attachRipple;
  253. function attachRipple (scope, element) {
  254. var options = {};
  255. $mdListInkRipple.attach(scope, element, options);
  256. }
  257. }
  258. MdListController.$inject = ["$scope", "$element", "$mdListInkRipple"];
  259. ng.material.components.list = angular.module("material.components.list");