LTD Nav Design JS
unknown
plain_text
10 months ago
10 kB
2
Indexable
Never
(function () {
try {
var debug = 0;
var variation_name = "";
if(window.Ltd_nav_design == 1) return;
window.Ltd_nav_design = 1
function waitForElement(selector, trigger, delayInterval, delayTimeout) {
const interval = setInterval(function () {
if (
document &&
document.querySelector(selector) &&
document.querySelectorAll(selector).length > 0
) {
clearInterval(interval);
trigger();
}
}, delayInterval);
setTimeout(function () {
clearInterval(interval);
}, delayTimeout);
}
const content = {
mainNav: [
{
name: 'SHOP',
link: '#',
childAccordion: 'yes',
child: [
{
dataId: 'shop_by-dev',
title: 'SHOP BY DEVELOPMENT',
items: [
{
name: 'Stage 1: Newborn Swaddling (0-3m)',
link: '/au-en/shop-by-development-au/stage-1-newborn-swaddling',
},
{
name: 'Stage 2: Ready to Roll (3-12m)',
link: '/au-en/shop-by-development-au/stage-2-ready-to-roll',
},
{
name: 'Stage 3: On the Move (6m-4Y)',
link: '/au-en/shop-by-development-au/stage-3-on-the-move',
},
],
footerLinkText: 'View All Products',
footerLink: '/au-en/shop-by-development-au',
},
{
dataId: 'shop_by-temp',
title: 'SHOP BY TEMPERATURE',
items: [
{
name: 'Summer (24-27)',
link: '/au-en/shop-by-room-temperature-au/summer',
},
{
name: 'All Seasons (18-24)',
link: '/au-en/shop-by-room-temperature-au/all-year',
},
{
name: 'Winter (<18)',
link: '/au-en/shop-by-room-temperature-au/winter',
},
],
footerLinkText: 'View All Products',
footerLink: '/au-en/shop-by-room-temperature-au'
},
{
dataId: 'all_products',
title: 'ALL PRODUCTS',
items: [
{
name: 'New Arrivals',
link: '/au-en/all-products-au/new-arrivals',
},
{
name: 'Swaddles',
link: '/au-en/all-products-au/newborn-swaddles',
},
{
name: 'Transition Bags and Suits',
link: '/au-en/all-products-au/transition-bags-suits',
},
{
name: 'Sleep Bags & Suits',
link: '/au-en/all-products-au/sleep-bags-sleep-suits',
},
{
name: 'Rompers & Pyjamas',
link: '/au-en/all-products-au/rompers-pyjamas',
},
{
name: 'Sheets & Bedding',
link: '/au-en/all-products-au/sheets-bedding',
},
{
name: 'Bundles',
link: '/au-en/all-products-au/bundles',
},
{
name: 'Maternity',
link: '/au-en/maternity-au',
},
{
name: 'Self-Soothing Toys',
link: '/au-en/all-products-au/self-soothing-toys',
},
],
footerLinkText: 'View All Products',
footerLink: '/au-en/all-products-au'
}
]
},
{ name: 'SLEEP LIBRARY',
link: '#',
child: [
{
dataId: 'sleep_library',
title: '',
items: [
{
name: 'Sleep Library',
link: '/au-en/baby-sleep-au',
},
{
name: 'Essentials',
link: '/au-en/baby-sleep-au/essentials',
},
{
name: 'Spaces & Surrounds',
link: '/au-en/baby-sleep-au/spaces',
},
{
name: 'Routine',
link: 'https://lovetodream.com/au-en/baby-sleep-au/routine',
},
{
name: 'Challenges',
link: '/au-en/baby-sleep-au/challenges',
},
],
footerLinkText: '',
footerLink: ''
}
],
},
{ name: 'BLOG',
link: '/au-en/blog/',
},
{ name: 'STOCKISTS',
link: '/au-en/stores-near-you-au'
},
{ name: 'REVIEWS',
link: '/au-en/reviews-au'
},
{ name: 'FAQs',
link: '/au-en/faqs-au'
},
{ name: 'CLEARANCE',
link: '/au-en/clearance-au'
}
],
}
function generateSubMenuHTML(submenuItems) {
let htmlString = '';
submenuItems.forEach(submenu => {
htmlString += `
<div class="submenu_wrapper" data-id="${submenu.dataId}">
<h3>${submenu.title}</h3>
<ul>
${submenu.items.map(item => `<li><a href="${item.link}">${item.name}</a></li>`).join('\n')}
</ul>
<a href="${submenu.footerLink}" class="submenu_footer-link">${submenu.footerLinkText}</a>
</div>`;
});
return htmlString;
}
function generateMenuHTML(items) {
let htmlString = '';
items.forEach(item => {
if (item.child) {
htmlString += `\t
<li class="has-submenu ${item.childAccordion ? 'yg_child-accordion' : ''} main_menu"><a href="#" class="main_menu-item">${item.name}</a>
<div class="submenu">
<div class="submenu_body">
${generateSubMenuHTML(item.child)}
</div>
</div>
</li>\n`;
} else {
htmlString += `\t<li class="main_menu"><a href="${item.link}" class="main_menu-item">${item.name}</a></li>\n`;
}
});
return htmlString;
}
const yg_nav =
`<nav class="yg_navbar">
<ul class="yg_nav-links" id="eg_navLinks">
<div class="yg_overlay"></div>
${generateMenuHTML(content.mainNav)}
</ul>
</nav>`
const yg_mobileToggle = `<a href="#" class="mobileMenu-toggle">
<span class="mobileMenu-toggleIcon"></span>
</a>`;
const yg_mobileNav =
`<div class="yg_mobileNav">
<ul class="yg_mobileNav-links">
${generateMenuHTML(content.mainNav)}
</ul>
</div>`
function init() {
document.querySelector('.hc-nav-trigger').parentElement.parentElement.classList.add('yg_hide');
document.querySelector('.hc-nav-trigger').parentElement.parentElement.insertAdjacentHTML('afterend',yg_mobileToggle);
document.querySelector('.header-menu-login').parentElement.parentElement.classList.add('yg_header');
document.querySelector('.header-menu-login').parentElement.classList.add('yg_desktop');
document.querySelector('.header-menu-login').insertAdjacentHTML('beforebegin', yg_nav);
document.body.insertAdjacentHTML('beforeend', yg_mobileNav);
document.addEventListener("click", (e) => {
screen.width < 1361 && clickEventHandler(e.target)
});
document.addEventListener("mouseover", (e) => {
screen.width > 1360 && clickEventHandler(e.target)
});
window.addEventListener('resize',function(){
const getHeaderHeight = document.querySelector('header').offsetHeight;
const mobileScreenHeight = screen.height;
document.querySelectorAll('.yg_navbar .yg_nav-links .submenu, .yg_mobileNav').forEach(function(element){
element.style.top = getHeaderHeight+'px';
})
document.querySelector('.yg_mobileNav').style.maxHeight = (mobileScreenHeight - getHeaderHeight)+'px';
})
}
function clickEventHandler(targetElement){
// set the position of the nav modal
const getHeaderHeight = document.querySelector('header').offsetHeight;
const mobileScreenHeight = screen.height;
document.querySelectorAll('.yg_navbar .yg_nav-links .submenu, .yg_mobileNav').forEach(function(element){
element.style.top = getHeaderHeight+'px';
})
document.querySelector('.yg_mobileNav').style.maxHeight = (mobileScreenHeight - getHeaderHeight)+'px';
// desktop dropdown menu
const dropdowns = document.querySelectorAll('.has-submenu');
const dropdownToggles = document.querySelectorAll('.has-submenu .main_menu-item');
const isDropdownToggleClicked = Array.from(dropdownToggles).some(toggle => toggle.contains(targetElement));
if (isDropdownToggleClicked) {
const clickedDropdown = targetElement.closest('.has-submenu');
const isOpen = clickedDropdown.classList.contains('submenu-show');
dropdowns.forEach(dropdown => {
if (dropdown !== clickedDropdown && dropdown.classList.contains('submenu-show')) {
dropdown.classList.remove('submenu-show');
screen.width > 1360 && document.body.classList.remove("yg_overflow-hidden");
}
});
if (!isOpen) {
clickedDropdown.classList.add('submenu-show');
screen.width > 1360 && document.body.classList.add("yg_overflow-hidden");
} else {
clickedDropdown.classList.remove('submenu-show');
screen.width > 1360 && document.body.classList.remove("yg_overflow-hidden");
}
} else {
const isDropdownClick = Array.from(dropdowns).some(dropdown => dropdown.contains(targetElement));
if (!isDropdownClick) {
const openDropdowns = document.querySelectorAll('.submenu-show');
openDropdowns.forEach(dropdown => {
dropdown.classList.remove('submenu-show');
screen.width > 1360 && document.body.classList.remove("yg_overflow-hidden");
});
}
}
// mobile toggle nav icon
if(targetElement.closest('.mobileMenu-toggle')){
document.querySelector('.mobileMenu-toggle').classList.toggle('is-open');
document.querySelector('.yg_mobileNav').classList.toggle('active');
document.body.classList.toggle('yg_overflow-hidden')
}
// child accordion
const header = targetElement.closest('.yg_mobileNav .yg_child-accordion .submenu h3');
if (!header) return;
const accordionItem = header.parentElement;
const isActive = accordionItem.classList.contains('active');
// Close all accordion items
document.querySelectorAll('.yg_mobileNav .yg_child-accordion .submenu_wrapper').forEach(item => item.classList.remove('active'));
if (!isActive) {
accordionItem.classList.add('active'); // Open clicked accordion item
}
}
waitForElement('.hc-nav-trigger', init, 50, 15000);
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
})();Leave a Comment