Sunorhc.Timeline

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.

Features

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!

Getting Started

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

Usage

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())
    })
})()

Documentaion

Please check the Wiki for updates as they occur.

Wiki Home

Demo Build

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!

Version 0.9.1 with tester

Coverage

Latest coverages on 11 June, 2024

Contributors

ka2 (Katsuhiko Maeno) https://ka2.org/

ka215 / sunorhc.timeline Goto Github PK