deanebarker/drawer.html

## drawer.html
<!--

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>
	<!--

	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>