gerrit.onap Code Review - vnfsdk/refrepo.git/blob

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v1.1.3
   6  */
   7 goog.provide('ngmaterial.components.subheader');
   8 goog.require('ngmaterial.components.sticky');
   9 goog.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  */
  28 MdSubheaderDirective['$inject'] = ["$mdSticky", "$compile", "$mdTheming", "$mdUtil", "$mdAria"];
  29 angular
  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
  65 function 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
 132 ngmaterial.components.subheader = angular.module("material.components.subheader");