@jtejidov/timeline-library
v1.2.0
Published
A simple and flexible JavaScript library for creating timeline components. Supports both Vanilla JS and Angular implementations.
Maintainers
jtejidovReadme
Timeline Library
Una librería JavaScript simple y flexible para crear componentes de línea de tiempo. Soporta tanto implementaciones en Vanilla JavaScript como en Angular.
🚀 Características
- ✅ Vanilla JavaScript: Funciona en cualquier proyecto web
- ✅ Angular Support: Componente nativo para Angular 12+
- ✅ TypeScript: Completamente tipado para Angular
- ✅ Responsive: Se adapta a diferentes tamaños de pantalla
- ✅ Customizable: Múltiples temas y opciones de configuración
- ✅ Interactivo: Eventos de click, eliminación y más
- ✅ Ligero: Sin dependencias externas para la versión vanilla
Instalación
npm install @jtejidov/timeline-library📖 Uso
Vanilla JavaScript
const { Timeline } = require('@jtejidov/timeline-library');
// Crear una nueva instancia de timeline
const timeline = new Timeline('#timeline-container', {
orientation: 'vertical',
showDates: true,
dateFormat: 'DD/MM/YYYY'
});
// Agregar eventos
timeline.addEvent({
title: 'Evento 1',
date: '2023-01-15',
description: 'Descripción del primer evento',
type: 'success'
});Angular
// app.module.ts
import { TimelineModule } from '@jtejidov/timeline-library/angular';
@NgModule({
imports: [TimelineModule],
// ...
})
export class AppModule { }<!-- app.component.html -->
<lib-timeline
[events]="events"
[options]="{ orientation: 'vertical', showDates: true }"
(eventClick)="onEventClick($event)"
></lib-timeline>// app.component.ts
import { TimelineEvent } from '@jtejidov/timeline-library/angular';
export class AppComponent {
events: TimelineEvent[] = [
{
id: 1,
title: 'Evento 1',
date: '2023-01-15',
description: 'Descripción del evento',
type: 'success'
}
];
onEventClick(event: TimelineEvent): void {
console.log('Evento clickeado:', event);
}
}📚 Documentación Completa
Vanilla JavaScript
Angular
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mi Timeline</title>
</head>
<body>
<div id="timeline-container"></div>
<script src="path/to/your/bundle.js"></script>
</body>
</html>JavaScript
const { Timeline } = require('@jtejidov/timeline-library');
// Crear una nueva instancia de timeline
const timeline = new Timeline('#timeline-container', {
orientation: 'vertical', // 'vertical' o 'horizontal'
theme: 'default',
showDates: true,
dateFormat: 'DD/MM/YYYY' // 'DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD'
});
// Agregar eventos
timeline.addEvent({
title: 'Evento 1',
date: '2023-01-15',
description: 'Descripción del primer evento',
type: 'success' // 'default', 'success', 'warning', 'danger'
});
timeline.addEvent({
title: 'Evento 2',
date: '2023-02-20',
description: 'Descripción del segundo evento',
type: 'warning'
});API del Componente Timeline
Constructor
new Timeline(container, options)Parámetros:
container(string|HTMLElement): Selector CSS o elemento DOM contenedoroptions(Object): Opciones de configuración
Opciones disponibles:
orientation(string): 'vertical' o 'horizontal' (default: 'vertical')theme(string): Tema visual (default: 'default')showDates(boolean): Mostrar fechas (default: true)dateFormat(string): Formato de fecha (default: 'YYYY-MM-DD')
Métodos
addEvent(event)
Agrega un evento a la línea de tiempo.
timeline.addEvent({
id: 'evento-1', // opcional, se genera automáticamente si no se proporciona
title: 'Título del evento',
date: '2023-01-15', // fecha en formato válido
description: 'Descripción opcional',
type: 'success' // 'default', 'success', 'warning', 'danger'
});removeEvent(eventId)
Elimina un evento por su ID.
timeline.removeEvent('evento-1');getEvents()
Obtiene todos los eventos.
const events = timeline.getEvents();
console.log(events);clearEvents()
Elimina todos los eventos.
timeline.clearEvents();destroy()
Destruye la instancia y limpia el DOM.
timeline.destroy();Utilidades
La librería también incluye funciones utilitarias:
const { utils } = require('@jtejidov/timeline-library');
// Validar evento
const isValid = utils.validateEvent({
title: 'Mi evento',
date: '2023-01-15'
});
// Ordenar eventos por fecha
const sortedEvents = utils.sortEventsByDate(events);
// Filtrar eventos por rango de fechas
const filteredEvents = utils.filterEventsByDateRange(
events,
new Date('2023-01-01'),
new Date('2023-12-31')
);
// Agrupar eventos por año
const groupedEvents = utils.groupEventsByYear(events);
// Generar ID único
const uniqueId = utils.generateId();Ejemplo Completo
const { Timeline, utils } = require('@jtejidov/timeline-library');
// Crear timeline
const timeline = new Timeline('#my-timeline', {
orientation: 'vertical',
showDates: true,
dateFormat: 'DD/MM/YYYY'
});
// Datos de ejemplo
const events = [
{
title: 'Inicio del proyecto',
date: '2023-01-01',
description: 'Comenzamos el desarrollo',
type: 'success'
},
{
title: 'Primera release',
date: '2023-06-15',
description: 'Lanzamiento de la versión 1.0',
type: 'success'
},
{
title: 'Bug crítico encontrado',
date: '2023-07-20',
description: 'Se encontró un error que afecta la funcionalidad',
type: 'danger'
},
{
title: 'Parche de seguridad',
date: '2023-07-25',
description: 'Se aplicó el parche para resolver el bug',
type: 'warning'
}
];
// Agregar eventos
events.forEach(event => {
if (utils.validateEvent(event)) {
timeline.addEvent(event);
}
});Estilos CSS
La librería incluye estilos básicos, pero puedes personalizarlos sobrescribiendo las clases CSS:
/* Personalizar el contenedor */
.timeline-container {
font-family: 'Tu fuente preferida', sans-serif;
}
/* Personalizar eventos */
.timeline-event {
border-left: 4px solid #007bff;
}
/* Personalizar marcadores */
.timeline-marker {
background: #custom-color;
}Licencia
ISC
Autor
jtejidov