https://www.payoneer.com/developers-docs/js/mega-menu-header.js

1(function () {
2	var NAV_OFFSET = 24;
3	var NAV_STICK_MS = 2200;
4	var navStickRaf = null;
5	var navStickTimer = null;
6	var layoutSyncRaf = null;
7
8	function syncDocArticleLayout() {
9		var wrap = document.querySelector(".developer-docs.doc-article-wrap");
10		var header = document.querySelector("#masthead.site-header");
11		if (!wrap || !header) {
12			return;
13		}
14
15		var root = document.documentElement;
16		var anchorTop = header.getBoundingClientRect().bottom;
17		root.style.setProperty("--docs-sidebar-top", anchorTop + "px");
18
19		var gap = wrap.getBoundingClientRect().top - anchorTop;
20		root.style.setProperty("--docs-layout-pull", gap > 0.5 ? -gap + "px" : "0px");
21	}
22
23	function getProductNavScrollContainer(sidebar) {
24		return sidebar.querySelector(".developer-docs-sidebar-scroll") || sidebar;
25	}
26
27	function isActiveNavVisible(container, active) {
28		var containerRect = container.getBoundingClientRect();
29		var activeRect = active.getBoundingClientRect();
30		return activeRect.top >= containerRect.top + NAV_OFFSET && activeRect.bottom <= containerRect.bottom - NAV_OFFSET;
31	}
32
33	function scrollProductNavContainer(container, active) {
34		var containerRect = container.getBoundingClientRect();
35		var activeRect = active.getBoundingClientRect();
36		var relativeTop = activeRect.top - containerRect.top + container.scrollTop;
37		var target = relativeTop - NAV_OFFSET;
38
39		if (active.offsetHeight < container.clientHeight - NAV_OFFSET * 2) {
40			target = relativeTop - (container.clientHeight - active.offsetHeight) / 2;
41		}
42
43		container.scrollTop = Math.max(0, Math.min(target, container.scrollHeight - container.clientHeight));
44	}
45
46	function scrollProductNavToActive() {
47		var sidebar = document.querySelector("aside.developer-docs-sidebar--products");
48		if (!sidebar) {
49			return false;
50		}
51
52		var active = sidebar.querySelector("a[aria-current='page']");
53		if (!active) {
54			return false;
55		}
56
57		var container = getProductNavScrollContainer(sidebar);
58		if (!container || container.clientHeight <= 0) {
59			return false;
60		}
61
62		if (isActiveNavVisible(container, active)) {
63			return true;
64		}
65
66		scrollProductNavContainer(container, active);
67		return isActiveNavVisible(container, active);
68	}
69
70	function stopProductNavStick() {
71		if (navStickRaf) {
72			cancelAnimationFrame(navStickRaf);
73			navStickRaf = null;
74		}
75		if (navStickTimer) {
76			clearTimeout(navStickTimer);
77			navStickTimer = null;
78		}
79	}
80
81	function startProductNavStick() {
82		if (!document.querySelector("aside.developer-docs-sidebar--products")) {
83			return;
84		}
85
86		stopProductNavStick();
87		var deadline = Date.now() + NAV_STICK_MS;
88
89		function tick() {
90			scrollProductNavToActive();
91			if (Date.now() < deadline) {
92				navStickRaf = requestAnimationFrame(tick);
93			} else {
94				navStickRaf = null;
95			}
96		}
97
98		scrollProductNavToActive();
99		navStickRaf = requestAnimationFrame(tick);
100		navStickTimer = setTimeout(function () {
101			scrollProductNavToActive();
102			stopProductNavStick();
103		}, NAV_STICK_MS);
104	}
105
106	function bindProductNavObserver() {
107		if (window.PayoneerProductNavScrollObserverBound) {
108			return;
109		}
110		var sidebar = document.querySelector("aside.developer-docs-sidebar--products");
111		if (!sidebar || typeof ResizeObserver === "undefined") {
112			return;
113		}
114		var container = getProductNavScrollContainer(sidebar);
115		window.PayoneerProductNavScrollObserverBound = true;
116		var ro = new ResizeObserver(function () {
117			scrollProductNavToActive();
118		});
119		ro.observe(container);
120	}
121
122	function notifyLayoutSynced() {
123		scrollProductNavToActive();
124		try {
125			document.dispatchEvent(new CustomEvent("payoneer-docs-layout-synced"));
126		} catch (e) {
127			/* ignore */
128		}
129	}
130
131	function setHeaderHeight() {
132		var header = document.querySelector("#masthead.site-header");
133		if (header) {
134			document.documentElement.style.setProperty("--payo-header-h", header.offsetHeight + "px");
135		}
136		syncDocArticleLayout();
137		if (layoutSyncRaf) {
138			cancelAnimationFrame(layoutSyncRaf);
139		}
140		layoutSyncRaf = requestAnimationFrame(function () {
141			layoutSyncRaf = null;
142			notifyLayoutSynced();
143		});
144	}
145
146	function bindLayoutObservers() {
147		if (window.PayoneerDocsLayoutObserverBound) {
148			return;
149		}
150		var header = document.querySelector("#masthead.site-header");
151		var wrap = document.querySelector(".developer-docs.doc-article-wrap");
152		if (!header || !wrap || typeof ResizeObserver === "undefined") {
153			return;
154		}
155		window.PayoneerDocsLayoutObserverBound = true;
156		var ro = new ResizeObserver(function () {
157			requestAnimationFrame(setHeaderHeight);
158		});
159		ro.observe(header);
160		ro.observe(wrap);
161	}
162
163	function scheduleInitialSyncPasses() {
164		if (window.PayoneerDocsLayoutSyncScheduled) {
165			return;
166		}
167		window.PayoneerDocsLayoutSyncScheduled = true;

168		[0, 50, 150, 300].forEach(function (ms) {
169			window.setTimeout(setHeaderHeight, ms);
170		});
171	}
172
173	function initProductNavScroll() {
174		bindProductNavObserver();
175		startProductNavStick();
176	}
177
178	function ensureDeveloperDocsChrome() {
179		if (!document.body.classList.contains("developer-docs-page")) {
180			return;
181		}
182		document.documentElement.setAttribute("data-payoneer-platform-theme", "active");
183		if (window.PayoneerPlatformFooter) {
184			window.PayoneerPlatformFooter.unmount();
185		}
186		if (window.PayoneerPlatformNav) {
187			window.PayoneerPlatformNav.mount();
188		}
189		if (typeof window.PayoneerInitDocSidebarSearch === "function") {
190			window.PayoneerInitDocSidebarSearch();
191		}
192	}
193
194	window.PayoneerSetDocHeaderLayout = setHeaderHeight;
195	window.PayoneerScrollProductNavToActive = scrollProductNavToActive;
196	window.PayoneerEnsureDeveloperDocsChrome = ensureDeveloperDocsChrome;
197
198	setHeaderHeight();
199	scheduleInitialSyncPasses();
200	bindLayoutObservers();
201	initProductNavScroll();
202	window.addEventListener("resize", setHeaderHeight);
203	window.addEventListener("load", function () {
204		setHeaderHeight();
205		startProductNavStick();
206	});
207	window.addEventListener("pageshow", function () {
208		setHeaderHeight();
209		startProductNavStick();
210	});
211	document.addEventListener("DOMContentLoaded", function () {
212		requestAnimationFrame(function () {
213			ensureDeveloperDocsChrome();
214			setHeaderHeight();
215			bindLayoutObservers();
216			initProductNavScroll();
217		});
218	});
219	window.addEventListener("pageshow", function () {
220		ensureDeveloperDocsChrome();
221	});
222	document.addEventListener("payoneer-platform-theme-change", function () {
223		window.PayoneerDocsLayoutSyncScheduled = false;
224		requestAnimationFrame(function () {
225			setHeaderHeight();
226			scheduleInitialSyncPasses();
227			bindLayoutObservers();
228			startProductNavStick();
229		});
230	});
231})();