Erglace + Colemak FT + Bépolar + Lafayette (#94)

* `keebs` refacto + lafayette.md

* quick bugfixes

* drop unused SVG files

* release the Lafayette powwa

code/duck-typist.js

@@ -276,7 +276,9 @@ window.addEventListener('DOMContentLoaded', () => {
   };
 
   window.addEventListener('hashchange', loadLayout);
-  gLayout.addEventListener('change', loadLayout);
+  gLayout.addEventListener('change', () => {
+    window.location.hash = `#${gLayout.value}`;
+  });
 
   gDict.addEventListener('change', () => {
     localStorage.setItem('dict', gDict.value);

code/demo.js → code/keebs.js

@@ -1,19 +1,55 @@
+/**
+ *  <div class="keyboard">
+ *    <img src="/img/ergol.svg">     <!-- replaced by an <svg> element -->
+ *    <p>
+ *      <span>powered by <a
+ *        href="https://github.com/OneDeadKey/x-keyboard">x-keyboard</a></span>
+ *      <small>géométrie :</small>
+ *      <select>                     <!-- filled when the <svg> is created -->
+ *        <option value="dk iso">ISO</option>
+ *      </select>
+ *    </p>
+ *    <dialog>
+ *      <input></input>
+ *      <x-keyboard></x-keyboard>
+ *    </dialog>
+ *  </div>
+ */
+
 window.addEventListener('DOMContentLoaded', () => {
   'use strict'; // eslint-disable-line
 
-  const dialog   = document.querySelector('dialog');
-  const keyboard = document.querySelector('x-keyboard');
-  const input    = document.querySelector('input');
-  const geometry = document.querySelector('.keyboard select');
-  const button   = document.querySelector('.keyboard button');
+for (const keeb of document.querySelectorAll('.keyboard')) {
+    console.log(keeb);
 
-  if (!keyboard.layout) {
-    console.warn('web components are not supported');
-    return; // the web component has not been loaded
-  }
+  const dialog   = keeb.querySelector('dialog');
+  const keyboard = keeb.querySelector('x-keyboard');
+  const preview  = keeb.querySelector('img');
+  const input    = keeb.querySelector('input');
+  const geometry = keeb.querySelector('select');
+  const button   = keeb.querySelector('button');
 
   const getGeometry = () => geometry.value.split(' ')[1];
 
+  fetch(preview.getAttribute('src'))
+    .then(response => response.text())
+    .then(data => {
+      preview.outerHTML = data;
+      geometry.innerHTML = `
+        <option value="dk iso intlBackslash am">       ISO-A </option>
+        <option value="dk iso intlBackslash" selected> ISO   </option>
+        <option value="dk ansi">                       ANSI  </option>
+        <option value="dk ol60 ergo">                  TMx   </option>
+        <option value="dk ol50 ergo">                  4×6   </option>
+        <option value="dk ol40 ergo">                  3×6   </option>
+      `;
+      const svg = keeb.querySelector('.keyboard svg');
+      geometry.addEventListener('change', event => {
+        svg.setAttribute('class', event.target.value);
+        keyboard.geometry = getGeometry();
+      });
+    });
+
   fetch(keyboard.getAttribute('src'))
     .then(response => response.json() )
     .then(data => {
@@ -23,9 +59,14 @@ window.addEventListener('DOMContentLoaded', () => {
       if (button) button.disabled = false;
     });
 
-  geometry.addEventListener('change', event => {
-    keyboard.geometry = getGeometry();
-  });
+  if (!keyboard.layout) {
+    console.warn('web components are not supported');
+    return; // the web component has not been loaded
+  }
+
+  if (!input) {
+    return;
+  }
 
   /**
    * Open/Close modal
@@ -95,4 +136,6 @@ window.addEventListener('DOMContentLoaded', () => {
       event.target.value = event.target.value.slice(0, -event.data.length);
     }
   });
+}
+
 });

layouts/bepolar.yaml

@@ -0,0 +1,47 @@
+name: Bépolar
+name8: bepolar
+locale: fr
+variant: bepolar
+description: French (Bépolar)
+url: https://github.com/Ced-C/Bepolar
+author : Cèd’C
+geometry: ERGO
+version: 0.6.0
+
+base: |
+  ╭╌╌╌╌╌┰─────┬─────┬─────┬─────┬─────┰─────┬─────┬─────┬─────┬─────┰╌╌╌╌╌┬╌╌╌╌╌╮
+  ┆ ¬   ┃ #   │ « “ │ » ” │ ( „ │ ) ‘ ┃ @   │ + ÷ │ ^*ˇ │ / | │ * × ┃*µ   ┆ § ¶ ┆
+  ┆ ~*~ ┃ 1 & │ 2 < │ 3 > │ 4 ( │ 5 ) ┃ 6 @ │ 7 ± │ 8*^ │ 9 \ │ 0 ° ┃ = ≠ ┆ % ‰ ┆
+  ╰╌╌╌╌╌╂─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┼╌╌╌╌╌┤
+  ·     ┃ B   │ M   │ P   │ O   │ W   ┃ Z   │ V   │ D   │ L   │ J   ┃ {   ┆ }   ┆
+  ·     ┃   â │   û │   î │   ô │   œ ┃     │   ŭ │     │     │     ┃ [   ┆ ]   ┆
+  ·     ┠─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┼╌╌╌╌╌┤
+  ·     ┃ A   │ U   │ I   │ E   │ ;   ┃ C   │ T   │ S   │ R   │ N   ┃ "   ┆ €*¤ ┆
+  ·     ┃   à │   ù │   é │   è │ , ê ┃   ç │   ™ │   ß │   ® │   ñ ┃ ' ` ┆ $ ¢ ┆
+  ╭╌╌╌╌╌╂─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┴╌╌╌╌╌╯
+  ┆ \ ¦ ┃ ! ¡ │ Y   │ X   │ : · │ K   ┃ ? ¿ │ Q   │ G   │ H   │ F   ┃           ·
+  ┆ / | ┃ - — │   ŷ │   _ │ . … │   æ ┃***¨ │   – │   µ │   © │     ┃           ·
+  ╰╌╌╌╌╌┸─────┴─────┴─────┴─────┴─────┸─────┴─────┴─────┴─────┴─────┚ · · · · · ·
+
+altgr: |
+  ╭╌╌╌╌╌┰─────┬─────┬─────┬─────┬─────┰─────┬─────┬─────┬─────┬─────┰╌╌╌╌╌┬╌╌╌╌╌╮
+  ┆     ┃   ¹ │   ² │   ³ │   ⁴ │   ⁵ ┃   ⁶ │   ⁷ │   ⁸ │   ⁹ │   ⁰ ┃     ┆     ┆
+  ┆   ₍ ┃   ₁ │   ₂ │   ₃ │   ₄ │   ₅ ┃   ₆ │   ₇ │   ₈ │   ₉ │   ₀ ┃   ₎ ┆     ┆
+  ╰╌╌╌╌╌╂─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┼╌╌╌╌╌┤
+  ·     ┃     │   ≤ │   ≥ │  *¤ │   ‰ ┃  *^ │  *µ │   × │  *´ │  *` ┃     ┆     ┆
+  ·     ┃   @ │   < │   > │   $ │   % ┃   ^ │   & │   * │   ' │   ` ┃     ┆     ┆
+  ·     ┠─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┼╌╌╌╌╌┤
+  ·     ┃     │   ⁽ │   ⁾ │     │   ≠ ┃  */ │   ± │   — │   ÷ │  *¨ ┃*ˇ   ┆  *¤ ┆
+  ·     ┃   { │   ( │   ) │   } │   = ┃   \ │   + │   - │   / │   " ┃     ┆  ¤  ┆
+  ╭╌╌╌╌╌╂─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┴╌╌╌╌╌╯
+  ┆     ┃  *~ │     │     │   – │     ┃   ¦ │   ¬ │  *¸ │     │     ┃           ·
+  ┆     ┃   ~ │   [ │   ] │   _ │   # ┃   | │   ! │   ; │   : │   ? ┃           ·
+  ╰╌╌╌╌╌┸─────┴─────┴─────┴─────┴─────┸─────┴─────┴─────┴─────┴─────┚ · · · · · ·
+
+
+spacebar:
+  shift:       "\u202f"  # NARROW NO-BREAK SPACE
+  altgr:       "\u0020"  # SPACE
+  altgr_shift: "\u00a0"  # NO-BREAK SPACE
+  1dk:         "\u2019"  # RIGHT SINGLE QUOTATION MARK
+  1dk_shift:   "\u2019"  # RIGHT SINGLE QUOTATION MARK

layouts/colemak-french-touch.json

@@ -0,0 +1,68 @@
+{
+  "name": "Colemak French Touch",
+  "description": "French (Colemak French Touch)",
+  "geometry": "ergo",
+  "keymap": {
+    "Digit1": [ "1", "€", "₁", "¹" ],
+    "Digit2": [ "2", "@", "₂", "²" ],
+    "Digit3": [ "3", "#", "₃", "³" ],
+    "Digit4": [ "4", "$", "₄", "⁴" ],
+    "Digit5": [ "5", "%", "₅", "⁵" ],
+    "Digit6": [ "6", "^", "₆", "⁶" ],
+    "Digit7": [ "7", "&", "₇", "⁷" ],
+    "Digit8": [ "8", "*", "₈", "⁸" ],
+    "Digit9": [ "9", "«", "₉", "⁹" ],
+    "Digit0": [ "0", "»", "₀", "⁰" ],
+    "KeyQ": [ "q", "Q", "@" ],
+    "KeyW": [ "w", "W", "<", "≤" ],
+    "KeyE": [ "f", "F", ">", "≥" ],
+    "KeyR": [ "p", "P", "$", "*¤" ],
+    "KeyT": [ "g", "G", "%", "‰" ],
+    "KeyY": [ "j", "J", "^", "*^" ],
+    "KeyU": [ "l", "L", "&" ],
+    "KeyI": [ "o", "O", "*", "×" ],
+    "KeyO": [ "**", "!", "'", "*´" ],
+    "KeyP": [ "y", "Y", "`", "*`" ],
+    "KeyA": [ "a", "A", "{" ],
+    "KeyS": [ "r", "R", "(", "⁽" ],
+    "KeyD": [ "s", "S", ")", "⁾" ],
+    "KeyF": [ "t", "T", "}" ],
+    "KeyG": [ "d", "D", "=", "≠" ],
+    "KeyH": [ "m", "M", "\\", "*/" ],
+    "KeyJ": [ "n", "N", "+", "±" ],
+    "KeyK": [ "e", "E", "-", "—" ],
+    "KeyL": [ "i", "I", "/", "÷" ],
+    "Semicolon": [ "u", "U", "\"", "*¨" ],
+    "KeyZ": [ "z", "Z", "~", "*~" ],
+    "KeyX": [ "x", "X", "[" ],
+    "KeyC": [ "c", "C", "]" ],
+    "KeyV": [ "v", "V", "_", "–" ],
+    "KeyB": [ "b", "B", "#" ],
+    "KeyN": [ "k", "K", "|", "¦" ],
+    "KeyM": [ "h", "H", "!", "¬" ],
+    "Comma": [ "-", "?", ";", "*¸" ],
+    "Period": [ ",", ";", ":" ],
+    "Slash": [ ".", ":", "?" ],
+    "Minus": [ "/", "_" ],
+    "Equal": [ "=", "+" ],
+    "BracketLeft": [ "[", "{" ],
+    "BracketRight": [ "]", "}" ],
+    "Quote": [ "'", "\"" ],
+    "Backquote": [ "`", "~" ],
+    "Backslash": [ "\\", "|" ],
+    "IntlBackslash": [ "<", ">" ],
+    "Space": [ " ", " ", " ", " " ]
+  },
+  "deadkeys": {
+    "**": { "**": "*¨", "0": "°", "F": "À", "f": "à", "P": "Ù", "p": "ù", "L": "Œ", "l": "œ", "O": "Ô", "o": "ô", "Y": "Î", "y": "î", "A": "Â", "a": "â", "R": "É", "r": "é", "S": "È", "s": "è", "d": "–", "m": "(", "n": ")", "E": "Ê", "e": "ê", "U": "Û", "u": "û", "Z": "Æ", "z": "æ", "C": "Ç", "c": "ç", "V": "_", "v": "_", "b": "—", "k": "“", "h": "”", "-": "…", ":": "•", ".": "·", " ": "’", " ": "’", " ": "’" },
+    "*`": { "*`": "`", "A": "À", "a": "à", "E": "È", "e": "è", "I": "Ì", "i": "ì", "N": "Ǹ", "n": "ǹ", "O": "Ò", "o": "ò", "U": "Ù", "u": "ù", "W": "Ẁ", "w": "ẁ", "Y": "Ỳ", "y": "ỳ", " ": "`", " ": "`", " ": "`" },
+    "*´": { "*´": "´", "A": "Á", "a": "á", "C": "Ć", "c": "ć", "E": "É", "e": "é", "G": "Ǵ", "g": "ǵ", "I": "Í", "i": "í", "K": "Ḱ", "k": "ḱ", "L": "Ĺ", "l": "ĺ", "M": "Ḿ", "m": "ḿ", "N": "Ń", "n": "ń", "O": "Ó", "o": "ó", "P": "Ṕ", "p": "ṕ", "R": "Ŕ", "r": "ŕ", "S": "Ś", "s": "ś", "U": "Ú", "u": "ú", "W": "Ẃ", "w": "ẃ", "Y": "Ý", "y": "ý", "Z": "Ź", "z": "ź", " ": "'", " ": "'", " ": "'" },
+    "*^": { "*^": "^", "A": "Â", "a": "â", "C": "Ĉ", "c": "ĉ", "E": "Ê", "e": "ê", "G": "Ĝ", "g": "ĝ", "H": "Ĥ", "h": "ĥ", "I": "Î", "i": "î", "J": "Ĵ", "j": "ĵ", "O": "Ô", "o": "ô", "S": "Ŝ", "s": "ŝ", "U": "Û", "u": "û", "W": "Ŵ", "w": "ŵ", "Y": "Ŷ", "y": "ŷ", "Z": "Ẑ", "z": "ẑ", "0": "⁰", "1": "¹", "2": "²", "3": "³", "4": "⁴", "5": "⁵", "6": "⁶", "7": "⁷", "8": "⁸", "9": "⁹", "(": "⁽", ")": "⁾", "+": "⁺", "-": "⁻", "=": "⁼", " ": "^", " ": "^", " ": "^" },
+    "*~": { "*~": "~", "A": "Ã", "a": "ã", "E": "Ẽ", "e": "ẽ", "I": "Ĩ", "i": "ĩ", "N": "Ñ", "n": "ñ", "O": "Õ", "o": "õ", "U": "Ũ", "u": "ũ", "V": "Ṽ", "v": "ṽ", "Y": "Ỹ", "y": "ỹ", "<": "≲", ">": "≳", "=": "≃", " ": "~", " ": "~", " ": "~" },
+    "*¨": { "*¨": "¨", "A": "Ä", "a": "ä", "E": "Ë", "e": "ë", "H": "Ḧ", "h": "ḧ", "I": "Ï", "i": "ï", "O": "Ö", "o": "ö", "t": "ẗ", "U": "Ü", "u": "ü", "W": "Ẅ", "w": "ẅ", "X": "Ẍ", "x": "ẍ", "Y": "Ÿ", "y": "ÿ", " ": "\"", " ": "\"", " ": "\"" },
+    "*¸": { "*¸": "¸", "C": "Ç", "c": "ç", "D": "Ḑ", "d": "ḑ", "E": "Ȩ", "e": "ȩ", "G": "Ģ", "g": "ģ", "H": "Ḩ", "h": "ḩ", "K": "Ķ", "k": "ķ", "L": "Ļ", "l": "ļ", "N": "Ņ", "n": "ņ", "R": "Ŗ", "r": "ŗ", "S": "Ş", "s": "ş", "T": "Ţ", "t": "ţ", " ": "¸", " ": "¸", " ": "¸" },
+    "*/": { "*/": "/", "A": "Ⱥ", "a": "ⱥ", "B": "Ƀ", "b": "ƀ", "C": "Ȼ", "c": "ȼ", "D": "Đ", "d": "đ", "E": "Ɇ", "e": "ɇ", "G": "Ǥ", "g": "ǥ", "H": "Ħ", "h": "ħ", "I": "Ɨ", "i": "ɨ", "J": "Ɉ", "j": "ɉ", "L": "Ł", "l": "ł", "O": "Ø", "o": "ø", "P": "Ᵽ", "p": "ᵽ", "R": "Ɍ", "r": "ɍ", "T": "Ŧ", "t": "ŧ", "U": "Ʉ", "u": "ʉ", "Y": "Ɏ", "y": "ɏ", "Z": "Ƶ", "z": "ƶ", "<": "≮", "≤": "≰", "≥": "≱", ">": "≯", "=": "≠", " ": "/", " ": "/", " ": "/" },
+    "*¤": { "*¤": "¤", "A": "₳", "a": "؋", "B": "₱", "b": "฿", "C": "₡", "c": "¢", "D": "₯", "d": "₫", "E": "₠", "e": "€", "F": "₣", "f": "ƒ", "G": "₲", "g": "₲", "H": "₴", "h": "₴", "I": "៛", "i": "﷼", "K": "₭", "k": "₭", "L": "₤", "l": "£", "M": "ℳ", "m": "₥", "N": "₦", "n": "₦", "O": "૱", "o": "௹", "P": "₧", "p": "₰", "R": "₨", "r": "₢", "S": "$", "s": "₪", "T": "₮", "t": "৳", "U": "圓", "u": "元", "W": "₩", "w": "₩", "Y": "円", "y": "¥", " ": "¤", " ": "¤", " ": "¤" }
+  },
+  "altgr": true
+}

layouts/colemak-french-touch.toml

@@ -0,0 +1,48 @@
+name        = "Colemak French Touch"
+name8       = "colemkft"
+locale      = "fr"
+variant     = "colemkft"
+description = "French (Colemak French Touch)"
+author      = "Cedric Rossi"
+url         = "https://github.com/cedricr/colemak-french-touch"
+geometry    = "ERGO"
+version     = "0.3.1"
+
+base = '''
+╭╌╌╌╌╌┰─────┬─────┬─────┬─────┬─────┰─────┬─────┬─────┬─────┬─────┰╌╌╌╌╌┬╌╌╌╌╌╮
+┆ ~   ┃ €   │ @   │ #   │ $   │ %   ┃ ^   │ &   │ *   │ «   │ »   ┃ _   ┆ +   ┆
+┆ `   ┃ 1   │ 2   │ 3   │ 4   │ 5   ┃ 6   │ 7   │ 8   │ 9   │ 0 ° ┃ /   ┆ =   ┆
+╰╌╌╌╌╌╂─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┼╌╌╌╌╌┤
+·     ┃ Q   │ W   │ F   │ P   │ G   ┃ J   │ L   │ O   │ !   │ Y   ┃ {   ┆ }   ┆
+·     ┃     │     │   à │   ù │     ┃     │   œ │   ô │***¨ │   î ┃ [   ┆ ]   ┆
+·     ┠─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┼╌╌╌╌╌┤
+·     ┃ A   │ R   │ S   │ T   │ D   ┃ M   │ N   │ E   │ I   │ U   ┃ "   ┆ |   ┆
+·     ┃   â │   é │   è │     │   – ┃   ( │   ) │   ê │     │   û ┃ '   ┆ \   ┆
+╭╌╌╌╌╌╂─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┴╌╌╌╌╌╯
+┆ >   ┃ Z   │ X   │ C   │ V _ │ B   ┃ K   │ H   │ ?   │ ;   │ : • ┃           ·
+┆ <   ┃   æ │     │   ç │   _ │   — ┃   “ │   ” │ - … │ ,   │ . · ┃           ·
+╰╌╌╌╌╌┸─────┴─────┴─────┴─────┴─────┸─────┴─────┴─────┴─────┴─────┚ · · · · · ·
+'''
+
+altgr = '''
+╭╌╌╌╌╌┰─────┬─────┬─────┬─────┬─────┰─────┬─────┬─────┬─────┬─────┰╌╌╌╌╌┬╌╌╌╌╌╮
+┆     ┃   ¹ │   ² │   ³ │   ⁴ │   ⁵ ┃   ⁶ │   ⁷ │   ⁸ │   ⁹ │   ⁰ ┃     ┆     ┆
+┆     ┃   ₁ │   ₂ │   ₃ │   ₄ │   ₅ ┃   ₆ │   ₇ │   ₈ │   ₉ │   ₀ ┃     ┆     ┆
+╰╌╌╌╌╌╂─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┼╌╌╌╌╌┤
+·     ┃     │   ≤ │   ≥ │  *¤ │   ‰ ┃  *^ │     │   × │  *´ │  *` ┃     ┆     ┆
+·     ┃   @ │   < │   > │   $ │   % ┃   ^ │   & │   * │   ' │   ` ┃     ┆     ┆
+·     ┠─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┼╌╌╌╌╌┤
+·     ┃     │   ⁽ │   ⁾ │     │   ≠ ┃  */ │   ± │   — │   ÷ │  *¨ ┃     ┆     ┆
+·     ┃   { │   ( │   ) │   } │   = ┃   \ │   + │   - │   / │   " ┃     ┆     ┆
+╭╌╌╌╌╌╂─────┼─────┼─────┼─────┼─────╂─────┼─────┼─────┼─────┼─────╂╌╌╌╌╌┴╌╌╌╌╌╯
+┆     ┃  *~ │     │     │   – │     ┃   ¦ │   ¬ │  *¸ │     │     ┃           ·
+┆     ┃   ~ │   [ │   ] │   _ │   # ┃   | │   ! │   ; │   : │   ? ┃           ·
+╰╌╌╌╌╌┸─────┴─────┴─────┴─────┴─────┸─────┴─────┴─────┴─────┴─────┚ · · · · · ·
+'''
+
+[spacebar]
+shift       = "\u202f"  # NARROW NO-BREAK SPACE
+altgr       = "\u0020"  # SPACE
+altgr_shift = "\u00a0"  # NO-BREAK SPACE
+1dk         = "\u2019"  # RIGHT SINGLE QUOTATION MARK
+1dk_shift   = "\u2019"  # RIGHT SINGLE QUOTATION MARK