From f066a2ca4fcdaa63e9fe9b853670c574023056c9 Mon Sep 17 00:00:00 2001
From: Gaspard Jankowiak <gaspard.jankowiak@uni-graz.at>
Date: Fri, 4 Oct 2024 10:46:04 +0200
Subject: [PATCH] allow toggling grayscale

---
 directory.css |  5 ++---
 directory.js  | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/directory.css b/directory.css
index a70397c..f22644b 100644
--- a/directory.css
+++ b/directory.css
@@ -12,9 +12,8 @@
 .hidden { display: none; }
 
 .kf-trombi_card { align-content: end; }
-.kf-trombi_trombi_img {
-  filter: grayscale(100%) contrast(150%);
-}
+
+.kf-trombi_enhanced { filter: contrast(150%) grayscale(100%); }
 
 @media print {
   .headerHeading, #idPageNavi {display: none;}
diff --git a/directory.js b/directory.js
index 965b6e0..85a79c3 100644
--- a/directory.js
+++ b/directory.js
@@ -35,8 +35,22 @@ function appendLink() {
     trombi.classList.add(`kf-trombi_trombi_${slider.value}`);
   })
 
+  enhanced_checkbox = document.createElement("input");
+  enhanced_checkbox.id = "kf-trombi_enhanced_checkbox";
+  enhanced_checkbox.type = "checkbox";
+  enhanced_checkbox.checked = true;
+
+  var enhance_label = document.createElement("label");
+  enhance_label.textContent = " enhance";
+  enhance_label.htmlFor = "kf-trombi_enhanced_checkbox";
+
+  enhanced_checkbox.addEventListener("input", (event) => {
+    const trombi = document.getElementById("kf-trombi_trombi");
+    trombi.classList.toggle('kf-trombi_enhanced');
+  })
+
   var row_links = document.createElement("td");
-  row_links.append(link, slider, column_nr, column_label);
+  row_links.append(link, slider, column_nr, column_label, enhanced_checkbox, enhance_label);
 
   var tr = document.createElement("tr");
   tr.classList.add("coNavdocument.getElementByIdroup");
@@ -86,6 +100,7 @@ function generateTrombi() {
   trombi.id = "kf-trombi_trombi";
   trombi.classList.add("hidden");
   trombi.classList.add(`kf-trombi_trombi_${slider.value}`);
+  trombi.classList.add("kf-trombi_enhanced");
   const form = document.getElementById("idTNListe");
 
   const table_body = document.getElementById("idTNVWTable").tBodies[0];