source: trip-planner-front/node_modules/angular-material/modules/closure/subheader/subheader.js@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 4.9 KB
Line 
1/*!
2 * AngularJS Material Design
3 * https://github.com/angular/material
4 * @license MIT
5 * v1.2.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://material.io/archive/guidelines/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");
Note: See TracBrowser for help on using the repository browser.