https://wp.charitynavigator.org/app/plugins/posthog-ab-elementor/assets/js/phab-frontend.js

1/**
2 * phab-frontend.js
3 * Lightweight helper that applies PostHog feature-flag variants
4 * to Elementor A/B sections/widgets on the page.
5 *
6 * Strategy:
7 *  1. On DOMContentLoaded, mark all [data-phab-flag] elements as hidden.
8 *  2. Wait for PostHog feature flags to load.
9 *  3. Reveal only the element whose data-phab-variant matches the flag value.
10 *  4. If PostHog never loads (timeout), reveal the control variant.
11 */
12(function () {
13  "use strict";
14
15  var TIMEOUT_MS = 3000; // fallback reveal after 3 s
16  var revealed = false;
17
18  /**
19   * Hide all A/B containers until we know which variant to show.
20   * Uses inline style so it takes effect before any CSS loads.
21   */
22  function hideContainers() {
23    var els = document.querySelectorAll("[data-phab-flag]");
24    els.forEach(function (el) {
25      el.style.visibility = "hidden";
26      el.style.height = "0";
27      el.style.overflow = "hidden";
28    });
29  }
30
31  /**
32   * Show only the matching variant element(s) for each flag group.
33   * Elements with no matching variant show the control ('control' or 'false').
34   */
35  function applyVariants() {
36    if (revealed) return;
37    revealed = true;
38
39    // Group elements by flag key.
40    var groups = {};
41    var els = document.querySelectorAll("[data-phab-flag]");
42    els.forEach(function (el) {
43      var flag = el.getAttribute("data-phab-flag");
44      if (!groups[flag]) groups[flag] = [];
45      groups[flag].push(el);
46    });
47
48    console.log(
49      "phab: Applying feature flag variants for flags:",
50      Object.keys(groups),
51    );
52
53    Object.keys(groups).forEach(function (flag) {
54      var flagValue =
55        window.posthog && window.posthog.getFeatureFlag
56          ? window.posthog.getFeatureFlag(flag)
57          : null;
58
59      console.log(
60        `phab: Flag "${flag}" has value:`,
61        flagValue,
62        "(null/undefined/false treated as 'control')",
63      );
64
65      // Normalise: false / undefined / null → 'control'
66      if (!flagValue || flagValue === false) flagValue = "control";
67
68      groups[flag].forEach(function (el) {
69        var variant = el.getAttribute("data-phab-variant") || "control";
70        if (variant === flagValue) {
71          el.style.visibility = "";
72          el.style.height = "";
73          el.style.overflow = "";
74        } else {
75          el.style.display = "none";
76        }
77      });
78    });
79  }
80
81  // Safety timeout: reveal control if PostHog stalls.
82  var safetyTimer = setTimeout(function () {
83    applyVariants();
84  }, TIMEOUT_MS);
85
86  document.addEventListener("DOMContentLoaded", function () {
87    hideContainers();
88
89    if (window.posthog && window.posthog.onFeatureFlags) {
90      window.posthog.onFeatureFlags(function () {
91        clearTimeout(safetyTimer);
92        applyVariants();
93      });
94    } else {
95      // PostHog stub or not loaded — reveal immediately.
96      clearTimeout(safetyTimer);
97      applyVariants();
98    }
99  });
100})();