forked from HPR/hpr_generator
83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
|
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';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|