From a765dcee9b288fc2075230d20a420a23db7dfee9 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Sat, 8 Nov 2025 15:12:59 -0600 Subject: [PATCH] Feature: Auto-agregar clases a filas especiales de tablas APU MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PROBLEMA (Issue #132): - Tablas .desglose no tienen clases en filas - 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 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 --- .../assets/js/apu-tables-auto-class.js | 99 +++++++++++++++++++ .../themes/apus-theme/inc/enqueue-scripts.php | 24 +++++ 2 files changed, 123 insertions(+) create mode 100644 wp-content/themes/apus-theme/assets/js/apu-tables-auto-class.js diff --git a/wp-content/themes/apus-theme/assets/js/apu-tables-auto-class.js b/wp-content/themes/apus-theme/assets/js/apu-tables-auto-class.js new file mode 100644 index 00000000..1d7c6483 --- /dev/null +++ b/wp-content/themes/apus-theme/assets/js/apu-tables-auto-class.js @@ -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(); + } + +})(); diff --git a/wp-content/themes/apus-theme/inc/enqueue-scripts.php b/wp-content/themes/apus-theme/inc/enqueue-scripts.php index 8827b782..9df17616 100644 --- a/wp-content/themes/apus-theme/inc/enqueue-scripts.php +++ b/wp-content/themes/apus-theme/inc/enqueue-scripts.php @@ -479,6 +479,30 @@ function apus_enqueue_apu_tables_styles() { 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 */