window.onload = () => { /* scale benner image map co-ordinates */ const image = document.querySelector('.banner-image'); const areas = document.querySelectorAll('.bannermap > area'); const max_width = 1600; const image_height_ratio = 0.35; const image_map_coords = [ [108,187,240,343], [246,187,359,343], [363,187,492,343] ]; function calcTransform(prop) { let scale, offset; prop.original_aspect = prop.original_width / prop.original_height; prop.scaled_width = prop.image_height * prop.original_aspect; prop.image_aspect = prop.image_width / prop.image_height; if (prop.scaled_width < prop.image_width) { prop.scaled_height = prop.image_height * prop.image_aspect / prop.original_aspect; offset = (prop.image_height - prop.scaled_height) / 2; scale = prop.scaled_height / prop.original_height; } else { offset = 0; scale = prop.image_height / prop.original_height; } return [scale, offset]; } function setCoords() { areas.forEach((area, index) => { const [x1, y1, x2, y2] = image_map_coords[index]; let prop = { screen_width: (window.innerWidth), contained_width: (window.innerWidth <= max_width) ? window.innerWidth : max_width, screen_height: window.innerHeight, image_width: image.offsetWidth, image_height: image.offsetHeight, original_width: image.naturalWidth, original_height: image.naturalHeight }; let [ scale, offset ] = calcTransform(prop); const scaled_coords = `${x1*scale}, ${y1*scale + offset}, ${x2*scale}, ${y2*scale + offset}`; area.setAttribute('coords', scaled_coords); }); } new ResizeObserver(setCoords).observe(image); /* hamburger menu functionality */ const hamburger = document.getElementById('hamburger-menu'); const menuLinks = document.getElementById('menu-links'); const menuIcon = hamburger?.querySelector('.menu-icon'); const closeIcon = hamburger?.querySelector('.close-icon'); if (hamburger && menuLinks && menuIcon && closeIcon) { hamburger.addEventListener('click', () => { const isActive = menuLinks.classList.contains('active'); menuLinks.classList.toggle('active'); if (isActive) { menuIcon.style.display = 'block'; closeIcon.style.display = 'none'; } else { menuIcon.style.display = 'none'; closeIcon.style.display = 'block'; } }); // Close menu when clicking on a link menuLinks.addEventListener('click', (e) => { if (e.target.tagName === 'A') { menuLinks.classList.remove('active'); menuIcon.style.display = 'block'; closeIcon.style.display = 'none'; } }); } };