/** * Paga docs pop-up modal * * Load this script once on the docs site (globally). Any link with the class * "paga-simulate-btn" opens its URL inside a pop-up iframe instead of * navigating away. * * Optional attributes on the link: * data-modal-title Title shown in the pop-up header. * Defaults to "Bank Transfer Simulator". * data-modal-size "full" opens the pop-up at 95% of the screen. * Defaults to the standard 900px pop-up. * * If this script fails to load, the link still works as a normal link. */ (function () { if (window.__pagaSimulatorModal) return; window.__pagaSimulatorModal = true; var BRAND = "#1B2B4A"; /* Paga Blue Whale */ var css = ` .paga-simulate-btn { display: inline-block; padding: 12px 24px; margin: 8px 0; background: ${BRAND}; color: #fff !important; font-weight: 600; text-decoration: none !important; border-radius: 999px; cursor: pointer; border: none; font-size: 15px; line-height: 1.2; } .paga-simulate-btn:hover { opacity: 0.9; } .paga-sim-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); padding: 16px; } .paga-sim-dialog { position: relative; width: 100%; max-width: 900px; height: 85vh; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; } .paga-sim-dialog--full { width: 95vw; max-width: none; height: 110vh; } .paga-sim-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e5e5; font-weight: 600; color: #222; font-family: inherit; } .paga-sim-close { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: #555; padding: 0 4px; } .paga-sim-close:hover { color: #000; } .paga-sim-frame { flex: 1; width: 100%; border: 0; } body.paga-sim-open { overflow: hidden; } `; var style = document.createElement("style"); style.textContent = css; document.head.appendChild(style); var lastFocus = null; function openModal(url, title, size) { lastFocus = document.activeElement; var overlay = document.createElement("div"); overlay.className = "paga-sim-overlay"; overlay.innerHTML = '"; overlay.querySelector("iframe").src = url; document.body.appendChild(overlay); document.body.classList.add("paga-sim-open"); var closeBtn = overlay.querySelector(".paga-sim-close"); closeBtn.focus(); function close() { overlay.remove(); document.body.classList.remove("paga-sim-open"); document.removeEventListener("keydown", onKey); if (lastFocus) lastFocus.focus(); } function onKey(e) { if (e.key === "Escape") close(); } closeBtn.addEventListener("click", close); overlay.addEventListener("click", function (e) { if (e.target === overlay) close(); /* click outside the dialog */ }); document.addEventListener("keydown", onKey); } /* Event delegation: works even when docs pages load without a full refresh. */ document.addEventListener("click", function (e) { var link = e.target.closest && e.target.closest(".paga-simulate-btn"); if (!link) return; e.preventDefault(); openModal( link.getAttribute("href"), link.getAttribute("data-modal-title") || "Bank Transfer Simulator", link.getAttribute("data-modal-size") ); }); })(); /** * Paga docs Dashboard menu * * Turns the header's Sandbox and Production links into one "Dashboard" button * with a dropdown. ReadMe's header holds two copies of those links (one for wide * screens, one for its mobile menu), so this uses the pair that's on screen and * leaves the mobile copy alone. Comments use the block style so the script still * works if it's ever flattened onto one line. */ (function () { if (window.__pagaDashMenu) return; window.__pagaDashMenu = true; var SANDBOX_LABELS = ["sandbox", "sandbox dashboard", "test"]; var LIVE_LABELS = ["production", "production dashboard", "live", "live dashboard"]; var label = function (a) { return (a.textContent || "").replace(/\s+/g, " ").trim().toLowerCase(); }; var onScreen = function (el) { return el.getClientRects().length > 0 && getComputedStyle(el).visibility !== "hidden"; }; var ARROW = ''; var CHEVRON = ''; function item(href, tone, title, desc) { return '' + '' + '' + title + '' + desc + '' + ARROW + ''; } function build() { var header = document.querySelector(".rm-Header"); if (!header) return; /* Remove any menu left inside a hidden part of the header. */ Array.prototype.slice.call(header.querySelectorAll(".pg-dashmenu")).forEach(function (m) { if (!onScreen(m)) { Array.prototype.slice.call(header.querySelectorAll("a.pg-dashmenu-original")).forEach(function (a) { a.classList.remove("pg-dashmenu-original"); }); m.remove(); } }); if (header.querySelector(".pg-dashmenu")) return; var links = Array.prototype.slice.call(header.querySelectorAll("a")).filter(function (a) { return !a.classList.contains("pg-dashmenu__item"); }); var sandbox = links.filter(function (a) { return SANDBOX_LABELS.indexOf(label(a)) !== -1 && onScreen(a); })[0]; var live = links.filter(function (a) { return LIVE_LABELS.indexOf(label(a)) !== -1 && onScreen(a); })[0]; if (!sandbox || !live) return; var wrap = document.createElement("div"); wrap.className = "pg-dashmenu"; wrap.innerHTML = '' + ''; /* Place the button in the right-hand group, straight after the search box, as in the design. If the search box can't be found, fall back to where the original links were. */ var found = Array.prototype.slice.call(header.querySelectorAll(".rm-SearchToggle, [class*='Header-search'], button[aria-label*='earch']")).filter(onScreen); /* Use the outermost match, so the button goes beside the search box, not inside it. */ var search = found.filter(function (c) { return !found.some(function (o) { return o !== c && o.contains(c); }); })[0]; if (search) { search.parentNode.insertBefore(wrap, search.nextSibling); wrap.classList.add("pg-dashmenu--right"); } else { sandbox.parentNode.insertBefore(wrap, sandbox); } sandbox.classList.add("pg-dashmenu-original"); live.classList.add("pg-dashmenu-original"); var button = wrap.querySelector(".pg-dashmenu__button"); var panel = wrap.querySelector(".pg-dashmenu__panel"); var items = function () { return panel.querySelectorAll(".pg-dashmenu__item"); }; /* The menu is drawn on the page itself, not inside the header, because the header clips anything that hangs below it. It's placed under the button. */ document.body.appendChild(panel); panel.style.position = "fixed"; panel.style.right = "auto"; panel.style.zIndex = "1000"; function place() { var r = button.getBoundingClientRect(); var width = panel.offsetWidth || 280; var left = Math.min(Math.max(8, r.right - width), window.innerWidth - width - 8); panel.style.top = (r.bottom + 10) + "px"; panel.style.left = left + "px"; } function open(focusFirst) { panel.hidden = false; place(); button.setAttribute("aria-expanded", "true"); if (focusFirst) items()[0].focus(); } function close(focusButton) { panel.hidden = true; button.setAttribute("aria-expanded", "false"); if (focusButton) button.focus(); } button.addEventListener("click", function (e) { e.stopPropagation(); panel.hidden ? open(false) : close(false); }); button.addEventListener("keydown", function (e) { if (e.key === "ArrowDown") { e.preventDefault(); open(true); } }); panel.addEventListener("keydown", function (e) { var list = Array.prototype.slice.call(items()); var i = list.indexOf(document.activeElement); if (e.key === "Escape") { e.preventDefault(); close(true); } if (e.key === "ArrowDown") { e.preventDefault(); list[(i + 1) % list.length].focus(); } if (e.key === "ArrowUp") { e.preventDefault(); list[(i - 1 + list.length) % list.length].focus(); } if (e.key === "Tab") { close(false); } }); panel.addEventListener("click", function (e) { if (e.target.closest(".pg-dashmenu__item")) close(false); }); document.addEventListener("click", function (e) { if (!wrap.contains(e.target) && !panel.contains(e.target)) close(false); }); window.addEventListener("resize", function () { if (!panel.hidden) place(); }); window.addEventListener("scroll", function () { if (!panel.hidden) place(); }, true); /* If ReadMe removes the button (for example, when it redraws the header), remove its menu too, so the next one starts clean. */ new MutationObserver(function () { if (!document.body.contains(wrap) && panel.parentNode) panel.parentNode.removeChild(panel); }).observe(document.body, { childList: true, subtree: true }); } /* ReadMe redraws the header between pages and when the window is resized, so rebuild whenever that happens. */ var pending = false; function schedule() { if (pending) return; pending = true; requestAnimationFrame(function () { pending = false; build(); }); } schedule(); new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true }); window.addEventListener("resize", schedule); })();

200The networks.