-
Notifications
You must be signed in to change notification settings - Fork 14
/
demo.html
214 lines (197 loc) · 6.92 KB
/
demo.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
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title></title>
<style>
/* Important CSS */
details-utils:not(:defined) [data-du-close-click] {
display: none;
}
/* Demo CSS */
* {
box-sizing: border-box;
}
body {
padding-bottom: 80vh;
}
details {
border: 1px solid #ddd;
}
summary {
padding: .5em;
}
.demo-content {
border: 3px solid;
padding: 1em;
background-color: #ddd;
overflow: hidden; /* Important for animations */
}
/* Document Class Toggle (modal style) */
html.demo-no-overflow {
/* You can qualify this in a media query, too */
overflow: hidden;
}
details-utils[toggle-document-class]:defined .demo-modal-content {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: auto;
background-color: rgba(255,255,255,.95);
}
</style>
</head>
<body>
<h1><code><details-utils></code></h1>
<p>Go back to <a href="https://github.com/zachleat/details-utils">the GitHub repository</a>.</p>
<p>To use, wrap one (or more!) <code><details></code> elements in our <code><details-utils></code> web component. Mix and match these utilities as needed:</p>
<ul>
<li><a href="#click-out">Click outside to close</a></li>
<li><a href="#animate">Animate open and close</a></li>
<li><a href="#force">Force State</a></li>
<li><a href="#esc">Close by <code>esc</code> key</a></li>
<li><a href="#toggle-document-class">Toggle document class</a></li>
</ul>
<h2 id="click-out">Click outside to close</h2>
<details-utils close-click-outside>
<details>
<summary>Toggle Menu</summary>
<div class="demo-content">
<p>Note that interacting with content inside of the menu works without closing the menu. Like this <label>sample text input <input type="text"></label></p>
</div>
</details>
</details-utils>
<h3>Use a close button inside of the content.</h3>
<details-utils close-click-outside>
<details id="demo-details-close-button">
<summary>Toggle Menu</summary>
<div class="demo-content">
<p>Note that interacting with content inside of the menu works without closing the menu.</p>
<button type="button" data-du-close-click aria-controls="demo-details-close-button">Close</button>
</div>
</details>
</details-utils>
<h2 id="animate">Animate Open and Close</h2>
<details-utils animate>
<p>This attribute is ignored if <code>(prefers-reduced-motion)</code> preference is detected.</p>
<details>
<summary>Toggle Menu</summary>
<div class="demo-content">
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
</div>
</details>
</details-utils>
<h2 id="force">Force State</h2>
<h3>Force State based on JavaScript availability</h3>
<p>Open without JavaScript, closed with JavaScript:</p>
<details-utils force-close>
<details open>
<summary>Default open</summary>
<div class="demo-content">
<p>This is the content.</p>
</div>
</details>
</details-utils>
<p>Close without JavaScript, open with JavaScript:</p>
<details-utils force-open>
<details>
<summary>Default closed</summary>
<div class="demo-content">
<p>This is the content.</p>
</div>
</details>
</details-utils>
<p><em>If both <code>force-open force-close</code> are added, the state is toggled.</em></p>
<details-utils force-open force-close>
<details>
<summary>Default closed</summary>
<div class="demo-content">
<p>This is the content.</p>
</div>
</details>
</details-utils>
<details-utils force-open force-close>
<details open>
<summary>Default open</summary>
<div class="demo-content">
<p>This is the content.</p>
</div>
</details>
</details-utils>
<h3>Force State based on Viewport size</h3>
<p>Resize your viewport to see state change.</p>
<details-utils force-close="(min-width: 768px)" force-restore>
<p><code>force-close="(min-width: 768px)"</code>. Optionally use <code>force-restore</code> to restore previous state when media query doesn’t match.</p>
<details open style="color: red">
<summary>Force close at large viewport</summary>
<div class="demo-content">
<p>This is the content.</p>
</div>
</details>
</details-utils>
<details-utils force-open="(max-width: 767px)" force-restore>
<p><code>force-open="(max-width: 767px)"</code>. Optionally use <code>force-restore</code> to restore previous state when media query doesn’t match.</p>
<details style="color: green">
<summary>Force open at small viewport</summary>
<div class="demo-content">
<p>This is the content.</p>
</div>
</details>
</details-utils>
<details-utils force-close="(max-width: 767px)" force-open="(min-width: 768px)">
<p>Both <code>force-close="(max-width: 767px)"</code> and <code>force-open="(min-width: 768px)"</code> (without <code>force-restore</code>)</p>
<details style="color: blue">
<summary>Close at small, Open at large viewport</summary>
<div class="demo-content">
<p>This is the content.</p>
</div>
</details>
</details-utils>
<h2 id="esc">Close by <code>esc</code> Key</h2>
<details-utils close-esc>
<details>
<summary>Toggle Menu</summary>
<div class="demo-content">
<p>This is the content.</p>
</div>
</details>
</details-utils>
<h3>Close by <code>esc</code> based on Viewport size</h3>
<details-utils close-esc="(max-width: 767px)">
<p><code>close-esc="(max-width: 767px)"</code> will only close when viewport is smaller than 767px.</p>
<details>
<summary>Toggle Menu</summary>
<div class="demo-content">
<p>This is the content.</p>
</div>
</details>
</details-utils>
<h2 id="toggle-document-class">Toggle Document Class</h2>
<details-utils toggle-document-class="demo-class-toggle" close-click-outside close-esc>
<p>Useful if you want to make styling changes higher up in the page hierarchy.</p>
<!--<p>Use this to disable <code>overflow: hidden</code> on the document. Styling to make the content take up the entire viewport is up to you. Definitely pair this with the <code>close-esc</code> utility. In this demo, modal styles require JavaScript (this is not mandatory).</p>-->
<details id="demo-details-toggle-class">
<summary class="demo-modal-summary">Toggle Menu</summary>
<div class="demo-content">
<button type="button" data-du-close-click aria-controls="demo-details-toggle-class">Close</button>
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
</div>
</details>
</details-utils>
<script type="module" src="details-utils.js"></script>
</body>
</html>