Last active
June 1, 2024 19:21
-
-
Save deanebarker/a8dd902657e706cc3d1cfd2922f8a4ce to your computer and use it in GitHub Desktop.
Sample of using the "popover" attritube to create a right-margin "drawer" UI element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
This will show a UI "drawer" that pops out from the right side of the screen, with a dropshadow and overlay on the rest of the window. | |
The drawer will auto-focus on the first input field. | |
A close button will automatically be placed in the top left corner. (Also, you can close by clicking anywhere else on the page.) | |
--> | |
<html> | |
<head> | |
<title>Right-hand Drawer Example</title> | |
<style> | |
.drawer { | |
inset: unset; | |
height: 100%; | |
position: absolute; | |
overflow-x: scroll; | |
overflow-y: scroll; | |
box-sizing: border-box; | |
right: 0; | |
top: 0px; | |
padding: 1.5em; | |
width: 20%; | |
margin: 0; | |
border: none; | |
border-left: solid 1px rgb(100, 100, 100); | |
webkit-box-shadow: 2px -2px 14px 1px rgba(0, 0, 0, 0.8); | |
box-shadow: 2px -2px 14px 1px rgba(0, 0, 0, 0.8); | |
} | |
.drawer::backdrop { | |
background-color: rgb(100, 100, 100); | |
opacity: .5; | |
} | |
</style> | |
<script> | |
document.addEventListener('DOMContentLoaded', () => | |
{ | |
document.querySelectorAll(".drawer").forEach(el => { | |
// Find and focus on the first input field, if one exists | |
el.addEventListener("toggle", dr => { | |
var inputs = el.querySelectorAll("input"); | |
if (inputs.length > 0) { | |
inputs[0].select(); | |
} | |
}); | |
// Add a "close" button | |
let closeButton = document.createElement('button'); | |
closeButton.innerText = "X"; | |
closeButton.classList.add('close'); | |
closeButton.addEventListener('click', e => { | |
e.target.closest('.drawer').hidePopover(); | |
}); | |
el.prepend(closeButton); | |
} | |
); | |
}); | |
</script> | |
</head> | |
<body> | |
<button popovertarget="drawer1">Show 1</button> | |
<div id="drawer1" class="drawer" popover> | |
<h1>Title 1</h1> | |
<p> | |
<input placeholder="This should automatically get focus..." style="width:100%"/> | |
</p> | |
<p> | |
Popovers created using the Popover API are always non-modal. If you want to create a modal popover, | |
a element is the right way to go. There is significant overlap between the two -- you might for example | |
want to create a popover that persists, but control it using declarative HTML.</p> | |
<p>You can turn a if you want to combine popover control with dialog semantics.</p> | |
</div> | |
<button popovertarget="drawer2">Show 2</button> | |
<div id="drawer2" class="drawer" popover> | |
<h1>Title 2</h1> | |
<p> | |
Popovers created using the Popover API are always non-modal. If you want to create a modal popover, | |
a element is the right way to go. There is significant overlap between the two -- you might for example | |
want to create a popover that persists, but control it using declarative HTML.</p> | |
<p>You can turn a if you want to combine popover control with dialog semantics.</p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment