Replace JavaScript trigger with HTML `command` and `commandfor` attributes

diff --git a/index.html b/index.html
index 0479010be683d5fefc3bbf7fdf8f01aed7b94599..a74bf56b76096c1703a83c25e3d9c7bb50acdd0e 100644 (file)
--- a/index.html
+++ b/index.html
@@ -133,7 +133,7 @@
 <body>
   <header>
     <h1>minimal-masonry</h1>
-    <button class="info-button">
+    <button class="info-button" command="show-modal" commandfor="info-dialog">
       <svg role="img" aria-labelledby="info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <title id="info">Open info dialog</title>
         <circle cx="12" cy="12" r="10"></circle>
@@ -143,7 +143,7 @@
     </button>
   </header>
 
-  <dialog>
+  <dialog id="info-dialog">
     <h1>What is this?</h1>
     <p>This website is a minimal reference implementation of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout">masonry layout</a>.</p>
     <p><a href="https://github.com/ardislu/minimal-masonry">Click here</a> to view the source code on GitHub.</p>
@@ -155,9 +155,6 @@
   <main></main>
 
   <script>
-    const infoDialog = document.querySelector('dialog');
-    document.querySelector('.info-button').addEventListener('click', e => infoDialog.showModal());
-
     const main = document.querySelector('main');
     main.insertAdjacentHTML('beforeend', '<div><h1></h1></div>'.repeat(20));