See the future, reflect on the past. Control time with Sunorhc.Timeline.
At last, the long-awaited successor to jQuery.Timeline is here.
Sunorhc.Timeline inherits the useful features of its predecessor and breaks new ground.
Sunorhc.Timeline is not a library that simply refactors the source code of jQuery.Timeline.
It is a type-safe application that inherits only the useful specifications of its predecessor and is completely redesigned from scratch in TypeScript.
We use Vite for development and builds, Vitest for coverage testing, lz-string for event data cache compression, and pino for logger.
- Option settings similar to jQuery.Timeline
- Type-safe robustness and extensibility with TypeScript
- High degree of customization freedom
- High performance with asynchronous event loading
- Supports operation on touch devices
More details will be coming soon, so stay tuned!
To get started, first get the library in one of the following ways:
npm install sunorhc.timeline
git clone https://github.com/ka215/sunorhc.timeline.git
- Download latest release
The following files stored in the dists
directory in the package are the core files of the library.
css/sunorhc.timeline.css
js/sunorhc.timeline.js
Each package also includes a gzip compressed file, so please use whichever you need.
Alternatively, you can load the relevant resources via a CDN.
- CSS:
https://cdn.jsdelivr.net/npm/[email protected]/dists/css/sunorhc.timeline.css
- JS:
https://cdn.jsdelivr.net/npm/[email protected]/dists/js/sunorhc.timeline.js
- Include the CSS file in the head tag of your HTML and load the JS file before the end of the body tag.
<link rel="stylesheet" src="/path/to/css/sunorhc.timeline.css">
<script src="/path/to/js/sunorhc.timeline.js"></script>
- Then, prepare a container element within the body tag to display the timeline.
<div id="myTimeline"></div>
- Finally, instantiate the timeline component within the
script
tag to complete the process.
Sunorhc.Timeline.create('myTimeline', { sidebar: { items: [ { type: 'text', label: 'Row 1'} ] } })
Note: Currently instantiation will fail unless at least one sidebar item is defined.
Note: The instantiated timeline component is automatically registered to the global Window object. To access the instance after it is created, refer to the window.SunorhcTimelineInstances
property.
Note: To control the component after it is instantiated, we recommend using asynchronous instantiation, as see below.
(async () => {
await Sunorhc.Timeline.create('myTimeline', { sidebar: { items: [ { type: 'text', label: 'Row 1'} ] } })
.then(thisInstance => {
console.log(window.SunorhcTimelineInstances, thisInstance.getOptions())
})
})()
Please check the Wiki for updates as they occur.
The demo on the Github page below allows you to try out various features of the timeline component.
Come and experience the potential of Sunorhc.Timeline!
Latest coverages on 11 June, 2024
- ka2 (Katsuhiko Maeno) https://ka2.org/
Code and documentation copyright 2024- the ka2. Code released under the MIT License.