Skip to content

Commit

Permalink
use a proper dialog box (#118)
Browse files Browse the repository at this point in the history
  • Loading branch information
fabi1cazenave authored Feb 13, 2024
1 parent 0092050 commit 1acd0cf
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 78 deletions.
29 changes: 13 additions & 16 deletions 101.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
38 changes: 14 additions & 24 deletions css/demo.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
41 changes: 19 additions & 22 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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">
Expand Down
24 changes: 8 additions & 16 deletions js/demo.js
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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
Expand Down

0 comments on commit 1acd0cf

Please sign in to comment.