Feature: Auto-agregar clases a filas especiales de tablas APU
PROBLEMA (Issue #132): - Tablas .desglose no tienen clases en filas <tr> - WordPress no preserva clases: section-header, subtotal-row, total-row - Resultado: Todas las filas se ven iguales (sin estilos especiales) SOLUCIÓN: - Script JavaScript que detecta y agrega clases automáticamente - Detecta por contenido de texto: - "Material", "Mano de Obra", etc. → section-header - "Suma de..." → subtotal-row - "Costo Directo" → total-row FUNCIONAMIENTO: 1. Script se ejecuta cuando DOM está listo 2. Busca tablas .desglose y .analisis 3. Lee 2da celda de cada fila <tr> 4. Agrega clase según el texto 5. CSS aplica estilos automáticamente ARCHIVOS: - NUEVO: assets/js/apu-tables-auto-class.js (99 líneas) - Script con detección inteligente de filas - Soporta mayúsculas/minúsculas - Log para debugging - MODIFICADO: inc/enqueue-scripts.php (+24 líneas) - Nueva función: apus_enqueue_apu_tables_autoclass_script() - Carga en footer con strategy defer - Prioridad 15 (después de CSS) BENEFICIOS: ✅ Funciona con contenido existente (no requiere edición manual) ✅ Automático para todos los posts nuevos ✅ Sin errores si clases ya existen ✅ Performance: solo procesa si hay tablas APU Issue: #132 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,99 @@
|
|||||||
|
/**
|
||||||
|
* Auto-detectar y agregar clases a filas especiales de tablas APU
|
||||||
|
*
|
||||||
|
* Este script detecta automáticamente filas especiales en tablas .desglose y .analisis
|
||||||
|
* y les agrega las clases CSS correspondientes para que se apliquen los estilos correctos.
|
||||||
|
*
|
||||||
|
* Detecta:
|
||||||
|
* - Section headers: Material, Mano de Obra, Herramienta, Equipo
|
||||||
|
* - Subtotal rows: Filas que empiezan con "Suma de"
|
||||||
|
* - Total row: Costo Directo
|
||||||
|
*
|
||||||
|
* @package Apus_Theme
|
||||||
|
* @since 1.0.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Agrega clases a filas especiales de tablas APU
|
||||||
|
*/
|
||||||
|
function applyApuTableClasses() {
|
||||||
|
// Buscar todas las tablas con clase .desglose o .analisis
|
||||||
|
const tables = document.querySelectorAll('.desglose table, .analisis table');
|
||||||
|
|
||||||
|
if (tables.length === 0) {
|
||||||
|
return; // No hay tablas APU en esta página
|
||||||
|
}
|
||||||
|
|
||||||
|
let classesAdded = 0;
|
||||||
|
|
||||||
|
tables.forEach(function(table) {
|
||||||
|
const rows = table.querySelectorAll('tbody tr');
|
||||||
|
|
||||||
|
rows.forEach(function(row) {
|
||||||
|
// Evitar procesar filas que ya tienen clase
|
||||||
|
if (row.classList.contains('section-header') ||
|
||||||
|
row.classList.contains('subtotal-row') ||
|
||||||
|
row.classList.contains('total-row')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const secondCell = row.querySelector('td:nth-child(2)');
|
||||||
|
if (!secondCell) {
|
||||||
|
return; // Fila sin segunda celda
|
||||||
|
}
|
||||||
|
|
||||||
|
const text = secondCell.textContent.trim();
|
||||||
|
|
||||||
|
// Detectar section headers
|
||||||
|
if (text === 'Material' ||
|
||||||
|
text === 'Mano de Obra' ||
|
||||||
|
text === 'Herramienta' ||
|
||||||
|
text === 'Equipo' ||
|
||||||
|
text === 'MATERIAL' ||
|
||||||
|
text === 'MANO DE OBRA' ||
|
||||||
|
text === 'HERRAMIENTA' ||
|
||||||
|
text === 'EQUIPO') {
|
||||||
|
row.classList.add('section-header');
|
||||||
|
classesAdded++;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Detectar subtotales (cualquier variación de "Suma de")
|
||||||
|
if (text.toLowerCase().startsWith('suma de ') ||
|
||||||
|
text.toLowerCase().startsWith('subtotal ')) {
|
||||||
|
row.classList.add('subtotal-row');
|
||||||
|
classesAdded++;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Detectar total final
|
||||||
|
if (text === 'Costo Directo' ||
|
||||||
|
text === 'COSTO DIRECTO' ||
|
||||||
|
text === 'Total' ||
|
||||||
|
text === 'TOTAL' ||
|
||||||
|
text === 'Costo directo') {
|
||||||
|
row.classList.add('total-row');
|
||||||
|
classesAdded++;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Log para debugging (solo en desarrollo)
|
||||||
|
if (classesAdded > 0 && window.console) {
|
||||||
|
console.log('[APU Tables] Clases agregadas automáticamente: ' + classesAdded);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ejecutar cuando el DOM esté listo
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', applyApuTableClasses);
|
||||||
|
} else {
|
||||||
|
// DOM ya está listo
|
||||||
|
applyApuTableClasses();
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
@@ -479,6 +479,30 @@ function apus_enqueue_apu_tables_styles() {
|
|||||||
|
|
||||||
add_action('wp_enqueue_scripts', 'apus_enqueue_apu_tables_styles', 15);
|
add_action('wp_enqueue_scripts', 'apus_enqueue_apu_tables_styles', 15);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enqueue APU Tables auto-class JavaScript
|
||||||
|
*
|
||||||
|
* Este script detecta automáticamente filas especiales en tablas .desglose y .analisis
|
||||||
|
* y les agrega las clases CSS correspondientes (section-header, subtotal-row, total-row)
|
||||||
|
*
|
||||||
|
* Issue #132
|
||||||
|
*/
|
||||||
|
function apus_enqueue_apu_tables_autoclass_script() {
|
||||||
|
// APU Tables Auto-Class JS
|
||||||
|
wp_enqueue_script(
|
||||||
|
'apus-apu-tables-autoclass',
|
||||||
|
get_template_directory_uri() . '/assets/js/apu-tables-auto-class.js',
|
||||||
|
array(),
|
||||||
|
APUS_VERSION,
|
||||||
|
array(
|
||||||
|
'in_footer' => true,
|
||||||
|
'strategy' => 'defer',
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
add_action('wp_enqueue_scripts', 'apus_enqueue_apu_tables_autoclass_script', 15);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Enqueue CTA A/B Testing styles and scripts
|
* Enqueue CTA A/B Testing styles and scripts
|
||||||
*/
|
*/
|
||||||
|
|||||||
Reference in New Issue
Block a user