forked from WICG/display-locking
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcollapsed-sections.html
More file actions
132 lines (121 loc) · 3.71 KB
/
collapsed-sections.html
File metadata and controls
132 lines (121 loc) · 3.71 KB
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
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype HTML>
<style>
.section {
width: 350px;
padding-left: 30px;
padding-right: 30px;
border: 1px solid grey;
}
.heading {
font-size: 16pt;
width: max-content;
}
.heading::before {
content: "*";
cursor: auto;
padding-left: 10px;
padding-right: 10px;
border-radius: 50%;
background: lightgrey;
}
.heading.collapsed::before {
display: inline-block;
content: "v";
cursor: pointer;
}
.heading.expanded::before {
display: inline-block;
content: "^";
cursor: pointer;
}
@supports (render-subtree: invisible skip-viewport-activation) {
.section.collapsed {
render-subtree: invisible skip-viewport-activation;
}
#warning {
display: none;
}
}
@supports not (render-subtree: invisible skip-viewport-activation) {
.section.collapsed > * {
display: none;
}
#warning {
background: sandybrown;
}
}
.section {
overflow: hidden;
}
</style>
<h1>Collapsed Sections Example</h1>
<div class=heading>Summary</div>
<div class=section>
<p>
In this examples, there is content that is considered <em>above the fold</em>, such as this text.
It is visible on load and appears near the top of the page. It cannot be collapsed, as indicated
by the asterisk next to the section title. Additional information is provided
in sections located below. These sections are collapsed by default. They do not incur rendering
cost since they are display-locked. However, they are still searchable via user interactions. For
example, they are expandable by clicking the button next to the section title. They are also
expandable via find-in-page.
</p>
<p>
You can try this out by using find in page to find "github", for example.
</p>
<p id=warning>
Note that <code>render-subtree</code> does not seem to be supported by your browser. This means
that you will not be able to use find-in-page to navigate into collapsed sections.
</p>
</div>
<div class="heading collapsed">Details</div>
<div class="section collapsed">
<p>
Here you can find some details which are <em>below the fold</em>. They appear in a
collapsed section, meaning that they are not immediately visible on page load.
</p>
<p>
The collapsed sections have a <code>render-subtree</code> CSS attribute applied with an invisible
token. This means that it induces size containment. Since there is
no competing sizing information, the section collapses "automatically".
</div>
<div class="heading collapsed">More information</div>
<div class="section collapsed">
<p>
Here you can find additional information. Since you are reading this anyway, here you can
find information on <code>render-subtree</code> property:
<a href="www.github.com/WICG/display-locking">github page</a>.
</p>
</div>
<script>
function handleEvent(heading, section) {
if (heading.classList.contains("collapsed")) {
heading.classList.replace("collapsed", "expanded");
section.classList.replace("collapsed", "expanded");
} else {
heading.classList.replace("expanded", "collapsed");
section.classList.replace("expanded", "collapsed");
}
}
function init() {
const sections = document.getElementsByClassName("heading collapsed");
for (let i = 0; i < sections.length; ++i) {
const heading = sections[i];
const section = heading.nextElementSibling;
heading.addEventListener("click", (e) => {
handleEvent(heading, section);
});
section.addEventListener("rendersubtreeactivation", (e) => {
handleEvent(heading, section);
});
}
}
onload = () => {
if (!CSS.supports("render-subtree: invisible skip-viewport-activation")) {
document.getElementById("warning").style.display = "block";
// How can we detect from CSS that the attribute is not supported?
document.styleSheets[0].insertRule(".section.collapsed > * { display: none; }", 0);
}
init();
}
</script>