1/*!
  2 * Angular Material Design
  3 * https://github.com/angular/material
  4 * @license MIT
  5 * v1.1.3
  6 */
  7goog.provide('ngmaterial.components.subheader');
  8goog.require('ngmaterial.components.sticky');
  9goog.require('ngmaterial.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 */
 28MdSubheaderDirective['$inject'] = ["$mdSticky", "$compile", "$mdTheming", "$mdUtil", "$mdAria"];
 29angular
 30  .module('material.components.subheader', [
 31    'material.core',
 32    'material.components.sticky'
 33  ])
 34  .directive('mdSubheader', MdSubheaderDirective);
 35
 36/**
 37 * @ngdoc directive
 38 * @name mdSubheader
 39 * @module material.components.subheader
 40 *
 41 * @restrict E
 42 *
 43 * @description
 44 * The `md-subheader` directive creates a sticky subheader for a section.
 45 *
 46 * Developers are able to disable the stickiness of the subheader by using the following markup
 47 *
 48 * <hljs lang="html">
 49 *   <md-subheader class="md-no-sticky">Not Sticky</md-subheader>
 50 * </hljs>
 51 *
 52 * ### Notes
 53 * - The `md-subheader` directive uses the <a ng-href="api/service/$mdSticky">$mdSticky</a> service
 54 * to make the subheader sticky.
 55 *
 56 * > Whenever the current browser doesn't support stickiness natively, the subheader
 57 * will be compiled twice to create a sticky clone of the subheader.
 58 *
 59 * @usage
 60 * <hljs lang="html">
 61 * <md-subheader>Online Friends</md-subheader>
 62 * </hljs>
 63 */
 64
 65function MdSubheaderDirective($mdSticky, $compile, $mdTheming, $mdUtil, $mdAria) {
 66  return {
 67    restrict: 'E',
 68    replace: true,
 69    transclude: true,
 70    template: (
 71    '<div class="md-subheader _md">' +
 72    '  <div class="md-subheader-inner">' +
 73    '    <div class="md-subheader-content"></div>' +
 74    '  </div>' +
 75    '</div>'
 76    ),
 77    link: function postLink(scope, element, attr, controllers, transclude) {
 78      $mdTheming(element);
 79      element.addClass('_md');
 80
 81      // Remove the ngRepeat attribute from the root element, because we don't want to compile
 82      // the ngRepeat for the sticky clone again.
 83      $mdUtil.prefixer().removeAttribute(element, 'ng-repeat');
 84
 85      var outerHTML = element[0].outerHTML;
 86
 87      function getContent(el) {
 88        return angular.element(el[0].querySelector('.md-subheader-content'));
 89      }
 90
 91      // Set the ARIA attributes on the original element since it keeps it's original place in
 92      // the DOM, whereas the clones are in reverse order. Should be done after the outerHTML,
 93      // in order to avoid having multiple element be marked as headers.
 94      attr.$set('role', 'heading');
 95      $mdAria.expect(element, 'aria-level', '2');
 96
 97      // Transclude the user-given contents of the subheader
 98      // the conventional way.
 99      transclude(scope, function(clone) {
100        getContent(element).append(clone);
101      });
102
103      // Create another clone, that uses the outer and inner contents
104      // of the element, that will be 'stickied' as the user scrolls.
105      if (!element.hasClass('md-no-sticky')) {
106        transclude(scope, function(clone) {
107          // If the user adds an ng-if or ng-repeat directly to the md-subheader element, the
108          // compiled clone below will only be a comment tag (since they replace their elements with
109          // a comment) which cannot be properly passed to the $mdSticky; so we wrap it in our own
110          // DIV to ensure we have something $mdSticky can use
111          var wrapper = $compile('<div class="md-subheader-wrapper" aria-hidden="true">' + outerHTML + '</div>')(scope);
112
113          // Delay initialization until after any `ng-if`/`ng-repeat`/etc has finished before
114          // attempting to create the clone
115          $mdUtil.nextTick(function() {
116            // Append our transcluded clone into the wrapper.
117            // We don't have to recompile the element again, because the clone is already
118            // compiled in it's transclusion scope. If we recompile the outerHTML of the new clone, we would lose
119            // our ngIf's and other previous registered bindings / properties.
120            getContent(wrapper).append(clone);
121          });
122
123          // Make the element sticky and provide the stickyClone our self, to avoid recompilation of the subheader
124          // element.
125          $mdSticky(scope, element, wrapper);
126        });
127      }
128    }
129  };
130}
131
132ngmaterial.components.subheader = angular.module("material.components.subheader");