-
Notifications
You must be signed in to change notification settings - Fork 5
/
html5-h.html
97 lines (87 loc) · 2.81 KB
/
html5-h.html
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
<link rel="import" href="components/polymer/polymer.html">
<polymer-element name="html5-h" attributes="level">
<template>
<style>
:host {
display: block;
font-weight: bold;
}
:host[level="1"] {
font-size: 2em;
margin: 0.67em 0;
}
:host[level="2"] {
font-size: 1.5em;
margin: 0.83em 0;
}
:host[level="3"] {
font-size: 1.17em;
margin: 1em 0;
}
:host[level="4"] {
font-size: 1em;
margin: 1.33em 0;
}
:host[level="5"] {
font-size: 0.83em;
margin: 1.67em 0;
}
:host[level="6"] {
font-size: 0.67em;
margin: 2.33em 0;
}
</style>
<content></content>
</template>
<script>
function nestingLevel(element) {
// Work out the nesting level of an element via the document's structure
var nesting = 1;
var sectioningElements = [
'article',
'aside',
'nav',
'section'
];
// Thanks to http://stackoverflow.com/a/5178132 for the tree-climbing
// technique.
while(element && element.nodeType === 1) {
if(sectioningElements.indexOf(element.localName.toLowerCase()) > -1) {
nesting++;
}
element = element.parentNode;
};
return nesting;
}
function setNaturalLevel(element) {
// Set 'level' and 'aria-level' (for Assistive Technologies (ATs))
// attributes based on the element's place in the document's structure
element.setAttribute('aria-level', nestingLevel(element).toString());
element.setAttribute('level', element.getAttribute('aria-level'));
}
Polymer('html5-h', {
ready: function() {
// Work out the implicit, or reflect the user-supplied explicit, level
var attrLevel = this.getAttribute('level');
if (attrLevel) {
var attrLevelParsed = parseInt(attrLevel);
if (attrLevelParsed > 0 && attrLevel.indexOf('.') === -1) {
// Mirror the user-set level for Assistive Technologies (ATs)
// Note: we check for floats above, as "42.a" would be accepted...
// Note: ...but we set value via attrLevelParsed, so "+2" will work
this.setAttribute('aria-level', attrLevelParsed.toString());
} else {
// Unusable 'level' attribute; log it and do what's natural
console.log("html5-h: 'level' attribute value '" + attrLevel +
"' is not a non-zero positive integer; ignoring. Element:", this);
setNaturalLevel(this);
}
} else {
// Work out the nesting level automagically from document structure
setNaturalLevel(this);
}
this.setAttribute('role', 'heading');
}
});
</script>
</polymer-element>