Inspiration pour des personnes et des organisations résilientes

No, Post Card = "Inspiratie - Blog/Artikel" (de rijkste kaart, die met introtekst). 2. Verder niets aanpassen. Dit blok geeft elke categorie zijn eigen uitzicht via de instelling KAARTEN hieronder: achtergrondkleur, label als pil of als platte tekst, introtekst tonen of niet, de tekst van de link en eventueel een bredere kaart. De eerste rij (smalle kaart + dubbelbrede kaart) staat los daarvan in EERSTE_RIJ, zodat vanaf rij 2 alles even breed blijft, ook na filteren of zoeken. Let op: dit stileert enkel de kaart die Avada rendert. Wat daar niet in staat, kan hier niet bijgetoverd worden: een introtekst die de kaart niet heeft, en vooral een link die alleen op een andere kaart staat (zoals een ACF-link op de boekenkaart). Heb je per categorie andere LINKS nodig, neem dan weg B. WEG B (jouw drie echte post cards, aanbevolen zodra ze inhoudelijk verschillen) Zet 3 Post Cards-elementen onder elkaar in dezelfde kolom, elk met een ander post card. Er zijn twee smaken: B1 Elk element vraagt enkel zijn eigen categorieen op (Artikel+Blog / Podcast / Boeken). Lichtste pagina. Nadeel: de volgorde is per widget, dus het blok mengt ze afwisselend. B2 Elk element vraagt ALLE posts op (dezelfde query, dezelfde volgorde, alleen een ander post card), en je zet op elk element een CSS-klasse die zegt welke categorie het bedient: element 1 (Blog/Artikel-kaart) -> CSS Class: omp-artikel omp-blog element 2 (Podcast-kaart) -> CSS Class: omp-podcast element 3 (Boeken-kaart) -> CSS Class: omp-boeken (Avada: het element aanklikken, tab Extras, veld CSS Class.) Het blok houdt dan per post enkel de kaart van de widget die zijn categorie claimt en gooit de twee andere weg. Elke categorie krijgt zo zijn echte kaart, met zijn eigen introtekst en zijn eigen links (ook een ACF-link die enkel op de boekenkaart staat), en de volgorde blijft exact die van Avada. Prijs: elke post staat 3x in de HTML. In beide smaken: Apply Alternate Post Cards = No, Columns = 3, Column Spacing = 50px, Number of Posts hoog genoeg en paginatie None. KAARTEN leeg laten. Zet niets anders in die kolom bij de widgets (geen losse titel of afbeelding), want lege bronwidgets worden na het samenvoegen verborgen. Het blok voegt de rasters samen tot 1 raster met 1 filterbalk en verbergt de lege widgets. In beide gevallen: dit Code-block in dezelfde kolom zetten, boven de widget(s), en het oude Academy-filterblok op deze pagina verwijderen. --> html.omp-insp-bezig .fusion-post-cards .fusion-filters{display:none!important} html .fusion-post-cards .fusion-filters.omp-insp-verborgen{display:none!important} .omp-insp-kop{position:sticky;z-index:30;background:transparent;padding:0 0 18px;pointer-events:none} .omp-insp-balk{display:flex;align-items:center;gap:10px;background:#20174c;border-radius:18px;padding:10px 12px 10px 18px;pointer-events:auto} .omp-insp-zoek{flex:1;display:flex;align-items:center;gap:10px;min-width:110px;border-radius:12px} .omp-insp-zoek:focus-within{outline:2px solid #c8a12c;outline-offset:3px} .omp-insp-zoek input{width:100%;background:none;border:0;outline:0;font-family:inherit;font-size:14.5px;color:#fff;padding:8px 0} .omp-insp-zoek input::placeholder{color:#c6b9e2} .omp-insp-zoek input::-webkit-search-cancel-button{filter:invert(1) opacity(.55)} .omp-insp-cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .omp-insp-cat{font-family:inherit;font-size:13.5px;line-height:1.2;color:#fff;background:rgba(255,255,255,.10);border:0;border-radius:12px;padding:10px 16px;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease} .omp-insp-cat:hover{background:rgba(255,255,255,.20)} .omp-insp-cat:focus-visible{outline:2px solid #c8a12c;outline-offset:2px} .omp-insp-cat[aria-pressed="true"]{background:#c8a12c;color:#20174c} .omp-insp-cat[aria-pressed="true"]:hover{background:#d8b344} .omp-insp-clear{font-family:inherit;font-size:13px;color:#c6b9e2;background:none;border:0;border-radius:12px;text-decoration:underline;cursor:pointer;padding:9px 10px;margin:0;transition:color .2s ease} .omp-insp-clear:hover{color:#c8a12c} .omp-insp-clear:focus-visible{outline:2px solid #c8a12c;outline-offset:2px} /* label van een kaart als pil (zoals de podcast-kaart) of als platte tekst (blog, boeken) */ .omp-insp-grid .omp-insp-pil .fusion-title-heading{display:inline-block!important;background:#fff!important;color:#6c5aa6!important;border-radius:999px!important;padding:9px 20px!important;line-height:1.2!important} .omp-insp-grid .fusion-button.omp-insp-plat{background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;padding:0!important;min-width:0!important;border-radius:0!important} .omp-insp-grid .fusion-button.omp-insp-plat .awb-button__text,.omp-insp-grid .fusion-button.omp-insp-plat .fusion-button-text{color:#6c5aa6!important} .omp-insp-telling{font-size:13.5px;color:#6c5aa6;margin-bottom:18px} .omp-insp-leeg{padding:50px 0;text-align:center;color:#6c5aa6;font-size:14.5px} .omp-insp-grid h1,.omp-insp-grid h2,.omp-insp-grid h3,.omp-insp-grid h4,.omp-insp-grid h5,.omp-insp-grid h6{ -webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;word-break:normal; } @media(min-width:601px){html{scroll-padding-top:92px}} @media(max-width:1024px){ .omp-insp-balk{flex-wrap:wrap} .omp-insp-zoek{flex:1 0 100%;order:-1} } @media(max-width:600px){ .omp-insp-kop{position:static;padding-bottom:16px} .omp-insp-balk{padding:12px} .omp-insp-cats{width:100%} .omp-insp-cat{flex:1 1 auto;text-align:center;padding:10px 12px} .omp-insp-clear{margin:2px auto 0} } @media(prefers-reduced-motion:reduce){ .omp-insp-kop *,.omp-insp-grid>*{transition:none!important;animation:none!important} } (function(){ var HUIDIG = document.currentScript || null; /* dit script, om het juiste stuk pagina te vinden */ document.documentElement.classList.add("omp-insp-bezig"); /* Avada-tabs meteen weg, geen flits */ /* ---------- instellingen ---------- */ var BEPERK_TOT = ""; /* leeg = automatisch: enkel de post-cards-widgets in dezelfde container als dit code-blok. Staat er elders op de pagina nog een post-cards-element (bv. gerelateerde berichten) en gaat het toch mis, zet hier dan een CSS-selector van de juiste container. */ var ZOEK = true; /* zoekveld tonen */ var PLACEHOLDER = "Zoek in inspiratie"; var EENHEID = ["resultaat", "resultaten"]; /* enkelvoud, meervoud */ var VOLGORDE = ["Artikel", "Blog", "Boeken", "Podcast"]; /* volgorde van de knoppen; onbekende termen sluiten achteraan aan */ var WIDGETS = []; /* Noodrem, normaal leeg laten. Het blok haalt de categorieen uit de Avada-filterrij en, als een widget die niet heeft, uit de klassen van zijn eigen kaarten. Klopt een naam toch niet, zet hier dan de categorieen per widget in paginavolgorde: [["Artikel","Blog"], ["Podcast"], ["Boeken"]] */ /* Uitzicht per categorie, op dezelfde manier als de kleur per pijler op de Academy. vlak = achtergrondkleur van het gekleurde kaartvlak ("" = niet aanraken) label = "pil" (witte pil, zoals de podcast-kaart) of "plat" (gewone vette tekst) of "" intro = introtekst tonen (true) of verbergen (false); null = niet aanraken link = tekst van de knop onderaan ("" = niet aanraken) breed = breedte van de kaart, bv. "calc(100% / 3 * 2)" voor dubbelbreed ("" = standaard); EERSTE_RIJ hieronder gaat hierop voor */ var KAARTEN = []; /* Leeg laten zolang elke categorie zijn eigen post card heeft (weg B): de kaarten kloppen dan al vanzelf, inclusief hun eigen links. Gebruik je 1 post card voor alles (weg A), zet dan hieronder terug en pas de kleuren aan: {cats:["Artikel","Blog"], vlak:"rgba(177,167,210,0.25)", label:"plat", intro:true, link:"Lees meer", breed:""}, {cats:["Podcast"], vlak:"rgba(177,167,210,0.5)", label:"pil", intro:false, link:"Bekijk hem hier", breed:""}, {cats:["Boeken"], vlak:"rgba(177,167,210,0.5)", label:"plat", intro:false, link:"Bekijk hem hier", breed:""} */ /* Breedte van de eerste kaarten, ongeacht welke categorie er toevallig vooraan staat. Hier: kaart 1 gewoon (1/3), kaart 2 dubbelbreed (2/3), samen precies de eerste rij. Alles daarna krijgt de standaardbreedte, dus vanaf rij 2 zijn ze allemaal even groot. Leeg = alle kaarten even breed, dus gewoon 3 per rij. Wil je de eerste rij smal + dubbelbreed? Zet ["", "calc(100% / 3 * 2)"]. Gebruik dan Avada's eigen breuk en niet 66.6667%, anders telt de rij door afronding net boven de 100 procent en springt de brede kaart naar een eigen rij. */ var EERSTE_RIJ = []; var MULTI = true; /* true = meerdere categorieen tegelijk aanklikbaar */ var MENGEN = true; /* bij meerdere widgets: kaarten door elkaar mengen ipv blok per blok */ var DUUR = 340; var BALK_TOP = "0px"; /* hoogte waarop de balk blijft plakken. Komt er ooit een meescrollende header bij, zet dit dan op de hoogte daarvan, bv. "90px". */ var MARGE_RECHTS = ""; /* "" = balk + kaarten lijnen rechts uit op de site-breedte. Smaller? Zet bv. "5%". */ /* ---------- vaste waarden ---------- */ var SOFT = "­"; var GEEN_KIND = /^(IMG|PICTURE|SOURCE|BR|HR|SVG|VIDEO|IFRAME|SCRIPT|STYLE|NOSCRIPT)$/; var MAX_DIEPTE = 8; var EASE = "cubic-bezier(.22,.61,.36,1)"; var AFBREEK = { "conflicthantering":"conflict|hantering", "hyperdigitale":"hyper|digitale", "hyperdigitaal":"hyper|digitaal", "werkhervatting":"werk|hervatting", "leidinggevenden":"leiding|gevenden", "leidinggevende":"leiding|gevende", "onzekerheid":"onzeker|heid", "veranderende":"ver|anderende", "verandering":"ver|andering", "veerkrachtgesprekken":"veerkracht|gesprekken", "welzijnsbeleid":"welzijns|beleid", "welzijnsconsultancy":"welzijns|consultancy", "stressmonitor":"stress|monitor", "wendbaarheid":"wendbaar|heid", "stabiliteit":"stabili|teit", "groeitraject":"groei|traject", "opleidingsonderdeel":"opleidings|onderdeel", "deconnectie":"de|connectie", "zelfleiderschap":"zelf|leiderschap", "teaminterventies":"team|interventies", "peersignalering":"peer|signalering", "stresspreventie":"stress|preventie", "reintegratie":"re|integratie", "verzuimdata":"verzuim|data", "toepasbaar":"toepas|baar", "wetenschappelijk":"weten|schappelijk" }; var DELEN = ["hantering","hervatting","gevenden","gevende","gesprekken","gesprek","traject","trajecten","beleid","kracht","vaardigheden","vaardigheid","digitale","zekerheid","baarheid","verzuim","gedrag","cultuur","training","programma","organisatie","medewerkers","werkvloer","werkdruk","preventie","integratie","onderdeel","consultancy","leiderschap","attitude","signalering","interventies"]; /* ---------- kleine helpers ---------- */ function norm(s){ return (s||"").replace(/\s*\(\d+\)\s*$/,"").replace(/[‘’ʼ]/g,"'").replace(/\s+/g," ").trim().toLowerCase(); } function zet(el,p,v){ el.style.setProperty(p,v,"important") } function kids(el){ return [].filter.call(el.children, function(k){ return k.nodeType === 1 && !GEEN_KIND.test(k.tagName) && (k.offsetHeight > 0 || k.offsetWidth > 0); }); } function heeftBox(k){ return k.nodeType === 1 && (k.offsetWidth > 0 || k.offsetHeight > 0 || k.getClientRects().length > 0); } /* het eerste vlak in een kaart dat echt een achtergrondkleur schildert (zoals op de Academy) */ function vlak(el){ var rij = [].slice.call(el.children); while(rij.length){ var n = rij.shift(); if(n.nodeType !== 1) continue; var bg = window.getComputedStyle(n).backgroundColor; if(bg && bg !== "transparent" && bg.replace(/\s/g,"") !== "rgba(0,0,0,0)") return n; rij = rij.concat([].slice.call(n.children)); } return null; } function schoon(s){ return (s||"").split(SOFT).join("") } function tekst(el){ if(!el.__tk) el.__tk = schoon(el.textContent||"").toLowerCase().replace(/\s+/g," ").trim(); return el.__tk; } /* Let op: WordPress decodeert HTML-entiteiten in een Code-block (in het Academy-blok werd de code voor het maalteken netjes omgezet naar het teken zelf). Schrijf hier dus nooit een entiteit in de broncode, want die komt als los teken terug en breekt het script. Daarom bouwen we de balk met createElement en textContent, niet met innerHTML. */ function maak(tag, klasse){ var el = document.createElement(tag); if(klasse) el.className = klasse; return el; } function loepje(){ var NS = "http://www.w3.org/2000/svg"; var s = document.createElementNS(NS, "svg"); s.setAttribute("width","16"); s.setAttribute("height","16"); s.setAttribute("viewBox","0 0 24 24"); s.setAttribute("fill","none"); s.setAttribute("stroke","#c6b9e2"); s.setAttribute("stroke-width","2"); s.setAttribute("aria-hidden","true"); var c = document.createElementNS(NS, "circle"); c.setAttribute("cx","11"); c.setAttribute("cy","11"); c.setAttribute("r","7"); var p = document.createElementNS(NS, "path"); p.setAttribute("d","M20 20l-3.5-3.5"); s.appendChild(c); s.appendChild(p); return s; } function slug(s){ return (s||"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"") } function netjes(s){ s = String(s||"").replace(/-/g," ").trim(); return s.charAt(0).toUpperCase() + s.slice(1) } function rustig(){ return !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) } /* ---------- zachte afbreekpunten in lange koppen ---------- */ function posities(w){ var l = w.toLowerCase(); if(AFBREEK[l]){ var uit = [], pos = 0; AFBREEK[l].split("|").slice(0,-1).forEach(function(d){ pos += d.length; uit.push(pos) }); return uit; } if(w.length < 12) return []; for(var i=0;i d.length + 3 && l.slice(-d.length) === d) return [l.length - d.length]; if(l.length > d.length + 3 && l.slice(0, d.length) === d) return [d.length]; } return []; } function breek(w){ var idx = posities(w); if(!idx.length) return w; var res = "", vorig = 0; idx.forEach(function(i){ res += w.slice(vorig, i) + SOFT; vorig = i }); return res + w.slice(vorig); } function afbreken(root){ [].forEach.call(root.querySelectorAll("h1,h2,h3,h4,h5,h6"), function(k){ if(k.getAttribute("data-omp-insp-afgebroken") === "1") return; var loper = document.createTreeWalker(k, NodeFilter.SHOW_TEXT, null, false), nodes = [], n; while((n = loper.nextNode())) nodes.push(n); nodes.forEach(function(t){ if(t.nodeValue.indexOf(SOFT) !== -1) return; var nieuw = t.nodeValue.replace(/[A-Za-zÀ-ſ]{8,}/g, breek); if(nieuw !== t.nodeValue) t.nodeValue = nieuw; }); k.setAttribute("data-omp-insp-afgebroken","1"); }); } /* ---------- kaarten even hoog maken ---------- */ function keten(el, diepte){ if(diepte > MAX_DIEPTE) return; var k = kids(el); if(!k.length) return; zet(el,"display","flex"); zet(el,"flex-direction","column"); var laatste = k[k.length - 1]; k.slice(0,-1).forEach(function(x){ zet(x,"flex","0 0 auto") }); zet(laatste,"flex","1 1 auto"); zet(laatste,"min-height","0"); var sub = kids(laatste); if(sub.length > 1){ zet(laatste,"display","flex"); zet(laatste,"flex-direction","column"); zet(sub[sub.length - 1],"margin-top","auto"); sub.slice(0,-1).forEach(function(x){ x.style.removeProperty("margin-top") }); }else{ keten(laatste, diepte + 1); } } /* ---------- lazy-load losmaken (enkel echte placeholders) ---------- */ function ontblokkeer(grid){ if(grid.style && grid.style.display === "none") grid.style.removeProperty("display"); [].forEach.call(grid.querySelectorAll("img"), function(img){ var o = img.getAttribute("data-orig-src") || img.getAttribute("data-src") || img.getAttribute("data-lazy-src"); if(!o || img.getAttribute("src") === o) return; img.setAttribute("src", o); var os = img.getAttribute("data-orig-srcset") || img.getAttribute("data-srcset"); if(os) img.setAttribute("srcset", os); img.removeAttribute("loading"); img.classList.remove("lazyload","fusion-lazyload"); img.classList.add("lazyloaded"); }); } /* Vangnet voor een knop die geen link krijgt van Avada (dynamische waarde leeg bij het opbouwen van de pagina). Staat er een URL in het Title Attribute of in data-href, dan maken we daar de echte link van. Zo kan je in Avada de ACF-URL in het veld "Title Attribute" van de knop zetten wanneer het Link-veld de waarde niet doorlaat. Een label zonder URL blijft gewoon met rust. */ function knopHerstel(li){ [].forEach.call(li.querySelectorAll("a.fusion-button:not([href]), a.awb-button:not([href])"), function(a){ var u = (a.getAttribute("data-href") || a.getAttribute("data-link") || a.getAttribute("title") || "").trim(); if(!/^(https?:\/\/|\/\/|\/|mailto:|tel:)/i.test(u)) return; a.setAttribute("href", u); a.removeAttribute("title"); if(/^(https?:)?\/\//i.test(u) && u.indexOf(location.hostname) === -1){ a.setAttribute("target", "_blank"); a.setAttribute("rel", "noopener"); } }); } function klikMeer(root, done, n){ n = n || 0; var knop = root.querySelector(".fusion-load-more-button, [class*='load-more']"); if(!knop || n > 20 || knop.offsetParent === null){ done(); return } knop.click(); setTimeout(function(){ klikMeer(root, done, n + 1) }, 700); } /* Enkel de widgets die bij dit code-blok horen. Zo blijft een post-cards-element elders op de pagina (gerelateerde berichten, footer, off-canvas) ongemoeid. */ function bereik(){ if(BEPERK_TOT){ var vast = document.querySelector(BEPERK_TOT); if(vast) return vast; } var el = HUIDIG; while(el && el.closest){ var c = el.closest(".fusion-layout-column, .fusion-builder-row, .fusion-fullwidth"); if(!c) break; if(c.querySelector(".fusion-post-cards ul.fusion-grid")) return c; el = c.parentNode; } /* Geen container gevonden (code-blok elders op de pagina, of een minify-plugin die document.currentScript onbruikbaar maakt): hard begrenzen tot de rij van de eerste widget, zodat een post-cards-element in de footer of sidebar nooit meegenomen wordt. */ var eerste = document.querySelector(".fusion-post-cards ul.fusion-grid"); if(!eerste) return document; var w = eerste.closest ? eerste.closest(".fusion-post-cards") : null; if(!w) return document; return w.closest(".fusion-builder-row") || w.closest(".fusion-layout-column") || w.parentNode || document; } function init(){ var widgets = [].slice.call(bereik().querySelectorAll(".fusion-post-cards")).filter(function(w){ return w.querySelector("ul.fusion-grid") && w.getAttribute("data-omp-insp") !== "1"; }); if(!widgets.length) return false; /* een categorie uit een Avada-filterlink; klasse gaat voor op selector (werkt ook bij rare slugs) */ function termUit(a){ var sel = a.getAttribute("data-filter"); var label = (a.textContent||"").replace(/\s*\(\d+\)\s*$/,"").trim(); if(!sel || sel === "*" || !label) return null; var m = sel.match(/^\.([^\s.,>+~\[\]:()]+)$/); if(m) return {label:label, klasse:m[1], sel:null}; try{ document.querySelector(sel) }catch(e){ return {label:label, klasse:null, sel:null} } return {label:label, klasse:null, sel:sel}; } /* per widget: raster + eigen categorie-termen uit de Avada-filters (of uit WIDGETS) */ var blokken = widgets.map(function(w, i){ var t = []; if(WIDGETS[i] && WIDGETS[i].length){ WIDGETS[i].forEach(function(l){ if(l) t.push({label:String(l), klasse:null, sel:null, gok:slug(String(l))}) }); }else{ [].forEach.call(w.querySelectorAll(".fusion-filters [data-filter]"), function(a){ var term = termUit(a); if(!term) return; if(!t.some(function(x){ return norm(x.label) === norm(term.label) })) t.push(term); }); } /* Geen filterrij in deze widget (Avada toont er geen zodra de query maar 1 categorie oplevert). Dan de categorieen uit de kaarten zelf halen: Avada zet de term-slugs achteraan de klassenlijst van elke kaart, na fusion-post-cards-grid-column. */ if(!t.length){ var al = {}; [].forEach.call(w.querySelectorAll("ul.fusion-grid > li"), function(li){ var kl = (li.getAttribute("class") || "").split(/\s+/); var idx = kl.indexOf("fusion-post-cards-grid-column"); if(idx < 0) return; kl.slice(idx + 1).forEach(function(s){ if(!s || al[s] || /^(fusion|awb|post-card)/.test(s) || /^\d+$/.test(s)) return; al[s] = 1; t.push({label: netjes(s), klasse: s, sel: null}); }); }); } if(!t.length && window.console && console.warn){ console.warn("[OMP inspiratie] post-cards-widget " + (i+1) + " levert geen categorieen. Zet de optie Filters aan in die widget, of vul WIDGETS in bovenaan het script."); } if(w.querySelector(".fusion-pagination, .pagination") && window.console && console.warn){ console.warn("[OMP inspiratie] widget " + (i+1) + " gebruikt paginatie. Alleen de posts van pagina 1 kunnen gefilterd worden. Zet paginatie op None en Number of Posts hoog genoeg."); } /* Welke categorieen bedient deze widget? Uit de CSS-klasse omp- op het post-cards-element (Extras -> CSS Class in Avada), anders uit WIDGETS. Dat is wat het blok nodig heeft om per post de juiste kaart te kiezen wanneer dezelfde posts in meerdere widgets staan, elk met een ander kaartontwerp. */ var claim = []; (w.getAttribute("class") || "").split(/\s+/).forEach(function(c){ var m = /^omp-([a-z0-9][a-z0-9-]*)$/i.exec(c); if(m && m[1].toLowerCase() !== "insp") claim.push(m[1].toLowerCase()); }); if(!claim.length && WIDGETS[i]) WIDGETS[i].forEach(function(l){ if(l) claim.push(slug(l)) }); return {w:w, g:w.querySelector("ul.fusion-grid"), terms:t, claim:claim}; }); /* alle categorieen samen, in de gewenste volgorde */ var termen = []; blokken.forEach(function(b){ b.terms.forEach(function(t){ var bestaat = null; termen.some(function(x){ if(norm(x.label) === norm(t.label)){ bestaat = x; return true } return false }); if(!bestaat){ termen.push(t); return } if(!bestaat.klasse && !bestaat.sel && (t.klasse || t.sel)){ bestaat.klasse = t.klasse; bestaat.sel = t.sel } }); }); if(!termen.length) return false; /* zonder categorieen liever niets doen dan een halve balk */ if(VOLGORDE.length){ var rang = {}; VOLGORDE.forEach(function(l,i){ rang[norm(l)] = i }); termen = termen.map(function(t,i){ return {t:t, i:i, r:(rang[norm(t.label)] === undefined ? 999 : rang[norm(t.label)])} }) .sort(function(a,b){ return (a.r - b.r) || (a.i - b.i) }) .map(function(x){ return x.t }); } widgets.forEach(function(w){ w.setAttribute("data-omp-insp","1") }); /* nooit 2x verwerken */ var grid = blokken[0].g; grid.classList.add("omp-insp-grid"); /* ---------- opbouw rond het raster ---------- Belangrijk: het raster blijft exact staan waar het staat. Avada's responsive kolomregels ( .fusion-post-cards > .fusion-grid > .fusion-grid-column ) werken enkel zolang de ul een direct kind van de widget is. Zodra je hem in een eigen wrapper stopt, valt de kolombreedte op mobiel terug op 2 kolommen ipv 1. Dus enkel invoegen, nooit verplaatsen. */ var kop = document.createElement("div"); kop.className = "omp-insp-kop"; kop.style.top = BALK_TOP; var telling = document.createElement("div"); telling.className = "omp-insp-telling"; telling.setAttribute("role","status"); var leeg = document.createElement("div"); leeg.className = "omp-insp-leeg"; leeg.style.display = "none"; grid.parentNode.insertBefore(kop, grid); grid.parentNode.insertBefore(telling, grid); if(grid.nextSibling) grid.parentNode.insertBefore(leeg, grid.nextSibling); else grid.parentNode.appendChild(leeg); var balk = maak("div", "omp-insp-balk"); if(ZOEK){ var zoekvak = maak("div", "omp-insp-zoek"); zoekvak.appendChild(loepje()); var veld = maak("input", "omp-insp-q"); veld.type = "search"; veld.placeholder = PLACEHOLDER; veld.setAttribute("aria-label", PLACEHOLDER); zoekvak.appendChild(veld); balk.appendChild(zoekvak); } var catsvak = maak("div", "omp-insp-cats"); catsvak.setAttribute("role", "group"); catsvak.setAttribute("aria-label", "Categorie"); termen.forEach(function(t, i){ var knop = maak("button", "omp-insp-cat"); knop.type = "button"; knop.setAttribute("data-i", i); knop.setAttribute("aria-pressed", "false"); knop.textContent = t.label; catsvak.appendChild(knop); }); balk.appendChild(catsvak); var wisknop = maak("button", "omp-insp-clear"); wisknop.type = "button"; wisknop.textContent = "Wissen"; balk.appendChild(wisknop); kop.appendChild(balk); /* ---------- staat ---------- */ var staat = {aan:{}, q:""}; var items = []; var obs = null; var gen = 0; function itemsVan(g){ return [].slice.call(g.children).filter(function(el){ return el.nodeType === 1 && el.tagName === "LI" && (el.classList.contains("post-card") || el.classList.contains("fusion-grid-column") || el.classList.contains("fusion-post-cards-grid-column")); }); } /* Welke post is dit? De link van de kaart, en anders de titel. Zo herkennen we dezelfde post terug in een tweede widget die hem met een ander kaartontwerp rendert. */ function identiteit(li){ var a = li.querySelector(".fusion-button[href]") || li.querySelector("a[href]"); var href = a ? (a.getAttribute("href") || "") : ""; if(href && href.charAt(0) !== "#") return "u:" + href.replace(/[?#].*$/, "").replace(/\/+$/, ""); var t = li.querySelector("h1,h2,h3,h4"); return t ? "t:" + norm(schoon(t.textContent)) : null; } /* Staat dezelfde post in meerdere widgets (elke widget rendert alle posts, maar met een ander post card), hou dan enkel de kaart van de widget die deze categorie claimt. Zo krijgt elke categorie zijn eigen echte Avada-kaart, met zijn eigen links. */ function kiesKaarten(){ if(blokken.length < 2) return false; var groepen = {}, ergensDubbel = false; blokken.forEach(function(b){ itemsVan(b.g).forEach(function(it){ var id = identiteit(it); if(!id) return; (groepen[id] = groepen[id] || []).push(it); }); }); Object.keys(groepen).forEach(function(id){ var g = groepen[id]; if(g.length < 2) return; ergensDubbel = true; var houden = null; g.forEach(function(it){ if(houden) return; var claim = (it.__blok && it.__blok.claim) || []; if(claim.length && claim.some(function(c){ return it.classList.contains(c) })) houden = it; }); if(!houden) houden = g[0]; g.forEach(function(it){ it.__dubbel = (it !== houden); if(it.__dubbel) zet(it, "display", "none"); }); }); if(ergensDubbel && !blokken.some(function(b){ return b.claim.length }) && window.console && console.warn){ console.warn("[OMP inspiratie] dezelfde posts staan in meerdere widgets, maar geen enkele widget zegt welke categorie hij bedient. Zet op elk post-cards-element een CSS-klasse zoals omp-podcast of omp-boeken (meerdere mag: omp-artikel omp-blog)."); } return ergensDubbel; } /* Kaarten van alle widgets in 1 raster. Verplaatst enkel kaarten die er nog niet in zitten: zonder die controle blijft de MutationObserver zichzelf aanroepen en hertekent de pagina eindeloos. */ function schikGrid(){ blokken.forEach(function(b){ itemsVan(b.g).forEach(function(it){ if(!it.__blok) it.__blok = b }); }); if(blokken.length < 2) return; var dubbels = kiesKaarten(); var verse = blokken.map(function(b){ return itemsVan(b.g).filter(function(it){ return it.__geplaatst !== true }); }); var aantal = 0; verse.forEach(function(l){ aantal += l.length }); if(!aantal) return; var frag = document.createDocumentFragment(); if(dubbels){ /* elke widget heeft dezelfde postenlijst: de volgorde van de langste lijst aanhouden, zodat de echte publicatievolgorde bewaard blijft */ var master = verse.slice().sort(function(a, b){ return b.length - a.length })[0] || []; var perId = {}; verse.forEach(function(l){ l.forEach(function(it){ var id = identiteit(it); if(id) (perId[id] = perId[id] || []).push(it) }); }); var gedaan = {}; master.forEach(function(it){ var id = identiteit(it); if(!id || gedaan[id]) return; gedaan[id] = 1; (perId[id] || []).forEach(function(k){ k.__geplaatst = true; frag.appendChild(k) }); }); verse.forEach(function(l){ l.forEach(function(it){ if(!it.__geplaatst){ it.__geplaatst = true; frag.appendChild(it) } }); }); }else if(MENGEN){ /* Elke widget evenredig over het raster spreiden. Om beurten een kaart nemen werkt niet zodra de categorieen verschillend groot zijn: dan staan de kleine categorieen allemaal bovenaan en volgt een lange staart van de grootste. Nu krijgt elke kaart een positie tussen 0 en 1 binnen zijn eigen lijst, en sorteren we daarop. */ var samen = []; verse.forEach(function(l, li){ var n = l.length || 1; l.forEach(function(it, j){ samen.push({el:it, p:(j + 0.5) / n, j:j, w:li}) }); }); samen.sort(function(a, b){ return (a.p - b.p) || (a.j - b.j) || (a.w - b.w) }); samen.forEach(function(x){ x.el.__geplaatst = true; frag.appendChild(x.el) }); }else{ verse.forEach(function(l){ l.forEach(function(el){ el.__geplaatst = true; frag.appendChild(el) }) }); } grid.appendChild(frag); } function raakt(it, t){ if(t.klasse) return it.classList.contains(t.klasse); if(t.sel){ try{ return it.matches(t.sel) }catch(e){ return false } } return false; } function catsVan(it){ if(it.__cats) return it.__cats; var c = termen.filter(function(t){ return raakt(it, t) }); if(!c.length && it.__blok){ /* enkel terugvallen op de widget voor categorieen die we niet aan de kaart kunnen zien (bv. uit WIDGETS). Een kaart zonder categorie hoort NIET onder elke knop te verschijnen. */ var open = it.__blok.terms.filter(function(t){ return !t.klasse && !t.sel }); if(open.length) c = open; } it.__cats = c; return c; } /* ---------- kaartuitzicht per categorie ---------- */ function regelVoor(it){ if(!KAARTEN.length) return null; var c = catsVan(it); if(!c.length) return null; var gevonden = null; KAARTEN.some(function(r){ (r.cats || []).some(function(naam){ if(gevonden) return true; if(c.some(function(t){ return norm(t.label) === norm(naam) })){ gevonden = r; return true } return false; }); return !!gevonden; }); return gevonden; } /* De onderdelen van een kaart herkennen aan hun plaats ten opzichte van de hoofdtitel, niet aan een href. Elk kaartontwerp bouwt dit anders op: het label is soms een kleine titel (h6) en soms een knop, en een knop onderaan heeft niet altijd een link. */ function delen(it){ var kand = [].slice.call(it.querySelectorAll(".fusion-title, .fusion-button, .fusion-text")); var titelIdx = -1, i; for(i = 0; i < kand.length; i++){ if(kand[i].classList.contains("fusion-title") && kand[i].querySelector("h1,h2,h3")){ titelIdx = i; break } } var label = null, link = null, tekst = []; for(i = 0; i = 0 && i < titelIdx){ /* label = een knop of een klein kopje boven de hoofdtitel. Zonder hoofdtitel raken we niets aan: dan is een h4 waarschijnlijk de titel zelf en geen label. */ if(knop || e.querySelector("h4,h5,h6")) label = e; }else if(knop && !link && e.getAttribute("href")){ link = e; /* de eerste knop na de titel die echt ergens heen gaat */ } } return {label:label, link:link, tekst:tekst}; } function stijlKaart(it){ var r = regelVoor(it); if(!r || it.__stijl === r) return; var d = delen(it); /* niets herkend? Dan staat de kaart er nog niet volledig; niet als afgehandeld markeren, zodat een volgende ronde het opnieuw probeert. */ if(!d.label && !d.link && !d.tekst.length && !it.querySelector(".fusion-title")) return; it.__stijl = r; if(r.vlak){ var v = vlak(it); if(v) v.style.setProperty("background-color", r.vlak, "important"); } if(r.breed) it.style.width = r.breed; if(d.label && (r.label === "pil" || r.label === "plat")){ var isKnop = d.label.classList.contains("fusion-button"); if(r.label === "pil"){ /* een knoplabel is in Avada al een pil; een kleine titel maken we er zelf een van */ if(isKnop) d.label.classList.remove("omp-insp-plat"); else d.label.classList.add("omp-insp-pil"); }else{ if(isKnop) d.label.classList.add("omp-insp-plat"); else d.label.classList.remove("omp-insp-pil"); } } if(r.intro === true || r.intro === false){ d.tekst.forEach(function(t){ if(r.intro) t.style.removeProperty("display"); else zet(t, "display", "none"); }); } if(r.link && d.link){ var tx = d.link.querySelector(".awb-button__text") || d.link.querySelector(".fusion-button-text") || d.link; tx.textContent = r.link; } } function verzamel(){ if(obs) obs.disconnect(); blokken.forEach(function(b){ ontblokkeer(b.g) }); schikGrid(); items = itemsVan(grid).filter(function(it){ return !it.__dubbel }); /* uit WIDGETS geraden klassen enkel gebruiken als de kaarten ze echt dragen; zo blijven Artikel en Blog uit elkaar te houden binnen 1 widget */ termen.forEach(function(t){ if(!t.gok) return; if(items.some(function(it){ return it.classList.contains(t.gok) })) t.klasse = t.gok; t.gok = null; }); items.forEach(function(it){ it.__tk = null; it.__cats = null; knopHerstel(it) }); if(KAARTEN.length) items.forEach(stijlKaart); afbreken(grid); if(obs){ obs.takeRecords(); blokken.forEach(function(b){ obs.observe(b.g, {childList:true}) }) } } /* bronwidgets opruimen zodra hun kaarten verhuisd zijn */ function ruimBronnenOp(){ if(blokken.length < 2) return; blokken.slice(1).forEach(function(b){ if(itemsVan(b.g).length) return; zet(b.w, "display", "none"); var el = b.w, n = 0; while(n++ < 4 && el.parentNode && el.parentNode.nodeType === 1){ var ouder = el.parentNode; if(ouder === document.body || ouder.contains(grid)) break; if([].some.call(ouder.children, heeftBox)) break; /* er staat nog echte content: afblijven */ zet(ouder, "display", "none"); el = ouder; } }); } function zichtbare(){ return items.filter(function(it){ return it.getAttribute("data-omp-uit") !== "1" }); } /* De eerste zichtbare kaarten hun vaste breedte geven, de rest de standaardbreedte. Werkt op de zichtbare volgorde, dus de eerste rij klopt ook na filteren of zoeken. Op tablet en mobiel negeert Avada dit met eigen !important-regels, daar blijft alles gelijk. */ function breedtes(lijst){ lijst.forEach(function(it, i){ var w = (i < EERSTE_RIJ.length) ? EERSTE_RIJ[i] : ""; if(w) it.style.width = w; else it.style.removeProperty("width"); }); } function hoogtes(){ if(window.innerWidth <= 1024){ items.forEach(function(it){ it.style.removeProperty("height") }); return; } var lijst = zichtbare(); lijst.forEach(function(it){ it.style.removeProperty("height"); keten(it, 0) }); var meting = lijst.map(function(it){ var r = it.getBoundingClientRect(); return {el:it, top:r.top + window.pageYOffset, h:r.height}; }); meting.sort(function(a,b){ return a.top - b.top }); var rij = [], vorige = null; meting.forEach(function(m){ if(vorige === null || Math.abs(m.top - vorige) max) max = m.h }); r.forEach(function(m){ zet(m.el,"height", Math.ceil(max) + "px") }); } } /* ---------- uitlijning op de site-breedte (logo links, Contact rechts) ---------- */ function lijnOpContent(){ /* De Avada-kolom met de post-cards heeft rechts iets meer marge dan de contentkolom. Rechtermarge gelijkzetten aan de linkermarge zodat de balk exact op de site-breedte eindigt. */ blokken.forEach(function(b){ var col = b.w.closest ? b.w.closest(".fusion-column-wrapper") : null; if(col) col.style.setProperty("margin-right", getComputedStyle(col).marginLeft, "important"); /* bij 1 kolom maakt Avada van de widget een flexcontainer; dan zou de balk naast het raster komen */ if(getComputedStyle(b.w).display === "flex") zet(b.w, "display", "block"); }); blokken[0].w.style.marginRight = MARGE_RECHTS ? MARGE_RECHTS : ""; fixKaartranden(); } function fixKaartranden(){ /* Twee Avada-artefacten duwen kaarten voorbij de kolomrand: de geneste builder-row met inline width 104% en de kolom-wrapper daarbinnen met ~1.92% zijmarge. Allebei op nul zetten, maar enkel op het eerste niveau in de kaart, zodat een kaartontwerp met eigen binnenkolommen zijn tussenruimte behoudt. */ items.forEach(function(it){ [].forEach.call(it.children, function(wrap){ if(!wrap.classList || !wrap.classList.contains("fusion-column-wrapper")) return; [].forEach.call(wrap.children, function(rij){ if(!rij.classList || !rij.classList.contains("fusion-builder-row-inner")) return; rij.style.setProperty("width", "100%", "important"); rij.style.setProperty("max-width", "100%", "important"); rij.style.setProperty("margin-left", "0", "important"); rij.style.setProperty("margin-right", "0", "important"); [].forEach.call(rij.children, function(kol){ [].forEach.call(kol.children || [], function(kw){ if(!kw.classList || !kw.classList.contains("fusion-column-wrapper")) return; kw.style.setProperty("margin-left", "0", "important"); kw.style.setProperty("margin-right", "0", "important"); }); }); }); }); }); } /* ---------- filteren ---------- */ function gekozen(){ return termen.filter(function(t,i){ return staat.aan[i] }); } function past(it, keuze){ if(staat.q && tekst(it).indexOf(staat.q) === -1) return false; if(!keuze.length) return true; var c = catsVan(it); return c.some(function(t){ return keuze.some(function(k){ return norm(k.label) === norm(t.label) }); }); } function schikking(nieuw, was, posVoor, mijn){ var nieuwkomers = nieuw.filter(function(it){ return was.indexOf(it) === -1 }); nieuwkomers.forEach(function(it){ it.style.transition = "none"; it.style.opacity = "0"; it.style.transform = "translateY(14px)"; }); hoogtes(); nieuw.forEach(function(it){ it.style.willChange = "transform"; if(nieuwkomers.indexOf(it) !== -1) return; var oud = null; posVoor.some(function(p){ if(p.el === it){ oud = p; return true } return false }); if(!oud) return; var r = it.getBoundingClientRect(); var dx = oud.l - r.left, dy = oud.t - r.top; it.style.transition = "none"; it.style.transform = (dx || dy) ? "translate(" + dx + "px," + dy + "px)" : ""; }); requestAnimationFrame(function(){ requestAnimationFrame(function(){ if(mijn !== gen) return; nieuw.forEach(function(it){ it.style.transition = "transform " + DUUR + "ms " + EASE + ", opacity " + (DUUR - 90) + "ms ease"; it.style.transform = ""; it.style.opacity = "1"; }); setTimeout(function(){ if(mijn !== gen) return; nieuw.forEach(function(it){ it.style.removeProperty("transition"); it.style.removeProperty("transform"); it.style.removeProperty("opacity"); it.style.removeProperty("will-change"); }); }, DUUR + 60); }); }); } function run(animeer){ var mijn = ++gen; var keuze = gekozen(); var was = zichtbare(); var posVoor = was.map(function(it){ var r = it.getBoundingClientRect(); return {el:it, t:r.top, l:r.left} }); var nieuw = []; items.forEach(function(it){ var ok = past(it, keuze); it.setAttribute("data-omp-uit", ok ? "0" : "1"); if(ok) nieuw.push(it); }); var vertrekkers = was.filter(function(it){ return nieuw.indexOf(it) === -1 }); /* enkel herschrijven als de tekst echt verandert: de teller is een live region, anders leest een schermlezer hetzelfde aantal bij elke herberekening opnieuw voor */ var telTekst = nieuw.length + " " + (nieuw.length === 1 ? EENHEID[0] : EENHEID[1]); if(telling.textContent !== telTekst){ telling.textContent = ""; var vet = document.createElement("b"); vet.textContent = String(nieuw.length); telling.appendChild(vet); telling.appendChild(document.createTextNode(" " + (nieuw.length === 1 ? EENHEID[0] : EENHEID[1]))); } leeg.textContent = staat.q ? 'Niets gevonden voor "' + staat.q + '".' : "Geen resultaten in deze categorie."; leeg.style.display = nieuw.length ? "none" : "block"; [].forEach.call(kop.querySelectorAll(".omp-insp-cat"), function(b){ b.setAttribute("aria-pressed", staat.aan[+b.getAttribute("data-i")] ? "true" : "false"); }); if(!animeer || rustig()){ items.forEach(function(it){ if(it.getAttribute("data-omp-uit") === "1"){ zet(it,"display","none"); it.style.removeProperty("transition"); it.style.removeProperty("transform"); it.style.removeProperty("opacity"); it.style.removeProperty("will-change"); }else{ zet(it,"display","flex"); zet(it,"flex-direction","column"); it.style.removeProperty("transition"); it.style.removeProperty("transform"); it.style.removeProperty("opacity"); it.style.removeProperty("will-change"); } }); breedtes(nieuw); requestAnimationFrame(function(){ if(mijn === gen) hoogtes() }); return; } vertrekkers.forEach(function(it){ it.style.willChange = "transform"; it.style.transition = "opacity 170ms ease, transform 170ms ease"; it.style.opacity = "0"; it.style.transform = "scale(.97)"; }); setTimeout(function(){ if(mijn !== gen) return; /* er is intussen opnieuw gefilterd */ items.forEach(function(it){ /* op de actuele staat werken, niet op de oude lijst */ if(it.getAttribute("data-omp-uit") !== "1") return; zet(it,"display","none"); it.style.removeProperty("transition"); it.style.removeProperty("transform"); it.style.removeProperty("opacity"); it.style.removeProperty("will-change"); }); nieuw.forEach(function(it){ zet(it,"display","flex"); zet(it,"flex-direction","column") }); breedtes(nieuw); schikking(nieuw, was, posVoor, mijn); }, vertrekkers.length ? 170 : 0); } /* ---------- interactie ---------- */ var qtimer; kop.addEventListener("click", function(e){ var c = e.target.closest ? e.target.closest(".omp-insp-cat") : null; if(c){ var i = +c.getAttribute("data-i"); if(MULTI){ staat.aan[i] = !staat.aan[i] } else{ var was = staat.aan[i]; staat.aan = {}; staat.aan[i] = !was; } run(true); return; } var w = e.target.closest ? e.target.closest(".omp-insp-clear") : null; if(w){ if(!gekozen().length && !staat.q) return; /* er valt niets te wissen */ var hadFocus = document.activeElement === w; staat.aan = {}; staat.q = ""; clearTimeout(qtimer); var q = kop.querySelector(".omp-insp-q"); if(q) q.value = ""; run(true); if(hadFocus && q) q.focus(); /* focus niet in het niets laten staan */ } }); var qveld = kop.querySelector(".omp-insp-q"); if(qveld){ qveld.addEventListener("input", function(){ clearTimeout(qtimer); qtimer = setTimeout(function(){ var v = qveld.value.trim().toLowerCase(); if(v === staat.q) return; staat.q = v; run(true); }, 200); }); qveld.addEventListener("keydown", function(e){ if(e.key === "Escape" && qveld.value){ qveld.value = ""; qveld.dispatchEvent(new Event("input")) } }); } /* ---------- starten ---------- */ verzamel(); blokken.forEach(function(b){ [].forEach.call(b.w.querySelectorAll(".fusion-filters"), function(f){ f.classList.add("omp-insp-verborgen") }); }); run(false); lijnOpContent(); [].forEach.call(grid.querySelectorAll("img"), function(img){ if(!img.complete) img.addEventListener("load", function(){ run(false) }, {once:true}); }); var teGaan = blokken.length; blokken.forEach(function(b){ klikMeer(b.w, function(){ if(--teGaan 60){ clearInterval(t); if(!klaar) document.documentElement.classList.remove("omp-insp-bezig"); /* niet gelukt: Avada-tabs terug */ } }, 250); } if(document.readyState === "loading") document.addEventListener("DOMContentLoaded", start); else start(); })();