mohamad
343 lines
10 KiB
JavaScript
343 lines
10 KiB
JavaScript
'use strict';
|
|
|
|
const SELECTORS = {
|
|
navbar: '#navbar',
|
|
navbarToggle: '#navbarToggle',
|
|
navbarMenu: '#navbarMenu',
|
|
productsNavItem: '#productsNavItem',
|
|
faqItems: '.faq-item',
|
|
faqQuestion: '.faq-question',
|
|
faqAnswer: '.faq-answer',
|
|
fadeInElements: '.fade-in',
|
|
citationCopy: '.citation-copy',
|
|
};
|
|
|
|
const MOBILE_NAV_MQ = window.matchMedia('(max-width: 768px)');
|
|
|
|
function isMobileNav() {
|
|
return MOBILE_NAV_MQ.matches;
|
|
}
|
|
|
|
function initNavbarScroll() {
|
|
const navbar = document.querySelector(SELECTORS.navbar);
|
|
if (!navbar) return;
|
|
|
|
const onScroll = () => {
|
|
if (window.scrollY > 20) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
onScroll();
|
|
}
|
|
|
|
function closeMobileNavMenu() {
|
|
const toggle = document.querySelector(SELECTORS.navbarToggle);
|
|
const menu = document.querySelector(SELECTORS.navbarMenu);
|
|
const productsItem = document.querySelector(SELECTORS.productsNavItem);
|
|
if (!toggle || !menu) return;
|
|
|
|
menu.classList.remove('open');
|
|
toggle.classList.remove('open');
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
|
|
if (productsItem) {
|
|
productsItem.classList.remove('open');
|
|
const productsTrigger = productsItem.querySelector('.nav-link');
|
|
if (productsTrigger) productsTrigger.setAttribute('aria-expanded', 'false');
|
|
productsItem.querySelectorAll('.megamenu-product-item.has-subproducts.open').forEach((item) => {
|
|
item.classList.remove('open');
|
|
});
|
|
}
|
|
}
|
|
|
|
function initMobileMenu() {
|
|
const toggle = document.querySelector(SELECTORS.navbarToggle);
|
|
const menu = document.querySelector(SELECTORS.navbarMenu);
|
|
if (!toggle || !menu) return;
|
|
|
|
toggle.addEventListener('click', () => {
|
|
const isOpen = menu.classList.toggle('open');
|
|
toggle.classList.toggle('open', isOpen);
|
|
toggle.setAttribute('aria-expanded', String(isOpen));
|
|
if (!isOpen) {
|
|
const productsItem = document.querySelector(SELECTORS.productsNavItem);
|
|
if (productsItem) {
|
|
productsItem.classList.remove('open');
|
|
const productsTrigger = productsItem.querySelector('.nav-link');
|
|
if (productsTrigger) productsTrigger.setAttribute('aria-expanded', 'false');
|
|
}
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && menu.classList.contains('open')) {
|
|
closeMobileNavMenu();
|
|
toggle.focus();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', (e) => {
|
|
if (!menu.contains(e.target) && !toggle.contains(e.target)) {
|
|
closeMobileNavMenu();
|
|
}
|
|
});
|
|
}
|
|
|
|
function initMegaMenu() {
|
|
const productsItem = document.querySelector(SELECTORS.productsNavItem);
|
|
if (!productsItem) return;
|
|
|
|
const trigger = productsItem.querySelector('.nav-link');
|
|
const megamenu = productsItem.querySelector('.megamenu');
|
|
if (!trigger || !megamenu) return;
|
|
|
|
const CLOSE_DELAY_MS = 150;
|
|
let hideTimer = null;
|
|
|
|
function isPointerInMenu(target) {
|
|
if (!target || !(target instanceof Node)) return false;
|
|
return productsItem.contains(target) || megamenu.contains(target);
|
|
}
|
|
|
|
function cancelClose() {
|
|
clearTimeout(hideTimer);
|
|
hideTimer = null;
|
|
megamenu.classList.remove('is-closing');
|
|
}
|
|
|
|
function openMenu() {
|
|
if (isMobileNav()) return;
|
|
cancelClose();
|
|
productsItem.classList.add('open');
|
|
trigger.setAttribute('aria-expanded', 'true');
|
|
}
|
|
|
|
function beginClose() {
|
|
if (isMobileNav()) return;
|
|
productsItem.classList.remove('open');
|
|
trigger.setAttribute('aria-expanded', 'false');
|
|
megamenu.classList.add('is-closing');
|
|
}
|
|
|
|
function scheduleClose(event) {
|
|
if (isMobileNav()) return;
|
|
if (event && isPointerInMenu(event.relatedTarget)) return;
|
|
|
|
clearTimeout(hideTimer);
|
|
hideTimer = setTimeout(beginClose, CLOSE_DELAY_MS);
|
|
}
|
|
|
|
megamenu.addEventListener('transitionend', (event) => {
|
|
if (event.target !== megamenu) return;
|
|
if (event.propertyName !== 'opacity' && event.propertyName !== 'visibility') return;
|
|
if (productsItem.classList.contains('open')) return;
|
|
megamenu.classList.remove('is-closing');
|
|
});
|
|
|
|
productsItem.addEventListener('mouseenter', openMenu);
|
|
productsItem.addEventListener('mouseleave', scheduleClose);
|
|
|
|
megamenu.addEventListener('mouseenter', openMenu);
|
|
megamenu.addEventListener('mouseleave', scheduleClose);
|
|
|
|
trigger.addEventListener('click', (e) => {
|
|
if (!isMobileNav()) return;
|
|
e.preventDefault();
|
|
const isOpen = productsItem.classList.toggle('open');
|
|
trigger.setAttribute('aria-expanded', String(isOpen));
|
|
});
|
|
|
|
trigger.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
if (isMobileNav()) {
|
|
const isOpen = productsItem.classList.toggle('open');
|
|
trigger.setAttribute('aria-expanded', String(isOpen));
|
|
return;
|
|
}
|
|
const isOpen = productsItem.classList.toggle('open');
|
|
if (isOpen) {
|
|
openMenu();
|
|
} else {
|
|
cancelClose();
|
|
beginClose();
|
|
}
|
|
trigger.setAttribute('aria-expanded', String(isOpen));
|
|
}
|
|
if (e.key === 'Escape') {
|
|
if (isMobileNav()) {
|
|
productsItem.classList.remove('open');
|
|
trigger.setAttribute('aria-expanded', 'false');
|
|
return;
|
|
}
|
|
cancelClose();
|
|
beginClose();
|
|
}
|
|
});
|
|
|
|
productsItem.querySelectorAll('.megamenu-product-item.has-subproducts').forEach((item) => {
|
|
const link = item.querySelector('.megamenu-product-link');
|
|
if (!link) return;
|
|
|
|
link.addEventListener('click', (e) => {
|
|
if (!isMobileNav()) return;
|
|
if (item.classList.contains('open')) return;
|
|
e.preventDefault();
|
|
item.classList.add('open');
|
|
});
|
|
});
|
|
}
|
|
|
|
function initFAQAccordion() {
|
|
const faqItems = document.querySelectorAll(SELECTORS.faqItems);
|
|
faqItems.forEach((item) => {
|
|
const question = item.querySelector(SELECTORS.faqQuestion);
|
|
const answer = item.querySelector(SELECTORS.faqAnswer);
|
|
if (!question || !answer) return;
|
|
|
|
question.addEventListener('click', () => {
|
|
const isOpen = item.classList.contains('open');
|
|
|
|
faqItems.forEach((other) => {
|
|
if (other !== item) {
|
|
other.classList.remove('open');
|
|
const otherQuestion = other.querySelector(SELECTORS.faqQuestion);
|
|
const otherAnswer = other.querySelector(SELECTORS.faqAnswer);
|
|
if (otherQuestion) otherQuestion.setAttribute('aria-expanded', 'false');
|
|
if (otherAnswer) otherAnswer.hidden = true;
|
|
}
|
|
});
|
|
|
|
item.classList.toggle('open', !isOpen);
|
|
question.setAttribute('aria-expanded', String(!isOpen));
|
|
answer.hidden = isOpen;
|
|
});
|
|
});
|
|
}
|
|
|
|
function initIntersectionObserver() {
|
|
const elements = document.querySelectorAll(SELECTORS.fadeInElements);
|
|
if (!elements.length) return;
|
|
|
|
if (!('IntersectionObserver' in window)) {
|
|
elements.forEach((el) => el.classList.add('visible'));
|
|
return;
|
|
}
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
|
|
);
|
|
|
|
elements.forEach((el, index) => {
|
|
el.style.transitionDelay = `${index * 0.06}s`;
|
|
observer.observe(el);
|
|
});
|
|
}
|
|
|
|
function initReadMore() {
|
|
var chevronSVG = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
|
|
|
|
document.querySelectorAll('[data-readmore]').forEach(function (el) {
|
|
var threshold = parseInt(el.getAttribute('data-readmore'), 10) || 120;
|
|
var fullHeight = el.scrollHeight;
|
|
|
|
if (fullHeight <= threshold + 12) return;
|
|
|
|
var storedHeight = fullHeight;
|
|
|
|
el.classList.add('readmore-wrap', 'is-clamped');
|
|
el.style.maxHeight = threshold + 'px';
|
|
|
|
var btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.className = 'readmore-btn';
|
|
btn.setAttribute('aria-expanded', 'false');
|
|
btn.innerHTML = 'Read more ' + chevronSVG;
|
|
el.insertAdjacentElement('afterend', btn);
|
|
|
|
btn.addEventListener('click', function () {
|
|
var collapsed = el.classList.toggle('is-clamped');
|
|
if (collapsed) {
|
|
el.style.maxHeight = threshold + 'px';
|
|
btn.innerHTML = 'Read more ' + chevronSVG;
|
|
btn.setAttribute('aria-expanded', 'false');
|
|
btn.classList.remove('is-open');
|
|
} else {
|
|
el.style.maxHeight = storedHeight + 'px';
|
|
btn.innerHTML = 'Read less ' + chevronSVG;
|
|
btn.setAttribute('aria-expanded', 'true');
|
|
btn.classList.add('is-open');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function initCitationCopy() {
|
|
const copyButtons = document.querySelectorAll(SELECTORS.citationCopy);
|
|
if (!copyButtons.length) return;
|
|
|
|
copyButtons.forEach((btn) => {
|
|
const url = btn.getAttribute('data-citation-url');
|
|
const feedback = btn.querySelector('.citation-copy-feedback');
|
|
if (!url || !feedback) return;
|
|
|
|
let resetTimer = null;
|
|
|
|
btn.addEventListener('click', async () => {
|
|
clearTimeout(resetTimer);
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(url);
|
|
} catch {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = url;
|
|
textarea.setAttribute('readonly', '');
|
|
textarea.style.position = 'fixed';
|
|
textarea.style.left = '-9999px';
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textarea);
|
|
}
|
|
|
|
feedback.hidden = false;
|
|
btn.classList.add('is-copied');
|
|
btn.setAttribute('aria-label', 'Link copied');
|
|
|
|
resetTimer = setTimeout(() => {
|
|
feedback.hidden = true;
|
|
btn.classList.remove('is-copied');
|
|
btn.setAttribute('aria-label', 'Copy citation link');
|
|
}, 2000);
|
|
});
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
initNavbarScroll();
|
|
initMobileMenu();
|
|
initMegaMenu();
|
|
initFAQAccordion();
|
|
initIntersectionObserver();
|
|
initReadMore();
|
|
initCitationCopy();
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|