76 lines
2 KiB
JavaScript
76 lines
2 KiB
JavaScript
// HEADER ------------------------------------------------------------
|
||
|
||
window.addEventListener('scroll', () => {
|
||
const collapsed = window.scrollY > 80;
|
||
document.querySelector('.site-header').classList.toggle('is-closed', collapsed);
|
||
document.body.classList.toggle('header-is-closed', collapsed);
|
||
});
|
||
|
||
document.querySelector('#menu-toggle').addEventListener('click', () => {
|
||
document.querySelector('.site-header').classList.toggle('is-closed');
|
||
document.body.classList.toggle('header-is-closed');
|
||
});
|
||
|
||
|
||
|
||
// SUBMENU ------------------------------------------------------------
|
||
|
||
const submenu = document.querySelector('.submenu');
|
||
const menuItems = document.querySelectorAll('#menu li');
|
||
|
||
menuItems.forEach(li => {
|
||
li.addEventListener('click', () => {
|
||
const isSelected = li.classList.contains('selected');
|
||
menuItems.forEach(item => item.classList.remove('selected'));
|
||
if (!isSelected) {
|
||
li.classList.add('selected');
|
||
submenu.style.maxHeight = '100vh';
|
||
} else {
|
||
submenu.style.maxHeight = '0';
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
// MOVE STIKERS ------------------------------------------------------------
|
||
|
||
document.querySelectorAll('.stickers a').forEach(sticker => {
|
||
let isDragging = false;
|
||
let hasMoved = false;
|
||
let startX, startY, startLeft, startTop;
|
||
|
||
sticker.addEventListener('mousedown', (e) => {
|
||
e.preventDefault();
|
||
isDragging = true;
|
||
hasMoved = false;
|
||
startX = e.clientX;
|
||
startY = e.clientY;
|
||
const computed = getComputedStyle(sticker);
|
||
startLeft = parseFloat(computed.left);
|
||
startTop = parseFloat(computed.top);
|
||
sticker.style.cursor = 'grabbing';
|
||
});
|
||
|
||
document.addEventListener('mousemove', (e) => {
|
||
if (!isDragging) return;
|
||
hasMoved = true;
|
||
sticker.style.left = (startLeft + e.clientX - startX) + 'px';
|
||
sticker.style.top = (startTop + e.clientY - startY) + 'px';
|
||
});
|
||
|
||
document.addEventListener('mouseup', () => {
|
||
if (!isDragging) return;
|
||
isDragging = false;
|
||
sticker.style.cursor = '';
|
||
});
|
||
|
||
sticker.addEventListener('click', (e) => {
|
||
if (hasMoved) {
|
||
e.preventDefault();
|
||
hasMoved = false;
|
||
}
|
||
});
|
||
});
|