(function () {
// ====== DESIGN TOKENS ======
const TOKENS = {
/* Globaal */
labelFontSize: "15px",
labelFontWeight: "300",
headFontSize: "18px",
headFontWeight: "600",
/* Speciale kleuren */
nieuwBadgeBg: "#f4a300", // achtergrondkleur 'Nieuw'-badge
nieuwBadgeText: "#fff", // tekstkleur 'Nieuw'-badge
recycleIconColor: "green", // kleur van recycle icoon
gap: "6px", // ruimte tussen checkbox en label
rowGap: "6px", // ruimte tussen items (rijen)
itemMinHeight: 28, // minimale hoogte van één item (px)
checkboxSize: 18, // maat checkbox/decorator (px)
checkboxOffsetY: -10, // verticale verschuiving checkbox (px)
labelLineHeight: 1.35, // line-height van label
labelOffsetY: 0, // verticale verschuiving label-tekst (px)
/* Counters (badge rechts) */
counterBg: "rgba(255, 255, 255, 0)", // achtergrondkleur badge
counterColor: "#272727ff", // tekstkleur badge
counterFontSize: "8px", // tekstgrootte badge
counterFontWeight: "250", // tekstgewicht badge
counterPaddingY: "0px",
counterPaddingX: "0px",
counterBorderRadius: "999px",
counterOffsetY: 0,
hideZeroCounters: true, // badges met 0 verbergen
/* Iconen naast labels (zoals recycle-icoon) */
iconSize: 16, // px
iconOffsetY: 10, // px
iconMarginLeft: 6, // px
checkboxBorderColor: "#9AA9B5", // randkleur van de checkbox
checkboxBorderWidth: 1, // px
checkboxBorderRadius: 3, // px
checkboxCheckedBorderColor: "#6A5FDD", // optioneel: randkleur als 'checked'
// Handmatige target voor Fabrikant-widget (Elementor id)
fabrikantSelector: [
'[data-id="0194ebb"]', // matcht op data-id
'.elementor-element-0194ebb' // fallback: Elementor voegt vaak ook deze class toe
],
/* NIEUW: Info-icoon ("i" in rondje) */
infoIcon: {
matchLabels: ["vrije valhoogte"], // <- labels waarbij het icoon moet komen
size: 16, // diameter icoon (px)
fontSize: 12, // lettergrootte 'i'
bg: "#000", // achtergrondkleur rondje
color: "#fff", // tekstkleur 'i'
borderRadius: "999px",
marginLeft: 6, // ruimte t.o.v. label/counter
offsetY: 0 // optische verticale uitlijning
},
/* NIEUW: te openen Elementor-popup */
infoPopup: {
popupId: 5481 // stop (voorkomt dubbele iconen bij her-render)
if (rowRoot.querySelector(".tasqt-info-dot-vvh")) return;
// Maak het 'i'-icoon
const btn = document.createElement("button");
btn.type = "button";
btn.className = "tasqt-info-dot-vvh";
btn.setAttribute("aria-label", "Info: Vrije valhoogte");
btn.setAttribute("title", "Meer info");
btn.setAttribute("aria-expanded", "false");
btn.textContent = "i";
applyInfoDotStyles(btn);
// Plaats vóór de counter (mooie volgorde), anders direct achter label
const counter = rowRoot.querySelector(".jet-filters-counter");
if (counter) counter.before(btn); else lblEl.after(btn);
// Klik opent Elementor-popup
btn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const id = TOKENS.infoPopup.popupId;
if (window.elementorProFrontend &&
elementorProFrontend.modules &&
elementorProFrontend.modules.popup &&
typeof elementorProFrontend.modules.popup.showPopup === "function") {
elementorProFrontend.modules.popup.showPopup({ id });
} else {
// Fallback (als Elementor nog niet geladen is)
console.warn("Elementor popup-module niet gevonden; controleer of Elementor Pro actief is.");
}
});
}
function applyInfoDotStyles(btn) {
btn.style.setProperty("display", "inline-flex", "important");
btn.style.setProperty("align-items", "center", "important");
btn.style.setProperty("justify-content", "center", "important");
btn.style.setProperty("line-height", "1", "important");
btn.style.setProperty("width", TOKENS.infoIcon.size + "px", "important");
btn.style.setProperty("height", TOKENS.infoIcon.size + "px", "important");
btn.style.setProperty("margin-left", TOKENS.infoIcon.marginLeft + "px", "important");
btn.style.setProperty("font-size", TOKENS.infoIcon.fontSize + "px", "important");
btn.style.setProperty("font-weight", "700", "important");
btn.style.setProperty("background", TOKENS.infoIcon.bg, "important");
btn.style.setProperty("color", TOKENS.infoIcon.color, "important");
btn.style.setProperty("border-radius", TOKENS.infoIcon.borderRadius, "important");
btn.style.setProperty("border", "none", "important");
btn.style.setProperty("cursor", "pointer", "important");
btn.style.setProperty("transform", `translateY(${TOKENS.infoIcon.offsetY}px)`, "important");
btn.style.setProperty("user-select", "none", "important");
// extra: haal browser/thema-knopstijl weg
btn.style.setProperty("appearance", "none", "important");
btn.style.setProperty("-webkit-appearance", "none", "important");
btn.style.setProperty("padding", "0", "important");
btn.style.setProperty("min-width", "0", "important");
btn.style.setProperty("min-height", "0", "important");
}
function styleFilterLabels(ctx = document) {
const color =
getComputedStyle(document.documentElement)
.getPropertyValue("--e-global-color-text")
.trim() || "#001347";
/* ---------- TITELS ---------- */
ctx.querySelectorAll(".jet-smart-filters-checkboxes .jet-filter-label").forEach(el => {
el.style.setProperty("font-size", TOKENS.headFontSize, "important");
el.style.setProperty("font-weight", TOKENS.headFontWeight, "important");
el.style.setProperty("color", color, "important");
el.style.setProperty("padding", "0 0 6px", "important");
el.style.setProperty("margin", "0", "important");
});
/* --- INFO-ICOON achter de titel 'Vrije valhoogte' (check-range) --- */
ctx.querySelectorAll(".jet-smart-filters-check-range .jet-filter-label").forEach(title => {
const txt = (title.textContent || "").trim().toLowerCase();
if (!TOKENS.infoIcon.matchLabels.some(n => txt.includes(n.toLowerCase()))) return;
// voorkom dubbelen bij her-render
if (title.querySelector(".tasqt-info-dot-vvh")) return;
const btn = document.createElement("button");
btn.type = "button";
btn.className = "tasqt-info-dot-vvh";
btn.setAttribute("aria-label", "Info");
btn.setAttribute("title", "Meer info");
btn.textContent = "i";
applyInfoDotStyles(btn);
// zet het icoon ín de titel, zodat het er vlak achter staat
title.appendChild(btn);
// klik => open Elementor-popup
btn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const id = TOKENS.infoPopup.popupId;
if (window.elementorProFrontend &&
elementorProFrontend.modules &&
elementorProFrontend.modules.popup &&
typeof elementorProFrontend.modules.popup.showPopup === "function") {
elementorProFrontend.modules.popup.showPopup({ id });
} else {
console.warn("Elementor popup-module niet gevonden; is Elementor Pro actief?");
}
});
});
/* ---------- CONTAINER beheert ruimte tussen items ---------- */
ctx.querySelectorAll(".jet-smart-filters-checkboxes .jet-list-tree").forEach(tree => {
tree.style.setProperty("padding", "8px 0", "important");
tree.style.setProperty("display", "grid", "important");
tree.style.setProperty("row-gap", TOKENS.rowGap, "important");
});
/* ---------- RIJ / ITEM ---------- */
ctx.querySelectorAll(".jet-smart-filters-checkboxes .jet-checkboxes-list__row").forEach(row => {
row.style.setProperty("padding", "0", "important");
row.style.setProperty("margin", "0", "important");
});
ctx.querySelectorAll(".jet-smart-filters-checkboxes .jet-checkboxes-list__item").forEach(item => {
item.style.setProperty("display", "flex", "important");
item.style.setProperty("align-items", "center", "important");
item.style.setProperty("gap", TOKENS.gap, "important");
item.style.setProperty("line-height", TOKENS.labelLineHeight.toString(), "important");
const extra = Math.max(0, Math.abs(TOKENS.labelOffsetY) - 2);
item.style.setProperty("min-height", (TOKENS.itemMinHeight + extra) + "px", "important");
item.style.setProperty("margin", "0", "important");
item.style.setProperty("padding", "0", "important");
});
/* ---------- NATIVE INPUT (checkbox) ---------- */
ctx.querySelectorAll(".jet-smart-filters-checkboxes .jet-checkboxes-list__input").forEach(inp => {
inp.style.setProperty("width", TOKENS.checkboxSize + "px", "important");
inp.style.setProperty("height", TOKENS.checkboxSize + "px", "important");
inp.style.setProperty("margin", "0", "important");
inp.style.setProperty("vertical-align", "middle", "important");
inp.style.setProperty("align-self", "center", "important");
inp.style.setProperty("transform", `translateY(${TOKENS.checkboxOffsetY}px)`, "important");
});
/* ---------- DECORATOR (custom checkbox-vakje) ---------- */
ctx.querySelectorAll(".jet-smart-filters-checkboxes .jet-checkboxes-list__decorator").forEach(dec => {
dec.style.setProperty("box-sizing", "border-box", "important");
dec.style.setProperty("width", TOKENS.checkboxSize + "px", "important");
dec.style.setProperty("height", TOKENS.checkboxSize + "px", "important");
dec.style.setProperty("margin-right", "4px", "important");
dec.style.setProperty("transform", `translateY(${TOKENS.checkboxOffsetY}px)`, "important");
// rand uniform maken
dec.style.setProperty("border-style", "solid", "important");
dec.style.setProperty("border-width", TOKENS.checkboxBorderWidth + "px", "important");
dec.style.setProperty("border-color", TOKENS.checkboxBorderColor, "important");
dec.style.setProperty("border-radius", TOKENS.checkboxBorderRadius + "px", "important");
// NB: we raken 'background' niet aan i.v.m. het vinkje van Jet
});
/* ---------- COUNTERS (badges) ---------- */
ctx.querySelectorAll(
".jet-smart-filters-checkboxes .jet-filters-counter, " +
".jet-smart-filters-check-range .jet-filters-counter, " +
".jet-smart-filters-color-image .jet-filters-counter" // < {
counter.style.setProperty("margin-left", TOKENS.gap, "important");
counter.style.setProperty("display", "inline-flex", "important");
counter.style.setProperty("align-items", "center", "important");
counter.style.setProperty("vertical-align", "middle", "important");
// prefix/suffix weg
counter.querySelectorAll(".counter-prefix, .counter-suffix").forEach(el => {
el.style.setProperty("display", "none", "important");
});
/* ---------- ICONEN naast labels ---------- */
// 1) Voor iconen die je zélf plaatst met class .tasqt-icon-*
ctx.querySelectorAll(".jet-smart-filters-checkboxes .jet-checkboxes-list__button .tasqt-icon, .jet-smart-filters-checkboxes .jet-checkboxes-list__button .tasqt-icon-recycle .f1eeebe").forEach(icon => {
icon.style.setProperty("display", "inline-block", "important");
icon.style.setProperty("line-height", "1", "important");
icon.style.setProperty("margin-left", TOKENS.iconMarginLeft + "px", "important");
icon.style.setProperty("font-size", TOKENS.iconSize + "px", "important");
icon.style.setProperty("transform", `translateY(${TOKENS.iconOffsetY}px)`, "important");
icon.style.color = TOKENS.recycleIconColor;
});
// 2) (Optioneel) Specifiek icoon bij een label-tekst, bv. 'Kunststof'
ctx.querySelectorAll(".jet-smart-filters-checkboxes .jet-checkboxes-list__label").forEach(lbl => {
const text = (lbl.textContent || "").trim();
if (!text.includes("Kunststof")) return;
const rowRoot = lbl.closest(".jet-checkboxes-list__button") || lbl.parentElement;
if (!rowRoot) return;
// Bestaat het icoon al?
let icon = rowRoot.querySelector(".tasqt-icon-recycle");
if (!icon) {
icon = document.createElement("i");
icon.className = "fas fa-recycle tasqt-icon-recycle";
// Plaats vóór de counter (als die er is) voor nette volgorde
const counter = rowRoot.querySelector(".jet-filters-counter");
if (counter) counter.before(icon); else lbl.after(icon);
}
// Stijlen (gebruikt TOKENS.*)
icon.style.setProperty("display", "inline-block", "important");
icon.style.setProperty("line-height", "1", "important");
icon.style.setProperty("margin-left", TOKENS.iconMarginLeft + "px", "important");
icon.style.setProperty("font-size", TOKENS.iconSize + "px", "important");
icon.style.setProperty("transform", `translateY(${TOKENS.iconOffsetY}px)`, "important");
});
/* ---------- Badge 'nieuw' ---------- */
ctx.querySelectorAll(".tasqt-badge-new").forEach(badge => {
badge.style.setProperty("display", "inline-block", "important");
badge.style.setProperty("line-height", "1", "important");
badge.style.setProperty("margin-left", TOKENS.iconMarginLeft + "px", "important");
badge.style.setProperty("font-size", TOKENS.iconSize + "px", "important");
badge.style.setProperty("transform", `translateY(${TOKENS.iconOffsetY}px)`, "important");
badge.style.background = TOKENS.nieuwBadgeBg;
badge.style.color = TOKENS.nieuwBadgeText;
});
// ▼ NIEUW: bepaal offset (Fabrikant override > globaal)
const isFab = isInFabrikant(counter);
const fabOff = (TOKENS.fabrikant?.counterOffsetY);
const cOff = (isFab && fabOff != null) ? fabOff : TOKENS.counterOffsetY;
counter.style.setProperty("transform", `translateY(${cOff}px)`, "important"); // visueel, geen layout
const val = counter.querySelector(".value");
if (val) {
val.style.setProperty("background", TOKENS.counterBg, "important");
val.style.setProperty("color", TOKENS.counterColor, "important");
val.style.setProperty("padding", `${TOKENS.counterPaddingY} ${TOKENS.counterPaddingX}`, "important");
val.style.setProperty("border-radius", TOKENS.counterBorderRadius, "important");
val.style.setProperty("font-weight", TOKENS.counterFontWeight, "important");
val.style.setProperty("font-size", TOKENS.counterFontSize, "important");
val.style.setProperty("min-width", "1.5em", "important");
val.style.setProperty("line-height", "1", "important");
val.style.setProperty("text-align", "center", "important");
if (TOKENS.hideZeroCounters && /^\s*0\s*$/.test(val.textContent)) {
counter.style.setProperty("display", "none", "important");
}
}
});
/* ---------- SUBLABELS (tekst) ---------- */
ctx.querySelectorAll(
".jet-smart-filters-checkboxes .jet-checkboxes-list__label, " +
".jet-smart-filters-check-range .jet-checkboxes-list__label"
).forEach(lbl => {
lbl.style.setProperty("font-size", TOKENS.labelFontSize, "important");
lbl.style.setProperty("font-weight", TOKENS.labelFontWeight, "important");
lbl.style.setProperty("vertical-align", "middle", "important");
lbl.style.setProperty("display", "inline-block", "important");
lbl.style.setProperty("line-height", TOKENS.labelLineHeight.toString(), "important");
// Globale offset alléén toepassen buiten Fabrikant
if (!isInFabrikant(lbl)) {
lbl.style.setProperty("transform", `translateY(${TOKENS.labelOffsetY}px)`, "important");
}
// ===== NIEUW: Info-icoon plaatsen bij labels uit matchlijst (bv. "Vrije valhoogte")
const text = (lbl.textContent || "").trim().toLowerCase();
if (TOKENS.infoIcon.matchLabels.some(name => text.includes(name.toLowerCase()))) {
ensureInfoIconForLabelPopup(lbl);
}
});
// Button (bevat label + counter + iconen) verticaal verschuiven
ctx.querySelectorAll(".jet-smart-filters-checkboxes .jet-checkboxes-list__button").forEach(btn => {
// Buiten Fabrikant mag de globale 'top' nog gebruikt worden
if (!isInFabrikant(btn)) {
btn.style.setProperty("position", "relative", "important");
btn.style.setProperty("top", TOKENS.labelOffsetY + "px", "important");
}
});
// forceer font-weight na late overrides
ctx.querySelectorAll(".jet-smart-filters-checkboxes .jet-checkboxes-list__label").forEach(lbl => {
requestAnimationFrame(() => {
lbl.style.setProperty("font-weight", TOKENS.labelFontWeight, "important");
});
setTimeout(() => {
lbl.style.setProperty("font-weight", TOKENS.labelFontWeight, "important");
}, 0);
});
/* ---------- FABRIKANT: eigen instellingen ---------- */
const fabrikantBoxes = (() => {
const found = new Set();
// 1) Optioneel: harde selector(s)
if (TOKENS.fabrikantSelector) {
// Sta string of array toe
const selectors = Array.isArray(TOKENS.fabrikantSelector)
? TOKENS.fabrikantSelector
: [TOKENS.fabrikantSelector];
selectors.forEach(sel => {
ctx.querySelectorAll(sel).forEach(el => {
const bx = el.closest(".jet-smart-filters-checkboxes, .jet-smart-filters-check-range") || el;
if (bx) found.add(bx);
});
});
}
// 2) Altijd: titel-detectie (ID-onafhankelijk)
ctx.querySelectorAll(".jet-smart-filters-checkboxes").forEach(box => {
if (isFabrikantBox(box)) found.add(box);
});
return [...found];
})();
fabrikantBoxes.forEach(fabrikantBox => {
fabrikantBox.classList.add("tasqt-is-fabrikant"); // < {
item.style.setProperty("gap", f.gap, "important");
item.style.setProperty("min-height", f.itemMinHeight + "px", "important");
item.style.setProperty("align-items", "center", "important");
});
// checkbox-maten en hoogte
fabrikantBox.querySelectorAll(".jet-checkboxes-list__input").forEach(inp => {
inp.style.setProperty("width", f.checkboxSize + "px", "important");
inp.style.setProperty("height", f.checkboxSize + "px", "important");
inp.style.setProperty("transform", `translateY(${f.checkboxOffsetY}px)`, "important");
});
fabrikantBox.querySelectorAll(".jet-checkboxes-list__decorator").forEach(dec => {
const bColor = (f.checkboxBorderColor ?? TOKENS.checkboxBorderColor);
const bWidth = (f.checkboxBorderWidth ?? TOKENS.checkboxBorderWidth);
const bRadius = (f.checkboxBorderRadius ?? TOKENS.checkboxBorderRadius);
dec.style.setProperty("width", f.checkboxSize + "px", "important");
dec.style.setProperty("height", f.checkboxSize + "px", "important");
dec.style.setProperty("margin-right", "6px", "important");
dec.style.setProperty("transform", `translateY(${f.checkboxOffsetY}px)`, "important");
dec.style.setProperty("border-style", "solid", "important");
dec.style.setProperty("border-width", bWidth + "px", "important");
dec.style.setProperty("border-color", bColor, "important");
dec.style.setProperty("border-radius", bRadius + "px", "important");
});
// label + button optische uitlijning
fabrikantBox.querySelectorAll(".jet-checkboxes-list__label").forEach(lbl => {
lbl.style.setProperty("line-height", f.labelLineHeight.toString(), "important");
requestAnimationFrame(() => {
lbl.style.setProperty("font-weight", TOKENS.labelFontWeight, "important");
});
lbl.style.setProperty("transform", `translateY(${f.labelOffsetY ?? 0}px)`, "important");
});
fabrikantBox.querySelectorAll(".jet-checkboxes-list__button").forEach(btn => {
const off = (f.labelOffsetY ?? TOKENS.labelOffsetY);
btn.style.setProperty("display", "inline-flex", "important");
btn.style.setProperty("align-items", "center", "important");
btn.style.setProperty("transform", `translateY(${off}px)`, "important");
btn.style.setProperty("will-change", "transform", "important");
// Zorg dat eerdere 'top' niet stoort
btn.style.setProperty("position", "relative", "important");
btn.style.setProperty("top", "0px", "important");
});
// Fabrikant: aparte counter styling (alleen als token niet null is)
fabrikantBox.querySelectorAll(".jet-filters-counter .value").forEach(val => {
if (f.counterBg) val.style.setProperty("background", f.counterBg, "important");
if (f.counterColor) val.style.setProperty("color", f.counterColor, "important");
if (f.counterFontSize) val.style.setProperty("font-size", f.counterFontSize, "important");
if (f.counterFontWeight) val.style.setProperty("font-weight", f.counterFontWeight, "important");
});
});
}
// ---------- BOOT ----------
function boot() {
// Injecteer CSS voor :checked state met Elementor accentkleur
const STYLES_ID = "tasqt-filter-checked-style";
if (!document.getElementById(STYLES_ID)) {
const s = document.createElement("style");
s.id = STYLES_ID;
s.textContent = `
/* Globaal: gebruik 1 consistente kleur */
.jet-smart-filters-checkboxes
.jet-checkboxes-list__input:checked + .jet-checkboxes-list__decorator {
background: var(--e-global-color-accent) !important;
border-color: var(--e-global-color-accent) !important;
}
/* FABRIKANT: reset standaard knopachtergrond */
.tasqt-is-fabrikant .jet-checkboxes-list__button {
background: transparent !important;
}
/* FABRIKANT: eigen blauwe kleur voor vakje + rand */
.tasqt-is-fabrikant
.jet-checkboxes-list__input:checked + .jet-checkboxes-list__decorator {
background: #4fa8f2 !important;
border-color: #4fa8f2 !important;
}
/* FABRIKANT: ook de label-tekst blauw als 'checked' */
.tasqt-is-fabrikant
.jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button .jet-checkboxes-list__label {
color: #4fa8f2 !important;
}
/* CHECK-RANGE: titel en labeltekst stijl gelijk aan normale filter */
.jet-smart-filters-check-range .jet-filter-label {
font-size: 18px !important; /* zelfde als TOKENS.headFontSize */
font-weight: 600 !important; /* zelfde als TOKENS.headFontWeight */
color: var(--e-global-color-text) !important;
padding: 0 0 6px !important;
margin: 0 !important;
}
.jet-smart-filters-check-range .jet-checkboxes-list__label {
font-size: 15px !important; /* zelfde als TOKENS.labelFontSize */
font-weight: 300 !important; /* zelfde als TOKENS.labelFontWeight */
line-height: 1.35 !important; /* zelfde als TOKENS.labelLineHeight */
vertical-align: middle !important;
display: inline-block !important;
}
`;
document.head.appendChild(s);
}
styleFilterLabels();
const root =
document.querySelector("#elementor-2441") ||
document.querySelector("#elementor-5329") ||
document.querySelector(".elementor") ||
document.body;
const mo = new MutationObserver(() => styleFilterLabels());
mo.observe(root, { childList: true, subtree: true });
["jet-filter-change", "jet-engine-query-updated"].forEach(evt =>
document.addEventListener(evt, () => styleFilterLabels())
);
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot);
} else {
boot();
}
})();
