This repository has been archived by the owner on Aug 29, 2023. It is now read-only.
/
subheader.js
120 lines (110 loc) · 4.52 KB
/
subheader.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/**
* @ngdoc module
* @name material.components.subheader
* @description
* SubHeader module
*
* Subheaders are special list tiles that delineate distinct sections of a
* list or grid list and are typically related to the current filtering or
* sorting criteria. Subheader tiles are either displayed inline with tiles or
* can be associated with content, for example, in an adjacent column.
*
* Upon scrolling, subheaders remain pinned to the top of the screen and remain
* pinned until pushed on or off screen by the next subheader. @see [Material
* Design Specifications](https://material.io/archive/guidelines/components/subheaders.html)
*
* > To improve the visual grouping of content, use the system color for your subheaders.
*
*/
angular
.module('material.components.subheader', [
'material.core',
'material.components.sticky'
])
.directive('mdSubheader', MdSubheaderDirective);
/**
* @ngdoc directive
* @name mdSubheader
* @module material.components.subheader
*
* @restrict E
*
* @description
* The `md-subheader` directive creates a sticky subheader for a section.
*
* Developers are able to disable the stickiness of the subheader by using the following markup
*
* <hljs lang="html">
* <md-subheader class="md-no-sticky">Not Sticky</md-subheader>
* </hljs>
*
* ### Notes
* - The `md-subheader` directive uses the <a ng-href="api/service/$mdSticky">$mdSticky</a> service
* to make the subheader sticky.
*
* > Whenever the current browser doesn't support stickiness natively, the subheader
* will be compiled twice to create a sticky clone of the subheader.
*
* @usage
* <hljs lang="html">
* <md-subheader>Online Friends</md-subheader>
* </hljs>
*/
function MdSubheaderDirective($mdSticky, $compile, $mdTheming, $mdUtil, $mdAria) {
return {
restrict: 'E',
replace: true,
transclude: true,
template: (
'<div class="md-subheader _md">' +
' <div class="md-subheader-inner">' +
' <div class="md-subheader-content"></div>' +
' </div>' +
'</div>'
),
link: function postLink(scope, element, attr, controllers, transclude) {
$mdTheming(element);
element.addClass('_md');
// Remove the ngRepeat attribute from the root element, because we don't want to compile
// the ngRepeat for the sticky clone again.
$mdUtil.prefixer().removeAttribute(element, 'ng-repeat');
var outerHTML = element[0].outerHTML;
function getContent(el) {
return angular.element(el[0].querySelector('.md-subheader-content'));
}
// Set the ARIA attributes on the original element since it keeps it's original place in
// the DOM, whereas the clones are in reverse order. Should be done after the outerHTML,
// in order to avoid having multiple element be marked as headers.
attr.$set('role', 'heading');
$mdAria.expect(element, 'aria-level', '2');
// Transclude the user-given contents of the subheader
// the conventional way.
transclude(scope, function(clone) {
getContent(element).append(clone);
});
// Create another clone, that uses the outer and inner contents
// of the element, that will be 'stickied' as the user scrolls.
if (!element.hasClass('md-no-sticky')) {
transclude(scope, function(clone) {
// If the user adds an ng-if or ng-repeat directly to the md-subheader element, the
// compiled clone below will only be a comment tag (since they replace their elements with
// a comment) which cannot be properly passed to the $mdSticky; so we wrap it in our own
// DIV to ensure we have something $mdSticky can use
var wrapper = $compile('<div class="md-subheader-wrapper" aria-hidden="true">' + outerHTML + '</div>')(scope);
// Delay initialization until after any `ng-if`/`ng-repeat`/etc has finished before
// attempting to create the clone
$mdUtil.nextTick(function() {
// Append our transcluded clone into the wrapper.
// We don't have to recompile the element again, because the clone is already
// compiled in it's transclusion scope. If we recompile the outerHTML of the new clone, we would lose
// our ngIf's and other previous registered bindings / properties.
getContent(wrapper).append(clone);
});
// Make the element sticky and provide the stickyClone our self, to avoid recompilation of the subheader
// element.
$mdSticky(scope, element, wrapper);
});
}
}
};
}