Keep controls table while editing

.drone.yml

@@ -4,7 +4,7 @@ type: docker
 
 steps:
   - name: build
-    image: node:20-alpine
+    image: node:22-alpine
     commands:
       - yarn install
       - yarn build

index.html

@@ -15,7 +15,6 @@
     <div id="app" hidden="hidden">
       <div class="actions">
         <button id="back-button" data-i18n>Back</button>
-        <a id="controls-button" class="button open-modal" href="#controls" data-i18n>Controls</a>
       </div>
       <h2 id="current-word"></h2>
       <div class="input">
@@ -26,13 +25,9 @@
         <div id="input-buttons"></div>
         <button id="clear-button" data-i18n>Clear</button>
       </div>
-      <div class="player">
-        <div id="state-graph" class="blurred"></div>
-        <button id="display-graph" data-i18n>Display representation</button>
-      </div>
-    </div>
-    <div id="controls" class="modal" hidden="hidden">
-      <div class="modal-content">
+      <div id="controls">
+        <div><button id="sidebar-toggle"></button></div>
+        <div id="sidebar">
           <h3 data-i18n>Controls</h3>
           <table>
             <thead>
@@ -76,6 +71,11 @@
             </tr>
           </table>
         </div>
+        <div class="player">
+          <div id="state-graph" class="blurred"></div>
+          <button id="display-graph" data-i18n>Display representation</button>
+        </div>
+      </div>
     </div>
     <script type="module" src="src/main.js"></script>
   </body>

package.json

@@ -13,10 +13,10 @@
     "@types/d3": "^7.4.3",
     "@types/eslint__js": "^8.42.3",
     "eslint": "^8.57.0",
-    "globals": "^14.0.0",
-    "typescript": "^5.4.2",
-    "typescript-eslint": "^7.3.1",
-    "vite": "^5.2.2"
+    "globals": "^15.2.0",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.9.0",
+    "vite": "^5.2.11"
   },
   "dependencies": {
     "d3": "^7.9.0",

src/fsm.js

@@ -7,11 +7,12 @@ const IS_INVALID = 'is-invalid';
 const currentWord = /** @type {HTMLInputElement} */ (document.getElementById('current-word'));
 const wordInput = /** @type {HTMLInputElement} */ (document.getElementById('word-input'));
 const buttons = /** @type {HTMLDivElement} */ (document.getElementById('input-buttons'));
-const controlsButton = /** @type {HTMLButtonElement} */ (document.getElementById('controls-button'));
 const clearButton = /** @type {HTMLButtonElement} */ (document.getElementById('clear-button'));
 const light = /** @type {HTMLDivElement} */ (document.getElementById('light'));
 const container = /** @type {HTMLDivElement} */ (document.getElementById('state-graph'));
 const displayGraphButton = /** @type {HTMLButtonElement} */ (document.getElementById('display-graph'));
+const controls = /** @type {HTMLElement} */ (document.getElementById('controls'));
+const sidebarToggle = /** @type {HTMLElement} */ (document.getElementById('sidebar-toggle'));
 
 /**
  * @param {string} name
@@ -25,11 +26,11 @@ export function openAutomaton(name, states, editable = false) {
   const viewer = new GraphEditor();
   viewer.readonly = !editable;
   if (editable) {
-    controlsButton.removeAttribute('hidden');
+    sidebarToggle.removeAttribute('hidden');
     container.classList.remove('blurred');
     displayGraphButton.setAttribute('hidden', 'hidden');
   } else {
-    controlsButton.setAttribute('hidden', 'hidden');
+    sidebarToggle.setAttribute('hidden', 'hidden');
     container.classList.add('blurred');
     displayGraphButton.removeAttribute('hidden');
   }
@@ -146,6 +147,11 @@ displayGraphButton.addEventListener('click', () => {
   displayGraphButton.setAttribute('hidden', 'hidden');
 });
 
+sidebarToggle.addEventListener('click', () => {
+  console.log('toggle');
+  controls.classList.toggle('has-sidebar');
+});
+
 /**
  * @param {import('./examples.js').State[]} states
  * @returns {number[]}

src/main.js

@@ -1,7 +1,6 @@
 import { AUTOMATONS } from './examples.js';
 import { openAutomaton } from './fsm.js';
 import { tr, trUserContent } from './i18n.ts';
-import './modal.ts';
 
 const automatonSelector = /** @type {HTMLDivElement} */ (document.getElementById('automaton-selector'));
 const automatonCollection = /** @type {HTMLDivElement} */ (document.getElementById('automaton-collection'));

src/modal.ts

@@ -1,34 +0,0 @@
-let modal: HTMLElement | null = null;
-
-function openModal(event: Event) {
-  event.preventDefault();
-  const el = document.querySelector((event.target as HTMLElement).getAttribute('href')!)! as HTMLElement;
-  // @ts-expect-error reset
-  el.style.display = null;
-  el.removeAttribute('hidden');
-  el.setAttribute('aria-modal', 'true');
-  modal = el;
-  modal.addEventListener('click', closeModal);
-}
-
-function closeModal(event: Event) {
-  event.preventDefault();
-  if (modal === null) {
-    return;
-  }
-  modal.style.display = 'none';
-  modal.setAttribute('hidden', 'hidden');
-  modal.removeAttribute('aria-modal');
-  modal.removeEventListener('click', closeModal);
-  modal = null;
-}
-
-document.querySelectorAll('.open-modal').forEach((el) => {
-  el.addEventListener('click', openModal);
-});
-
-window.addEventListener('keydown', (event) => {
-  if (event.key === 'Escape' && modal !== null) {
-    closeModal(event);
-  }
-});

src/style.css

@@ -238,36 +238,37 @@ th, td {
   padding: 0 16px;
 }
 
-.modal[hidden] {
-  display: none;
-}
-
 .actions {
   position: absolute;
   top: 16px;
   left: 16px;
 }
 
-.modal {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, .8);
-  animation: fadeIn .3s both
+#sidebar-toggle::after {
+  content: "🡒";
 }
-
-.modal-content {
-  overflow: auto;
-  width: 600px;
-  max-width: calc(100vw - 20px);
-  max-height: calc(100vh - 20px);
-  padding: 20px;
-  background-color: #1a1a1a;
+.has-sidebar #sidebar-toggle::after {
+  content: "🡐";
+}
+#sidebar {
+  margin-left: -600px;
+  padding-left: .5rem;
+  transition: all .3s;
+  position: absolute;
+  pointer-events: none;
+}
+.has-sidebar #sidebar {
+  margin: -.2rem 0 0 0;
+}
+.has-sidebar #sidebar-toggle {
+  margin-left: 7rem;
+  transition: all .3s;
+}
+#controls {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1em;
+  flex-grow: 1;
 }
 
 @media (prefers-color-scheme: light) {
@@ -302,7 +303,7 @@ th, td {
   th, td {
     border-bottom: thin solid hsla(0, 0%, 0%, .12);
   }
-  .modal-content {
+  .sidebar-content {
     background-color: #f0f0f0;
   }
 }