/* Pop-up voor nieuwe bezoekers: volg Buiten Buddies op Instagram en Facebook.
De vormgeving staat in social.css, dit bestand regelt wanneer hij verschijnt.
De regels:
- na één minuut op de site, op welke pagina de bezoeker dan ook is;
- alleen voor een bezoeker die de pop-up nog niet heeft gehad, dus ook voor
wie al eens eerder op de site was: na de deploy begint voor iedereen een
schone week van zeven dagen;
- daarna bij een nieuw bezoek opnieuw, tot in totaal maximaal drie keer;
- nooit meer dan één keer per dag;
- na één week vanaf het eerste bezoek nooit meer;
- niet op een formulierpagina, en niet terwijl de bezoeker in een formulier
of in een ander venster bezig is;
- klikt de bezoeker op Instagram of Facebook, dan komt hij nooit meer terug;
- klikt hij op 'Nu niet, bedankt', dan blijft hij drie dagen weg;
- sluit hij met het kruisje, met Escape of door naast de kaart te klikken,
dan is hij voor die dag weg en kan hij morgen opnieuw komen.
Alles wordt bijgehouden in localStorage, dus per browser en per apparaat. Er
gaat niets naar de server en er komt geen cookie bij kijken. */
const BB_SOC_KEY = "bb_social_popup_v1";
/* Testmodus. Op het echte domein gelden alle regels hieronder. Overal anders, dus
in het voorbeeldvenster en op een testadres van Vercel, verschijnt de pop-up
altijd en al na drie seconden, zodat hij te bekijken en te testen is zonder de
opslag van de browser te wissen. Dit is de enige plek waar dat wordt bepaald. */
const BB_SOC_ECHT = /(^|\.)buitenbuddies\.org$/i.test(location.hostname);
const BB_SOC_TEST = !BB_SOC_ECHT;
const BB_SOC_WACHT = BB_SOC_TEST ? 3000 : 60000; // testmodus: drie seconden
const BB_SOC_MAX = 3; // maximaal drie keer in totaal
const BB_SOC_WEEK = 7 * 864e5; // week vanaf het eerste bezoek
const BB_SOC_LATER = 3 * 864e5; // 'Nu niet, bedankt' houdt hem drie dagen weg
// Op deze pagina's nooit: daar is de bezoeker met een formulier bezig.
const BB_SOC_GEEN_PAGINA = ["meedoen", "meedoen-beheerder", "contact", "nieuwsbrief"];
function bbSocLees() {
try {
const ruw = localStorage.getItem(BB_SOC_KEY);
if (!ruw) return null;
const d = JSON.parse(ruw);
return d && typeof d === "object" ? d : null;
} catch (e) { return null; }
}
function bbSocSchrijf(d) {
try { localStorage.setItem(BB_SOC_KEY, JSON.stringify(d)); } catch (e) {}
}
// De dag als 2026-08-29, zodat 'één keer per dag' op kalenderdagen werkt en niet
// op een periode van 24 uur.
function bbSocDag(t) {
const d = new Date(t);
return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
}
function bbSocMorgen(t) {
const d = new Date(t);
d.setHours(0, 0, 0, 0);
return d.getTime() + 864e5;
}
/* Bepaalt of de pop-up nu getoond mag worden. Bestaat er nog geen aantekening,
dan is dit het eerste bezoek voor deze pop-up: die leggen wij hier vast.
Dit werkt met terugwerkende kracht. Vlak na de deploy heeft nog niemand een
aantekening, ook niet wie drie dagen eerder al eens langs is geweest. Iedereen
die na de deploy komt, begint dus met een schone week van zeven dagen en krijgt
de pop-up alsnog te zien. Wie hier voor het eerst komt en wie al eerder is
geweest worden bewust niet onderscheiden: dat is niet te weten zonder extra
gegevens vast te leggen, en het is voor dit doel ook niet nodig. */
function bbSocMag(nu) {
let d = bbSocLees();
if (!d) {
d = { eerste: nu, aantal: 0, laatsteDag: "", uit: 0, klaar: false };
bbSocSchrijf(d);
}
if (BB_SOC_TEST) return true;
if (d.klaar) return false;
if (d.aantal >= BB_SOC_MAX) return false;
if (nu - (d.eerste || nu) > BB_SOC_WEEK) return false;
if (d.uit && nu < d.uit) return false;
if (d.laatsteDag === bbSocDag(nu)) return false;
return true;
}
/* De bezoeker is bezig: een open venster van de cookiebanner, van doneren of van
de nieuwsbrief, of de cursor staat in een invulveld. Dan wachten wij. */
function bbSocBezig() {
// Een open hamburgermenu gaat altijd voor: de pop-up ligt daar met opzet bovenop,
// dus zou hij het menu onbruikbaar maken. Dit geldt ook in de testmodus.
if (document.querySelector(".bb-mobile-menu.open")) return true;
if (BB_SOC_TEST) return false;
if (document.querySelector(".bb-cookie, .bb-modal, .bb-wd, dialog[open]")) return true;
const a = document.activeElement;
if (a && a.closest && a.closest("form")) return true;
if (a && /^(INPUT|TEXTAREA|SELECT)$/.test(a.tagName || "")) return true;
return false;
}
function BrandBallSoc({ size = 81 }) {
const PENT = "M0 -3.4 L3.23 -1.05 L2 2.75 L-2 2.75 L-3.23 -1.05 Z";
const patches = [
[17.76, 4.07, 36], [21.32, 15.03, 108], [12, 21.8, 180],
[2.68, 15.03, 252], [6.24, 4.07, 324],
];
return (
);
}
const BB_SOC_STERREN = [
["a", 16], ["b", 11], ["c", 9], ["d", 13], ["e", 10], ["f", 8], ["g", 15], ["h", 11],
["i", 10], ["j", 14], ["k", 7], ["l", 11], ["m", 16], ["n", 9], ["o", 12], ["p", 8],
["q", 13], ["r", 9], ["s", 11], ["t", 15],
];
function SocialKaart({ onSluit, onLater, onVolg }) {
const kaartRef = useRef(null);
const sluitRef = useRef(null);
useEffect(() => {
const vorige = document.activeElement;
if (sluitRef.current) sluitRef.current.focus();
const onKey = (e) => {
if (e.key === "Escape") { onSluit(); return; }
if (e.key !== "Tab" || !kaartRef.current) return;
const items = kaartRef.current.querySelectorAll('button, a[href]');
if (!items.length) return;
const eerste = items[0], laatste = items[items.length - 1];
if (e.shiftKey && document.activeElement === eerste) { e.preventDefault(); laatste.focus(); }
else if (!e.shiftKey && document.activeElement === laatste) { e.preventDefault(); eerste.focus(); }
};
document.addEventListener("keydown", onKey);
const overflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.removeEventListener("keydown", onKey);
document.body.style.overflow = overflow || "";
if (vorige && vorige.focus) vorige.focus();
};
}, [onSluit]);
return (
{ if (e.target === e.currentTarget) onSluit(); }}
>
);
}
function SocialPopup({ route }) {
const [open, setOpen] = useState(false);
const alGehad = useRef(false);
// De route in een ref, zodat de klok niet opnieuw begint bij elke paginawissel.
const routeRef = useRef(route);
routeRef.current = route;
useEffect(() => {
if (alGehad.current) return;
let tik = null;
let weg = false;
const proberen = () => {
if (weg || alGehad.current) return;
const nu = Date.now();
if (!bbSocMag(nu)) return; // regels zeggen nee
if (!BB_SOC_TEST && BB_SOC_GEEN_PAGINA.indexOf(routeRef.current) !== -1) { // formulierpagina
tik = setTimeout(proberen, 15000);
return;
}
if (bbSocBezig()) { // bezig, straks opnieuw
tik = setTimeout(proberen, 15000);
return;
}
const d = bbSocLees() || { eerste: nu, aantal: 0 };
d.aantal = (d.aantal || 0) + 1;
d.laatsteDag = bbSocDag(nu);
bbSocSchrijf(d);
alGehad.current = true;
setOpen(true);
if (window.bbGaEvent) window.bbGaEvent("social_popup_getoond", { keer: d.aantal, pagina: routeRef.current });
};
tik = setTimeout(proberen, BB_SOC_WACHT);
return () => { weg = true; if (tik) clearTimeout(tik); };
}, []);
const sluit = useCallback(() => {
const d = bbSocLees();
if (d) { d.uit = bbSocMorgen(Date.now()); bbSocSchrijf(d); }
setOpen(false);
if (window.bbGaEvent) window.bbGaEvent("social_popup_gesloten", { keuze: "kruisje" });
}, []);
const later = useCallback(() => {
const d = bbSocLees();
if (d) { d.uit = Date.now() + BB_SOC_LATER; bbSocSchrijf(d); }
setOpen(false);
if (window.bbGaEvent) window.bbGaEvent("social_popup_gesloten", { keuze: "nu niet" });
}, []);
const volg = useCallback((netwerk) => {
const d = bbSocLees();
if (d) { d.klaar = true; bbSocSchrijf(d); }
setOpen(false);
if (window.bbGaEvent) window.bbGaEvent("social_popup_volg", { netwerk: netwerk });
}, []);
/* Opent de bezoeker het hamburgermenu terwijl de pop-up in beeld staat, dan gaat het
menu voor: de pop-up ligt er met opzet bovenop en zou het menu onbruikbaar maken.
De pop-up verdwijnt dan zonder verdere gevolgen. Hij is voor vandaag al geteld, dus
hij komt vandaag niet opnieuw. */
useEffect(() => {
const weg = () => setOpen(false);
window.addEventListener("bb-social-popup-sluit", weg);
return () => window.removeEventListener("bb-social-popup-sluit", weg);
}, []);
if (!open) return null;
return ;
}
Object.assign(window, { SocialPopup, SocialKaart, BrandBallSoc });