98 lines
3.5 KiB
JavaScript
98 lines
3.5 KiB
JavaScript
// Global Application Interactions
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Initialize Lucide Icons
|
|
if (window.lucide) {
|
|
window.lucide.createIcons();
|
|
}
|
|
|
|
// Modal Handling
|
|
const modalOverlays = document.querySelectorAll('.modal-overlay');
|
|
|
|
// Function to open modal
|
|
window.openModal = (modalId) => {
|
|
const modal = document.getElementById(modalId);
|
|
if (modal) {
|
|
modal.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
};
|
|
|
|
// Function to close modal
|
|
window.closeModal = (modalId) => {
|
|
const modal = document.getElementById(modalId);
|
|
if (modal) {
|
|
modal.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
};
|
|
|
|
// Close modal on overlay click
|
|
modalOverlays.forEach(overlay => {
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) {
|
|
closeModal(overlay.id);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Close modal on Escape key
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
const activeModal = document.querySelector('.modal-overlay.active');
|
|
if (activeModal) {
|
|
closeModal(activeModal.id);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Simple Form Submission Simulation
|
|
const forms = document.querySelectorAll('form');
|
|
forms.forEach(form => {
|
|
// Skip login/register forms which already have actions
|
|
if (form.action.includes('.html')) return;
|
|
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
const originalContent = submitBtn.innerHTML;
|
|
|
|
// Show loading state
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = `
|
|
<div class="flex items-center gap-2">
|
|
<svg class="animate-spin h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Przetwarzanie...
|
|
</div>
|
|
`;
|
|
|
|
setTimeout(() => {
|
|
// Success state
|
|
submitBtn.innerHTML = `
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="check-circle" class="w-5 h-5"></i>
|
|
Gotowe!
|
|
</div>
|
|
`;
|
|
if (window.lucide) window.lucide.createIcons();
|
|
|
|
setTimeout(() => {
|
|
const activeModal = document.querySelector('.modal-overlay.active');
|
|
if (activeModal) closeModal(activeModal.id);
|
|
|
|
// Reset button
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = originalContent;
|
|
form.reset();
|
|
if (window.lucide) window.lucide.createIcons();
|
|
|
|
// Custom notification could be added here
|
|
}, 1000);
|
|
}, 1000);
|
|
});
|
|
});
|
|
});
|