dytips

v3.0.0

Published

2 days ago

Objetos dinámicos que se añaden debido a eventos del usuario.

0High
0Medium
0Low

bodystyle

tips tooltips dinamicos comentarios toast

📖 Descripción

Dynamics Tips es una biblioteca JavaScript 100% vanilla (sin jQuery) que proporciona componentes dinámicos interactivos para aplicaciones web. Originalmente desarrollada como parte del ecosistema Bodystyle, ahora es una biblioteca independiente que será integrada en Bodystyle 6.0.0.

¿Por qué Dynamics Tips?

✅ Ultra Ligera - Solo 20.2 KB minificado (~6.7 KB gzipped)
✅ Sin Dependencias - 100% vanilla JavaScript, sin jQuery
✅ Fácil de Usar - API simple basada en data attributes
✅ Personalizable - Variables SASS para adaptar a tu diseño
✅ Modular - Importa solo lo que necesitas
✅ Bien Documentada - Ejemplos claros y documentación completa
✅ Rendimiento Óptimo - 95% más pequeña que versiones anteriores con jQuery

✨ Características

🎯 ToolTips - Información contextual al pasar el cursor
💬 Comentarios - Cuadros de información expandidos
📋 Dropdown - Listas desplegables personalizables
🔔 Toast - Notificaciones temporales elegantes
🎨 Personalizable - Crea tus propios componentes dinámicos

📦 Instalación

NPM (Recomendado)

npm install dytips

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://rawcdn.githack.com/FedeManzano/dynamics-tips/refs/heads/master/dist/css/dynamics.min.css">

<!-- JavaScript -->
<script src="https://rawcdn.githack.com/FedeManzano/dynamics-tips/refs/heads/master/dist/js/dynamics.min.js"></script>

Descarga Manual

Descargar Dynamics Tips 3.0.0

🚀 Inicio Rápido

1. Incluye los archivos

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Dynamics Tips CSS -->
    <link rel="stylesheet" href="path/to/dynamics.min.css">
    
    <title>Mi Aplicación</title>
</head>
<body>
    <!-- Tu contenido aquí -->
    
    <!-- Dynamics Tips JS -->
    <script src="path/to/dynamics.min.js"></script>
</body>
</html>

2. Usa los componentes

<!-- ToolTip simple -->
<button class="tips-ele" data-tips="¡Hola! Soy un tooltip" data-pos="top">
    Pasa el cursor aquí
</button>

<!-- Comentario con más información -->
<button class="com-trigger" 
        data-info="<strong>Información importante:</strong> Este es un comentario con más detalles."
        data-pos="right">
    Ver información
</button>

<!-- Toast programático -->
<button onclick="DY.Toast({html: '¡Operación exitosa!', tiempo: 3000})">
    Mostrar notificación
</button>

3. ¡Listo! 🎉

Los componentes se inicializan automáticamente. Para elementos dinámicos, usa la inicialización manual:

// Después de agregar elementos dinámicamente
DY.ToolTipsInit();
DY.CommentsInit();
DY.DropdownInit();

🎯 Componentes

1️⃣ ToolTips

Información contextual que aparece al interactuar con un elemento.

<button class="tips-ele" 
        data-tips="Texto del tooltip"
        data-pos="top|bottom|left|right"
        data-evt="hover|click">
    Elemento
</button>

Atributos:

| Atributo | Descripción | Valores | Default | |----------|-------------|---------|---------| | data-tips | Contenido del tooltip | HTML/Texto | - | | data-pos | Posición | top, bottom, left, right | bottom | | data-evt | Evento disparador | hover, click | hover |

Ver ejemplos completos →

2️⃣ Comentarios

Cuadros de información más grandes para contenido extenso.

<button class="com-trigger" 
        data-info="<p>Contenido del comentario</p>"
        data-pos="right"
        data-evt="hover">
    Ver detalles
</button>

Atributos:

| Atributo | Descripción | Valores | Default | |----------|-------------|---------|---------| | data-info | Contenido del comentario | HTML/Texto | - | | data-pos | Posición | top, bottom, left, right | bottom | | data-evt | Evento disparador | hover, click | hover |

Ver ejemplos completos →

3️⃣ Dropdown

Listas desplegables vinculadas a elementos disparadores.

<!-- Disparador -->
<button class="dropdown-toggle" 
        data-target="#miLista" 
        data-pos="bottom"
        data-evt="click">
    Abrir menú
</button>

<!-- Lista -->
<div class="dropdown" id="miLista">
    <ul>
        <li><a href="#opcion1">Opción 1</a></li>
        <li><a href="#opcion2">Opción 2</a></li>
        <li><a href="#opcion3">Opción 3</a></li>
    </ul>
</div>

Atributos:

| Atributo | Descripción | Valores | Default | |----------|-------------|---------|---------| | data-target | ID de la lista | Selector CSS | - | | data-pos | Posición | top, bottom, left, right | bottom | | data-evt | Evento disparador | hover, click | click | | data-color | Color de la flecha | Color CSS | #000 |

Ver ejemplos completos →

4️⃣ Toast

Notificaciones temporales que aparecen en pantalla.

DY.Toast({
    html: '<p>¡Operación completada!</p>',
    clases: ['mi-clase-custom'],
    tiempo: 3000,  // Duración en milisegundos
    cerrar: true   // Mostrar botón de cierre
});

Configuración:

| Propiedad | Tipo | Descripción | Default | |-----------|------|-------------|---------| | html | String | Contenido HTML | - | | clases | Array | Clases CSS adicionales | [] | | tiempo | Number | Duración en ms | 3000 | | cerrar | Boolean | Botón de cierre manual | false |

Ver ejemplos completos →

5️⃣ Componentes Personalizados

Crea tus propios componentes dinámicos.

DY.PerInit({
    ori: 'mi-disparador',    // Clase del elemento disparador
    ele: 'mi-componente'     // Clase del elemento dinámico
});

Ver ejemplos completos →

🎨 Personalización

Modificar Estilos con SASS

Clona el repositorio para acceder a los archivos fuente:

git clone https://github.com/FedeManzano/dynamics-tips
cd dynamics-tips

Edita las variables en los archivos SASS:

ToolTips (`sass/_tips.scss`)

// Variables personalizables
$bg: rgba(0, 0, 0, 0.863);
$padding: 2px 5px 5px 5px;
$color: white;
$border-radius: 5px;
$tam-flecha: 5px;

Comentarios (`sass/_comments.scss`)

$bg: rgb(255, 255, 255);
$border: 1px solid rgba(0, 0, 0, 0.295);
$border-radius: 5px;
$padding: 10px;
$color: rgb(48, 48, 48);
$fz: 14px;

Compilar SASS

# Instalar dependencias
npm install

# Compilar CSS
sass --style compressed sass/dynamics.scss dist/css/dynamics.min.css

📚 Documentación

Documentación Completa

API Global

Todas las funcionalidades están disponibles a través del objeto global DY:

// Toasts
DY.Toast(config)

// ToolTips
DY.ToolTipsInit()      // Inicializar
DY.ToolTipsDestroy()   // Destruir

// Comentarios
DY.CommentsInit()
DY.CommentsDestroy()

// Dropdown
DY.DropdownInit()
DY.DropdownDestroy()

// Personalizados
DY.PerInit(config)
DY.PerDestroy()

Inicialización Manual

Para elementos agregados dinámicamente al DOM:

window.onload = () => {
    setTimeout(() => {
        // Inicializar después de agregar elementos dinámicos
        DY.ToolTipsInit();
        DY.CommentsInit();
        DY.DropdownInit();
    }, 100);
};

🏗️ Estructura del Proyecto

dynamics-tips/
├── dist/                    # Archivos compilados
│   ├── css/
│   │   ├── dynamics.css
│   │   └── dynamics.min.css
│   └── js/
│       ├── dynamics.js
│       └── dynamics.min.js
├── sass/                    # Archivos fuente SASS
│   ├── dynamics.scss
│   ├── _general.scss
│   ├── _tips.scss
│   ├── _comments.scss
│   ├── _dropdown.scss
│   └── _toast.scss
├── src/                     # Código fuente JavaScript
│   ├── app.js
│   └── modulos/
│       ├── ToolTips.js
│       ├── ComentariosDinamicos.js
│       ├── DropDown.js
│       ├── Toast.js
│       ├── Personalizado.js
│       └── posicionamineto/
├── test/                    # Archivos de prueba
├── logo/                    # Recursos gráficos
├── package.json
├── webpack.config.js
└── README.md

🔧 Desarrollo

Requisitos

Node.js >= 12.x
npm >= 6.x

Configuración

# Clonar repositorio
git clone https://github.com/FedeManzano/dynamics-tips
cd dynamics-tips

# Instalar dependencias
npm install

# Compilar proyecto
npm run build

Scripts Disponibles

npm run build    # Compilar JavaScript con Webpack

� Tests y Cobertura

El proyecto cuenta con una suite completa de tests unitarios utilizando Jest y JSDOM.

Ejecutar Tests

# Ejecutar todos los tests
npm test

# Ejecutar tests con reporte de cobertura
npm test -- --coverage

Cobertura Actual

| Métrica | Porcentaje | Estado | |---------|------------|--------| | Statements | 94% | 🟢 Excelente | | Branches | 69% | 🟡 Bueno | | Functions | 91% | 🟢 Excelente | | Lines | 95% | 🟢 Excelente |

Nota: La cobertura de ramas (branches) es menor debido a validaciones defensivas y casos extremos de posicionamiento que son difíciles de simular en JSDOM sin un entorno visual completo.

�🤝 Contribuir

Las contribuciones son bienvenidas. Por favor:

Fork el proyecto
Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add: nueva característica')
Push a la rama (git push origin feature/AmazingFeature)
Abre un Pull Request

📝 Changelog

[3.0.0] - 2024-12-03 🎉

¡Migración completa a Vanilla JavaScript!

🚀 Cambios Mayores

✅ Eliminada dependencia de jQuery - 100% vanilla JavaScript
✅ Reducción de tamaño del 95% - De 382 KB a 20.2 KB (minificado)
✅ Mejor rendimiento - Sin overhead de jQuery
✅ Código modernizado - ES6+ features

🐛 Bugs Corregidos

Corregido evento click mal asignado en ComentariosDinamicos
Corregido contenido faltante en modo click
Corregido método destroy() en todos los módulos
Corregido setInterval sin limpiar en Toast (ahora usa setTimeout)
Corregidos múltiples errores de sintaxis en migraciones parciales

✨ Mejoras

Implementado patrón Singleton para elementos complemento
Funciones nombradas para event handlers (mejor limpieza)
Validaciones mejoradas para data attributes
Animaciones CSS mejoradas
Función helper crearFlecha() en DropDown

🔄 Migración desde 2.x

La API pública permanece 100% compatible. No se requieren cambios en tu código.

🎯 Próximamente

Integración en Bodystyle 6.0.0
Tests automatizados con Jest
TypeScript definitions

[2.5.2] - 2024-11-XX

Mejoras en la apariencia de componentes
Actualización de funciones deprecadas de jQuery
Optimizaciones de rendimiento

Versiones Anteriores

Ver CHANGELOG.md y Releases para el historial completo.

🐛 Reportar Problemas

¿Encontraste un bug? Abre un issue con:

Descripción del problema
Pasos para reproducir
Comportamiento esperado vs actual
Capturas de pantalla (si aplica)
Versión de Dynamics Tips
Navegador y versión

📄 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

MIT License - Copyright (c) 2020 Bodystyle

Se permite el uso, copia, modificación y distribución de este software
con fines comerciales y no comerciales, siempre que se incluya el aviso
de copyright y esta licencia.

👨‍💻 Autor

Federico Manzano

GitHub: @FedeManzano
Proyecto Bodystyle: bodystyle

🌟 Proyectos Relacionados

Bodystyle - Framework CSS completo
Bodystyle 6.0.0 - Próxima versión sin jQuery (incluirá Dynamics-Tips 3.0)
Bodystyle Docs - Documentación oficial

⭐ Agradecimientos

Si este proyecto te resulta útil, considera darle una estrella ⭐ en GitHub.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

📖 Descripción

¿Por qué Dynamics Tips?

✨ Características

📦 Instalación

NPM (Recomendado)

CDN

Descarga Manual

🚀 Inicio Rápido

1. Incluye los archivos

2. Usa los componentes

3. ¡Listo! 🎉

🎯 Componentes

1️⃣ ToolTips

2️⃣ Comentarios

3️⃣ Dropdown

4️⃣ Toast

5️⃣ Componentes Personalizados

🎨 Personalización

Modificar Estilos con SASS

ToolTips (sass/_tips.scss)

Comentarios (sass/_comments.scss)

Compilar SASS

📚 Documentación

Documentación Completa

API Global

Inicialización Manual

🏗️ Estructura del Proyecto

🔧 Desarrollo

Requisitos

Configuración

Scripts Disponibles

� Tests y Cobertura

Ejecutar Tests

Cobertura Actual

�🤝 Contribuir

📝 Changelog

[3.0.0] - 2024-12-03 🎉

🚀 Cambios Mayores

🐛 Bugs Corregidos

✨ Mejoras

🔄 Migración desde 2.x

🎯 Próximamente

[2.5.2] - 2024-11-XX

Versiones Anteriores

🐛 Reportar Problemas

📄 Licencia

👨‍💻 Autor

🌟 Proyectos Relacionados

⭐ Agradecimientos

ToolTips (`sass/_tips.scss`)

Comentarios (`sass/_comments.scss`)