ebabx-proto/script.js

// 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;
		}
	});
});