Pacific Language Movement Timeline

${period.title}
${period.description}
`; wrapper.appendChild(periodElement); }); function togglePeriod(id) { const content = document.getElementById(`period-${id}`); content.classList.toggle('active'); } function handleDragStart(e) { isDragging = true; timeline.style.cursor = 'grabbing'; startX = e.type === 'mousedown' ? e.pageX : e.touches[0].pageX; const transformMatrix = window.getComputedStyle(wrapper).transform; currentTranslate = parseInt(transformMatrix.split(',')[4]) || 0; } function handleDragMove(e) { if (!isDragging) return; e.preventDefault(); const x = e.type === 'mousemove' ? e.pageX : e.touches[0].pageX; const walk = x - startX; const maxTranslate = -(wrapper.offsetWidth - timeline.offsetWidth); let newTranslate = currentTranslate + walk; if (newTranslate > 0) newTranslate = 0; if (newTranslate < maxTranslate) newTranslate = maxTranslate; wrapper.style.transform = `translateX(${newTranslate}px)`; } function handleDragEnd() { isDragging = false; timeline.style.cursor = 'grab'; } // Mouse Events timeline.addEventListener('mousedown', handleDragStart); window.addEventListener('mousemove', handleDragMove); window.addEventListener('mouseup', handleDragEnd); // Touch Events timeline.addEventListener('touchstart', handleDragStart); timeline.addEventListener('touchmove', handleDragMove); timeline.addEventListener('touchend', handleDragEnd);