chroniko 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +39 -5
  3. package/dist/chroniko.min.css +1 -1
  4. package/dist/chroniko.min.js +1 -1
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,22 @@
2
2
 
3
3
  All notable changes to Chroniko are documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and the project follows [Semantic Versioning](https://semver.org/).
4
4
 
5
+ ## [0.2.0] - 2026-10-15
6
+
7
+ ### Added
8
+
9
+ - `language` option: translates the toolbar, story, screen-reader labels, dates and durations. Built in: `en` (default), `zh-Hant`, `zh-Hans`, `yue`, `ja`, `ko`, `fr`, `de`, `it`, `es`, `pt`, `pl`, `nl`. An unknown code throws. The root element gets a matching `lang` attribute.
10
+ - `uiText` option: replaces individual UI strings of the chosen language.
11
+ - `categoryLabels` option: text shown for each category in the legend and on cards, while the category name stays the key for colors, the URL hash and `getState()`.
12
+ - `formatDate`, `formatDuration` and `formatYear` take an optional `language` argument (default `'en'`).
13
+ - The example page has a language dropdown (also `?lang=<code>`) and shows translated category labels for every built-in language except English.
14
+ - `textSizeToggle` option: shows an **Aa** button in the toolbar that switches the event and category labels from 13px to 14px and the time axis labels from 12px to 13px. The lanes are repacked for the new size.
15
+
16
+ ### Fixed
17
+
18
+ - Labels no longer overlap or leave gaps when a web font finishes loading after the events are set: label widths are measured again and the lanes are repacked.
19
+ - Label widths now use the styles on `.ck-label` itself, including `font-style`, `letter-spacing`, `word-spacing` and `text-transform: uppercase | lowercase`, not just the font on `.ck-lanes`.
20
+
5
21
  ## [0.1.1] - 2026-10-14
6
22
 
7
23
  ### Added
@@ -22,5 +38,6 @@ All notable changes to Chroniko are documented in this file. The format is based
22
38
 
23
39
  - Initial release.
24
40
 
41
+ [0.2.0]: https://github.com/ykyuen/chroniko/compare/0.1.1...0.2.0
25
42
  [0.1.1]: https://github.com/ykyuen/chroniko/compare/0.1.0...0.1.1
26
43
  [0.1.0]: https://github.com/ykyuen/chroniko/releases/tag/0.1.0
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # chroniko
2
2
 
3
- Render historical events on a single zoomable time axis. Plain HTML, CSS and JavaScript, with no dependencies.
3
+ Render historical events on a single zoomable time axis. Plain HTML, CSS and JavaScript, with no dependencies. Here is the [demo](https://chroniko.ykyuen.info/philosophers-in-history/).
4
4
 
5
5
  ## Install
6
6
 
@@ -14,7 +14,7 @@ npm install chroniko
14
14
  npm start # http://localhost:3000/
15
15
  ```
16
16
 
17
- Add `?story=right` to the example's URL to see the [story beside the timeline](#story-beside-the-timeline).
17
+ Add `?story=right` to the example's URL to see the [story beside the timeline](#story-beside-the-timeline), or `?lang=ja` (any [language code](#languages)) to see the UI in another language. Both can be combined, e.g. `?story=right&lang=zh-Hant`.
18
18
 
19
19
  ## Usage
20
20
 
@@ -27,13 +27,13 @@ The minified files can be loaded from jsDelivr without installing anything.
27
27
  <meta charset="utf-8">
28
28
  <meta name="viewport" content="width=device-width, initial-scale=1">
29
29
  <title>Chroniko</title>
30
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chroniko@0.1.1/dist/chroniko.min.css">
30
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chroniko@0.2.0/dist/chroniko.min.css">
31
31
  </head>
32
32
  <body>
33
33
  <div id="timeline"></div>
34
34
 
35
35
  <script type="module">
36
- import { Chroniko } from 'https://cdn.jsdelivr.net/npm/chroniko@0.1.1/dist/chroniko.min.js';
36
+ import { Chroniko } from 'https://cdn.jsdelivr.net/npm/chroniko@0.2.0/dist/chroniko.min.js';
37
37
 
38
38
  const timeline = new Chroniko('#timeline', {
39
39
  events: [
@@ -85,6 +85,10 @@ Ids must be unique. If two events end up with the same id, whether given or gene
85
85
  | `syncUrl` | `boolean` | no | `false` | Keep the view, selection and hidden categories in the URL hash. See [Sharing](#sharing). |
86
86
  | `storyPosition` | `'below' \| 'right'` | no | `'below'` | Where the [story](#story-view) goes. See [Story beside the timeline](#story-beside-the-timeline). |
87
87
  | `split` | `number` | no | `0.6` | With `storyPosition: 'right'`, the timeline's share of the width, between 0 and 1 (exclusive). The story gets the rest. |
88
+ | `textSizeToggle` | `boolean` | no | `false` | Show an **Aa** button in the toolbar that switches the event and category labels from 13px to 14px and the time axis labels from 12px to 13px. |
89
+ | `language` | `string` | no | `'en'` | Language of the timeline's own text and dates. See [Languages](#languages). An unknown code throws. |
90
+ | `uiText` | `object` | no | N/A | Replaces individual UI strings of the chosen language. See [Languages](#languages). |
91
+ | `categoryLabels` | `object` | no | `{}` | Category → text shown in the legend and on cards, e.g. `{ war: '戰爭' }`. Categories without a label show their name. |
88
92
 
89
93
  ### Methods
90
94
 
@@ -118,7 +122,7 @@ Events keep their row while you pan. While a wheel, trackpad or touch zoom is in
118
122
 
119
123
  ### Story view
120
124
 
121
- Clicking an event toggles its selection. Selected events are listed below the timeline (or beside it, see below) in chronological order. Each event appears at its start date, and an event with an `end` also gets a small "End of …" marker at its end date, showing how long it lasted (e.g. "lasted 2 years, 11 months"); clicking the marker jumps to the event's card. Durations use the coarser precision of the two dates (a year-only date gives whole years) and show at most two units. There is no year zero, so 27 BCE to 14 CE lasted 40 years. The same text is available as `formatDuration(parseDate(start), parseDate(end))`, exported alongside `parseDate` and `formatDate`. **Show on timeline** on a card calls `reveal(id)` for that event. Hovering or focusing an event, its card or its end marker highlights all three. Press Esc or **Clear all** to clear the selection.
125
+ Clicking an event toggles its selection. Selected events are listed below the timeline (or beside it, see below) in chronological order. Each event appears at its start date, and an event with an `end` also gets a small "End of …" marker at its end date, showing how long it lasted (e.g. "lasted 2 years, 11 months"); clicking the marker jumps to the event's card. Durations use the coarser precision of the two dates (a year-only date gives whole years) and show at most two units. There is no year zero, so 27 BCE to 14 CE lasted 40 years. The same text is available as `formatDuration(parseDate(start), parseDate(end), language)`, exported alongside `parseDate`, `formatDate(date, language)` and `formatYear(year, language)`; `language` defaults to `'en'`. **Show on timeline** on a card calls `reveal(id)` for that event. Hovering or focusing an event, its card or its end marker highlights all three. Press Esc or **Clear all** to clear the selection.
122
126
 
123
127
  #### Story beside the timeline
124
128
 
@@ -133,6 +137,36 @@ new Chroniko('#timeline', { events, storyPosition: 'right', split: 0.6 });
133
137
  - The story column is shown even when nothing is selected, with a short hint, so the first click doesn't resize the timeline.
134
138
  - When the component is 640px wide or narrower, it falls back to the stacked layout. This uses the component's own width, not the window's, so it also works in a narrow column. It relies on CSS container queries and `overflow: clip`, which all current browsers support.
135
139
 
140
+ ### Languages
141
+
142
+ Set `language` when creating the timeline to translate its own text: the toolbar, the story, screen-reader labels, and how dates and durations are written. The language is fixed for the timeline's lifetime.
143
+
144
+ ```js
145
+ new Chroniko('#timeline', { events, language: 'zh-Hant' });
146
+ ```
147
+
148
+ | Code | Language | Example date | Example duration |
149
+ | --------- | -------- | ------------ | ---------------- |
150
+ | `en` | English (default) | 19 Mar 1644 · 221 BCE | 3 years, 2 months |
151
+ | `zh-Hant` | Traditional Chinese | 1644年3月19日 · 公元前221年 | 3年2個月 |
152
+ | `zh-Hans` | Simplified Chinese | 1644年3月19日 · 公元前221年 | 3年2个月 |
153
+ | `yue` | Cantonese (colloquial, traditional characters) | 1644年3月19日 · 公元前221年 | 3年2個月 |
154
+ | `ja` | Japanese | 1644年3月19日 · 紀元前221年 | 3年2か月 |
155
+ | `ko` | Korean | 1644년 3월 19일 · 기원전 221년 | 3년 2개월 |
156
+ | `fr` | French | 19 mars 1644 · 221 av. J.-C. | 3 ans et 2 mois |
157
+ | `de` | German | 19. März 1644 · 221 v. Chr. | 3 Jahre, 2 Monate |
158
+ | `it` | Italian | 19 mar 1644 · 221 a.C. | 3 anni e 2 mesi |
159
+ | `es` | Spanish | 19 mar 1644 · 221 a. C. | 3 años y 2 meses |
160
+ | `pt` | Portuguese | 19 mar 1644 · 221 a.C. | 3 anos e 2 meses |
161
+ | `pl` | Polish | 19 mar 1644 · 221 p.n.e. | 3 lata, 2 miesiące |
162
+ | `nl` | Dutch | 19 mrt 1644 · 221 v.Chr. | 3 jaar en 2 maanden |
163
+
164
+ - **Your events aren't translated.** Titles, descriptions and category names come from your data, so pass events in the reader's language. Keep the same `id`s across languages so shared links work in every language.
165
+ - **Category names are keys.** They're used by `colors`, the URL hash and `getState()`, so translate them with `categoryLabels` rather than in the events: `{ category: 'war' }` plus `categoryLabels: { war: 'Krieg' }`.
166
+ - The component's root gets the `lang` attribute, so screen readers use the right pronunciation and browsers use the right Chinese, Japanese or Korean character forms.
167
+ - `uiText` replaces individual strings, e.g. `uiText: { fit: 'Show all' }`. The keys, and what each function receives, are listed in [`src/locales/en.js`](src/locales/en.js). Keys you leave out keep the language's text.
168
+ - To add a language, copy `src/locales/en.js`, translate it, and register it in `src/locales/index.js`.
169
+
136
170
  ### Colors
137
171
 
138
172
  There are two kinds of color: the colors of the events, set from JavaScript, and the colors of the component itself (background, text, borders), set with CSS.
package/dist/chroniko.min.css CHANGED
@@ -1 +1 @@
1
- .chroniko{--ck-height:420px;--ck-sticky-top:0px;--ck-bg:#fff;--ck-surface:#f6f7f9;--ck-fg:#1f2328;--ck-muted:#656d76;--ck-border:#d8dee4;--ck-grid:#eef1f4;--ck-focus:#0969da;background:var(--ck-bg);border:1px solid var(--ck-border);border-radius:8px;color:var(--ck-fg);font:13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}@media (prefers-color-scheme:dark){.chroniko{--ck-bg:#0d1117;--ck-surface:#161b22;--ck-fg:#e6edf3;--ck-muted:#8d96a0;--ck-border:#30363d;--ck-grid:#1c2128;--ck-focus:#4493f8}}.chroniko button{color:inherit;font:inherit}.ck-toolbar{align-items:center;background:var(--ck-surface);border-bottom:1px solid var(--ck-border);gap:8px;justify-content:space-between;padding:8px 12px}.ck-legend,.ck-toolbar{display:flex;flex-wrap:wrap}.ck-legend{gap:6px}.ck-legend-item{align-items:center;background:var(--ck-bg);border:1px solid var(--ck-border);border-radius:999px;cursor:pointer;display:inline-flex;gap:6px;padding:3px 10px;text-transform:capitalize}.ck-legend-item[aria-pressed=false]{color:var(--ck-muted);opacity:.6}.ck-swatch{background:var(--ck-color);border:2px solid var(--ck-color);border-radius:50%;box-sizing:border-box;height:10px;width:10px}.ck-legend-item[aria-pressed=false] .ck-swatch{background:transparent}.ck-controls{display:flex;gap:4px}.ck-controls button{background:var(--ck-bg);border:1px solid var(--ck-border);border-radius:6px;cursor:pointer;height:28px;min-width:30px;padding:0 8px}.ck-controls button:hover,.ck-legend-item:hover{border-color:var(--ck-muted)}.ck-viewport{cursor:grab;height:var(--ck-height);overflow:hidden;position:relative;touch-action:pan-y;user-select:none}.ck-viewport.ck-dragging{cursor:grabbing}.ck-viewport:after{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ck-focus) 40%,transparent);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .15s;z-index:2}.ck-viewport:focus-within:after{opacity:1}.chroniko .ck-viewport:focus-visible{outline:none}.ck-viewport:focus-visible:after{box-shadow:inset 0 0 0 2px var(--ck-focus)}.ck-hint{background:color-mix(in srgb,var(--ck-fg) 85%,transparent);border-radius:6px;color:var(--ck-bg);left:50%;opacity:0;padding:6px 12px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s;white-space:nowrap;z-index:1}.ck-hint.ck-visible{opacity:1}.chroniko :focus-visible{outline:2px solid var(--ck-focus);outline-offset:-2px}.ck-grid{inset:0;pointer-events:none;position:absolute}.ck-gridline{background:var(--ck-grid);bottom:0;position:absolute;top:0;width:1px}.ck-lanes{font-weight:500;inset:0 0 32px 0;overflow:hidden auto;position:absolute}.ck-lanes-inner{position:relative}.ck-axis{background:var(--ck-bg);border-top:1px solid var(--ck-border);bottom:0;height:32px;left:0;position:absolute;right:0}.ck-tick{color:var(--ck-muted);font-size:12px;font-variant-numeric:tabular-nums;padding-top:8px;position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}.ck-tick:before{background:var(--ck-border);content:"";height:5px;left:50%;position:absolute;top:0;width:1px}.ck-event{background:none;border:0;cursor:pointer;height:22px;margin:0;padding:0;position:absolute;text-align:left}.ck-event,.ck-label{white-space:nowrap}.ck-event:hover .ck-label{text-decoration:underline}.ck-range{background:color-mix(in srgb,var(--ck-color) 22%,transparent);border-left:3px solid var(--ck-color);border-radius:4px}.ck-range .ck-label{position:absolute;top:50%;transform:translateY(-50%)}.ck-range.ck-selected{box-shadow:0 0 0 2px var(--ck-color)}.ck-point{align-items:center;display:flex;gap:6px}.ck-dot{background:var(--ck-color);border-radius:50%;box-shadow:0 0 0 2px var(--ck-bg);flex:none;height:10px;width:10px}.ck-point.ck-selected .ck-dot{box-shadow:0 0 0 2px var(--ck-bg),0 0 0 4px var(--ck-color)}.ck-event.ck-hover{z-index:1}.ck-event.ck-hover .ck-label{text-decoration:underline}.ck-range.ck-hover{background:color-mix(in srgb,var(--ck-color) 40%,transparent)}.ck-point.ck-hover .ck-dot{transform:scale(1.3)}.ck-event.ck-flash{animation:ck-event-flash 1.5s ease-out;border-radius:6px;z-index:1}@keyframes ck-event-flash{0%,40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ck-color) 60%,transparent)}to{box-shadow:0 0 0 4px transparent}}@media (prefers-reduced-motion:reduce){.ck-event.ck-flash{animation-timing-function:step-end}}.ck-story{background:var(--ck-surface);border-top:1px solid var(--ck-border);padding:12px 16px 16px}.ck-story[hidden]{display:none}.ck-story-header{align-items:center;display:flex;gap:8px;justify-content:space-between}.ck-story-title{font-weight:600}.ck-count{background:var(--ck-border);border-radius:999px;font-size:12px;font-weight:500;margin-left:4px;padding:0 7px}.chroniko .ck-clear{background:var(--ck-bg);border:1px solid var(--ck-border);border-radius:6px;cursor:pointer;padding:3px 10px}.chroniko .ck-clear:hover{border-color:var(--ck-muted)}.ck-story-list{list-style:none;margin:0;padding:0 0 0 20px;position:relative}.ck-card{background:var(--ck-bg);border:1px solid var(--ck-border);border-left:3px solid var(--ck-color);border-radius:6px;margin-top:10px;padding:10px 44px 12px 14px;position:relative}.ck-card:before{background:var(--ck-color);border-radius:50%;box-shadow:0 0 0 2px var(--ck-surface);content:"";height:10px;left:-22px;position:absolute;top:15px;width:10px}.ck-story-list>li:not(:last-child):after{background:var(--ck-border);bottom:-26px;content:"";left:-18px;position:absolute;top:25px;width:2px}.ck-card:focus{outline:none}.ck-card.ck-flash{animation:ck-flash 1.2s ease-out}@keyframes ck-flash{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ck-color) 55%,transparent)}to{box-shadow:0 0 0 3px transparent}}@media (prefers-reduced-motion:reduce){.ck-card.ck-flash{animation-duration:.01ms;outline:2px solid var(--ck-color)}}.ck-end{margin-top:10px;position:relative}.ck-end:before{background:var(--ck-surface);border:2px solid var(--ck-color);border-radius:50%;content:"";height:6px;left:-19px;position:absolute;top:13px;width:6px}.ck-story-list>.ck-end:not(:last-child):after{left:-15px;top:23px}.chroniko .ck-end-jump{align-items:baseline;background:none;border:1px dashed var(--ck-border);border-left:3px solid color-mix(in srgb,var(--ck-color) 50%,transparent);border-radius:6px;color:var(--ck-muted);cursor:pointer;display:flex;flex-wrap:wrap;font:inherit;font-size:13px;gap:4px 10px;padding:6px 14px;text-align:left;width:100%}.chroniko .ck-end-jump.ck-hover,.chroniko .ck-end-jump:hover{border-color:var(--ck-muted);border-left-color:var(--ck-color)}.ck-end-jump strong{color:var(--ck-fg);font-weight:600}.ck-end-date,.ck-end-duration,.ck-meta{font-size:12px}.ck-meta{align-items:center;color:var(--ck-muted);display:flex;flex-wrap:wrap;gap:8px}.ck-badge{background:color-mix(in srgb,var(--ck-color) 22%,transparent);border-radius:999px;color:var(--ck-fg);padding:1px 8px;text-transform:capitalize}.ck-title{font-size:16px;margin:4px 0 2px}.ck-description{margin:4px 0 0;max-width:70ch}.ck-card.ck-hover{border-color:color-mix(in srgb,var(--ck-color) 60%,var(--ck-border));border-left-color:var(--ck-color)}.ck-card-actions{align-items:center;display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px}.chroniko .ck-locate,.ck-link{color:var(--ck-focus)}.chroniko .ck-locate{background:none;border:0;cursor:pointer;padding:0}.chroniko .ck-locate:hover{text-decoration:underline}.chroniko .ck-remove{background:none;border:0;border-radius:6px;color:var(--ck-muted);cursor:pointer;font-size:20px;height:28px;line-height:1;position:absolute;right:10px;top:8px;width:28px}.chroniko .ck-remove:hover{background:var(--ck-border)}.chroniko.ck-side{container:chroniko/inline-size;overflow:clip}.ck-side .ck-layout{display:grid;grid-template-columns:calc(var(--ck-split)*100%) minmax(0,1fr)}.ck-side .ck-main{align-self:start;min-width:0;position:sticky;top:var(--ck-sticky-top)}.ck-side .ck-story{border-left:1px solid var(--ck-border);border-top:0;min-width:0}.ck-story-placeholder{color:var(--ck-muted);margin:0}@container chroniko (max-width: 640px){.ck-side .ck-layout{display:block}.ck-side .ck-main{position:static}.ck-side .ck-story{border-left:0;border-top:1px solid var(--ck-border)}.ck-side .ck-story.ck-empty{display:none}}
1
+ .chroniko{--ck-height:420px;--ck-sticky-top:0px;--ck-bg:#fff;--ck-surface:#f6f7f9;--ck-fg:#1f2328;--ck-muted:#656d76;--ck-border:#d8dee4;--ck-grid:#eef1f4;--ck-focus:#0969da;background:var(--ck-bg);border:1px solid var(--ck-border);border-radius:8px;color:var(--ck-fg);font:13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}@media (prefers-color-scheme:dark){.chroniko{--ck-bg:#0d1117;--ck-surface:#161b22;--ck-fg:#e6edf3;--ck-muted:#8d96a0;--ck-border:#30363d;--ck-grid:#1c2128;--ck-focus:#4493f8}}.chroniko button{color:inherit;font:inherit}.ck-toolbar{align-items:center;background:var(--ck-surface);border-bottom:1px solid var(--ck-border);gap:8px;justify-content:space-between;padding:8px 12px}.ck-legend,.ck-toolbar{display:flex;flex-wrap:wrap}.ck-legend{gap:6px}.ck-legend-item{align-items:center;background:var(--ck-bg);border:1px solid var(--ck-border);border-radius:999px;cursor:pointer;display:inline-flex;gap:6px;padding:3px 10px;text-transform:capitalize}.ck-legend-item[aria-pressed=false]{color:var(--ck-muted);opacity:.6}.ck-swatch{background:var(--ck-color);border:2px solid var(--ck-color);border-radius:50%;box-sizing:border-box;height:10px;width:10px}.ck-legend-item[aria-pressed=false] .ck-swatch{background:transparent}.ck-controls{display:flex;gap:4px}.ck-controls button{background:var(--ck-bg);border:1px solid var(--ck-border);border-radius:6px;cursor:pointer;height:28px;min-width:30px;padding:0 8px}.ck-controls button[aria-pressed=true]{border-color:var(--ck-focus);color:var(--ck-focus)}.ck-controls button:hover,.ck-legend-item:hover{border-color:var(--ck-muted)}.ck-viewport{cursor:grab;height:var(--ck-height);overflow:hidden;position:relative;touch-action:pan-y;user-select:none}.ck-viewport.ck-dragging{cursor:grabbing}.ck-viewport:after{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ck-focus) 40%,transparent);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .15s;z-index:2}.ck-viewport:focus-within:after{opacity:1}.chroniko .ck-viewport:focus-visible{outline:none}.ck-viewport:focus-visible:after{box-shadow:inset 0 0 0 2px var(--ck-focus)}.ck-hint{background:color-mix(in srgb,var(--ck-fg) 85%,transparent);border-radius:6px;color:var(--ck-bg);left:50%;opacity:0;padding:6px 12px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s;white-space:nowrap;z-index:1}.ck-hint.ck-visible{opacity:1}.chroniko :focus-visible{outline:2px solid var(--ck-focus);outline-offset:-2px}.ck-grid{inset:0;pointer-events:none;position:absolute}.ck-gridline{background:var(--ck-grid);bottom:0;position:absolute;top:0;width:1px}.ck-lanes{font-weight:500;inset:0 0 32px 0;overflow:hidden auto;position:absolute}.ck-large-text .ck-lanes,.ck-large-text .ck-legend-item{font-size:14px}.ck-large-text .ck-tick{font-size:13px}.ck-lanes-inner{position:relative}.ck-axis{background:var(--ck-bg);border-top:1px solid var(--ck-border);bottom:0;height:32px;left:0;position:absolute;right:0}.ck-tick{color:var(--ck-muted);font-size:12px;font-variant-numeric:tabular-nums;padding-top:8px;position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}.ck-tick:before{background:var(--ck-border);content:"";height:5px;left:50%;position:absolute;top:0;width:1px}.ck-event{background:none;border:0;cursor:pointer;height:22px;margin:0;padding:0;position:absolute;text-align:left}.ck-event,.ck-label{white-space:nowrap}.ck-event:hover .ck-label{text-decoration:underline}.ck-range{background:color-mix(in srgb,var(--ck-color) 22%,transparent);border-left:3px solid var(--ck-color);border-radius:4px}.ck-range .ck-label{position:absolute;top:50%;transform:translateY(-50%)}.ck-range.ck-selected{box-shadow:0 0 0 2px var(--ck-color)}.ck-point{align-items:center;display:flex;gap:6px}.ck-dot{background:var(--ck-color);border-radius:50%;box-shadow:0 0 0 2px var(--ck-bg);flex:none;height:10px;width:10px}.ck-point.ck-selected .ck-dot{box-shadow:0 0 0 2px var(--ck-bg),0 0 0 4px var(--ck-color)}.ck-event.ck-hover{z-index:1}.ck-event.ck-hover .ck-label{text-decoration:underline}.ck-range.ck-hover{background:color-mix(in srgb,var(--ck-color) 40%,transparent)}.ck-point.ck-hover .ck-dot{transform:scale(1.3)}.ck-event.ck-flash{animation:ck-event-flash 1.5s ease-out;border-radius:6px;z-index:1}@keyframes ck-event-flash{0%,40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ck-color) 60%,transparent)}to{box-shadow:0 0 0 4px transparent}}@media (prefers-reduced-motion:reduce){.ck-event.ck-flash{animation-timing-function:step-end}}.ck-story{background:var(--ck-surface);border-top:1px solid var(--ck-border);padding:12px 16px 16px}.ck-story[hidden]{display:none}.ck-story-header{align-items:center;display:flex;gap:8px;justify-content:space-between}.ck-story-title{font-weight:600}.ck-count{background:var(--ck-border);border-radius:999px;font-size:12px;font-weight:500;margin-left:4px;padding:0 7px}.chroniko .ck-clear{background:var(--ck-bg);border:1px solid var(--ck-border);border-radius:6px;cursor:pointer;padding:3px 10px}.chroniko .ck-clear:hover{border-color:var(--ck-muted)}.ck-story-list{list-style:none;margin:0;padding:0 0 0 20px;position:relative}.ck-card{background:var(--ck-bg);border:1px solid var(--ck-border);border-left:3px solid var(--ck-color);border-radius:6px;margin-top:10px;padding:10px 44px 12px 14px;position:relative}.ck-card:before{background:var(--ck-color);border-radius:50%;box-shadow:0 0 0 2px var(--ck-surface);content:"";height:10px;left:-22px;position:absolute;top:15px;width:10px}.ck-story-list>li:not(:last-child):after{background:var(--ck-border);bottom:-26px;content:"";left:-18px;position:absolute;top:25px;width:2px}.ck-card:focus{outline:none}.ck-card.ck-flash{animation:ck-flash 1.2s ease-out}@keyframes ck-flash{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ck-color) 55%,transparent)}to{box-shadow:0 0 0 3px transparent}}@media (prefers-reduced-motion:reduce){.ck-card.ck-flash{animation-duration:.01ms;outline:2px solid var(--ck-color)}}.ck-end{margin-top:10px;position:relative}.ck-end:before{background:var(--ck-surface);border:2px solid var(--ck-color);border-radius:50%;content:"";height:6px;left:-19px;position:absolute;top:13px;width:6px}.ck-story-list>.ck-end:not(:last-child):after{left:-15px;top:23px}.chroniko .ck-end-jump{align-items:baseline;background:none;border:1px dashed var(--ck-border);border-left:3px solid color-mix(in srgb,var(--ck-color) 50%,transparent);border-radius:6px;color:var(--ck-muted);cursor:pointer;display:flex;flex-wrap:wrap;font:inherit;font-size:13px;gap:4px 10px;padding:6px 14px;text-align:left;width:100%}.chroniko .ck-end-jump.ck-hover,.chroniko .ck-end-jump:hover{border-color:var(--ck-muted);border-left-color:var(--ck-color)}.ck-end-jump strong{color:var(--ck-fg);font-weight:600}.ck-end-date,.ck-end-duration,.ck-meta{font-size:12px}.ck-meta{align-items:center;color:var(--ck-muted);display:flex;flex-wrap:wrap;gap:8px}.ck-badge{background:color-mix(in srgb,var(--ck-color) 22%,transparent);border-radius:999px;color:var(--ck-fg);padding:1px 8px;text-transform:capitalize}.ck-title{font-size:16px;margin:4px 0 2px}.ck-description{margin:4px 0 0;max-width:70ch}.ck-card.ck-hover{border-color:color-mix(in srgb,var(--ck-color) 60%,var(--ck-border));border-left-color:var(--ck-color)}.ck-card-actions{align-items:center;display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px}.chroniko .ck-locate,.ck-link{color:var(--ck-focus)}.chroniko .ck-locate{background:none;border:0;cursor:pointer;padding:0}.chroniko .ck-locate:hover{text-decoration:underline}.chroniko .ck-remove{background:none;border:0;border-radius:6px;color:var(--ck-muted);cursor:pointer;font-size:20px;height:28px;line-height:1;position:absolute;right:10px;top:8px;width:28px}.chroniko .ck-remove:hover{background:var(--ck-border)}.chroniko.ck-side{container:chroniko/inline-size;overflow:clip}.ck-side .ck-layout{display:grid;grid-template-columns:calc(var(--ck-split)*100%) minmax(0,1fr)}.ck-side .ck-main{align-self:start;min-width:0;position:sticky;top:var(--ck-sticky-top)}.ck-side .ck-story{border-left:1px solid var(--ck-border);border-top:0;min-width:0}.ck-story-placeholder{color:var(--ck-muted);margin:0}@container chroniko (max-width: 640px){.ck-side .ck-layout{display:block}.ck-side .ck-main{position:static}.ck-side .ck-story{border-left:0;border-top:1px solid var(--ck-border)}.ck-side .ck-story.ck-empty{display:none}}
package/dist/chroniko.min.js CHANGED
@@ -1 +1 @@
1
- const t=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],e=["#4e79a7","#e15759","#59a14f","#f28e2b","#b07aa1","#76b7b2","#edc948","#9c755f"],s={year:1,month:1/12,day:1/372},i=[1/12,1/4,...[1,10,100,1e3,1e4,1e5].flatMap(t=>[t,2*t,5*t])];function n(e){if(null==e||""===e)return null;const s="object"==typeof e?JSON.stringify(e):"string"==typeof e?`"${e}"`:String(e);let i,n,a;if("number"==typeof e){if(!Number.isFinite(e))throw new Error(`Chroniko: invalid date ${s}`);return r(e)}if("object"==typeof e)({year:i,month:n,day:a}=e);else{const t=/^(-?\d+)(?:-(\d{1,2}))?(?:-(\d{1,2}))?$/.exec(String(e).trim());if(!t)throw new Error(`Chroniko: cannot parse date ${s}`);[i,n,a]=[Number(t[1]),t[2]&&Number(t[2]),t[3]&&Number(t[3])]}const l=function(e,s,i){if(!Number.isInteger(e))return"year must be a whole number";if(null!=s&&!(Number.isInteger(s)&&s>=1&&s<=12))return"month must be 1–12";if(null!=i){if(null==s)return"a day needs a month";if(!(Number.isInteger(i)&&i>=1&&i<=o[s-1]))return`day must be 1–${o[s-1]} in ${t[s-1]}`}return null}(i,n??null,a??null);if(l)throw new Error(`Chroniko: invalid date ${s}: ${l}`);return r(i,n,a)}const o=[31,29,31,30,31,30,31,31,30,31,30,31];function r(t,e,s){let i=t;e&&(i+=(e-1)/12),s&&(i+=(s-1)/372);return{year:t,month:e||null,day:s||null,precision:s?"day":e?"month":"year",value:i}}function a(t){return t<0?-t+" BCE":String(t)}function l(e){const s=a(e.year);return e.day?`${e.day} ${t[e.month-1]} ${s}`:e.month?`${t[e.month-1]} ${s}`:s}function c(t,e){const s=t=>t<0?t+1:t,i=[t.precision,e.precision],n=i.includes("year")?"year":i.includes("month")?"month":"day";let o=s(e.year)-s(t.year),r="year"===n?0:e.month-t.month,a="day"===n?e.day-t.day:0;if(a<0&&(r-=1,a=Math.max(function(t,e){if(0===e)return 31;return[31,t%4==0&&t%100!=0||t%400==0?29:28,31,30,31,30,31,31,30,31,30,31][e-1]}(s(e.year),e.month-1)-t.day,0)+e.day),r<0&&(o-=1,r+=12),o<0)return"";const l=[["year",o],["month",r],["day",a]],c=l.findIndex(([,t])=>t>0);if(c<0)return`less than a ${n}`;const h=([t,e])=>`${e.toLocaleString("en-US")} ${t}${1===e?"":"s"}`,d=l[c+1];return d?.[1]>0?`${h(l[c])}, ${h(d)}`:h(l[c])}function h(t){const e=l(t.start);return t.end?`${e} – ${l(t.end)}`:e}function d(t,e){return`${String(t.category??"").trim().toLowerCase().replace(/\s+/g,"-")||"event"}-${e}`}function u(){const t=new Map;for(const e of location.hash.slice(1).split("&")){if(!e)continue;const s=e.indexOf("=");s<0?t.set(e,null):t.set(e.slice(0,s),e.slice(s+1))}return t}function m(e,s){if(s>=1)return a(Math.round(e));const i=Math.floor(e+1e-9),n=Math.round(12*(e-i))%12;return 0===n?a(i):t[n]}function p(t){return String(t).replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[t]))}class f{constructor(t,e={}){const s="string"==typeof t?document.querySelector(t):t;if(!s)throw new Error("Chroniko: container not found");this.options={minSpan:1/12,colors:{},storyPosition:"below",split:.6,...e};const{storyPosition:i,split:n}=this.options;if("below"!==i&&"right"!==i)throw new Error(`Chroniko: storyPosition must be 'below' or 'right', got ${JSON.stringify(i)}`);if(!("number"==typeof n&&n>0&&n<1))throw new Error(`Chroniko: split must be a number between 0 and 1, got ${JSON.stringify(n)}`);this.items=[],this.hidden=new Set,this.selected=new Set,this.start=0,this.end=1,this._frame=0,this._build(s),this._bind(),this.setEvents(e.events??[]),null!=e.start&&null!=e.end?this.zoomTo(e.start,e.end):this.fit(),this.options.syncUrl&&(this._onHashChange=()=>this._readHash(),window.addEventListener("hashchange",this._onHashChange),this._readHash(),clearTimeout(this._hashTimer))}setEvents(t){const i=t.map((t,e)=>{const i=s=>{try{return n(t[s])}catch(i){const n=i.message.replace(/^Chroniko: /,"");throw new Error(`Chroniko: event "${t.title??e}" has an invalid ${s}: ${n}`)}},o=i("start");if(!o)throw new Error(`Chroniko: event "${t.title??e}" has no start date`);const r=i("end");return{event:t,id:String(t.id??d(t,e)),start:o,end:r,from:o.value,to:r?r.value+s[r.precision]:null,category:t.category??null}}).sort((t,e)=>t.from-e.from),o=new Map;for(const t of i){const e=o.get(t.id);if(e)throw new Error(`Chroniko: events "${e.event.title}" and "${t.event.title}" share the id "${t.id}"; ids must be unique`);o.set(t.id,t)}this.items=i,this.categories=[...new Set(this.items.map(t=>t.category).filter(Boolean))];const r=new Set(Object.values(this.options.colors)),a=e.filter(t=>!r.has(t));let l=0;this.colorOf=new Map(this.categories.map(t=>[t,this.options.colors[t]??a[l++%a.length]??e[0]]));for(const t of this.items)t.color=t.event.color??this.colorOf.get(t.category)??e[0];const[c,h]=this._extent();this._dataSpan=h-c,this._measureLabels(),this._renderLegend(),this.selected=new Set(this.items.filter(t=>this.selected.has(t.id)).map(t=>t.id)),this._renderStory(),this._invalidateLayout()}zoomTo(t,e){const s=n(t)?.value,i=n(e)?.value;if(null==s||null==i)throw new Error("Chroniko: zoomTo needs both a start and an end");if(s>=i)throw new Error(`Chroniko: zoomTo start (${t}) must be before end (${e})`);const o=(s+i)/2,r=this._clampSpan(i-s);this._setView(o-r/2,o+r/2)}fit(){if(!this.items.length)return this._setView(0,2e3);const[t,e]=this._extent(),s=Math.max(e-t,1);this._setView(t-.04*s,e+.12*s)}zoomBy(t,e=.5){const s=this.end-this.start,i=this.start+s*e,n=this._clampSpan(s*t);this._setView(i-n*e,i-n*e+n)}panBy(t){const e=t/this._scale();this._setView(this.start+e,this.end+e)}select(t){t=String(t),!this.selected.has(t)&&this.items.some(e=>e.id===t)&&this._setSelection([...this.selected,t])}deselect(t){t=String(t),this.selected.has(t)&&this._setSelection([...this.selected].filter(e=>e!==t))}toggle(t){this.selected.has(String(t))?this.deselect(t):this.select(t)}clearSelection(){this.selected.size&&this._setSelection([])}getSelection(){return this.items.filter(t=>this.selected.has(t.id)).map(t=>t.event)}reveal(t){const e=this.items.find(e=>e.id===String(t));if(!e)return;e.category&&this.hidden.has(e.category)&&this._setHidden([...this.hidden].filter(t=>t!==e.category));const s=null!=e.to?(e.from+e.to)/2:e.from,i=null!=e.to?this._clampSpan((e.to-e.from)/.6):this.end-this.start;this._revealing={id:e.id,at:performance.now(),pending:!0},this._setView(s-i/2,s+i/2)}getState(){return{start:this.start,end:this.end,selected:this.items.filter(t=>this.selected.has(t.id)).map(t=>t.id),hidden:[...this.hidden]}}setState(t={}){if(null!=t.start&&null!=t.end&&this.zoomTo(t.start,t.end),t.hidden&&this._setHidden(t.hidden.map(String)),t.selected){const e=new Set(t.selected.map(String));this._setSelection(this.items.filter(t=>e.has(t.id)).map(t=>t.id))}}destroy(){cancelAnimationFrame(this._frame),clearTimeout(this._zoomTimer),clearTimeout(this._hintTimer),clearTimeout(this._hashTimer),this._onHashChange&&window.removeEventListener("hashchange",this._onHashChange),this._resizeObserver.disconnect(),this.root.remove()}_build(t){this.root=document.createElement("div"),this.root.className="chroniko","right"===this.options.storyPosition&&(this.root.classList.add("ck-side"),this.root.style.setProperty("--ck-split",this.options.split)),this.root.innerHTML='\n <div class="ck-layout">\n <div class="ck-main">\n <div class="ck-toolbar">\n <div class="ck-legend" role="group" aria-label="Categories"></div>\n <div class="ck-controls">\n <button type="button" data-action="zoom-in" aria-label="Zoom in">+</button>\n <button type="button" data-action="zoom-out" aria-label="Zoom out">−</button>\n <button type="button" data-action="fit">Fit</button>\n </div>\n </div>\n <div class="ck-viewport" tabindex="0"\n aria-label="Timeline. Drag or use arrow keys to pan; press + and −, Ctrl+scroll or pinch to zoom.">\n <div class="ck-grid"></div>\n <div class="ck-lanes"></div>\n <div class="ck-axis"></div>\n <div class="ck-hint" aria-hidden="true"></div>\n </div>\n </div>\n <section class="ck-story" aria-label="Selected events" hidden></section>\n </div>',t.append(this.root),this.legendEl=this.root.querySelector(".ck-legend"),this.viewport=this.root.querySelector(".ck-viewport"),this.gridEl=this.root.querySelector(".ck-grid"),this.lanesEl=this.root.querySelector(".ck-lanes"),this.axisEl=this.root.querySelector(".ck-axis"),this.storyEl=this.root.querySelector(".ck-story"),this.hintEl=this.root.querySelector(".ck-hint");const e=/Mac|iPhone|iPad/.test(navigator.userAgentData?.platform??navigator.platform);this.hintEl.textContent=(e?"⌘":"Ctrl")+" + scroll to zoom, or click the timeline first"}_showHint(){this.hintEl.classList.add("ck-visible"),clearTimeout(this._hintTimer),this._hintTimer=setTimeout(()=>this.hintEl.classList.remove("ck-visible"),1500)}_bind(){const t=this.viewport;this.root.querySelector(".ck-controls").addEventListener("click",t=>{const e=t.target.closest("button")?.dataset.action;"zoom-in"===e?this.zoomBy(1/1.5):"zoom-out"===e?this.zoomBy(1.5):"fit"===e&&this.fit()}),this.legendEl.addEventListener("click",t=>{const e=t.target.closest(".ck-legend-item")?.dataset.category;if(null==e)return;const s=new Set(this.hidden);s.has(e)?s.delete(e):s.add(e),this._setHidden(s)});const e=t=>{t.pointerType&&"mouse"!==t.pointerType||this._setHover(t.target.closest(".ck-event, .ck-card, .ck-end-jump")?.dataset.id??null)};for(const t of[this.lanesEl,this.storyEl])t.addEventListener("pointerover",e),t.addEventListener("focusin",e),t.addEventListener("pointerleave",()=>this._setHover(null)),t.addEventListener("focusout",()=>this._setHover(null));t.addEventListener("wheel",e=>{const s=1===e.deltaMode?16:2===e.deltaMode?t.clientWidth:1,i=e.deltaX*s,n=e.deltaY*s;if(Math.abs(i)>Math.abs(n))return e.preventDefault(),void this.panBy(i);e.ctrlKey||e.metaKey||t.contains(document.activeElement)?(e.preventDefault(),this._zooming=!0,clearTimeout(this._zoomTimer),this._zoomTimer=setTimeout(()=>{this._zooming=!1,this._scheduleRender()},150),this.zoomBy(Math.exp(.002*n),this._ratioAt(e.clientX))):this._showHint()},{passive:!1});const s=new Map;let i=null,n=null;const o=(t,e)=>{i={id:t,x:e,start:this.start,span:this.end-this.start,moved:!1}},r=()=>{const[t,e]=s.values();return{dist:Math.max(Math.hypot(t.x-e.x,t.y-e.y),1),ratio:this._ratioAt((t.x+e.x)/2)}},a=()=>{const{dist:t,ratio:e}=r(),s=this.end-this.start;n={dist:t,span:s,anchor:this.start+s*e}};t.addEventListener("pointerdown",e=>{if(0===e.button)if(s.set(e.pointerId,{x:e.clientX,y:e.clientY}),1===s.size)this._suppressClick=!1,o(e.pointerId,e.clientX);else if(2===s.size){for(const e of s.keys())t.setPointerCapture(e);a(),i=null,this._zooming=!0,t.classList.add("ck-dragging")}}),t.addEventListener("pointermove",e=>{const o=s.get(e.pointerId);if(!o)return;if(o.x=e.clientX,o.y=e.clientY,n){const{dist:t,ratio:e}=r(),s=this._clampSpan(n.span*n.dist/t),i=n.anchor-s*e;return void this._setView(i,i+s)}if(!i||e.pointerId!==i.id)return;const a=e.clientX-i.x;if(!i.moved){if(Math.abs(a)<4)return;i.moved=!0,t.setPointerCapture(e.pointerId),t.classList.add("ck-dragging")}const l=i.start-a/this._scale();this._setView(l,l+i.span)});const l=e=>{if(s.delete(e.pointerId)){if(n){if(s.size>=2)return void a();n=null,this._suppressClick=!0,this._zooming=!1,this._scheduleRender();const[t]=s;if(t)return o(t[0],t[1].x),void(i.moved=!0)}else i?.id===e.pointerId&&i.moved&&(this._suppressClick=!0);s.size||(i=null,t.classList.remove("ck-dragging"))}};t.addEventListener("pointerup",l),t.addEventListener("pointercancel",l),t.addEventListener("click",t=>{if(this._suppressClick)return void(this._suppressClick=!1);const e=t.target.closest(".ck-event")?.dataset.id;null!=e&&this.toggle(e)}),t.addEventListener("keydown",e=>{const s=.1*t.clientWidth,i={ArrowLeft:()=>this.panBy(-s),ArrowRight:()=>this.panBy(s),"+":()=>this.zoomBy(1/1.5),"=":()=>this.zoomBy(1/1.5),"-":()=>this.zoomBy(1.5),Escape:()=>this.clearSelection()};i[e.key]&&(e.preventDefault(),i[e.key]())}),this.storyEl.addEventListener("click",t=>{const e=t.target.closest(".ck-remove"),s=t.target.closest(".ck-end-jump"),i=t.target.closest(".ck-locate");e?this.deselect(e.dataset.id):s?this._jumpToCard(s.dataset.id):i?this.reveal(i.dataset.id):t.target.closest(".ck-clear")&&this.clearSelection()}),this._resizeObserver=new ResizeObserver(()=>this._scheduleRender()),this._resizeObserver.observe(t)}_setSelection(t){this.selected=new Set(t);for(const t of this.lanesEl.querySelectorAll(".ck-event")){const e=this.selected.has(t.dataset.id);t.classList.toggle("ck-selected",e),t.setAttribute("aria-pressed",e)}this._renderStory(),this._stateChanged(),this.options.onSelectionChange?.(this.getSelection())}_setView(t,e){this.start=t,this.end=e,this._scheduleRender(),this._stateChanged()}_setHidden(t){this.hidden=new Set(t),this._renderLegend(),this._invalidateLayout(),this._stateChanged()}_setHover(t){if(t!==this._hoverId){this._hoverId=t;for(const e of this.root.querySelectorAll(".ck-event, .ck-card, .ck-end-jump"))e.classList.toggle("ck-hover",e.dataset.id===t)}}_stateChanged(){this.options.syncUrl&&(clearTimeout(this._hashTimer),this._hashTimer=setTimeout(()=>this._writeHash(),250))}_readHash(){const t=u(),e=e=>{const s=t.get(e);if(!s)return[];try{return s.split(",").map(decodeURIComponent)}catch{return[]}},s={},i=t.get("ck-view")?.split(",").map(Number);2===i?.length&&i.every(Number.isFinite)&&i[0]<i[1]&&([s.start,s.end]=i),t.has("ck-sel")&&(s.selected=e("ck-sel")),t.has("ck-hide")&&(s.hidden=e("ck-hide")),this.setState(s)}_writeHash(){const{start:t,end:e,selected:s,hidden:i}=this.getState(),n=u(),o=Math.min(6,Math.max(0,Math.ceil(3-Math.log10(e-t))));n.set("ck-view",`${+t.toFixed(o)},${+e.toFixed(o)}`);for(const[t,e]of[["ck-sel",s],["ck-hide",i]])e.length?n.set(t,e.map(encodeURIComponent).join(",")):n.delete(t);const r=[...n].map(([t,e])=>null==e?t:`${t}=${e}`).join("&");history.replaceState(history.state,"",`${location.pathname}${location.search}#${r}`)}_clampSpan(t){const e=this.options.maxSpan??Math.max(3*this._dataSpan,100);return Math.min(Math.max(t,this.options.minSpan),e)}_scale(){return(this.viewport.clientWidth||1)/(this.end-this.start)}_ratioAt(t){const e=this.viewport.getBoundingClientRect();return(t-e.left)/e.width}_extent(){let t=1/0,e=-1/0;for(const s of this.items)t=Math.min(t,s.from),e=Math.max(e,s.to??s.from);return this.items.length?[t,e]:[0,0]}_measureLabels(){const t=this._ctx??=document.createElement("canvas").getContext("2d"),e=getComputedStyle(this.lanesEl);t.font=`${e.fontWeight} ${e.fontSize} ${e.fontFamily}`;for(const e of this.items)e.labelWidth=t.measureText(e.event.title??"").width}_scheduleRender(){this._frame||(this._frame=requestAnimationFrame(()=>{this._frame=0,this._render()}))}_render(){const t=this.viewport.clientWidth;if(!t)return;const e=t/(this.end-this.start),s=t=>(t-this.start)*e,i=null==this._layoutScale||Math.abs(e/this._layoutScale-1)>1e-6;(null==this._layoutScale||i&&!this._zooming)&&this._layout(e),this._renderAxis(e,s),this._renderEvents(t,s)}_layout(t){const e=[];for(const s of this.items){if(s.category&&this.hidden.has(s.category)){s.lane=-1;continue}const i=null!=s.to,n=s.from*t,o=i?s.to*t:n,r=i?n:n-5,a=i?6:16,l=Math.max(o,r+a+s.labelWidth)+12;let c=e.findIndex(t=>t<=r);c<0?c=e.push(l)-1:e[c]=l,s.lane=c}this._laneCount=e.length,this._layoutScale=t}_invalidateLayout(){this._layoutScale=null,this._scheduleRender()}_renderAxis(t,e){const s=i.find(e=>e*t>=90)??i.at(-1);let n="",o="";for(let t=Math.ceil(this.start/s);t*s<=this.end;t++){const i=t*s,r=e(i).toFixed(1);n+=`<span class="ck-tick" style="left:${r}px">${m(i,s)}</span>`,o+=`<span class="ck-gridline" style="left:${r}px"></span>`}this.axisEl.innerHTML=n,this.gridEl.innerHTML=o}_renderEvents(t,e){const s=this.lanesEl.contains(document.activeElement)?document.activeElement.dataset.id:null,i=this._revealing,n=i?performance.now()-i.at:1/0;let o="";for(const s of this.items){if(s.lane<0)continue;const r=null!=s.to,a=e(s.from),l=r?e(s.to):a,c=r?a:a-5,d=r?Math.min(Math.max(0,-a),Math.max(0,l-a-s.labelWidth-6))+6:16,u=Math.max(l,c+d+s.labelWidth);if((r?l:u)<0||c>t)continue;const m=12+30*s.lane,f=this.selected.has(s.id),v=i?.id===s.id&&n<1500,y=`ck-event ${r?"ck-range":"ck-point"}${f?" ck-selected":""}${this._hoverClass(s)}${v?" ck-flash":""}`,g=`--ck-color:${p(s.color)};left:${c.toFixed(1)}px;top:${m}px`+(v?`;animation-delay:-${Math.round(n)}ms`:""),_=p(s.event.title??""),k=`type="button" class="${y}" data-id="${p(s.id)}" aria-pressed="${f}"\n title="${_} · ${p(h(s))}"`;o+=r?`<button ${k} style="${g};width:${Math.max(l-a,4).toFixed(1)}px">\n <span class="ck-label" style="left:${d.toFixed(1)}px">${_}</span></button>`:`<button ${k} style="${g}">\n <span class="ck-dot"></span><span class="ck-label">${_}</span></button>`}const r=24+30*this._laneCount;if(this.lanesEl.innerHTML=`<div class="ck-lanes-inner" style="height:${r}px">${o}</div>`,null!=s){([...this.lanesEl.querySelectorAll(".ck-event")].find(t=>t.dataset.id===s)??this.viewport).focus({preventScroll:!0})}i?.pending&&this._finishReveal(i)}_finishReveal(t){t.pending=!1;const e=[...this.lanesEl.querySelectorAll(".ck-event")].find(e=>e.dataset.id===t.id);if(!e)return;const s=this.lanesEl;(e.offsetTop<s.scrollTop||e.offsetTop+e.offsetHeight>s.scrollTop+s.clientHeight)&&(s.scrollTop=e.offsetTop-(s.clientHeight-e.offsetHeight)/2);const i=matchMedia("(prefers-reduced-motion: reduce)").matches;this.viewport.scrollIntoView({block:"nearest",behavior:i?"auto":"smooth"}),e.focus({preventScroll:!0})}_renderLegend(){this.legendEl.innerHTML=this.categories.map(t=>`<button type="button" class="ck-legend-item" data-category="${p(t)}"\n aria-pressed="${!this.hidden.has(t)}" style="--ck-color:${p(this.colorOf.get(t))}">\n <span class="ck-swatch"></span>${p(t)}</button>`).join("")}_renderStory(){const t=this.items.filter(t=>this.selected.has(t.id)),e="right"===this.options.storyPosition;if(this.storyEl.hidden=!t.length&&!e,this.storyEl.classList.toggle("ck-empty",!t.length),!t.length)return void(this.storyEl.innerHTML=e?'<p class="ck-story-placeholder">Click an event to add it here.</p>':"");const s=t.map(t=>({item:t,at:t.from,isEnd:!1}));for(const e of t)e.end&&e.end.value>e.from&&s.push({item:e,at:e.end.value,isEnd:!0});s.sort((t,e)=>t.at-e.at||e.isEnd-t.isEnd),this.storyEl.innerHTML=`\n <div class="ck-story-header">\n <span class="ck-story-title">Selected events <span class="ck-count">${t.length}</span></span>\n <button type="button" class="ck-clear">Clear all</button>\n </div>\n <ol class="ck-story-list">${s.map(t=>t.isEnd?this._storyEnd(t.item):this._storyCard(t.item)).join("")}</ol>`}_storyEnd(t){const e=p(t.event.title??""),s=p(c(t.start,t.end));return`\n <li class="ck-end" style="--ck-color:${p(t.color)}">\n <button type="button" class="ck-end-jump${this._hoverClass(t)}" data-id="${p(t.id)}"\n aria-label="${e} ends ${p(l(t.end))}${s?`, after ${s}`:""}. Go to event">\n <span class="ck-end-date">${p(l(t.end))}</span>\n <span>End of <strong>${e}</strong></span>\n ${s?`<span class="ck-end-duration">lasted ${s}</span>`:""}\n </button>\n </li>`}_jumpToCard(t){const e=[...this.storyEl.querySelectorAll(".ck-card")].find(e=>e.dataset.id===t);if(!e)return;const s=matchMedia("(prefers-reduced-motion: reduce)").matches;e.scrollIntoView({block:"nearest",behavior:s?"auto":"smooth"}),e.focus({preventScroll:!0}),e.classList.remove("ck-flash"),e.offsetWidth,e.classList.add("ck-flash")}_storyCard(t){const e=t.event,s=e.url&&/^https?:\/\//i.test(e.url)?e.url:null;return`\n <li class="ck-card${this._hoverClass(t)}" data-id="${p(t.id)}" tabindex="-1"\n style="--ck-color:${p(t.color)}">\n <button type="button" class="ck-remove" data-id="${p(t.id)}"\n aria-label="Remove ${p(e.title??"")} from selection">×</button>\n <div class="ck-meta">\n ${t.category?`<span class="ck-badge">${p(t.category)}</span>`:""}\n <span>${p(h(t))}</span>\n </div>\n <h3 class="ck-title">${p(e.title??"")}</h3>\n ${e.description?`<p class="ck-description">${p(e.description)}</p>`:""}\n <div class="ck-card-actions">\n <button type="button" class="ck-locate" data-id="${p(t.id)}">Show on timeline</button>\n ${s?`<a class="ck-link" href="${p(s)}" target="_blank" rel="noopener">Read more ↗</a>`:""}\n </div>\n </li>`}_hoverClass(t){return this._hoverId===t.id?" ck-hover":""}}export{f as Chroniko,l as formatDate,c as formatDuration,a as formatYear,n as parseDate};
1
+ const e={en:{zoomIn:"Zoom in",zoomOut:"Zoom out",fit:"Fit",largerText:"Larger text",categories:"Categories",ctrlKey:"Ctrl",viewport:e=>`Timeline. Drag or use arrow keys to pan; press + and −, ${e}+scroll or pinch to zoom.`,hint:e=>`${e} + scroll to zoom, or click the timeline first`,selectedEvents:"Selected events",clearAll:"Clear all",placeholder:"Click an event to add it here.",showOnTimeline:"Show on timeline",readMore:"Read more ↗",remove:e=>`Remove ${e} from selection`,endOf:e=>`End of ${e}`,lasted:e=>`lasted ${e}`,endsAria:(e,t,n)=>`${e} ends ${t}${n?`, after ${n}`:""}. Go to event`,months:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],year:e=>e<0?-e+" BCE":String(e),month:(e,t)=>`${e} ${t}`,day:(e,t,n)=>`${e} ${t} ${n}`,units:{year:{one:"# year",other:"# years"},month:{one:"# month",other:"# months"},day:{one:"# day",other:"# days"}},unitJoin:", ",lessThan:{year:"less than a year",month:"less than a month",day:"less than a day"}},"zh-Hant":{zoomIn:"放大",zoomOut:"縮小",fit:"全覽",largerText:"放大文字",categories:"類別",ctrlKey:"Ctrl",viewport:e=>`時間軸。拖曳或使用方向鍵平移；按 + 和 −、${e} + 滾輪或雙指縮放。`,hint:e=>`${e} + 滾輪縮放，或先點擊時間軸`,selectedEvents:"已選事件",clearAll:"全部清除",placeholder:"點擊事件以加入此處。",showOnTimeline:"在時間軸上顯示",readMore:"了解更多 ↗",remove:e=>`從已選事件中移除「${e}」`,endOf:e=>`${e}結束`,lasted:e=>`歷時${e}`,endsAria:(e,t,n)=>`${e}於${t}結束${n?`，歷時${n}`:""}。前往事件`,months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],year:e=>e<0?`公元前${-e}年`:`${e}年`,month:(e,t)=>`${t}${e}`,day:(e,t,n)=>`${n}${t}${e}日`,units:{year:{other:"#年"},month:{other:"#個月"},day:{other:"#天"}},unitJoin:"",lessThan:{year:"不足一年",month:"不足一個月",day:"不足一天"}},"zh-Hans":{zoomIn:"放大",zoomOut:"缩小",fit:"全览",largerText:"放大文字",categories:"类别",ctrlKey:"Ctrl",viewport:e=>`时间轴。拖动或使用方向键平移；按 + 和 −、${e} + 滚轮或双指缩放。`,hint:e=>`${e} + 滚轮缩放，或先点击时间轴`,selectedEvents:"已选事件",clearAll:"全部清除",placeholder:"点击事件以添加到此处。",showOnTimeline:"在时间轴上显示",readMore:"了解更多 ↗",remove:e=>`从已选事件中移除“${e}”`,endOf:e=>`${e}结束`,lasted:e=>`历时${e}`,endsAria:(e,t,n)=>`${e}于${t}结束${n?`，历时${n}`:""}。前往事件`,months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],year:e=>e<0?`公元前${-e}年`:`${e}年`,month:(e,t)=>`${t}${e}`,day:(e,t,n)=>`${n}${t}${e}日`,units:{year:{other:"#年"},month:{other:"#个月"},day:{other:"#天"}},unitJoin:"",lessThan:{year:"不足一年",month:"不足一个月",day:"不足一天"}},yue:{zoomIn:"放大",zoomOut:"縮細",fit:"睇晒",largerText:"大啲字",categories:"類別",ctrlKey:"Ctrl",viewport:e=>`時間軸。拖或者用方向鍵左右移；撳 + 同 −、${e} + 碌滾輪或者用兩隻手指縮放。`,hint:e=>`${e} + 碌滾輪就可以縮放，或者先撳一下時間軸`,selectedEvents:"揀咗嘅事件",clearAll:"清晒",placeholder:"撳一下事件就會加入呢度。",showOnTimeline:"喺時間軸度睇",readMore:"睇多啲 ↗",remove:e=>`移走「${e}」`,endOf:e=>`${e}完結`,lasted:e=>`維持咗${e}`,endsAria:(e,t,n)=>`${e}喺${t}完結${n?`，維持咗${n}`:""}。去返個事件`,months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],year:e=>e<0?`公元前${-e}年`:`${e}年`,month:(e,t)=>`${t}${e}`,day:(e,t,n)=>`${n}${t}${e}日`,units:{year:{other:"#年"},month:{other:"#個月"},day:{other:"#日"}},unitJoin:"",lessThan:{year:"唔夠一年",month:"唔夠一個月",day:"唔夠一日"}},ja:{zoomIn:"拡大",zoomOut:"縮小",fit:"全体表示",largerText:"文字を大きく",categories:"カテゴリ",ctrlKey:"Ctrl",viewport:e=>`タイムライン。ドラッグまたは矢印キーで移動し、+ と −、${e} + スクロール、またはピンチで拡大・縮小します。`,hint:e=>`${e} + スクロールで拡大・縮小、または先にタイムラインをクリック`,selectedEvents:"選択した出来事",clearAll:"すべて解除",placeholder:"出来事をクリックするとここに追加されます。",showOnTimeline:"タイムラインで表示",readMore:"詳しく見る ↗",remove:e=>`「${e}」を選択から外す`,endOf:e=>`${e}の終わり`,lasted:e=>`期間：${e}`,endsAria:(e,t,n)=>`${e}は${t}に終了${n?`（期間：${n}）`:""}。出来事へ移動`,months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],year:e=>e<0?`紀元前${-e}年`:`${e}年`,month:(e,t)=>`${t}${e}`,day:(e,t,n)=>`${n}${t}${e}日`,units:{year:{other:"#年"},month:{other:"#か月"},day:{other:"#日"}},unitJoin:"",lessThan:{year:"1年未満",month:"1か月未満",day:"1日未満"}},ko:{zoomIn:"확대",zoomOut:"축소",fit:"전체 보기",largerText:"글자 크게",categories:"분류",ctrlKey:"Ctrl",viewport:e=>`타임라인. 드래그하거나 화살표 키로 이동하고, + 와 −, ${e}+스크롤 또는 핀치로 확대/축소합니다.`,hint:e=>`${e} + 스크롤로 확대/축소하거나 먼저 타임라인을 클릭하세요`,selectedEvents:"선택한 사건",clearAll:"모두 지우기",placeholder:"사건을 클릭하면 여기에 추가됩니다.",showOnTimeline:"타임라인에서 보기",readMore:"더 보기 ↗",remove:e=>`선택에서 ${e} 제거`,endOf:e=>`${e} 종료`,lasted:e=>`기간: ${e}`,endsAria:(e,t,n)=>`${e} 종료: ${t}${n?`, 기간 ${n}`:""}. 사건으로 이동`,months:["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],year:e=>e<0?`기원전 ${-e}년`:`${e}년`,month:(e,t)=>`${t} ${e}`,day:(e,t,n)=>`${n} ${t} ${e}일`,units:{year:{other:"#년"},month:{other:"#개월"},day:{other:"#일"}},unitJoin:" ",lessThan:{year:"1년 미만",month:"1개월 미만",day:"1일 미만"}},fr:{zoomIn:"Zoom avant",zoomOut:"Zoom arrière",fit:"Ajuster",largerText:"Texte plus grand",categories:"Catégories",ctrlKey:"Ctrl",viewport:e=>`Frise chronologique. Faites glisser ou utilisez les flèches pour vous déplacer ; appuyez sur + et −, ${e}+molette ou pincez pour zoomer.`,hint:e=>`${e} + molette pour zoomer, ou cliquez d’abord sur la frise`,selectedEvents:"Événements sélectionnés",clearAll:"Tout effacer",placeholder:"Cliquez sur un événement pour l’ajouter ici.",showOnTimeline:"Afficher sur la frise",readMore:"En savoir plus ↗",remove:e=>`Retirer ${e} de la sélection`,endOf:e=>`Fin : ${e}`,lasted:e=>`durée : ${e}`,endsAria:(e,t,n)=>`Fin de « ${e} » : ${t}${n?`, durée ${n}`:""}. Aller à l’événement`,months:["janv.","févr.","mars","avr.","mai","juin","juil.","août","sept.","oct.","nov.","déc."],year:e=>e<0?-e+" av. J.-C.":String(e),month:(e,t)=>`${e} ${t}`,day:(e,t,n)=>`${1===e?"1er":e} ${t} ${n}`,units:{year:{one:"# an",other:"# ans"},month:{one:"# mois",other:"# mois"},day:{one:"# jour",other:"# jours"}},unitJoin:" et ",lessThan:{year:"moins d’un an",month:"moins d’un mois",day:"moins d’un jour"}},de:{zoomIn:"Vergrößern",zoomOut:"Verkleinern",fit:"Einpassen",largerText:"Größere Schrift",categories:"Kategorien",ctrlKey:"Strg",viewport:e=>`Zeitleiste. Zum Verschieben ziehen oder die Pfeiltasten verwenden; zum Zoomen + und −, ${e}+Mausrad oder zwei Finger verwenden.`,hint:e=>`${e} + Mausrad zum Zoomen, oder zuerst auf die Zeitleiste klicken`,selectedEvents:"Ausgewählte Ereignisse",clearAll:"Alle entfernen",placeholder:"Klicken Sie auf ein Ereignis, um es hier hinzuzufügen.",showOnTimeline:"Auf der Zeitleiste anzeigen",readMore:"Mehr erfahren ↗",remove:e=>`${e} aus der Auswahl entfernen`,endOf:e=>`Ende: ${e}`,lasted:e=>`Dauer: ${e}`,endsAria:(e,t,n)=>`Ende von ${e}: ${t}${n?`, Dauer ${n}`:""}. Zum Ereignis`,months:["Jan.","Feb.","März","Apr.","Mai","Juni","Juli","Aug.","Sept.","Okt.","Nov.","Dez."],year:e=>e<0?-e+" v. Chr.":String(e),month:(e,t)=>`${e} ${t}`,day:(e,t,n)=>`${e}. ${t} ${n}`,units:{year:{one:"# Jahr",other:"# Jahre"},month:{one:"# Monat",other:"# Monate"},day:{one:"# Tag",other:"# Tage"}},unitJoin:", ",lessThan:{year:"weniger als ein Jahr",month:"weniger als ein Monat",day:"weniger als ein Tag"}},it:{zoomIn:"Ingrandisci",zoomOut:"Riduci",fit:"Adatta",largerText:"Testo più grande",categories:"Categorie",ctrlKey:"Ctrl",viewport:e=>`Linea del tempo. Trascina o usa i tasti freccia per spostarti; premi + e −, ${e}+rotellina o pizzica per lo zoom.`,hint:e=>`${e} + rotellina per lo zoom, oppure fai prima clic sulla linea del tempo`,selectedEvents:"Eventi selezionati",clearAll:"Cancella tutto",placeholder:"Fai clic su un evento per aggiungerlo qui.",showOnTimeline:"Mostra sulla linea del tempo",readMore:"Scopri di più ↗",remove:e=>`Rimuovi ${e} dalla selezione`,endOf:e=>`Fine: ${e}`,lasted:e=>`durata: ${e}`,endsAria:(e,t,n)=>`Fine di ${e}: ${t}${n?`, durata ${n}`:""}. Vai all’evento`,months:["gen","feb","mar","apr","mag","giu","lug","ago","set","ott","nov","dic"],year:e=>e<0?-e+" a.C.":String(e),month:(e,t)=>`${e} ${t}`,day:(e,t,n)=>`${e} ${t} ${n}`,units:{year:{one:"# anno",other:"# anni"},month:{one:"# mese",other:"# mesi"},day:{one:"# giorno",other:"# giorni"}},unitJoin:" e ",lessThan:{year:"meno di un anno",month:"meno di un mese",day:"meno di un giorno"}},es:{zoomIn:"Acercar",zoomOut:"Alejar",fit:"Ajustar",largerText:"Texto más grande",categories:"Categorías",ctrlKey:"Ctrl",viewport:e=>`Línea de tiempo. Arrastra o usa las flechas para desplazarte; pulsa + y −, ${e}+rueda o pellizca para hacer zoom.`,hint:e=>`${e} + rueda para hacer zoom, o haz clic primero en la línea de tiempo`,selectedEvents:"Eventos seleccionados",clearAll:"Borrar todo",placeholder:"Haz clic en un evento para añadirlo aquí.",showOnTimeline:"Mostrar en la línea de tiempo",readMore:"Más información ↗",remove:e=>`Quitar ${e} de la selección`,endOf:e=>`Fin: ${e}`,lasted:e=>`duración: ${e}`,endsAria:(e,t,n)=>`Fin de ${e}: ${t}${n?`, duración ${n}`:""}. Ir al evento`,months:["ene","feb","mar","abr","may","jun","jul","ago","sept","oct","nov","dic"],year:e=>e<0?-e+" a. C.":String(e),month:(e,t)=>`${e} ${t}`,day:(e,t,n)=>`${e} ${t} ${n}`,units:{year:{one:"# año",other:"# años"},month:{one:"# mes",other:"# meses"},day:{one:"# día",other:"# días"}},unitJoin:" y ",lessThan:{year:"menos de un año",month:"menos de un mes",day:"menos de un día"}},pt:{zoomIn:"Ampliar",zoomOut:"Reduzir",fit:"Ajustar",largerText:"Texto maior",categories:"Categorias",ctrlKey:"Ctrl",viewport:e=>`Linha do tempo. Arraste ou use as setas para deslocar; use + e −, ${e}+roda ou o gesto de pinça para ampliar ou reduzir.`,hint:e=>`${e} + roda para ampliar ou reduzir, ou clique primeiro na linha do tempo`,selectedEvents:"Eventos selecionados",clearAll:"Limpar tudo",placeholder:"Clique num evento para adicioná-lo aqui.",showOnTimeline:"Mostrar na linha do tempo",readMore:"Saiba mais ↗",remove:e=>`Remover ${e} da seleção`,endOf:e=>`Fim: ${e}`,lasted:e=>`duração: ${e}`,endsAria:(e,t,n)=>`Fim de ${e}: ${t}${n?`, duração ${n}`:""}. Ir para o evento`,months:["jan","fev","mar","abr","mai","jun","jul","ago","set","out","nov","dez"],year:e=>e<0?-e+" a.C.":String(e),month:(e,t)=>`${e} ${t}`,day:(e,t,n)=>`${e} ${t} ${n}`,units:{year:{one:"# ano",other:"# anos"},month:{one:"# mês",other:"# meses"},day:{one:"# dia",other:"# dias"}},unitJoin:" e ",lessThan:{year:"menos de um ano",month:"menos de um mês",day:"menos de um dia"}},pl:{zoomIn:"Powiększ",zoomOut:"Pomniejsz",fit:"Dopasuj",largerText:"Większy tekst",categories:"Kategorie",ctrlKey:"Ctrl",viewport:e=>`Oś czasu. Przeciągnij lub użyj klawiszy strzałek, aby przesuwać; naciśnij + i −, ${e}+kółko myszy lub zsuń palce, aby zmienić powiększenie.`,hint:e=>`${e} + kółko myszy, aby zmienić powiększenie, lub najpierw kliknij oś czasu`,selectedEvents:"Wybrane wydarzenia",clearAll:"Wyczyść wszystko",placeholder:"Kliknij wydarzenie, aby dodać je tutaj.",showOnTimeline:"Pokaż na osi czasu",readMore:"Więcej ↗",remove:e=>`Usuń ${e} z wyboru`,endOf:e=>`Koniec: ${e}`,lasted:e=>`czas trwania: ${e}`,endsAria:(e,t,n)=>`Koniec: ${e}, ${t}${n?`, czas trwania ${n}`:""}. Przejdź do wydarzenia`,months:["sty","lut","mar","kwi","maj","cze","lip","sie","wrz","paź","lis","gru"],year:e=>e<0?-e+" p.n.e.":String(e),month:(e,t)=>`${e} ${t}`,day:(e,t,n)=>`${e} ${t} ${n}`,units:{year:{one:"# rok",few:"# lata",many:"# lat",other:"# roku"},month:{one:"# miesiąc",few:"# miesiące",many:"# miesięcy",other:"# miesiąca"},day:{one:"# dzień",few:"# dni",many:"# dni",other:"# dnia"}},unitJoin:", ",lessThan:{year:"mniej niż rok",month:"mniej niż miesiąc",day:"mniej niż dzień"}},nl:{zoomIn:"Inzoomen",zoomOut:"Uitzoomen",fit:"Passend maken",largerText:"Grotere tekst",categories:"Categorieën",ctrlKey:"Ctrl",viewport:e=>`Tijdlijn. Sleep of gebruik de pijltjestoetsen om te verschuiven; druk op + en −, ${e}+scrollen of knijp om te zoomen.`,hint:e=>`${e} + scrollen om te zoomen, of klik eerst op de tijdlijn`,selectedEvents:"Geselecteerde gebeurtenissen",clearAll:"Alles wissen",placeholder:"Klik op een gebeurtenis om die hier toe te voegen.",showOnTimeline:"Tonen op tijdlijn",readMore:"Meer lezen ↗",remove:e=>`${e} uit selectie verwijderen`,endOf:e=>`Einde: ${e}`,lasted:e=>`duur: ${e}`,endsAria:(e,t,n)=>`Einde van ${e}: ${t}${n?`, duur ${n}`:""}. Ga naar gebeurtenis`,months:["jan","feb","mrt","apr","mei","jun","jul","aug","sep","okt","nov","dec"],year:e=>e<0?-e+" v.Chr.":String(e),month:(e,t)=>`${e} ${t}`,day:(e,t,n)=>`${e} ${t} ${n}`,units:{year:{one:"# jaar",other:"# jaar"},month:{one:"# maand",other:"# maanden"},day:{one:"# dag",other:"# dagen"}},unitJoin:" en ",lessThan:{year:"minder dan een jaar",month:"minder dan een maand",day:"minder dan een dag"}}},t=["#4e79a7","#e15759","#59a14f","#f28e2b","#b07aa1","#76b7b2","#edc948","#9c755f"],n={year:1,month:1/12,day:1/372},i=[1/12,1/4,...[1,10,100,1e3,1e4,1e5].flatMap(e=>[e,2*e,5*e])];function s(t){if(null==t||""===t)return null;const n="object"==typeof t?JSON.stringify(t):"string"==typeof t?`"${t}"`:String(t);let i,s,a;if("number"==typeof t){if(!Number.isFinite(t))throw new Error(`Chroniko: invalid date ${n}`);return r(t)}if("object"==typeof t)({year:i,month:s,day:a}=t);else{const e=/^(-?\d+)(?:-(\d{1,2}))?(?:-(\d{1,2}))?$/.exec(String(t).trim());if(!e)throw new Error(`Chroniko: cannot parse date ${n}`);[i,s,a]=[Number(e[1]),e[2]&&Number(e[2]),e[3]&&Number(e[3])]}const l=function(t,n,i){if(!Number.isInteger(t))return"year must be a whole number";if(null!=n&&!(Number.isInteger(n)&&n>=1&&n<=12))return"month must be 1–12";if(null!=i){if(null==n)return"a day needs a month";if(!(Number.isInteger(i)&&i>=1&&i<=o[n-1]))return`day must be 1–${o[n-1]} in ${e.en.months[n-1]}`}return null}(i,s??null,a??null);if(l)throw new Error(`Chroniko: invalid date ${n}: ${l}`);return r(i,s,a)}const o=[31,29,31,30,31,30,31,31,30,31,30,31];function r(e,t,n){let i=e;t&&(i+=(t-1)/12),n&&(i+=(n-1)/372);return{year:e,month:t||null,day:n||null,precision:n?"day":t?"month":"year",value:i}}const a=new Map;function l(t,n){if(!Object.hasOwn(e,t)){const n=Object.keys(e).map(e=>`'${e}'`).join(", ");throw new Error(`Chroniko: language must be one of ${n}, got ${JSON.stringify(t)}`)}if(!n&&a.has(t))return a.get(t);const i={...e.en,...e[t],...n,number:new Intl.NumberFormat(t),plural:new Intl.PluralRules(t)};return n||a.set(t,i),i}function d(e,t="en"){return l(t).year(e)}function h(e,t="en"){return c(e,l(t))}function c(e,t){const n=t.year(e.year);return e.day?t.day(e.day,t.months[e.month-1],n):e.month?t.month(t.months[e.month-1],n):n}function u(e,t,n="en"){return m(e,t,l(n))}function m(e,t,n){const i=e=>e<0?e+1:e,s=[e.precision,t.precision],o=s.includes("year")?"year":s.includes("month")?"month":"day";let r=i(t.year)-i(e.year),a="year"===o?0:t.month-e.month,l="day"===o?t.day-e.day:0;if(l<0&&(a-=1,l=Math.max(function(e,t){if(0===t)return 31;return[31,e%4==0&&e%100!=0||e%400==0?29:28,31,30,31,30,31,31,30,31,30,31][t-1]}(i(t.year),t.month-1)-e.day,0)+t.day),a<0&&(r-=1,a+=12),r<0)return"";const d=[["year",r],["month",a],["day",l]],h=d.findIndex(([,e])=>e>0);if(h<0)return n.lessThan[o];const c=([e,t])=>{const i=n.units[e];return(i[n.plural.select(t)]??i.other).replace("#",n.number.format(t))},u=d[h+1];return u?.[1]>0?`${c(d[h])}${n.unitJoin}${c(u)}`:c(d[h])}function p(e,t){const n=c(e.start,t);return e.end?`${n} – ${c(e.end,t)}`:n}function y(e,t){return`${String(e.category??"").trim().toLowerCase().replace(/\s+/g,"-")||"event"}-${t}`}function $(){const e=new Map;for(const t of location.hash.slice(1).split("&")){if(!t)continue;const n=t.indexOf("=");n<0?e.set(t,null):e.set(t.slice(0,n),t.slice(n+1))}return e}function g(e,t,n){if(t>=1)return n.year(Math.round(e));const i=Math.floor(e+1e-9),s=Math.round(12*(e-i))%12;return 0===s?n.year(i):n.months[s]}function f(e){return String(e).replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[e]))}class v{constructor(e,t={}){const n="string"==typeof e?document.querySelector(e):e;if(!n)throw new Error("Chroniko: container not found");this.options={minSpan:1/12,colors:{},storyPosition:"below",split:.6,language:"en",categoryLabels:{},...t};const{storyPosition:i,split:s}=this.options;if("below"!==i&&"right"!==i)throw new Error(`Chroniko: storyPosition must be 'below' or 'right', got ${JSON.stringify(i)}`);if(!("number"==typeof s&&s>0&&s<1))throw new Error(`Chroniko: split must be a number between 0 and 1, got ${JSON.stringify(s)}`);this.m=l(this.options.language,this.options.uiText),this.items=[],this.hidden=new Set,this.selected=new Set,this.start=0,this.end=1,this._frame=0,this._build(n),this._bind(),this.setEvents(t.events??[]),null!=t.start&&null!=t.end?this.zoomTo(t.start,t.end):this.fit(),this.options.syncUrl&&(this._onHashChange=()=>this._readHash(),window.addEventListener("hashchange",this._onHashChange),this._readHash(),clearTimeout(this._hashTimer))}setEvents(e){const i=e.map((e,t)=>{const i=n=>{try{return s(e[n])}catch(i){const s=i.message.replace(/^Chroniko: /,"");throw new Error(`Chroniko: event "${e.title??t}" has an invalid ${n}: ${s}`)}},o=i("start");if(!o)throw new Error(`Chroniko: event "${e.title??t}" has no start date`);const r=i("end");return{event:e,id:String(e.id??y(e,t)),start:o,end:r,from:o.value,to:r?r.value+n[r.precision]:null,category:e.category??null}}).sort((e,t)=>e.from-t.from),o=new Map;for(const e of i){const t=o.get(e.id);if(t)throw new Error(`Chroniko: events "${t.event.title}" and "${e.event.title}" share the id "${e.id}"; ids must be unique`);o.set(e.id,e)}this.items=i,this.categories=[...new Set(this.items.map(e=>e.category).filter(Boolean))];const r=new Set(Object.values(this.options.colors)),a=t.filter(e=>!r.has(e));let l=0;this.colorOf=new Map(this.categories.map(e=>[e,this.options.colors[e]??a[l++%a.length]??t[0]]));for(const e of this.items)e.color=e.event.color??this.colorOf.get(e.category)??t[0];const[d,h]=this._extent();this._dataSpan=h-d,this._measureLabels(),this._renderLegend(),this.selected=new Set(this.items.filter(e=>this.selected.has(e.id)).map(e=>e.id)),this._renderStory(),this._invalidateLayout()}zoomTo(e,t){const n=s(e)?.value,i=s(t)?.value;if(null==n||null==i)throw new Error("Chroniko: zoomTo needs both a start and an end");if(n>=i)throw new Error(`Chroniko: zoomTo start (${e}) must be before end (${t})`);const o=(n+i)/2,r=this._clampSpan(i-n);this._setView(o-r/2,o+r/2)}fit(){if(!this.items.length)return this._setView(0,2e3);const[e,t]=this._extent(),n=Math.max(t-e,1);this._setView(e-.04*n,t+.12*n)}zoomBy(e,t=.5){const n=this.end-this.start,i=this.start+n*t,s=this._clampSpan(n*e);this._setView(i-s*t,i-s*t+s)}panBy(e){const t=e/this._scale();this._setView(this.start+t,this.end+t)}select(e){e=String(e),!this.selected.has(e)&&this.items.some(t=>t.id===e)&&this._setSelection([...this.selected,e])}deselect(e){e=String(e),this.selected.has(e)&&this._setSelection([...this.selected].filter(t=>t!==e))}toggle(e){this.selected.has(String(e))?this.deselect(e):this.select(e)}clearSelection(){this.selected.size&&this._setSelection([])}getSelection(){return this.items.filter(e=>this.selected.has(e.id)).map(e=>e.event)}reveal(e){const t=this.items.find(t=>t.id===String(e));if(!t)return;t.category&&this.hidden.has(t.category)&&this._setHidden([...this.hidden].filter(e=>e!==t.category));const n=null!=t.to?(t.from+t.to)/2:t.from,i=null!=t.to?this._clampSpan((t.to-t.from)/.6):this.end-this.start;this._revealing={id:t.id,at:performance.now(),pending:!0},this._setView(n-i/2,n+i/2)}getState(){return{start:this.start,end:this.end,selected:this.items.filter(e=>this.selected.has(e.id)).map(e=>e.id),hidden:[...this.hidden]}}setState(e={}){if(null!=e.start&&null!=e.end&&this.zoomTo(e.start,e.end),e.hidden&&this._setHidden(e.hidden.map(String)),e.selected){const t=new Set(e.selected.map(String));this._setSelection(this.items.filter(e=>t.has(e.id)).map(e=>e.id))}}destroy(){cancelAnimationFrame(this._frame),clearTimeout(this._zoomTimer),clearTimeout(this._hintTimer),clearTimeout(this._hashTimer),this._onHashChange&&window.removeEventListener("hashchange",this._onHashChange),this._resizeObserver.disconnect(),document.fonts?.removeEventListener("loadingdone",this._onFontsLoaded),this.root.remove()}_build(e){this.root=document.createElement("div"),this.root.className="chroniko",this.root.lang=this.options.language,"right"===this.options.storyPosition&&(this.root.classList.add("ck-side"),this.root.style.setProperty("--ck-split",this.options.split));const t=this.m,n=/Mac|iPhone|iPad/.test(navigator.userAgentData?.platform??navigator.platform)?"⌘":t.ctrlKey;this.root.innerHTML=`\n <div class="ck-layout">\n <div class="ck-main">\n <div class="ck-toolbar">\n <div class="ck-legend" role="group" aria-label="${f(t.categories)}"></div>\n <div class="ck-controls">\n <button type="button" data-action="zoom-in" aria-label="${f(t.zoomIn)}">+</button>\n <button type="button" data-action="zoom-out" aria-label="${f(t.zoomOut)}">−</button>\n <button type="button" data-action="fit">${f(t.fit)}</button>\n ${this.options.textSizeToggle?`<button type="button" data-action="text-size" aria-pressed="false" aria-label="${f(t.largerText)}">Aa</button>`:""}\n </div>\n </div>\n <div class="ck-viewport" tabindex="0" aria-label="${t.viewport(f(n))}">\n <div class="ck-grid"></div>\n <div class="ck-lanes"></div>\n <div class="ck-axis"></div>\n <div class="ck-hint" aria-hidden="true"></div>\n </div>\n </div>\n <section class="ck-story" aria-label="${f(t.selectedEvents)}" hidden></section>\n </div>`,e.append(this.root),this.legendEl=this.root.querySelector(".ck-legend"),this.viewport=this.root.querySelector(".ck-viewport"),this.gridEl=this.root.querySelector(".ck-grid"),this.lanesEl=this.root.querySelector(".ck-lanes"),this.axisEl=this.root.querySelector(".ck-axis"),this.storyEl=this.root.querySelector(".ck-story"),this.hintEl=this.root.querySelector(".ck-hint"),this.hintEl.innerHTML=t.hint(f(n))}_showHint(){this.hintEl.classList.add("ck-visible"),clearTimeout(this._hintTimer),this._hintTimer=setTimeout(()=>this.hintEl.classList.remove("ck-visible"),1500)}_bind(){const e=this.viewport;this.root.querySelector(".ck-controls").addEventListener("click",e=>{const t=e.target.closest("button")?.dataset.action;"zoom-in"===t?this.zoomBy(1/1.5):"zoom-out"===t?this.zoomBy(1.5):"fit"===t?this.fit():"text-size"===t&&this._toggleTextSize(e.target.closest("button"))}),this.legendEl.addEventListener("click",e=>{const t=e.target.closest(".ck-legend-item")?.dataset.category;if(null==t)return;const n=new Set(this.hidden);n.has(t)?n.delete(t):n.add(t),this._setHidden(n)});const t=e=>{e.pointerType&&"mouse"!==e.pointerType||this._setHover(e.target.closest(".ck-event, .ck-card, .ck-end-jump")?.dataset.id??null)};for(const e of[this.lanesEl,this.storyEl])e.addEventListener("pointerover",t),e.addEventListener("focusin",t),e.addEventListener("pointerleave",()=>this._setHover(null)),e.addEventListener("focusout",()=>this._setHover(null));e.addEventListener("wheel",t=>{const n=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,i=t.deltaX*n,s=t.deltaY*n;if(Math.abs(i)>Math.abs(s))return t.preventDefault(),void this.panBy(i);t.ctrlKey||t.metaKey||e.contains(document.activeElement)?(t.preventDefault(),this._zooming=!0,clearTimeout(this._zoomTimer),this._zoomTimer=setTimeout(()=>{this._zooming=!1,this._scheduleRender()},150),this.zoomBy(Math.exp(.002*s),this._ratioAt(t.clientX))):this._showHint()},{passive:!1});const n=new Map;let i=null,s=null;const o=(e,t)=>{i={id:e,x:t,start:this.start,span:this.end-this.start,moved:!1}},r=()=>{const[e,t]=n.values();return{dist:Math.max(Math.hypot(e.x-t.x,e.y-t.y),1),ratio:this._ratioAt((e.x+t.x)/2)}},a=()=>{const{dist:e,ratio:t}=r(),n=this.end-this.start;s={dist:e,span:n,anchor:this.start+n*t}};e.addEventListener("pointerdown",t=>{if(0===t.button)if(n.set(t.pointerId,{x:t.clientX,y:t.clientY}),1===n.size)this._suppressClick=!1,o(t.pointerId,t.clientX);else if(2===n.size){for(const t of n.keys())e.setPointerCapture(t);a(),i=null,this._zooming=!0,e.classList.add("ck-dragging")}}),e.addEventListener("pointermove",t=>{const o=n.get(t.pointerId);if(!o)return;if(o.x=t.clientX,o.y=t.clientY,s){const{dist:e,ratio:t}=r(),n=this._clampSpan(s.span*s.dist/e),i=s.anchor-n*t;return void this._setView(i,i+n)}if(!i||t.pointerId!==i.id)return;const a=t.clientX-i.x;if(!i.moved){if(Math.abs(a)<4)return;i.moved=!0,e.setPointerCapture(t.pointerId),e.classList.add("ck-dragging")}const l=i.start-a/this._scale();this._setView(l,l+i.span)});const l=t=>{if(n.delete(t.pointerId)){if(s){if(n.size>=2)return void a();s=null,this._suppressClick=!0,this._zooming=!1,this._scheduleRender();const[e]=n;if(e)return o(e[0],e[1].x),void(i.moved=!0)}else i?.id===t.pointerId&&i.moved&&(this._suppressClick=!0);n.size||(i=null,e.classList.remove("ck-dragging"))}};e.addEventListener("pointerup",l),e.addEventListener("pointercancel",l),e.addEventListener("click",e=>{if(this._suppressClick)return void(this._suppressClick=!1);const t=e.target.closest(".ck-event")?.dataset.id;null!=t&&this.toggle(t)}),e.addEventListener("keydown",t=>{const n=.1*e.clientWidth,i={ArrowLeft:()=>this.panBy(-n),ArrowRight:()=>this.panBy(n),"+":()=>this.zoomBy(1/1.5),"=":()=>this.zoomBy(1/1.5),"-":()=>this.zoomBy(1.5),Escape:()=>this.clearSelection()};i[t.key]&&(t.preventDefault(),i[t.key]())}),this.storyEl.addEventListener("click",e=>{const t=e.target.closest(".ck-remove"),n=e.target.closest(".ck-end-jump"),i=e.target.closest(".ck-locate");t?this.deselect(t.dataset.id):n?this._jumpToCard(n.dataset.id):i?this.reveal(i.dataset.id):e.target.closest(".ck-clear")&&this.clearSelection()}),this._resizeObserver=new ResizeObserver(()=>this._scheduleRender()),this._resizeObserver.observe(e),this._onFontsLoaded=()=>{this._measureLabels(),this._invalidateLayout()},document.fonts?.addEventListener("loadingdone",this._onFontsLoaded)}_toggleTextSize(e){const t=this.root.classList.toggle("ck-large-text");e.setAttribute("aria-pressed",t),this._measureLabels(),this._invalidateLayout()}_setSelection(e){this.selected=new Set(e);for(const e of this.lanesEl.querySelectorAll(".ck-event")){const t=this.selected.has(e.dataset.id);e.classList.toggle("ck-selected",t),e.setAttribute("aria-pressed",t)}this._renderStory(),this._stateChanged(),this.options.onSelectionChange?.(this.getSelection())}_setView(e,t){this.start=e,this.end=t,this._scheduleRender(),this._stateChanged()}_setHidden(e){this.hidden=new Set(e),this._renderLegend(),this._invalidateLayout(),this._stateChanged()}_setHover(e){if(e!==this._hoverId){this._hoverId=e;for(const t of this.root.querySelectorAll(".ck-event, .ck-card, .ck-end-jump"))t.classList.toggle("ck-hover",t.dataset.id===e)}}_stateChanged(){this.options.syncUrl&&(clearTimeout(this._hashTimer),this._hashTimer=setTimeout(()=>this._writeHash(),250))}_readHash(){const e=$(),t=t=>{const n=e.get(t);if(!n)return[];try{return n.split(",").map(decodeURIComponent)}catch{return[]}},n={},i=e.get("ck-view")?.split(",").map(Number);2===i?.length&&i.every(Number.isFinite)&&i[0]<i[1]&&([n.start,n.end]=i),e.has("ck-sel")&&(n.selected=t("ck-sel")),e.has("ck-hide")&&(n.hidden=t("ck-hide")),this.setState(n)}_writeHash(){const{start:e,end:t,selected:n,hidden:i}=this.getState(),s=$(),o=Math.min(6,Math.max(0,Math.ceil(3-Math.log10(t-e))));s.set("ck-view",`${+e.toFixed(o)},${+t.toFixed(o)}`);for(const[e,t]of[["ck-sel",n],["ck-hide",i]])t.length?s.set(e,t.map(encodeURIComponent).join(",")):s.delete(e);const r=[...s].map(([e,t])=>null==t?e:`${e}=${t}`).join("&");history.replaceState(history.state,"",`${location.pathname}${location.search}#${r}`)}_clampSpan(e){const t=this.options.maxSpan??Math.max(3*this._dataSpan,100);return Math.min(Math.max(e,this.options.minSpan),t)}_scale(){return(this.viewport.clientWidth||1)/(this.end-this.start)}_ratioAt(e){const t=this.viewport.getBoundingClientRect();return(e-t.left)/t.width}_extent(){let e=1/0,t=-1/0;for(const n of this.items)e=Math.min(e,n.from),t=Math.max(t,n.to??n.from);return this.items.length?[e,t]:[0,0]}_measureLabels(){const e=this._ctx??=document.createElement("canvas").getContext("2d"),t=document.createElement("span");t.className="ck-label",t.style.visibility="hidden",this.lanesEl.append(t);const n=getComputedStyle(t);e.font=`${n.fontStyle} ${n.fontWeight} ${n.fontSize} ${n.fontFamily}`,e.letterSpacing="normal"===n.letterSpacing?"0px":n.letterSpacing,e.wordSpacing="normal"===n.wordSpacing?"0px":n.wordSpacing;const i=n.textTransform;t.remove();for(const t of this.items){let n=t.event.title??"";"uppercase"===i?n=n.toUpperCase():"lowercase"===i&&(n=n.toLowerCase()),t.labelWidth=e.measureText(n).width}}_scheduleRender(){this._frame||(this._frame=requestAnimationFrame(()=>{this._frame=0,this._render()}))}_render(){const e=this.viewport.clientWidth;if(!e)return;const t=e/(this.end-this.start),n=e=>(e-this.start)*t,i=null==this._layoutScale||Math.abs(t/this._layoutScale-1)>1e-6;(null==this._layoutScale||i&&!this._zooming)&&this._layout(t),this._renderAxis(t,n),this._renderEvents(e,n)}_layout(e){const t=[];for(const n of this.items){if(n.category&&this.hidden.has(n.category)){n.lane=-1;continue}const i=null!=n.to,s=n.from*e,o=i?n.to*e:s,r=i?s:s-5,a=i?6:16,l=Math.max(o,r+a+n.labelWidth)+12;let d=t.findIndex(e=>e<=r);d<0?d=t.push(l)-1:t[d]=l,n.lane=d}this._laneCount=t.length,this._layoutScale=e}_invalidateLayout(){this._layoutScale=null,this._scheduleRender()}_renderAxis(e,t){const n=i.find(t=>t*e>=90)??i.at(-1);let s="",o="";for(let e=Math.ceil(this.start/n);e*n<=this.end;e++){const i=e*n,r=t(i).toFixed(1);s+=`<span class="ck-tick" style="left:${r}px">${f(g(i,n,this.m))}</span>`,o+=`<span class="ck-gridline" style="left:${r}px"></span>`}this.axisEl.innerHTML=s,this.gridEl.innerHTML=o}_renderEvents(e,t){const n=this.lanesEl.contains(document.activeElement)?document.activeElement.dataset.id:null,i=this._revealing,s=i?performance.now()-i.at:1/0;let o="";for(const n of this.items){if(n.lane<0)continue;const r=null!=n.to,a=t(n.from),l=r?t(n.to):a,d=r?a:a-5,h=r?Math.min(Math.max(0,-a),Math.max(0,l-a-n.labelWidth-6))+6:16,c=Math.max(l,d+h+n.labelWidth);if((r?l:c)<0||d>e)continue;const u=12+30*n.lane,m=this.selected.has(n.id),y=i?.id===n.id&&s<1500,$=`ck-event ${r?"ck-range":"ck-point"}${m?" ck-selected":""}${this._hoverClass(n)}${y?" ck-flash":""}`,g=`--ck-color:${f(n.color)};left:${d.toFixed(1)}px;top:${u}px`+(y?`;animation-delay:-${Math.round(s)}ms`:""),v=f(n.event.title??""),k=`type="button" class="${$}" data-id="${f(n.id)}" aria-pressed="${m}"\n title="${v} · ${f(p(n,this.m))}"`;o+=r?`<button ${k} style="${g};width:${Math.max(l-a,4).toFixed(1)}px">\n <span class="ck-label" style="left:${h.toFixed(1)}px">${v}</span></button>`:`<button ${k} style="${g}">\n <span class="ck-dot"></span><span class="ck-label">${v}</span></button>`}const r=24+30*this._laneCount;if(this.lanesEl.innerHTML=`<div class="ck-lanes-inner" style="height:${r}px">${o}</div>`,null!=n){([...this.lanesEl.querySelectorAll(".ck-event")].find(e=>e.dataset.id===n)??this.viewport).focus({preventScroll:!0})}i?.pending&&this._finishReveal(i)}_finishReveal(e){e.pending=!1;const t=[...this.lanesEl.querySelectorAll(".ck-event")].find(t=>t.dataset.id===e.id);if(!t)return;const n=this.lanesEl;(t.offsetTop<n.scrollTop||t.offsetTop+t.offsetHeight>n.scrollTop+n.clientHeight)&&(n.scrollTop=t.offsetTop-(n.clientHeight-t.offsetHeight)/2);const i=matchMedia("(prefers-reduced-motion: reduce)").matches;this.viewport.scrollIntoView({block:"nearest",behavior:i?"auto":"smooth"}),t.focus({preventScroll:!0})}_renderLegend(){this.legendEl.innerHTML=this.categories.map(e=>`<button type="button" class="ck-legend-item" data-category="${f(e)}"\n aria-pressed="${!this.hidden.has(e)}" style="--ck-color:${f(this.colorOf.get(e))}">\n <span class="ck-swatch"></span>${f(this._categoryLabel(e))}</button>`).join("")}_renderStory(){const e=this.items.filter(e=>this.selected.has(e.id)),t="right"===this.options.storyPosition;if(this.storyEl.hidden=!e.length&&!t,this.storyEl.classList.toggle("ck-empty",!e.length),!e.length)return void(this.storyEl.innerHTML=t?`<p class="ck-story-placeholder">${f(this.m.placeholder)}</p>`:"");const n=e.map(e=>({item:e,at:e.from,isEnd:!1}));for(const t of e)t.end&&t.end.value>t.from&&n.push({item:t,at:t.end.value,isEnd:!0});n.sort((e,t)=>e.at-t.at||t.isEnd-e.isEnd),this.storyEl.innerHTML=`\n <div class="ck-story-header">\n <span class="ck-story-title">${f(this.m.selectedEvents)} <span class="ck-count">${this.m.number.format(e.length)}</span></span>\n <button type="button" class="ck-clear">${f(this.m.clearAll)}</button>\n </div>\n <ol class="ck-story-list">${n.map(e=>e.isEnd?this._storyEnd(e.item):this._storyCard(e.item)).join("")}</ol>`}_storyEnd(e){const t=this.m,n=f(e.event.title??""),i=f(c(e.end,t)),s=f(m(e.start,e.end,t));return`\n <li class="ck-end" style="--ck-color:${f(e.color)}">\n <button type="button" class="ck-end-jump${this._hoverClass(e)}" data-id="${f(e.id)}"\n aria-label="${t.endsAria(n,i,s)}">\n <span class="ck-end-date">${i}</span>\n <span>${t.endOf(`<strong>${n}</strong>`)}</span>\n ${s?`<span class="ck-end-duration">${t.lasted(s)}</span>`:""}\n </button>\n </li>`}_jumpToCard(e){const t=[...this.storyEl.querySelectorAll(".ck-card")].find(t=>t.dataset.id===e);if(!t)return;const n=matchMedia("(prefers-reduced-motion: reduce)").matches;t.scrollIntoView({block:"nearest",behavior:n?"auto":"smooth"}),t.focus({preventScroll:!0}),t.classList.remove("ck-flash"),t.offsetWidth,t.classList.add("ck-flash")}_storyCard(e){const t=e.event,n=t.url&&/^https?:\/\//i.test(t.url)?t.url:null;return`\n <li class="ck-card${this._hoverClass(e)}" data-id="${f(e.id)}" tabindex="-1"\n style="--ck-color:${f(e.color)}">\n <button type="button" class="ck-remove" data-id="${f(e.id)}"\n aria-label="${this.m.remove(f(t.title??""))}">×</button>\n <div class="ck-meta">\n ${e.category?`<span class="ck-badge">${f(this._categoryLabel(e.category))}</span>`:""}\n <span>${f(p(e,this.m))}</span>\n </div>\n <h3 class="ck-title">${f(t.title??"")}</h3>\n ${t.description?`<p class="ck-description">${f(t.description)}</p>`:""}\n <div class="ck-card-actions">\n <button type="button" class="ck-locate" data-id="${f(e.id)}">${f(this.m.showOnTimeline)}</button>\n ${n?`<a class="ck-link" href="${f(n)}" target="_blank" rel="noopener">${f(this.m.readMore)}</a>`:""}\n </div>\n </li>`}_hoverClass(e){return this._hoverId===e.id?" ck-hover":""}_categoryLabel(e){return this.options.categoryLabels[e]??e}}export{v as Chroniko,h as formatDate,u as formatDuration,d as formatYear,s as parseDate};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chroniko",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "Render historical events on a single zoomable time axis. Plain HTML, CSS and JavaScript, no dependencies.",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",