From 1acd0cf86a6751aac017e2457c971526018e7f6e Mon Sep 17 00:00:00 2001
From: Fabien Cazenave <fabi1cazenave@users.noreply.github.com>
Date: Tue, 13 Feb 2024 23:21:10 +0100
Subject: [PATCH] use a proper dialog box (#118)

---
 101.html     | 29 +++++++++++++----------------
 css/demo.css | 38 ++++++++++++++------------------------
 index.html   | 41 +++++++++++++++++++----------------------
 js/demo.js   | 24 ++++++++----------------
 4 files changed, 54 insertions(+), 78 deletions(-)

diff --git a/101.html b/101.html
index 4953e138..f616e442 100644
--- a/101.html
+++ b/101.html
@@ -27,22 +27,19 @@ <h1> <button hidden>démo !</button> Lafayette101 </h1>
     <p> <small>QWERTY</small>-Lafayette, canal historique ! :-) </p>
   </header>
 
-  <div id="demo" hidden>
-    <div>
-      <input spellcheck="false">
-      <x-keyboard src="layouts/lafayette101.json"></x-keyboard>
-      <p>
-        <span> powered by
-          <a href="https://fabi1cazenave.github.io/x-keyboard/">x-keyboard</a>
-        </span> géométrie :
-        <select>
-          <option value="iso">  ISO  </option>
-          <option value="ansi"> ANSI </option>
-          <option value="ol60"> TMx  </option>
-        </select>
-      </p>
-    </div>
-  </div>
+  <dialog>
+    <input spellcheck="false">
+    <x-keyboard src="layouts/lafayette101.json"></x-keyboard>
+    <p> <span> powered by
+        <a href="https://OneDeadKey.github.io/x-keyboard/">x-keyboard</a>
+      </span> géométrie :
+      <select>
+        <option value="iso">  ISO  </option>
+        <option value="ansi"> ANSI </option>
+        <option value="ol60"> TMx  </option>
+      </select>
+    </p>
+  </dialog>
 
   <div style="position: relative; margin: 0 auto; width: 664px;">
     <p id="badRendering">
diff --git a/css/demo.css b/css/demo.css
index b975873d..edf9a67b 100644
--- a/css/demo.css
+++ b/css/demo.css
@@ -2,50 +2,40 @@ h1 button {
   float: right;
 }
 
-#demo[hidden] {
-  display: none;
+dialog::backdrop {
+  backdrop-filter: blur(5px);
 }
 
-#demo {
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
+dialog {
+  max-width: 66em;
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
-  z-index: 2;
-  text-align: center;
-}
-
-#demo div {
-  width: 100%;
-  max-width: 54em;
-  background-color: #f4f4f0;
-  box-sizing: border-box;
+  padding: 2em;
   margin: auto;
-  padding: 1.5em 2em 1em;
-  border-radius: 5px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background-color: #f4f4f8;
+  border: 5px solid #fff4;
 }
 
-#demo input {
+dialog input {
   box-sizing: border-box;
   width: calc(100% - 8px); /* to match the <x-keyboard> 4px padding */
+  height: 2em;
   text-align: center;
   font-size: 1.5em;
   margin-bottom: 1em;
 }
 
-#demo p {
+dialog p {
   margin: 1em 4px 0; /* to match the <x-keyboard> 4px padding */
   text-align: right;
 }
 
-#demo p span {
+dialog p span {
   float: left;
   font-size: small;
 }
 
-#demo p a {
+dialog p a {
   color: brown;
 }
diff --git a/index.html b/index.html
index 660ba25c..9eb4c91b 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,8 @@
   <meta name="description" content="Une variante ergonomique de QWERTY pour les
     développeurs francophones et les typographes exigeants. " />
   <title> QWERTY-Lafayette </title>
-  <link type="text/css" rel="stylesheet" href="css/layout.css"    />
-  <link type="text/css" rel="stylesheet" href="css/lafayette.css" />
-  <link type="text/css" rel="stylesheet" href="css/demo.css"      />
+  <link type="text/css" rel="stylesheet" href="css/layout.css" />
+  <link type="text/css" rel="stylesheet" href="css/demo.css" />
   <link type="image/svg+xml" rel="icon" href="favicon.svg" sizes="any" />
   <script src="js/x-keyboard.js" type="module"></script>
   <script src="js/demo.js" type="text/javascript"></script>
@@ -19,23 +18,21 @@ <h1> <button hidden>démo !</button> <small>QWERTY</small>-Lafayette </h1>
       les typographes exigeants. </p>
   </header>
 
-  <div id="demo" hidden>
-    <div>
-      <input spellcheck="false">
-      <x-keyboard src="layouts/lafayette.json"></x-keyboard>
-      <p> <span> powered by
-        <a href="https://fabi1cazenave.github.io/x-keyboard/">x-keyboard</a>
-        </span> géométrie :
-        <select>
-          <option value="iso">  ISO  </option>
-          <option value="ansi"> ANSI </option>
-          <option value="ol60"> TMx  </option>
-          <option value="ol50"> 4×6  </option>
-          <option value="ol40"> 3×6  </option>
-        </select>
-      </p>
-    </div>
-  </div>
+  <dialog>
+    <input spellcheck="false"></input>
+    <x-keyboard src="layouts/lafayette.json"></x-keyboard>
+    <p> <span> powered by
+      <a href="https://OneDeadKey.github.io/x-keyboard/">x-keyboard</a>
+      </span> géométrie :
+      <select>
+        <option value="iso">  ISO  </option>
+        <option value="ansi"> ANSI </option>
+        <option value="ol60"> TMx  </option>
+        <option value="ol50"> 4×6  </option>
+        <option value="ol40"> 3×6  </option>
+      </select>
+    </p>
+  </dialog>
 
   <div id="intro">
     <img src="img/lafayette.svg">
@@ -127,7 +124,7 @@ <h2 id="ergonomie"> Ergonomie <a href="#ergonomie">#</a> </h2>
   <p> Lafayette permet une ergonomie plus poussée que les dispositions optimisées
     telles que Dvorak ou Bépo. </p>
 
-  <h3 id="1dfh"> 1DFH : <i lang="en">“One Distance From Home”</i>
+  <h3 id="1dfh"> 1DFH : <i lang="en">“1u Distance From Home”</i>
     <a href="#1dfh">#</a> </h3>
   <p> De nos jours, c’est de loin le plus gros gain ergonomique qu’on puisse
     faire avec un clavier : <strong>n’utiliser aucune touche qui soit à plus
@@ -174,7 +171,7 @@ <h3 id="arsenik"> Claviers compacts <a href="arsenik">#</a> </h3>
     confort important ; et on peut même envisager de ne plus utiliser du tout de
     colonnes extérieures, supprimant ainsi radicalement toutes les extensions
     d’auriculaires. </p>
-  <p> <a href="https://github.com/fabi1cazenave/arsenik">Arsenik</a> est un
+  <p> <a href="https://github.com/OneDeadKey/arsenik">Arsenik</a> est un
     exemple d’agencement de touches permettant aux utilisateurs avancés
     d’utiliser 100 % de Lafayette sur uniquement 33 touches : </p>
   <img src="img/arsenik.svg">
diff --git a/js/demo.js b/js/demo.js
index 8cff3e1d..47cf9ed1 100644
--- a/js/demo.js
+++ b/js/demo.js
@@ -1,11 +1,11 @@
 window.addEventListener('DOMContentLoaded', () => {
   'use strict'; // eslint-disable-line
 
-  const keyboard = document.querySelector('x-keyboard');
+  const dialog   = document.querySelector('dialog');
+  const keyboard = document.querySelector('dialog x-keyboard');
+  const input    = document.querySelector('dialog input');
+  const geometry = document.querySelector('dialog select');
   const button   = document.querySelector('button');
-  const input    = document.querySelector('input');
-  const geometry = document.querySelector('#demo select');
-  const demo     = document.querySelector('#demo');
 
   if (!keyboard.layout) {
     console.warn('web components are not supported');
@@ -31,23 +31,15 @@ window.addEventListener('DOMContentLoaded', () => {
   /**
    * Open/Close modal
    */
-  function open() {
-    document.body.classList.add('demo');
-    demo.hidden = false;
+  button.onclick = () => {
+    dialog.showModal();
     input.value = '';
     input.focus();
   }
-  function close() {
+  input.onblur = () => {
     keyboard.clearStyle()
-    document.body.classList.remove('demo');
-    demo.hidden = true;
+    dialog.close();
   }
-  button.onclick = open;
-  demo.onclick = (event) => {
-    if (event.target.id === 'demo') {
-      close();
-    }
-  };
 
   /**
    * Keyboard highlighting & layout emulation