98 lines
3.5 KiB
JavaScript
98 lines
3.5 KiB
JavaScript
import { showNotification } from './99_functions.js';
|
|
|
|
|
|
// Script para el funcionamiento del collapse - VERSIÓN MEJORADA
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const collapseHeader = document.getElementById('form-collapse-header');
|
|
const collapseContent = document.getElementById('form-collapse-content');
|
|
const collapseIcon = document.getElementById('collapse-icon');
|
|
|
|
// Función mejorada para detectar dispositivo
|
|
function isMobileOrTablet() {
|
|
return window.innerWidth <= 1024; // Tablets y móviles
|
|
}
|
|
|
|
// Función para detectar tablet grande
|
|
function isLargeTablet() {
|
|
return window.innerWidth >= 769 && window.innerWidth <= 1024;
|
|
}
|
|
|
|
// Función para detectar móvil o tablet pequeña
|
|
function isSmallDevice() {
|
|
return window.innerWidth <= 768;
|
|
}
|
|
|
|
// Función para aplicar estado inicial
|
|
function applyInitialState() {
|
|
if (isMobileOrTablet()) {
|
|
collapseContent.classList.add('collapsed');
|
|
collapseIcon.classList.remove('rotated');
|
|
|
|
// Si es tablet grande, mostrar el header azul
|
|
if (isLargeTablet()) {
|
|
collapseHeader.style.background = 'linear-gradient(135deg, #1976d2, #2196f3)';
|
|
collapseHeader.style.color = 'white';
|
|
}
|
|
} else {
|
|
collapseContent.classList.remove('collapsed');
|
|
collapseIcon.classList.add('rotated');
|
|
}
|
|
}
|
|
|
|
// Aplicar estado inicial
|
|
applyInitialState();
|
|
|
|
// Alternar collapse al hacer clic en el header
|
|
collapseHeader.addEventListener('click', function () {
|
|
// Solo funciona en dispositivos móviles/tablets
|
|
if (!isMobileOrTablet()) return;
|
|
|
|
collapseContent.classList.toggle('collapsed');
|
|
collapseIcon.classList.toggle('rotated');
|
|
|
|
// Animar el icono
|
|
collapseIcon.style.transition = 'transform 0.3s ease';
|
|
|
|
// Mostrar/ocultar notificación
|
|
if (collapseContent.classList.contains('collapsed')) {
|
|
showNotification('Formulario colapsado. Toque para expandir.', 'info', 2000);
|
|
} else {
|
|
showNotification('Formulario expandido', 'info', 2000);
|
|
}
|
|
});
|
|
|
|
// Ajustar al cambiar el tamaño de la ventana
|
|
window.addEventListener('resize', function () {
|
|
applyInitialState();
|
|
});
|
|
|
|
// Colapsar automáticamente al agregar un marcador (solo en móviles/tablets)
|
|
const addPinButton = document.getElementById('add-pin');
|
|
if (addPinButton) {
|
|
addPinButton.addEventListener('click', function () {
|
|
if (isMobileOrTablet() && !collapseContent.classList.contains('collapsed')) {
|
|
setTimeout(() => {
|
|
collapseContent.classList.add('collapsed');
|
|
collapseIcon.classList.remove('rotated');
|
|
}, 500);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Colapsar al subir archivo CSV (solo en móviles/tablets)
|
|
const csvFileInput = document.getElementById('csv-file');
|
|
if (csvFileInput) {
|
|
csvFileInput.addEventListener('change', function () {
|
|
if (isMobileOrTablet() && !collapseContent.classList.contains('collapsed') && this.files.length > 0) {
|
|
setTimeout(() => {
|
|
collapseContent.classList.add('collapsed');
|
|
collapseIcon.classList.remove('rotated');
|
|
}, 1000);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
});
|
|
|