Skip to content

Commit 33f76ad

Browse files
bennadelbennadel
committed
Add dialog as sidebar demo.
1 parent f7452ff commit 33f76ad

3 files changed

Lines changed: 174 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Opening The Dialog Element As A Fly-out Sidebar](https://bennadel.github.io/JavaScript-Demos/demos/dialog-element-sidebar)
1314
* [Exploring The Dialog Element In HTML](https://bennadel.github.io/JavaScript-Demos/demos/dialog-element)
1415
* [Storing Metadata On Select Option Elements](https://bennadel.github.io/JavaScript-Demos/demos/select-option-dataset)
1516
* [Exploring Prev/Next Mechanics In HTMX](https://bennadel.github.io/JavaScript-Demos/demos/htmx-prev-next)
@@ -707,5 +708,5 @@ with.
707708

708709
Want more JavaScript goodness? Check out the [JavaScript blog entries][javascript-blog] on my website.
709710

710-
[bennadel]: http://www.bennadel.com
711-
[javascript-blog]: http://www.bennadel.com/blog/tags/6-javascript-dhtml-blog-entries.htm
711+
[bennadel]: https://www.bennadel.com
712+
[javascript-blog]: https://www.bennadel.com/blog/tags/6-javascript-dhtml-blog-entries.htm

‎demos/dialog-element-sidebar/index.htm‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>
6+
Opening The Dialog Element As A Fly-out Sidebar
7+
</title>
8+
<link rel="stylesheet" type="text/css" href="./main.css" />
9+
</head>
10+
<body id="top">
11+
12+
<h1>
13+
Opening The Dialog Element As A Fly-out Sidebar
14+
</h1>
15+
16+
<button type="button" class="triggerSidebar">
17+
Open Sidebar
18+
</button>
19+
20+
<dialog closedby="any">
21+
22+
<h2 id="sidebarTop">
23+
Dialog As Sidebar
24+
</h2>
25+
26+
<p>
27+
Lorem ipsum dolor sit amet nuntius, inde cum cor, supero ferus difficilis
28+
poena. Ipse intro longe incido ex pauci culpa. Tu moneo quidam, ego magnus
29+
consul. Ego timeo quis virtus que quis numen. Idem patior forte augeo ultra
30+
caecus poena.
31+
</p>
32+
33+
<button type="button" class="close">
34+
Close
35+
</button>
36+
37+
<div style="margin-block-start: 150vh ;">
38+
<a href="#sidebarTop">Back to Top</a>
39+
</div>
40+
41+
</dialog>
42+
43+
<!-- Adding large spacer to force body scrollbar for a more comprehensive test. -->
44+
<p style="margin-top: 150vh ;">
45+
<a href="#top">Back to Top</a>
46+
</p>
47+
48+
<style type="text/css">
49+
50+
/* When a modal window is open, remove scroll from body. */
51+
:is( html, body ):has( :modal ) {
52+
overflow: hidden ;
53+
}
54+
55+
/* Note: backdrop only shows for MODAL experiences (not non-modal). */
56+
dialog::backdrop {
57+
backdrop-filter: blur( 0.5px ) ; /* Not widely available yet. */
58+
background-color: #99999933;
59+
}
60+
61+
dialog {
62+
/*
63+
The default user-agent styles for dialogs position the dialog in the
64+
center of the screen and have it render to fit the content. In order to
65+
get the dialog to render as a fly-out sidebar, we need to unset the CSS
66+
properties that force it into the middle.
67+
*/
68+
height: auto ;
69+
inset: 0 ;
70+
left: auto ;
71+
max-height: 100vh;
72+
padding: 0 ;
73+
/*
74+
Once we unset the default user-agent style, we can add our own styles to
75+
fine-tune the sidebar experience.
76+
*/
77+
border: 2px solid #999999 ;
78+
border-width: 0 0 0 2px ;
79+
box-shadow: 0 0 5px #00000022;
80+
padding: 2rem ;
81+
scrollbar-gutter: stable ; /* Not widely available yet. */
82+
width: 450px ;
83+
}
84+
85+
/* We can use [open] DOM state to animate-in the sidebar using CSS keyframes. */
86+
dialog[ open ] {
87+
animation-duration: 200ms ;
88+
animation-fill-mode: forwards ;
89+
animation-iteration-count: 1 ;
90+
animation-name: dialogEnter ;
91+
animation-timing-function: ease-out ;
92+
}
93+
@keyframes dialogEnter {
94+
from {
95+
translate: 100% ; /* Widely available (as independent of "transform"). */
96+
}
97+
to {
98+
translate: 0% ;
99+
}
100+
}
101+
102+
</style>
103+
<script type="text/javascript">
104+
105+
var triggerSidebar = document.querySelector( ".triggerSidebar" );
106+
var dialog = document.querySelector( "dialog" );
107+
var closeSidebar = document.querySelector( "dialog .close" );
108+
109+
// Open the sidebar.
110+
triggerSidebar.onclick = ( event ) => {
111+
112+
dialog.showModal();
113+
114+
};
115+
116+
// Close the sidebark.
117+
closeSidebar.onclick = ( event ) => {
118+
119+
dialog.close();
120+
121+
};
122+
123+
</script>
124+
125+
</body>
126+
</html>

‎demos/dialog-element-sidebar/main.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
:where( html ) {
3+
box-sizing: border-box ;
4+
5+
& *,
6+
& *:before,
7+
& *:after {
8+
box-sizing: inherit ;
9+
}
10+
}
11+
12+
:where( * ) {
13+
&:focus,
14+
&:focus-within {
15+
outline-color: hotpink ;
16+
outline-offset: 4px ;
17+
outline-width: 2px ;
18+
}
19+
}
20+
21+
body {
22+
font-family: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif ;
23+
font-size: 18px ;
24+
line-height: 1.4 ;
25+
}
26+
27+
button,
28+
input:where([type="text"]),
29+
select,
30+
textarea {
31+
color: inherit ;
32+
font-family: inherit ;
33+
font-size: 20px ;
34+
line-height: inherit ;
35+
padding: 5px 10px ;
36+
}
37+
38+
button {
39+
padding: 5px 15px ;
40+
}
41+
42+
dialog h2 {
43+
margin-block-start: 0 ;
44+
scroll-margin-block-start: 2rem ; /* To counteract dialog padding. */
45+
}

0 commit comments

Comments
 (0)