From e67541a64b7551f810d49abed7269e2ba80284aa Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 8 Jul 2023 23:58:39 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(focusable)=20focus=20and=20unfocus?=
 =?UTF-8?q?=20with=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html |  6 +++---
 main.ts    | 16 ++++++++++++++++
 style.css  |  6 +++++-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index ce16f24..0208996 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
           Value analysis / Value engineering
         </p>
       </section>
-      <section class="levers focusable">
+      <section class="levers">
         <ul>
           <li class="security focusable">Security</li>
           <li class="quality focusable">Quality</li>
@@ -99,14 +99,14 @@
       </section>
       <section class="ground">
         <section class="improvement">
-          <ul class="focusable">
+          <ul class="improvement-list focusable">
             <li class="heijunka focusable">Heijunka</li>
             <li class="standards focusable">Standards</li>
             <li class="kaizen focusable">Kaizen</li>
           </ul>
         </section>
         <section class="stability">
-          <ul class="focusable">
+          <ul class="stability-list focusable">
             <li class="s5s focusable">5S</li>
             <li class="problem-solving focusable">Problem solving</li>
             <li class="tpm focusable">TPM</li>
diff --git a/main.ts b/main.ts
index 043c659..c399ac1 100644
--- a/main.ts
+++ b/main.ts
@@ -18,3 +18,19 @@ if (size === "small") {
     body.style.fontSize = "15px"
   }
 }
+
+const focusElements = params.getAll("focus")
+
+if (focusElements.length >= 0) {
+  const focusables = document.querySelectorAll(".focusable")
+
+  focusables.forEach((focusable) => {
+    const elementToFocus = focusElements.some((element) =>
+      focusable.classList.contains(element)
+    )
+
+    if (!elementToFocus) {
+      focusable.classList.add("no-focus")
+    }
+  })
+}
diff --git a/style.css b/style.css
index c72fa62..1a1eb5b 100644
--- a/style.css
+++ b/style.css
@@ -2,7 +2,7 @@
 
 :root {
   --background-color: #b2f1ad;
-  --background-color-no-focus: #b2f1ad80;
+  --background-color-no-focus: #f4f9f3;
 }
 
 * {
@@ -42,6 +42,10 @@ li {
   background-color: var(--background-color);
 }
 
+.focusable.no-focus {
+  background-color: var(--background-color-no-focus);
+}
+
 .customer-satisfaction-roof {
   display: flex;
   flex-direction: column;