allow toggling grayscale

This commit is contained in:
Gaspard Jankowiak 2024-10-04 10:46:04 +02:00
parent dc3ff56178
commit f066a2ca4f
2 changed files with 18 additions and 4 deletions

View file

@ -12,9 +12,8 @@
.hidden { display: none; } .hidden { display: none; }
.kf-trombi_card { align-content: end; } .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 { @media print {
.headerHeading, #idPageNavi {display: none;} .headerHeading, #idPageNavi {display: none;}

View file

@ -35,8 +35,22 @@ function appendLink() {
trombi.classList.add(`kf-trombi_trombi_${slider.value}`); 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"); 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"); var tr = document.createElement("tr");
tr.classList.add("coNavdocument.getElementByIdroup"); tr.classList.add("coNavdocument.getElementByIdroup");
@ -86,6 +100,7 @@ function generateTrombi() {
trombi.id = "kf-trombi_trombi"; trombi.id = "kf-trombi_trombi";
trombi.classList.add("hidden"); trombi.classList.add("hidden");
trombi.classList.add(`kf-trombi_trombi_${slider.value}`); trombi.classList.add(`kf-trombi_trombi_${slider.value}`);
trombi.classList.add("kf-trombi_enhanced");
const form = document.getElementById("idTNListe"); const form = document.getElementById("idTNListe");
const table_body = document.getElementById("idTNVWTable").tBodies[0]; const table_body = document.getElementById("idTNVWTable").tBodies[0];