75 lines
2.5 KiB
JavaScript
75 lines
2.5 KiB
JavaScript
// Chronological - Minimal JavaScript
|
|
// Most interactivity is handled by HTMX
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Close modal when clicking backdrop
|
|
document.querySelectorAll('dialog').forEach(function(dialog) {
|
|
dialog.addEventListener('click', function(event) {
|
|
if (event.target === dialog) {
|
|
dialog.close();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Event delegation for dynamic content
|
|
document.body.addEventListener('click', function(event) {
|
|
var target = event.target;
|
|
|
|
// Handle modal opening via data attribute
|
|
var modalOpener = target.closest('[data-opens-modal]');
|
|
if (modalOpener) {
|
|
var modalId = modalOpener.getAttribute('data-opens-modal');
|
|
var modal = document.getElementById(modalId);
|
|
if (modal && modal.showModal) {
|
|
modal.showModal();
|
|
}
|
|
}
|
|
|
|
// Handle diary edit toggle
|
|
if (target.matches('[data-action="toggle-diary-edit"]')) {
|
|
var display = target.closest('.diary-display');
|
|
if (display) {
|
|
display.style.display = 'none';
|
|
var editForm = display.nextElementSibling;
|
|
if (editForm) {
|
|
editForm.style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Handle diary edit cancel
|
|
if (target.matches('[data-action="cancel-diary-edit"]')) {
|
|
var editDiv = target.closest('.diary-edit');
|
|
if (editDiv) {
|
|
editDiv.style.display = 'none';
|
|
var displayDiv = editDiv.previousElementSibling;
|
|
if (displayDiv) {
|
|
displayDiv.style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Handle keyboard shortcuts
|
|
document.addEventListener('keydown', function(event) {
|
|
// Close modal on Escape
|
|
if (event.key === 'Escape') {
|
|
document.querySelectorAll('dialog[open]').forEach(function(dialog) {
|
|
dialog.close();
|
|
});
|
|
}
|
|
});
|
|
|
|
// HTMX event handlers
|
|
document.body.addEventListener('htmx:afterSwap', function(event) {
|
|
// Re-initialize any dynamic elements after HTMX swaps
|
|
if (event.detail.target.id === 'day-modal-content') {
|
|
// Focus textarea when opening day modal with diary form
|
|
var textarea = event.detail.target.querySelector('textarea');
|
|
if (textarea) {
|
|
textarea.focus();
|
|
}
|
|
}
|
|
});
|