How can I use this tool offline?

[sannyii]

First ,this is a wonderful TOOL. Love it. BUT, I am a Chinese Developer, you know the web-is-blocked problem. How can I use this tool offline? Thanks very much

[oleksandr-danylchenko]

I and my team develop an offline-first educational mobile application with TimelineJS library. Unfortunately, there's no built-in switch in the TimelineJS itself.

Firstly, you won't be able to use CDN. So you'll need to use the @knight-lab/timelinejs package to import the TimelineJS from there. Also, you'll need a bundler like Webpack or Rollbar which will bundle JS code with the CSS styles.

Here's a very simplified copy of our TL component wrapper in React:

import { Timeline } from '/@knight-lab/timelinejs';
import  '@knight-lab/timelinejs/dist/css/timeline.css';

const WebtextTimeline = (props) => {
    const { data, options } = props;

    const timelineElementRef = useRef();
    const timelineInstanceRef = useRef();

    useLayoutEffect(() => {
        // Prevents duplicated Timeline instances on rerenders
        const { current: timelineInstance } = timelineInstanceRef;
        if (timelineInstance) return;

        const { current: timelineElement } = timelineElementRef;
        const timeline = new Timeline(timelineElement, data, options);
        timelineInstanceRef.current = timeline;
    }, [data, options, onSlideChange]);

    return (
           <div ref={timelineElementRef} style={{ width: '100%' }} />
    );
};

Secondly, before showing any content we download the documents with all the slides. Then we parse it to get every used image URL. Download that images and store them on the disk. In the example above you can see that we pass the data prop to the WebtextTimeline component (its structure described here). The data.title and data.events don't contain the image URLs that lead to the network. They are replaced with URLs that point to locally stored images.

---

In that way, we're able to use TimelineJS offline in our app. Feel free to leave more questions in the thread :raised_hands:

[sannyii]

THAT is a lot helpppp! BUT I only write vue and now I use vue3, ALSO I can learn React now! If you can give me a VUE3 Version Code , I would much appreicaite! PS. this is amazing! Thank you again.

I also find this template

[oleksandr-danylchenko]

If you can give me a VUE3 Version Code

Unfortunately, I wrote Vue only for one project at university 2 years ago. So I don't think that I'm proficient enough to provide the code for the component :sweat_smile:

But that template looks correct at the first glance. Also, it does pretty much the same thing my React component does. So it's definitely worth a try :+1:

[sannyii]

YES!!! Let me learn React and Try. Thanks again and Appreciate your time~~~

[oleksandr-danylchenko]

You're welcome :raised_hands:

[sannyii]

Success!!! I got it on my web programe! Wow!!! I also want to know can I get this click movement under control? For Example , I click the red one and trigger my event!

[oleksandr-danylchenko]

Do you mean that you want to intercept the click on the Markers?

Timeline has a bunch of events you can listen to - https://github.com/NUKnightLab/TimelineJS3/blob/master/API.md#events Personally, I listen to the change event to react on the currently displayed slide: timeline.on('change', ({ unique_id }) => onSlideChange?.(unique_id));

[sannyii]

YES!!! YOUR Efforts is remarkable!!

[sannyii]

Sorry again! How can make these into Chinese?

WOW I find it！ http://timeline.knightlab.com/docs/options.html

OK！ That's enough and perfect!

Good Luck !

I stand with Ukraine

[oleksandr-danylchenko]

You're welcome :wink:. And thank you for the wishes :hugs:

[zhehenyuhang]

Hello, have you ever used json to transfer data? The new json is customized through zh-cn.json. I don't understand the data attributes.

If you have used it, can you tell me how to use it?