Create your own typographic journey by adding steps, inputs, and results. Each step represents a stage in your design process, helping you document and track your typography decisions.
+ +No steps yet. Click "Add Step" to begin your journey.
+A user journey helps you:
+Add Step: Create a new step in your journey
+Edit: Click on any field to edit it
+Delete: Remove steps you no longer need
+Export/Import: Save and share your journey
+ + +${message}
+ + `; + + const footer = document.createElement('div'); + footer.className = 'modal-footer'; + + if (onConfirm) { + const confirmBtn = document.createElement('button'); + confirmBtn.className = 'btn-primary'; + confirmBtn.textContent = 'Import'; + confirmBtn.addEventListener('click', function() { + onConfirm(body.querySelector('textarea')); + }); + footer.appendChild(confirmBtn); + } + + const closeBtn = document.createElement('button'); + closeBtn.className = 'btn-secondary'; + closeBtn.textContent = 'Close'; + closeBtn.addEventListener('click', function() { + closeModal(modal); + }); + footer.appendChild(closeBtn); + + modalContent.appendChild(header); + modalContent.appendChild(body); + modalContent.appendChild(footer); + modal.appendChild(modalContent); + + // Close on background click + modal.addEventListener('click', function(e) { + if (e.target === modal) { + closeModal(modal); + } + }); + + // Close button + header.querySelector('.modal-close').addEventListener('click', function() { + closeModal(modal); + }); + + return modal; + } + + // Close modal + function closeModal(modal) { + modal.classList.remove('active'); + setTimeout(() => modal.remove(), 300); + } + + // Render journey + function renderJourney() { + if (journey.steps.length === 0) { + journeyContainer.innerHTML = ''; + emptyState.style.display = 'block'; + return; + } + + emptyState.style.display = 'none'; + journeyContainer.innerHTML = ''; + + journey.steps.forEach((step, index) => { + const stepElement = createStepElement(step, index); + journeyContainer.appendChild(stepElement); + }); + } + + // Create step element + function createStepElement(step, index) { + const stepDiv = document.createElement('div'); + stepDiv.className = 'journey-step'; + stepDiv.setAttribute('data-step-id', step.id); + + const header = document.createElement('div'); + header.className = 'step-header'; + + const stepNumber = document.createElement('div'); + stepNumber.className = 'step-number'; + stepNumber.textContent = `Step ${index + 1}`; + + const controls = document.createElement('div'); + controls.className = 'step-controls'; + + // Move up button + if (index > 0) { + const moveUpBtn = document.createElement('button'); + moveUpBtn.className = 'btn-move'; + moveUpBtn.textContent = '↑'; + moveUpBtn.title = 'Move up'; + moveUpBtn.addEventListener('click', () => moveStepUp(step.id)); + controls.appendChild(moveUpBtn); + } + + // Move down button + if (index < journey.steps.length - 1) { + const moveDownBtn = document.createElement('button'); + moveDownBtn.className = 'btn-move'; + moveDownBtn.textContent = '↓'; + moveDownBtn.title = 'Move down'; + moveDownBtn.addEventListener('click', () => moveStepDown(step.id)); + controls.appendChild(moveDownBtn); + } + + // Delete button + const deleteBtn = document.createElement('button'); + deleteBtn.className = 'btn-icon'; + deleteBtn.innerHTML = '×'; + deleteBtn.title = 'Delete step'; + deleteBtn.addEventListener('click', () => removeStep(step.id)); + controls.appendChild(deleteBtn); + + header.appendChild(stepNumber); + header.appendChild(controls); + + // Title field + const titleField = createField('Title', step.title, 'text', 'step-title-input'); + titleField.querySelector('input').addEventListener('input', (e) => { + updateStep(step.id, 'title', e.target.value); + }); + + // Input field + const inputField = createField('Input', step.input, 'textarea'); + inputField.querySelector('textarea').addEventListener('input', (e) => { + updateStep(step.id, 'input', e.target.value); + }); + + // Result field + const resultField = createField('Result', step.result, 'textarea'); + resultField.querySelector('textarea').addEventListener('input', (e) => { + updateStep(step.id, 'result', e.target.value); + }); + + stepDiv.appendChild(header); + stepDiv.appendChild(titleField); + stepDiv.appendChild(inputField); + stepDiv.appendChild(resultField); + + return stepDiv; + } + + // Create field element + function createField(label, value, type, className) { + const field = document.createElement('div'); + field.className = 'step-field'; + + const labelElement = document.createElement('label'); + labelElement.textContent = label; + field.appendChild(labelElement); + + if (type === 'textarea') { + const textarea = document.createElement('textarea'); + textarea.value = value; + textarea.placeholder = `Enter ${label.toLowerCase()}...`; + field.appendChild(textarea); + } else { + const input = document.createElement('input'); + input.type = type; + input.value = value; + input.placeholder = `Enter ${label.toLowerCase()}...`; + if (className) { + input.className = className; + } + field.appendChild(input); + } + + return field; + } + + // Initialize on DOM ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } + +})(); diff --git a/toc.php b/toc.php index c35ffcd..fc4d9dc 100644 --- a/toc.php +++ b/toc.php @@ -56,6 +56,7 @@