prof3ssorSt3v3/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>popover vs dialog</title>
    <link rel="stylesheet" href="main.css" />
    <script src="main.js" type="module"></script>
  </head>
  <body>
    <header>
      <h1>HTML dialog vs popover</h1>
    </header>
    <main>
      <p><button id="btnD">show dialog</button></p>
      <p><button id="btnP" popovertarget="popover1" popovertargetaction="toggle">show popover</button></p>
    </main>

    <div id="popover1" popover class="pop">Popover 1 Content</div>

    <dialog id="dialog1" class="dialog">
      <p>Dialog 1 content</p>
      <button class="btnClose">Close dialog</button>
    </dialog>
  </body>
</html>

## main.css
* {
  box-sizing: border-box;
}
html {
  font-size: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}
header,
main {
  padding: 1rem 3rem;
}
button {
  font-size: 1rem;
  padding: 0.25rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: steelblue;
  color: white;
}
.dialog,
.pop {
  border-radius: 0.5rem;
}
.dialog::backdrop {
  background-color: hsla(270, 50%, 50%, 0.9);
}
.pop::backdrop {
  background-color: hsla(0, 5%, 95%, 0.1);
}

/*
Default styles for popover and dialog
::backdrop {
  position: fixed;
  inset: 0px;
  background: rgba(0, 0, 0, 0.1);
}
:popover-open {
}
[popover]:not(:popover-open):not(dialog[open]) {
  display: none;
}
[popover] {
  position: fixed;
  width: fit-content;
  height: fit-content;
  color: canvastext;
  background-color: canvas;
  inset: 0px;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 0.25em;
  overflow: auto;
}
[popover]:popover-open::backdrop {
  position: fixed;
  background-color: transparent;
  pointer-events: none !important;
  inset: 0px;
}
*/

## main.js
(() => {
  //when the document is ready add listeners to the buttons and dialogs etc
  //btn.addEventListener("click", func)
  //dialog.addEventListener("close", func)
  //dialog.addEventListener("cancel", func)
  //popover.addEventListener("toggle", func)
  //popover.addEventListener("beforetoggle", func)

  document.getElementById('btnD').addEventListener('click', openDialog);

  document.getElementById('popover1').addEventListener('toggle', doneToggle);
  document.getElementById('popover1').addEventListener('beforetoggle', doneBeforeToggle);
})();

function doneToggle() {
  console.log('toggled');
}
function doneBeforeToggle(ev) {
  console.log('BEFORE toggled');
}

function openDialog(ev) {
  const dialog = document.getElementById('dialog1');
  dialog.showModal();
  dialog.addEventListener('close', (ev) => {
    let d = ev.target;
    console.log(d.returnValue);
    console.log(d.open);
  });

  let btn = dialog.querySelector('.btnClose');
  btn.addEventListener('click', () => {
    dialog.close(123);
  });
}

## nodes.md

      
    Raw
  

              nodes.md
            
          
    Dialogs and Popover API

Dialogs


Usually a modal.
Is an HTML element
NOT always added to the top layer.
Has a visible overlay.
Has a return value
Needs a close button/script to close the dialog


Dialog HTML Attributes


open include this if you want it open as soon as the page loads / dialog is added to the DOM and page.

Dialog JS Properties


open a boolean representing the current state of the dialog
returnValue when dialogs close they return a value from the function

Dialog JS Methods

dialog.show(); //you can still interact with elements on the page
dialog.showModal(); //you cannot interact with elements on the page (Modal) **
dialog.close(returnVal);
Dialog JS Events


dialog.addEventListener("close", func) - when the close method is called,
dialog.addEventListener("cancel", func) - when the user clicks ESC

Popover


Always added to the top layer.
popover has no overlay?
Has light dismiss
Is an API. Not an actual html element.
Can technically use any element but is usually a  or 

Popover HTML Attributes

For button or input element.

popovertarget the id of the element which will be the popover to display
popovertargetaction "hide", "show" or "toggle" : what clicking the button will do

For the element that will be the popover

popover can be set to "manual" or "auto"

Popover JS properties

buttonElement.popoverTargetElement; //which popover is controlled by the button
buttonElement.popoverTargetAction; //what to do with the popover when clicked
Popover JS Events


popover.addEventListener("toggle", func) after the popover is hidden or shown
popover.addEventListener("beforetoggle", func) just before the popover visibility changes

Popover JS methods

popoverElement.togglePopover();
popoverElement.hidePopover();
popoverElement.showPopover();
// See the main.css file for the default CSS properties and values
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>popover vs dialog</title>
	<link rel="stylesheet" href="main.css" />
	<script src="main.js" type="module"></script>
	</head>
	<body>
	<header>
	<h1>HTML dialog vs popover</h1>
	</header>
	<main>
	<p><button id="btnD">show dialog</button></p>
	<p><button id="btnP" popovertarget="popover1" popovertargetaction="toggle">show popover</button></p>
	</main>

	<div id="popover1" popover class="pop">Popover 1 Content</div>

	<dialog id="dialog1" class="dialog">
	<p>Dialog 1 content</p>
	<button class="btnClose">Close dialog</button>
	</dialog>
	</body>
	</html>
	* {
	box-sizing: border-box;
	}
	html {
	font-size: 20px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 300;
	line-height: 1.6;
	padding: 0;
	}
	body {
	margin: 0;
	padding: 0;
	}
	header,
	main {
	padding: 1rem 3rem;
	}
	button {
	font-size: 1rem;
	padding: 0.25rem 1rem;
	border: none;
	border-radius: 0.5rem;
	background-color: steelblue;
	color: white;
	}
	.dialog,
	.pop {
	border-radius: 0.5rem;
	}
	.dialog::backdrop {
	background-color: hsla(270, 50%, 50%, 0.9);
	}
	.pop::backdrop {
	background-color: hsla(0, 5%, 95%, 0.1);
	}

	/*
	Default styles for popover and dialog
	::backdrop {
	position: fixed;
	inset: 0px;
	background: rgba(0, 0, 0, 0.1);
	}
	:popover-open {
	}
	[popover]:not(:popover-open):not(dialog[open]) {
	display: none;
	}
	[popover] {
	position: fixed;
	width: fit-content;
	height: fit-content;
	color: canvastext;
	background-color: canvas;
	inset: 0px;
	margin: auto;
	border-width: initial;
	border-style: solid;
	border-color: initial;
	border-image: initial;
	padding: 0.25em;
	overflow: auto;
	}
	[popover]:popover-open::backdrop {
	position: fixed;
	background-color: transparent;
	pointer-events: none !important;
	inset: 0px;
	}
	*/
	(() => {
	//when the document is ready add listeners to the buttons and dialogs etc
	//btn.addEventListener("click", func)
	//dialog.addEventListener("close", func)
	//dialog.addEventListener("cancel", func)
	//popover.addEventListener("toggle", func)
	//popover.addEventListener("beforetoggle", func)

	document.getElementById('btnD').addEventListener('click', openDialog);

	document.getElementById('popover1').addEventListener('toggle', doneToggle);
	document.getElementById('popover1').addEventListener('beforetoggle', doneBeforeToggle);
	})();

	function doneToggle() {
	console.log('toggled');
	}
	function doneBeforeToggle(ev) {
	console.log('BEFORE toggled');
	}

	function openDialog(ev) {
	const dialog = document.getElementById('dialog1');
	dialog.showModal();
	dialog.addEventListener('close', (ev) => {
	let d = ev.target;
	console.log(d.returnValue);
	console.log(d.open);
	});

	let btn = dialog.querySelector('.btnClose');
	btn.addEventListener('click', () => {
	dialog.close(123);
	});
	}