1/** 2 * Mock toolbar: apply / restore Payoneer Platform design system (Figma tokens â CSS). 3 * Figma: Design System | Payoneer Platform â node 95-1523 4 */ 5(function () { 6 "use strict"; 7 8 var STORAGE_KEY = "payoneer-platform-theme"; 9 var SESSION_RESTORED = "payoneer-mock-restored"; 10 var NAV_ID = "ppl-platform-nav"; 11 var NAV_CHEVRON = 12 '<svg class="ppl-platform-nav__chevron" viewBox="0 0 9 5" aria-hidden="true" focusable="false"><path d="M.75 1L4.5 4.25L8.25 1" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>'; 13 var FIGMA_URL = 14 "https://www.figma.com/design/sPzXtCyWcfk1xvsC8bNaWM/Design-System--Payoneer-Platform-?node-id=95-1523"; 15 // Resolve asset URLs against THIS script's location (always <base>/js/), 16 // not the page URL â so deep pages (/developers/x, /developers/x/y) and 17 // the deployed /<slug>/ mount load the same assets the hub does. The old 18 // page-relative "./css/..." / "./js/..." paths 404'd on deeper pages. 19 var SCRIPT_SRC = (document.currentScript && document.currentScript.src) || ""; 20 function assetUrl(rel) { 21 try { return SCRIPT_SRC ? new URL(rel, SCRIPT_SRC).href : rel; } 22 catch (e) { return rel; } 23 } 24 var THEME_CSS = assetUrl("../css/payoneer-platform-design-system.css"); 25 var NAV_CSS = assetUrl("../css/payoneer-platform-nav.css"); 26 var FOOTER_CSS = assetUrl("../css/payoneer-platform-footer.css"); 27 var BAR_CSS = assetUrl("../css/platform-design-toggle.css"); 28 var NAV_JS = assetUrl("../js/platform-nav.js"); 29 var FOOTER_JS = assetUrl("../js/platform-footer.js"); 30 var THEME_LINK_ID = "payoneer-platform-design-system-css"; 31 var NAV_CSS_ID = "payoneer-platform-nav-css"; 32 var FOOTER_CSS_ID = "payoneer-platform-footer-css"; 33 var BAR_CSS_ID = "platform-design-toggle-css"; 34 var NAV_SCRIPT_ID = "payoneer-platform-nav-js"; 35 var FOOTER_SCRIPT_ID = "payoneer-platform-footer-js"; 36 37 function isActive() { 38 return document.documentElement.getAttribute("data-payoneer-platform-theme") === "active"; 39 } 40 41 function ensureStylesheet(id, href) { 42 if (document.getElementById(id)) { 43 return; 44 } 45 var link = document.createElement("link"); 46 link.id = id; 47 link.rel = "stylesheet"; 48 link.href = href; 49 document.head.appendChild(link); 50 } 51 52 function ensureScript(id, src, onLoad) { 53 if (document.getElementById(id)) { 54 if (onLoad) { 55 onLoad(); 56 } 57 return; 58 } 59 var script = document.createElement("script"); 60 script.id = id; 61 script.src = src; 62 script.defer = true; 63 script.onload = function () { 64 if (onLoad) { 65 onLoad(); 66 } 67 }; 68 document.body.appendChild(script); 69 } 70 71 function isDeveloperDocsPage() { 72 return document.body && document.body.classList.contains("developer-docs-page"); 73 } 74 75 function docsSearchCenterMarkup() { 76 return ( 77 '<div class="ppl-platform-nav__center ppl-platform-nav__center--search">' + 78 '<div class="ppl-platform-nav__search">' + 79 '<input type="search" id="ppl-platform-nav-search" class="ppl-platform-nav__search-input developer-docs-header-search-input" placeholder="Search" aria-label="Search documentation" autocomplete="off" spellcheck="false">' + 80 "</div></div>" 81 ); 82 } 83 84 function primaryMenuMarkup() { 85 return ( 86 '<nav class="ppl-platform-nav__center" aria-label="Primary navigation">' + 87 '<ul class="ppl-platform-nav__menu">' + 88 '<li class="ppl-platform-nav__item"><a class="ppl-platform-nav__link" href="/developers-docs/">Products' + 89 NAV_CHEVRON + 90 "</a></li>" + 91 '<li class="ppl-platform-nav__item"><a class="ppl-platform-nav__link" href="/developers-docs/accounts-payable/">Solutions' + 92 NAV_CHEVRON + 93 "</a></li>" + 94 '<li class="ppl-platform-nav__item"><a class="ppl-platform-nav__link" href="https://www.payoneer.com/about/pricing/">Pricing</a></li>' + 95 '<li class="ppl-platform-nav__item"><a class="ppl-platform-nav__link" href="https://www.payoneer.com/resources/">Resources' + 96 NAV_CHEVRON + 97 "</a></li>" + 98 '<li class="ppl-platform-nav__item"><a class="ppl-platform-nav__link" href="https://www.payoneer.com/about/">About' + 99 NAV_CHEVRON + 100 "</a></li></ul></nav>" 101 ); 102 } 103 104 function platformNavMarkup() { 105 return ( 106 '<div class="ppl-platform-nav__inner">' + 107 '<div class="ppl-platform-nav__brand">' + 108 '<a href="https://www.payoneer.com/" rel="home">' + 109 '<img src="https://www.payoneer.com/wp-content/themes/payo/assets/img/payoneer-dark-logo.svg" width="148" height="30" alt="Payoneer">
109' + 110 "</a></div>" + 111 (isDeveloperDocsPage() ? docsSearchCenterMarkup() : primaryMenuMarkup()) + 112 '<div class="ppl-platform-nav__actions">' + 113 '<div class="ppl-platform-nav__action-group">' + 114 '<a class="ppl-platform-nav__signin" href="https://myaccount.payoneer.com/" rel="noopener" target="_blank">Sign in</a>' + 115 '<a class="ppl-platform-nav__cta" href="https://www.payoneer.com/go/">Get started</a>' + 116 "</div></div></div>" 117 ); 118 } 119 120 function injectPlatformNav() { 121 var masthead = document.getElementById("masthead"); 122 if (!masthead) { 123 return false; 124 } 125 var nav = document.getElementById(NAV_ID); 126 if (!nav) { 127 nav = document.createElement("div"); 128 nav.id = NAV_ID; 129 nav.className = "ppl-platform-nav"; 130 nav.setAttribute("role", "navigation"); 131 nav.setAttribute("aria-label", "Payoneer Platform"); 132 masthead.insertBefore(nav, masthead.firstChild); 133 } else if (nav.parentElement !== masthead) { 134 masthead.insertBefore(nav, masthead.firstChild); 135 } 136 nav.innerHTML = platformNavMarkup(); 137 nav.hidden = false; 138 if (window.PayoneerPlatformNav) { 139 window.PayoneerPlatformNav.updateHeaderHeight(); 140 } else if (typeof window.PayoneerSetDocHeaderLayout === "function") { 141 window.PayoneerSetDocHeaderLayout(); 142 } 143 if (isDeveloperDocsPage() && typeof window.PayoneerInitDocSidebarSearch === "function") { 144 window.PayoneerInitDocSidebarSearch(); 145 } 146 return true; 147 } 148 149 function dispatchThemeChange(active) { 150 try { 151 document.dispatchEvent( 152 new CustomEvent("payoneer-platform-theme-change", { detail: { active: active } }) 153 ); 154 } catch (e) { 155 /* ignore */ 156 } 157 } 158 159 function mountPlatformNav() { 160 function doMount() { 161 if (window.PayoneerPlatformNav) { 162 return window.PayoneerPlatformNav.mount(); 163 } 164 return injectPlatformNav(); 165 } 166 if (doMount()) { 167 return; 168 } 169 var attempts = 0; 170 var retry = window.setInterval(function () { 171 attempts += 1; 172 if (doMount() || attempts >= 40) { 173 window.clearInterval(retry); 174 } 175 }, 25); 176 if (!document.getElementById(NAV_SCRIPT_ID) && !window.PayoneerPlatformNav) { 177 var script = document.createElement("script"); 178 script.id = NAV_SCRIPT_ID; 179 script.src = NAV_JS; 180 script.onload = function () { 181 doMount(); 182 }; 183 document.head.appendChild(script); 184 } 185 } 186 187 function unmountPlatformNav() { 188 if (window.PayoneerPlatformNav) { 189 window.PayoneerPlatformNav.unmount(); 190 } 191 } 192 193 function mountPlatformFooter() { 194 if (isDeveloperDocsPage()) { 195 unmountPlatformFooter(); 196 return; 197 } 198 function doMount() { 199 if (window.PayoneerPlatformFooter) { 200 window.PayoneerPlatformFooter.mount(); 201 return true; 202 } 203 return false; 204 } 205 if (doMount()) { 206 return; 207 } 208 ensureScript(FOOTER_SCRIPT_ID, FOOTER_JS, doMount); 209 window.setTimeout(function () { 210 if (isActive() && !document.getElementById("ppl-platform-footer")) { 211 doMount(); 212 } 213 }, 50); 214 } 215 216 function unmountPlatformFooter() { 217 if (window.PayoneerPlatformFooter) { 218 window.PayoneerPlatformFooter.unmount(); 219 } 220 } 221 222 function setTheme(active) { 223 var root = document.documentElement; 224 if (active) { 225 ensureStylesheet(NAV_CSS_ID, NAV_CSS); 226 ensureStylesheet(THEME_LINK_ID, THEME_CSS); 227 ensureStylesheet(FOOTER_CSS_ID, FOOTER_CSS); 228 root.setAttribute("data-payoneer-platform-theme", "active"); 229 mountPlatformNav(); 230 dispatchThemeChange(true); 231 window.setTimeout(function () { 232 if (isActive()) { 233 mountPlatformNav(); 234 dispatchThemeChange(true); 235 if (window.PayoneerPlatformNav) { 236 window.PayoneerPlatformNav.updateHeaderHeight(); 237 } 238 } 239 }, 0); 240 window.addEventListener( 241 "load", 242 function onLoadMount() { 243 window.removeEventListener("load", onLoadMount); 244 if (isActive()) { 245 mountPlatformNav(); 246 dispatchThemeChange(true); 247 } 248 }, 249 { once: true } 250 ); 251 mountPlatformFooter(); 252 try { 253 sessionStorage.removeItem(SESSION_RESTORED); 254 localStorage.setItem(STORAGE_KEY, "active"); 255 } catch (e) { 256 /* ignore */ 257 } 258 } else { 259 root.removeAttribute("data-payoneer-platform-theme"); 260 dispatchThemeChange(false); 261 if (isDeveloperDocsPage()) { 262 ensureStylesheet(NAV_CSS_ID, NAV_CSS); 263 mountPlatformNav(); 264 } else { 265 unmountPlatformNav(); 266 } 267 unmountPlatformFooter(); 268 var themeLink = document.getElementById(THEME_LINK_ID); 269 if (themeLink) { 270 themeLink.remove(); 271 } 272 var footerCss = document.getElementById(FOOTER_CSS_ID); 273 if (footerCss) { 274 footerCss.remove(); 275 } 276 try { 277 sessionStorage.setItem(SESSION_RESTORED, "1"); 278 localStorage.removeItem(STORAGE_KEY); 279 } catch (e) { 280 /* ignore */ 281 } 282 } 283 updateButton(); 284 } 285 286 function updateButton() { 287 var btn = document.getElementById("platform-design-toggle-btn"); 288 if (!btn) { 289 return; 290 } 291 var active = isActive(); 292 btn.setAttribute("aria-pressed", active ? "true" : "false"); 293 btn.textContent = active ? "Restore default theme" : "Apply Platform theme"; 294 btn.className = active 295 ? "platform-design-toggle-btn platform-design-toggle-btn--restore" 296 : "platform-design-toggle-btn platform-design-toggle-btn--apply"; 297 } 298 299 function buildBar() { 300 if (document.getElementById("platform-design-toggle-bar")) { 301 return; 302 } 303 304 var bar = document.createElement("div"); 305 bar.id = "platform-design-toggle-bar"; 306 bar.className = "platform-design-toggle-bar"; 307 bar.setAttribute("role", "region"); 308 bar.setAttribute("aria-label", "Payoneer Platform design system preview"); 309 310 bar.innerHTML = 311 '<div class="platform-design-toggle-bar__label">' + 312 '<span class="platform-design-toggle-bar__badge">Mock</span>' + 313 '<span class="platform-design-toggle-bar__text">' + 314 "Developer site preview · " + 315 '<a href="' + 316 FIGMA_URL + 317 '" target="_blank" rel="noopener noreferrer">Payoneer Platform design system</a>' + 318 '<span class="platform-design-toggle-bar__source"> (Figma)</span>' + 319 "</span>" + 320 "</div>" + 321 '<div class="platform-design-toggle-bar__actions">' + 322 '<button type="button" id="platform-design-toggle-btn" class="platform-design-toggle-btn platform-design-toggle-btn--apply">Apply Platform theme</button>' + 323 "</div>"; 324 325 document.body.insertBefore(bar, document.body.firstChild); 326 327 document.getElementById("platform-design-toggle-btn").addEventListener("click", function () { 328 setTheme(!isActive()); 329 }); 330 331 document.documentElement.classList.add("platform-toggle-bar-active"); 332 document.body.classList.add("platform-toggle-bar-active"); 333 } 334 335 function isSessionRestored() { 336 try { 337 return sessionStorage.getItem(SESSION_RESTORED) === "1"; 338 } catch (e) { 339 return false; 340 } 341 } 342 343 function removeLegacyBar() { 344 var bar = document.getElementById("platform-design-toggle-bar"); 345 if (bar) { 346 bar.remove(); 347 } 348 document.documentElement.classList.remove("platform-toggle-bar-active"); 349 document.body.classList.remove("platform-toggle-bar-active"); 350 var toggleCss = document.getElementById(BAR_CSS_ID); 351 if (toggleCss) { 352 toggleCss.remove(); 353 } 354 } 355
356 function init() { 357 removeLegacyBar(); 358 ensureStylesheet(NAV_CSS_ID, NAV_CSS); 359 360 if (!isSessionRestored()) { 361 setTheme(true); 362 } else if (isDeveloperDocsPage()) { 363 mountPlatformNav(); 364 } 365 } 366 367 function runInit() { 368 init(); 369 window.addEventListener("load", function () { 370 if (isDeveloperDocsPage() && !document.getElementById(NAV_ID)) { 371 mountPlatformNav(); 372 return; 373 } 374 if (!isSessionRestored() && !document.getElementById(NAV_ID)) { 375 setTheme(true); 376 } 377 }); 378 } 379 380 if (document.readyState === "loading") { 381 document.addEventListener("DOMContentLoaded", runInit); 382 } else { 383 runInit(); 384 } 385})();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.