Skip to content

Commit a71ea21

Browse files
aorcsikaorcsik
committed
navigation loader
1 parent d82a093 commit a71ea21

5 files changed

Lines changed: 191 additions & 20 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ career-maps.json
77
changelog.json
88
changelog.xml
99
changelog_latest.json
10+
navigation_loader.js
1011
.DS_Store
1112
.env
1213
/wrangler.toml

‎dist/navigation-test.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Navigation Test</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div id="webflow-navigation-container"></div>
17+
<script src="/navigation.js"></script>
18+
</body>
19+
</html>

‎package-lock.json‎

Lines changed: 9 additions & 20 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/navigation.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
console.log('Webflow Navigation Loader');
2+
window.webflowNavigationLoaded = (data) => {
3+
console.log('Webflow Navigation Loaded', data);
4+
const navContainer = document.querySelector('#webflow-navigation-container');
5+
if (!navContainer) {
6+
console.error('Navigation container not found');
7+
return;
8+
}
9+
10+
if (data.error) {
11+
console.error('Error loading navigation:', data.error);
12+
return;
13+
}
14+
15+
if (data.css) {
16+
const style = document.createElement('style');
17+
style.setAttribute('data-webflow-navigation', '');
18+
let css = data.css.replace(/:root\s*{/g, '& {').replace(/body\s*{/g, '& {');
19+
css = `#webflow-navigation-container {
20+
* {
21+
-webkit-font-smoothing: antialiased;
22+
-moz-osx-font-smoothing: grayscale;
23+
}
24+
25+
${css}
26+
27+
.nav_main-flex-mobile,
28+
.nav_main-flex-img {
29+
z-index: 1;
30+
}
31+
.nav_main-content,
32+
.nav_highlights-wrapper {
33+
z-index: 2;
34+
}
35+
}`;
36+
const fontFaces = css.match(/@font-face\s*{[^}]*}/g);
37+
if (fontFaces) {
38+
fontFaces.forEach((fontFace) => {
39+
css = css.replace(fontFace, '') + fontFace;
40+
});
41+
}
42+
43+
style.textContent = css;
44+
document.head.appendChild(style);
45+
}
46+
47+
data.html = data.html
48+
.replace(/<style[^>]*>(.*?)<\/style>/gis, `<style>#webflow-navigation-container { $1 }</style>`)
49+
.replace(/:root\s*{/g, '& {')
50+
.replace(/body\s*{/g, '& {');
51+
52+
navContainer.innerHTML = data.html;
53+
54+
document.querySelectorAll('#webflow-navigation-container .nav_dropdown_component.w-dropdown').forEach((dropdown) => {
55+
dropdown.addEventListener('mouseenter', () => {
56+
dropdown.querySelector('.navdropdown_mega-wrapper').style.transition = 'height 0.5s ease, opacity 0.5s ease';
57+
dropdown.querySelector('.navdropdown_mega-wrapper').style.opacity = 0;
58+
dropdown.querySelector('nav.w-dropdown-list').classList.toggle('w--open');
59+
requestAnimationFrame(() => {
60+
const dropdownHeight = dropdown.querySelector('.navdropdown_mega-wrapper').clientHeight;
61+
dropdown.querySelector('.navdropdown_mega-wrapper').style.height = 0;
62+
requestAnimationFrame(() => {
63+
dropdown.querySelector('.navdropdown_mega-wrapper').style.height = `${dropdownHeight}px`;
64+
dropdown.querySelector('.navdropdown_mega-wrapper').style.opacity = 1;
65+
window.setTimeout(() => {
66+
dropdown.querySelector('.navdropdown_mega-wrapper').style.height = '';
67+
dropdown.querySelector('.navdropdown_mega-wrapper').style.opacity = '';
68+
}, 500);
69+
});
70+
});
71+
});
72+
dropdown.addEventListener('mouseleave', () => {
73+
dropdown.querySelector('nav.w-dropdown-list').classList.toggle('w--open');
74+
});
75+
});
76+
};
77+
const webflowNavigationLoader = document.createElement('script');
78+
document.head.appendChild(webflowNavigationLoader);
79+
webflowNavigationLoader.src = '/navigation_loader.js';
80+
81+
const resetScripts = [];
82+
resetScripts.push(() => {
83+
const navContainer = document.querySelector('#webflow-navigation-container');
84+
if (navContainer) {
85+
navContainer.innerHTML = '';
86+
}
87+
const style = document.querySelector('style[data-webflow-navigation]');
88+
if (style) {
89+
style.remove();
90+
}
91+
});
92+
93+
if (import.meta.webpackHot) {
94+
import.meta.webpackHot.dispose(() => {
95+
resetScripts.forEach((resetScript) => {
96+
resetScript();
97+
});
98+
});
99+
import.meta.webpackHot.accept();
100+
}

0 commit comments

Comments
 (0)