ecomp-portal-FE/client/bower_components/angular-material/modules/js/subheader/subheader.js

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v0.9.8
   6  */
   7 (function( window, angular, undefined ){
   8 "use strict";
   9
  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.module('material.components.subheader', [
  29   'material.core',
  30   'material.components.sticky'
  31 ])
  32   .directive('mdSubheader', MdSubheaderDirective);
  33
  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
  52 function MdSubheaderDirective($mdSticky, $compile, $mdTheming) {
  53   return {
  54     restrict: 'E',
  55     replace: true,
  56     transclude: true,
  57     template:
  58       '<h2 class="md-subheader">' +
  59         '<div class="md-subheader-inner">' +
  60           '<span class="md-subheader-content"></span>' +
  61         '</div>' +
  62       '</h2>',
  63     compile: function(element, attr, transclude) {
  64       return function postLink(scope, element, attr) {
  65         $mdTheming(element);
  66         var outerHTML = element[0].outerHTML;
  67
  68         function getContent(el) {
  69           return angular.element(el[0].querySelector('.md-subheader-content'));
  70         }
  71
  72         // Transclude the user-given contents of the subheader
  73         // the conventional way.
  74         transclude(scope, function(clone) {
  75           getContent(element).append(clone);
  76         });
  77
  78         // Create another clone, that uses the outer and inner contents
  79         // of the element, that will be 'stickied' as the user scrolls.
  80         if (!element.hasClass('md-no-sticky')) {
  81           transclude(scope, function(clone) {
  82             var stickyClone = $compile(angular.element(outerHTML))(scope);
  83             getContent(stickyClone).append(clone);
  84             $mdSticky(scope, element, stickyClone);
  85           });
  86         }
  87       };
  88     }
  89   };
  90 }
  91 MdSubheaderDirective.$inject = ["$mdSticky", "$compile", "$mdTheming"];
  92
  93 })(window, window.angular);