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];