From 1bb0dd1f6c0587b1f37fdc2ad486dc67446e6afb Mon Sep 17 00:00:00 2001
From: Pierre Le Marre <dev@wismill.eu>
Date: Thu, 11 Jun 2026 18:12:57 +0200
Subject: [PATCH] feat(analyzer): Enable to choose the layers to show

Possible layers (apart base):
- AltGr
- ODK
- Mixed
---
 code/keebs.js                          |  14 +--
 code/layout-analyzer.js                |   4 +-
 code/x-keyboard.js                     | 137 +++++++++++++++++++------
 www/content/stats.html                 |  17 +++
 www/layouts/shortcodes/x-keyboard.html |  12 +--
 5 files changed, 140 insertions(+), 44 deletions(-)

diff --git a/code/keebs.js b/code/keebs.js
index 8fa27a30..e2bf9c41 100644
--- a/code/keebs.js
+++ b/code/keebs.js
@@ -5,7 +5,7 @@
  *    </div>
  *    <form>
  *      <fieldset><input type="radio" name="layers"/>…</fieldset>
- *      <fieldset><input type="radio" name="geopetry"/>…</fieldset>
+ *      <fieldset><input type="radio" name="geometry"/>…</fieldset>
  *    </form>
  *    <dialog>
  *      <input placeholder="…"/>
@@ -40,12 +40,12 @@ window.addEventListener('DOMContentLoaded', () => {
    *  - the first class can be used as the x-keyboard geometry.
    */
   const geometryClasses = {
-    'ISO-A': ['iso', 'intlBackslash', 'am'], // am = angle-mod CSS hack
-    'ISO':   ['iso', 'intlBackslash'],       // default / pre-selected value
-    'ANSI':  ['ansi'],
-    'TMx':   ['ol60', 'ergo'],
-    '4×6':   ['ol50', 'ergo'],
-    '3×6':   ['ol40', 'ergo'],
+    'iso-a': ['iso', 'intlBackslash', 'am'], // am = angle-mod CSS hack
+    'iso':   ['iso', 'intlBackslash'],       // default / pre-selected value
+    'ansi':  ['ansi'],
+    'ol60':  ['ol60', 'ergo'],
+    'ol50':  ['ol50', 'ergo'],
+    'ol40':  ['ol40', 'ergo'],
   };
 
 for (const keeb of document.querySelectorAll('.keyboard')) {
diff --git a/code/layout-analyzer.js b/code/layout-analyzer.js
index 77d1eb63..a6436b27 100644
--- a/code/layout-analyzer.js
+++ b/code/layout-analyzer.js
@@ -544,7 +544,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
   // keyboard state: these <select> element IDs match the x-keyboard properties
   // -- but the `layout` property requires a JSON fetch
-  const IDs = ['layout', 'geometry', 'corpus'];
+  const IDs = ['layout', 'geometry', 'corpus', 'layers'];
   const setProp = (key, value) => {
     if (key === 'layout') {
       if (value) {
@@ -601,7 +601,7 @@ window.addEventListener('DOMContentLoaded', () => {
       IDs.map(prop => state[prop]).join('/').replace(/\/+$/, '');
   };
   const applyHashState = () => {
-    const hash = window.location.hash || '/ergol//en+fr';
+    const hash = window.location.hash || '/ergol//en+fr/altgr';
     const hashState = hash.split('/').slice(1);
     IDs.forEach((key, i) => {
       setProp(key, hashState[i] || '');
diff --git a/code/x-keyboard.js b/code/x-keyboard.js
index ee1e009c..d749c74c 100644
--- a/code/x-keyboard.js
+++ b/code/x-keyboard.js
@@ -133,6 +133,24 @@ function newKeyboardLayout(keyMap = {}, deadKeys = {}, geometry = '') {
   let pendingDK;
   let platform = '';
 
+  // Add 1DK levels
+  const odk = deadKeys['**'];
+  if (odk !== undefined) {
+    keyMap = Object.fromEntries(
+      Object.entries(keyMap).map(([key, levels]) => {
+        if (levels.length < 4) {
+          levels = levels.concat(new Array(4 - levels.length));
+        }
+        levels = Array.from(levels);
+        if (levels.length <= 4) {
+          levels.push(odk[levels[0]]);
+          levels.push(odk[levels[1]]);
+        }
+        return [key, levels];
+      })
+    );
+  }
+
   return {
     get keyMap() {
       return keyMap;
@@ -374,12 +392,15 @@ const keyLevel = (level, label, position) => {
   const symbol = symbols[label] || '';
   const content = symbol || (label || '').slice(-1);
   let className = '';
-  if (level > 4) {
+  let levelPrefix = 'level';
+  if (level < 0) {
     className = 'dk';
+    levelPrefix = 'dk';
+    level = -level;
   } else if (isDeadKey(label)) {
     className = `deadKey ${symbol.startsWith(' ') ? 'diacritic' : ''}`;
   }
-  return text(content, `level${level} ${className}`, attrs);
+  return text(content, `${levelPrefix}${level} ${className}`, attrs);
 };
 
 // In order not to overload the `alt` layers visually (AltGr & dead keys),
@@ -410,17 +431,20 @@ function drawKey(element, keyMap) {
    * So if the lowercase version of the `shift` layer does not match the `base`
    * layer, we'll show the lowercase letter (e.g. Greek 'ς').
    */
-  const [l1, l2, l3, l4] = keyChars;
+  const [l1, l2, l3, l4, l5, l6] = keyChars;
   const base = l1.toUpperCase() !== l2 ? l1 : '';
   const shift = base || l2.toLowerCase() === l1 ? l2 : l1;
   const salt = altUpperChar(l3, l4);
+  const sodk = altUpperChar(l5, l6);
   element.innerHTML = `
     ${keyLevel(1, base, { x: 0.28, y: 0.79 })}
     ${keyLevel(2, shift, { x: 0.28, y: 0.41 })}
     ${keyLevel(3, l3, { x: 0.7, y: 0.79 })}
     ${keyLevel(4, salt, { x: 0.7, y: 0.41 })}
-    ${keyLevel(5, '', { x: 0.7, y: 0.79 })}
-    ${keyLevel(6, '', { x: 0.7, y: 0.41 })}
+    ${keyLevel(5, l5, { x: 0.7, y: 0.79 })}
+    ${keyLevel(6, sodk, { x: 0.7, y: 0.41 })}
+    ${keyLevel(-1, '', { x: 0.7, y: 0.79 })}
+    ${keyLevel(-2, '', { x: 0.7, y: 0.41 })}
   `;
 }
 
@@ -441,8 +465,8 @@ function drawDK(element, keyMap, deadKey) {
   const alt0 = deadKey[keyChars[0]];
   const alt1 = deadKey[keyChars[1]];
 
-  drawChar(element.querySelector('.level5'), alt0);
-  drawChar(element.querySelector('.level6'), altUpperChar(alt0, alt1));
+  drawChar(element.querySelector('.dk1'), alt0);
+  drawChar(element.querySelector('.dk2'), altUpperChar(alt0, alt1));
 }
 
 /**
@@ -943,8 +967,8 @@ const themes = `
   }
 
   /* dimmed AltGr + bold dead keys */
-  .level3, .level4 { fill: ${KEY_COLOR_L3}; opacity: .5; }
-  .level5, .level6 { fill: ${KEY_COLOR_L5}; }
+  .level3, .level4      { fill: ${KEY_COLOR_L3}; opacity: .5; }
+  .level5, .level6, .dk { fill: ${KEY_COLOR_L5}; }
   .deadKey {
     fill: ${DEAD_KEY_COLOR};
     font-size: 14px;
@@ -954,17 +978,39 @@ const themes = `
     font-weight: bolder;
   }
 
+  .layers-odk .level3,
+  .layers-odk .level4       { display: none; }
+  .layers-odk.altgr .level3,
+  .layers-odk.altgr .level4 { display: block; }
+
+  .layers-altgr .level5,
+  .layers-altgr .level6 { display: none; }
+
+  .layers-mixed .level5 { transform: translate(0, -22.8px); }
+  .layers-mixed .level6 { display: none; }
+
   /* hide Level4 (Shift+AltGr) unless AltGr is pressed */
   .level4        { display: none; }
   .altgr .level4 { display: block; }
 
+  .altgr .level5,
+  .altgr .level6 { display: none; }
+
+  /* hide Level6 (Shift+AltGr) */
+  .level6        { display: none; }
+
+  /* hide dk1 and dk2 unless a dead key is pressed */
+  .dk1, .dk2     { display: none; }
+  .dk .dk1,
+  .dk .dk2       { display: block; }
+
   /* highlight AltGr + Dead Keys */
   .dk .level1, .altgr .level1,
   .dk .level2, .altgr .level2 { opacity: 0.25; }
-  .dk .level5, .altgr .level3,
-  .dk .level6, .altgr .level4 { opacity: 1; }
-  .dk .level3,
-  .dk .level4 { display: none; }
+  .dk .dk1, .altgr .level3,
+  .dk .dk2, .altgr .level4 { opacity: 1; }
+  .dk .level3, .dk level4,
+  .dk .level5, .dk level6 { display: none; }
 
   @media (prefers-color-scheme: dark) {
     rect, path { stroke: #777; fill: #4d4d4d; }
@@ -972,7 +1018,7 @@ const themes = `
     g:target rect, .press rect, g:target path, .press path { fill: #558; }
     text { fill: #bbb; }
     .level3, .level4 { fill: #99f; }
-    .level5, .level6 { fill: #6d6; }
+    .level5, .level6, .dk { fill: #6d6; }
     .deadKey { fill: #f44; }
 
     [theme="reach"] .pinkyKey  rect { fill: hsl(  0, 20%, 30%); }
@@ -1069,11 +1115,13 @@ class Keyboard extends HTMLElement {
     this.root = this.attachShadow({ mode: 'open' });
     this.root.appendChild(template.content.cloneNode(true));
     this._state = {
-      geometry: this.getAttribute('geometry') || '',
+      layers: this.getAttribute('layers') || 'altgr',
+      geometry: this.getAttribute('geometry') || 'iso',
       platform: this.getAttribute('platform') || '',
       theme: this.getAttribute('theme') || '',
       layout: newKeyboardLayout(),
     };
+    this.layers = this._state.layers;
     this.geometry = this._state.geometry;
     this.platform = this._state.platform;
     this.theme = this._state.theme;
@@ -1114,6 +1162,24 @@ class Keyboard extends HTMLElement {
     });
   }
 
+  get layers() {
+    return this._state.layers;
+  }
+
+  set layers(value) {
+    const supportedLayers = ['odk', 'mixed', 'altgr'];
+    if (!value && !supportedLayers.includes(value)) {
+      return;
+    }
+    const svg = this.root.querySelector('svg');
+    const mkClass = suffix => `layers-${suffix}`
+    if (this._state.layers) {
+      svg.classList.remove(mkClass(this._state.layers));
+    }
+    this._state.layers = value;
+    svg.classList.add(mkClass(this._state.layers));
+  }
+
   get geometry() {
     return this._state.geometry;
   }
@@ -1135,15 +1201,15 @@ class Keyboard extends HTMLElement {
      *     OL40 = OLKB Planck
      */
     const supportedShapes = {
-      alt: 'alt intlYen',
-      ks: 'alt intlYen ks',
-      jis: 'iso intlYen intlRo jis',
-      abnt: 'iso intlBackslash intlRo',
-      iso: 'iso intlBackslash',
-      ansi: '',
-      ol60: 'ergo ol60',
-      ol50: 'ergo ol50',
-      ol40: 'ergo ol40',
+      alt: ['alt', 'intlYen'],
+      ks: ['alt', 'intlYen', 'ks'],
+      jis: ['iso', 'intlYen', 'intlRo', 'jis'],
+      abnt: ['iso', 'intlBackslash', 'intlRo'],
+      iso: ['iso', 'intlBackslash'],
+      ansi: [],
+      ol60: ['ergo', 'ol60'],
+      ol50: ['ergo', 'ol50'],
+      ol40: ['ergo', 'ol40'],
     };
     if (value && !(value in supportedShapes)) {
       return;
@@ -1151,8 +1217,14 @@ class Keyboard extends HTMLElement {
     this._state.geometry = value;
     const geometry = value || this.layout.geometry || 'ansi';
     const shape = supportedShapes[geometry];
-    this.root.querySelector('svg').className.baseVal = shape;
-    setFingerAssignment(this.root, !shape.startsWith('iso'));
+    const svg = this.root.querySelector('svg');
+    Object.values(supportedShapes).forEach(
+      classes => classes.forEach(cls =>
+        svg.classList.remove(cls)
+      )
+    );
+    shape.forEach(cls => svg.classList.add(cls));
+    setFingerAssignment(this.root, !shape.includes('iso'));
   }
 
   get platform() {
@@ -1181,9 +1253,7 @@ class Keyboard extends HTMLElement {
     this._state.layout = value;
     this._state.layout.platform = this.platform;
     this.geometry = this._state.geometry;
-    Array.from(this.root.querySelectorAll('.key')).forEach(key =>
-      drawKey(key, value.keyMap),
-    );
+    this.draw();
   }
 
   get fingerAssignments() {
@@ -1207,6 +1277,15 @@ class Keyboard extends HTMLElement {
       .filter(element => !element.id.startsWith('row_'));
   }
 
+  /**
+   * Drawing
+   */
+  draw() {
+    Array.from(this.root.querySelectorAll('.key')).forEach(key =>
+      drawKey(key, this._state.layout.keyMap),
+    );
+  }
+
   /**
    * KeyboardEvent helpers
    */
diff --git a/www/content/stats.html b/www/content/stats.html
index b56e3b72..b200f842 100644
--- a/www/content/stats.html
+++ b/www/content/stats.html
@@ -22,6 +22,23 @@
 <div id="sticky-select">
   <form>
     {{< keymap-list >}}
+    <select id="layers">
+      <option
+        value="odk"
+        title="caractères obtenus par la touche « Typo » (vue simplifiée)">
+          Typo
+      </option>
+      <option
+        value="mixed"
+        title="caractères obtenus par les touches « Typo » et « Symboles » (AltGr)">
+          Typo+Symboles
+      </option>
+      <option
+        value="altgr" checked
+        title="caractères obtenus par la touche « Symboles » (AltGr)">
+          Symboles
+      </option>
+    </select>
     <select id="geometry">
       <option value="iso" selected>ISO</option>
       <option value="ansi">ANSI</option>
diff --git a/www/layouts/shortcodes/x-keyboard.html b/www/layouts/shortcodes/x-keyboard.html
index 5e4682f4..b80b60cc 100644
--- a/www/layouts/shortcodes/x-keyboard.html
+++ b/www/layouts/shortcodes/x-keyboard.html
@@ -17,17 +17,17 @@
         title="caractères obtenus par la touche « Symboles »">
     </fieldset>
     <fieldset class="geometry">
-      <input type="radio" name="geometry" label="3×6"   value="3×6"
+      <input type="radio" name="geometry" label="3×6"   value="ol40"
         title="géométrie 40 % type OLKB Planck">
-      <input type="radio" name="geometry" label="4×6"   value="4×6"
+      <input type="radio" name="geometry" label="4×6"   value="ol50"
         title="géométrie 50 % type OLKB Preonic">
-      <input type="radio" name="geometry" label="TMx"   value="TMx"
+      <input type="radio" name="geometry" label="TMx"   value="ol60"
         title="géométrie 60 % type TypeMatrix">
-      <input type="radio" name="geometry" label="ANSI"  value="ANSI"
+      <input type="radio" name="geometry" label="ANSI"  value="ansi"
         title="géométrie américaine">
-      <input type="radio" name="geometry" label="ISO"   value="ISO" checked
+      <input type="radio" name="geometry" label="ISO"   value="iso" checked
         title="géométrie européenne">
-      <input type="radio" name="geometry" label="ISO-A" value="ISO-A"
+      <input type="radio" name="geometry" label="ISO-A" value="iso-a"
         title="géométrie européenne avec variante en « A »">
     </fieldset>
   </form>