@synapxlab/ladder-timeline — Carrousel temporel multi-échelles

🪜 Démo interactive

Cliquez sur l'axe puis utilisez ↑ ↓ pour zoomer d'une échelle à l'autre, ← → pour naviguer, ou glissez à la souris.

Chargement…

📦 Installation

npm install @synapxlab/ladder-timeline

Ou via CDN (ESM, aucune installation) :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@synapxlab/ladder-timeline/dist/style.css">
<script type="module">
  import { LadderTimeline } from 'https://cdn.jsdelivr.net/npm/@synapxlab/ladder-timeline/dist/ladder-timeline.es.js';
</script>

⚡ Démarrage rapide

import { LadderTimeline } from '@synapxlab/ladder-timeline';
import '@synapxlab/ladder-timeline/style';

const tl = new LadderTimeline({
  container:   document.getElementById('timeline'),
  scale:       'week',
  displayMode: 'expanded',        // ou 'compact'
  minScale:    'ms',              // échelle la plus fine
  maxScale:    'millennium',      // échelle la plus large
  minDate:     new Date(1900, 0, 1),
  maxDate:     new Date(2100, 11, 31),
  onItemChange:  info => console.log('committed', info),
  onItemPreview: info => console.log('preview', info),
});

🪜 Les 16 échelles

Le curseur est stocké en interne comme une année décimale, ce qui rend la navigation continue d'une échelle à l'autre.

Macro	Calendrier	Sous-jour	Sous-seconde
`Ga`	`millennium`	`hour`	`ms`
`100Ma`	`century`	`minute`	—
`Ma`	`decade`	`second`	—
`100ka`	`year`	—	—
`10ka`	`month` · `week` · `day`	—	—

Note : l'échelle ms est décorative (les float64 ne portent pas de timestamp absolu plus fin que ~1 ms) — les libellés y sont relatifs (±N ms autour du curseur).

📖 API & méthodes

Méthode	Description
`getDate()` / `setDate(date)`	Lit / positionne le curseur.
`goToToday()`	Recentre sur aujourd'hui.
`goToPrevious()` / `goToNext()`	Item précédent / suivant.
`getScale()` / `setScale(id)`	Lit / change l'échelle active.
`getDisplayMode()` / `setDisplayMode(m)`	`'expanded'` ou `'compact'`.
`getBounds()`	Renvoie `{ minYear, maxYear, minScale, maxScale }`.

Les callbacks reçoivent { scale, year, label, sublabel, header, date } (date vaut null hors de la plage Date JS, ex. Ma, Ga).

⌨️ Clavier

Touche	Action
← / →	Item précédent / suivant
Home	Aujourd'hui
↑ / +	Zoom avant (échelle plus fine)
↓ / -	Zoom arrière (échelle plus large)
Molette	Défilement (précédent / suivant, anti-rebond)