// JavaScript script to create and manage three synchronized textareas for a timeline with the specified functionalities. // Initialize the container elements for the three textareas const container = document.createElement('div'); container.style.display = 'flex'; container.style.flexDirection = 'column'; container.style.width = '100%'; container.style.position = 'relative'; // Sticky buttons for sorting and time period selection const buttonsContainer = document.createElement('div'); buttonsContainer.style.position = 'sticky'; buttonsContainer.style.top = '0'; buttonsContainer.style.backgroundColor = '#f9f9f9'; buttonsContainer.style.display = 'flex'; buttonsContainer.style.justifyContent = 'space-between'; // Flip button const flipButton = document.createElement('button'); flipButton.textContent = 'Flip Order'; flipButton.onclick = flipOrder; buttonsContainer.appendChild(flipButton); // Period selection buttons ['Day', 'Week', 'Month', 'Quarter', 'Year'].forEach(period => { const button = document.createElement('button'); button.textContent = period; button.onclick = () => setPeriod(period); buttonsContainer.appendChild(button); }); container.appendChild(buttonsContainer); // Define and style textareas defineTextarea('ca', 14, 'Arial', 'bold', container); defineTextarea('cb', 12, 'Arial', 'normal', container); defineTextarea('cc', 10, 'Arial', 'normal', container); // Append the container to the document body document.body.appendChild(container); function defineTextarea(id, fontSize, fontFamily, fontWeight, parent) { const textarea = document.createElement('textarea'); textarea.id = id; textarea.style.width = '100%'; textarea.style.height = 'auto'; textarea.style.fontFamily = fontFamily; textarea.style.fontSize = `${fontSize}px`; textarea.style.fontWeight = fontWeight; textarea.style.whiteSpace = 'pre-wrap'; // Wrap lines at 80 characters textarea.style.wordBreak = 'break-word'; textarea.style.overflow = 'hidden'; // Allow vertical expansion textarea.style.maxWidth = '80ch'; // Limit line length to 80 characters textarea.oninput = () => adjustHeight(textarea); parent.appendChild(textarea); } function adjustHeight(textarea) { textarea.style.height = 'auto'; textarea.style.height = `${textarea.scrollHeight}px`; } function flipOrder() { const textareas = ['ca', 'cb', 'cc'].map(id => document.getElementById(id)); textareas.forEach(textarea => { const lines = textarea.value.split('\n'); textarea.value = lines.reverse().join('\n'); }); } function setPeriod(period) { const branches = document.querySelectorAll('.timeline-branch'); branches.forEach(branch => branch.remove()); const periods = { 'Day': 1, 'Week': 7, 'Month': 4, 'Quarter': 3, 'Year': 12 }; const numBranches = periods[period]; for (let i = 0; i < numBranches; i++) { const branch = document.createElement('div'); branch.classList.add('timeline-branch'); branch.style.width = `${100 / numBranches}%`; branch.style.height = 'auto'; branch.style.display = 'inline-block'; branch.style.verticalAlign = 'top'; branch.style.border = '1px solid #ccc'; branch.style.margin = '0 5px'; const branchHeader = document.createElement('div'); branchHeader.textContent = `${period} ${i + 1}`; branchHeader.style.textAlign = 'center'; branchHeader.style.fontWeight = 'bold'; branchHeader.style.marginBottom = '10px'; branch.appendChild(branchHeader); container.appendChild(branch); } console.log(`Timeline updated to ${period} view.`); } // Add event listeners for scrolling and ensuring sticky headers remain in view window.addEventListener('scroll', () => { buttonsContainer.style.top = `${window.scrollY}px`; });