subheader.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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.subheader');
  8. goog.require('ng.material.components.sticky');
  9. goog.require('ng.material.core');
  10. /**
  11. * @ngdoc module
  12. * @name material.components.subheader
  13. * @description
  14. * SubHeader module
  15. *
  16. * Subheaders are special list tiles that delineate distinct sections of a
  17. * list or grid list and are typically related to the current filtering or
  18. * sorting criteria. Subheader tiles are either displayed inline with tiles or
  19. * can be associated with content, for example, in an adjacent column.
  20. *
  21. * Upon scrolling, subheaders remain pinned to the top of the screen and remain
  22. * pinned until pushed on or off screen by the next subheader. @see [Material
  23. * Design Specifications](https://www.google.com/design/spec/components/subheaders.html)
  24. *
  25. * > To improve the visual grouping of content, use the system color for your subheaders.
  26. *
  27. */
  28. angular
  29. .module('material.components.subheader', [
  30. 'material.core',
  31. 'material.components.sticky'
  32. ])
  33. .directive('mdSubheader', MdSubheaderDirective);
  34. /**
  35. * @ngdoc directive
  36. * @name mdSubheader
  37. * @module material.components.subheader
  38. *
  39. * @restrict E
  40. *
  41. * @description
  42. * The `<md-subheader>` directive is a subheader for a section. By default it is sticky.
  43. * You can make it not sticky by applying the `md-no-sticky` class to the subheader.
  44. *
  45. *
  46. * @usage
  47. * <hljs lang="html">
  48. * <md-subheader>Online Friends</md-subheader>
  49. * </hljs>
  50. */
  51. function MdSubheaderDirective($mdSticky, $compile, $mdTheming, $mdUtil) {
  52. return {
  53. restrict: 'E',
  54. replace: true,
  55. transclude: true,
  56. template: (
  57. '<div class="md-subheader">' +
  58. ' <div class="md-subheader-inner">' +
  59. ' <span class="md-subheader-content"></span>' +
  60. ' </div>' +
  61. '</div>'
  62. ),
  63. link: function postLink(scope, element, attr, controllers, transclude) {
  64. $mdTheming(element);
  65. var outerHTML = element[0].outerHTML;
  66. function getContent(el) {
  67. return angular.element(el[0].querySelector('.md-subheader-content'));
  68. }
  69. // Transclude the user-given contents of the subheader
  70. // the conventional way.
  71. transclude(scope, function(clone) {
  72. getContent(element).append(clone);
  73. });
  74. // Create another clone, that uses the outer and inner contents
  75. // of the element, that will be 'stickied' as the user scrolls.
  76. if (!element.hasClass('md-no-sticky')) {
  77. transclude(scope, function(clone) {
  78. // If the user adds an ng-if or ng-repeat directly to the md-subheader element, the
  79. // compiled clone below will only be a comment tag (since they replace their elements with
  80. // a comment) which cannot be properly passed to the $mdSticky; so we wrap it in our own
  81. // DIV to ensure we have something $mdSticky can use
  82. var wrapperHtml = '<div class="md-subheader-wrapper">' + outerHTML + '</div>';
  83. var stickyClone = $compile(wrapperHtml)(scope);
  84. // Append the sticky
  85. $mdSticky(scope, element, stickyClone);
  86. // Delay initialization until after any `ng-if`/`ng-repeat`/etc has finished before
  87. // attempting to create the clone
  88. $mdUtil.nextTick(function() {
  89. getContent(stickyClone).append(clone);
  90. });
  91. });
  92. }
  93. }
  94. }
  95. }
  96. MdSubheaderDirective.$inject = ["$mdSticky", "$compile", "$mdTheming", "$mdUtil"];
  97. ng.material.components.subheader = angular.module("material.components.subheader");