Dynamics Tips

Componentes dinámicos modernos para interfaces web interactivas

Características • Instalación • Inicio Rápido • Componentes • Documentación • Licencia

📖 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.

Hecho con ❤️ por Federico Manzano

Name		Name	Last commit message	Last commit date
Latest commit History 133 Commits
coverage		coverage
dist		dist
ejemplos		ejemplos
logo		logo
sass		sass
src		src
test		test
.babelrc		.babelrc
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
coverage_report.txt		coverage_report.txt
jest.config.js		jest.config.js
package-lock.json		package-lock.json
package.json		package.json
webpack.config.js		webpack.config.js

License

FedeManzano/dynamics-tips

Folders and files

Latest commit

History

Repository files navigation

Dynamics Tips

📖 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

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

ToolTips (`sass/_tips.scss`)

Comentarios (`sass/_comments.scss`)

Packages