From 5f780c751afa6db498186192d8e7e3b3ebc46644 Mon Sep 17 00:00:00 2001
From: clfreville2 <clement.freville2@etu.uca.fr>
Date: Wed, 15 May 2024 22:10:55 +0200
Subject: [PATCH] Keep controls table while editing

---
 .drone.yml    |   2 +-
 index.html    | 100 +++++++++++++++++++++++++-------------------------
 package.json  |   8 ++--
 src/fsm.js    |  12 ++++--
 src/main.js   |   1 -
 src/modal.ts  |  34 -----------------
 src/style.css |  49 +++++++++++++------------
 7 files changed, 89 insertions(+), 117 deletions(-)
 delete mode 100644 src/modal.ts

diff --git a/.drone.yml b/.drone.yml
index fc3f00e..dd96316 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -4,7 +4,7 @@ type: docker
 
 steps:
   - name: build
-    image: node:20-alpine
+    image: node:22-alpine
     commands:
       - yarn install
       - yarn build
diff --git a/index.html b/index.html
index c88739a..6eca77e 100644
--- a/index.html
+++ b/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,55 +25,56 @@
         <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">
-        <h3 data-i18n>Controls</h3>
-        <table>
-          <thead>
-          <tr>
-            <th data-i18n>Action</th>
-            <th data-i18n>Desktop</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr>
-            <td data-i18n>Pan</td>
-            <td data-i18n>Left-click and drag</td>
-          </tr>
-          <tr>
-            <td data-i18n>Zoom in/out</td>
-            <td data-i18n>Mouse wheel</td>
-          </tr>
-          <tr>
-            <td data-i18n>Create state</td>
-            <td data-i18n>Double-click</td>
-          </tr>
-          <tr>
-            <td data-i18n>Move state</td>
-            <td data-i18n>Middle-click and drag</td>
-          </tr>
-          <tr>
-            <td data-i18n>Edit/Delete state</td>
-            <td data-i18n>Right-click</td>
-          </tr>
-          <tr>
-            <td data-i18n>Create transition</td>
-            <td data-i18n>Left-click and drag</td>
-          </tr>
-          <tr>
-            <td data-i18n>Edit transition</td>
-            <td data-i18n>Right-click</td>
-          </tr>
-          <tr>
-            <td data-i18n>Delete transition</td>
-            <td data-i18n>Right-click</td>
-          </tr>
-        </table>
+      <div id="controls">
+        <div><button id="sidebar-toggle"></button></div>
+        <div id="sidebar">
+          <h3 data-i18n>Controls</h3>
+          <table>
+            <thead>
+            <tr>
+              <th data-i18n>Action</th>
+              <th data-i18n>Desktop</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td data-i18n>Pan</td>
+              <td data-i18n>Left-click and drag</td>
+            </tr>
+            <tr>
+              <td data-i18n>Zoom in/out</td>
+              <td data-i18n>Mouse wheel</td>
+            </tr>
+            <tr>
+              <td data-i18n>Create state</td>
+              <td data-i18n>Double-click</td>
+            </tr>
+            <tr>
+              <td data-i18n>Move state</td>
+              <td data-i18n>Middle-click and drag</td>
+            </tr>
+            <tr>
+              <td data-i18n>Edit/Delete state</td>
+              <td data-i18n>Right-click</td>
+            </tr>
+            <tr>
+              <td data-i18n>Create transition</td>
+              <td data-i18n>Left-click and drag</td>
+            </tr>
+            <tr>
+              <td data-i18n>Edit transition</td>
+              <td data-i18n>Right-click</td>
+            </tr>
+            <tr>
+              <td data-i18n>Delete transition</td>
+              <td data-i18n>Right-click</td>
+            </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>
diff --git a/package.json b/package.json
index 97e9d7b..10c17f1 100644
--- a/package.json
+++ b/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",
diff --git a/src/fsm.js b/src/fsm.js
index 1fe54bf..2863543 100644
--- a/src/fsm.js
+++ b/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[]}
diff --git a/src/main.js b/src/main.js
index 8f33d10..19cfd75 100644
--- a/src/main.js
+++ b/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'));
diff --git a/src/modal.ts b/src/modal.ts
deleted file mode 100644
index 4411041..0000000
--- a/src/modal.ts
+++ /dev/null
@@ -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);
-  }
-});
diff --git a/src/style.css b/src/style.css
index 642c6a0..17b5899 100644
--- a/src/style.css
+++ b/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;
   }
 }