Knight-Lab-Timeline.js now working as a TW Plugin

Plugins
#2

The problem is a catch statement without a matching try.

Starting on line 59 we see:

TimelineWidget.prototype.loadTimelineJS = function() {
    var self = this;
    
    // Load CSS if not already loaded
    if(!document.getElementById("timelinejs-css")) {
        var link = document.createElement("link");
        link.id = "timelinejs-css";
        link.rel = "stylesheet";
        link.href = "https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css";
        document.head.appendChild(link);
    }
    
    // Load JavaScript if not already loaded
    if(typeof TL === "undefined") {
        var script = document.createElement("script");
        script.src = "https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js";
        script.onload = function() {
            self.createTimeline();
        };
        document.head.appendChild(script);
    } else {
            // Timeline already loaded, create directly
            self.createTimeline();
        }
    } catch(e) {
        console.error("Timeline plugin error:", e);
    }
};

That catch at the end does not have a matching try. I don’t know the logic, and don’t have time to investigate right now, but perhaps that will get you moving.

1 Like
#3

Cool, I like this timeline library. I just tried to make a plugin, and it works really well.

image
image1920×1201 71.6 KB

3 Likes
#4

Great, did you publish it in your Library?That would be great!

#5

Since I don’t have the need to use it for the time being, I just wrote a simple example, which is not easy to use.

#6

Thank you @oeyoews ! could you wrap your plugin into a json and upload it or send me the link to your demowiki? Somehow I cannot get it to work yet.

#7

$__plugins_oeyoews_timeline.json (330.8 KB)

#8

Hi @oeyoews
with some artificial help I implemented the filterfunctions and and more configuration options. Here is the enhanced version.
like oeyoews’ version it needs quite a recent TW-Version because it otherswise says options is not defined.

2 Likes
#9

Update:
Features

  • Filter Support: You can specify a filter to select which tiddlers should be included in the timeline.
  • Configurable Fields:
  • Default fields are start and end for dates
  • Text content is the rendered tiddler by default
  • Date Parsing: The widget can handle various date formats:
  • ISO format (YYYY-MM-DD)
  • Year only (YYYY)
  • Year-month (YYYY-MM)
  • TiddlyWiki’s timestamp format

Example Usage

<$timeline
filter="[tag[invention]]"
startField=“start”
endField=“end”
timelineTitle=“History of Technology”
timelineDescription=“A timeline of technological developments.”
/>

Attributes:

filter: TiddlyWiki filter expression to select tiddlers
titleField: Field to use for event headlines (default: "title")
startField: Field containing start date (default: "start")
endField: Field containing end date (default: "end")
textField: Specific field to use for content (default: rendered tiddler)
mediaField: Specific field to use for images (default: "media" if empty and undefined first image in text)
timelineTitle: Title for the timeline (default: "Timeline")
timelineDescription: Description text for the timeline
titleImage: URL for the title image
titleImageCaption: Caption for the title image
startYear
endYear
height

$__plugins_oeyoews_timeline_withsidebar.json (372.4 KB)

Wikitext-formating is not rendered correctly yet… But apart from that most things work.

3 Likes
Help on polishing a plugin: Navigate to a link from within a widget
#10

the is a function to covert wikitext to html:

var getValueAsHtmlWikified = function(text,mode) {
	return $tw.wiki.renderText("text/html","text/vnd.tiddlywiki",text,{
		parseAsInline: mode !== "block",
		parentWidget: mywidget
	});
};
1 Like
#11

Thank you, this really saved a lot of codelines :wink:

Filterquestion: How to detect tiddlers that have the same tags as a configtiddler
#12

Thanks to @buggyj there is a new version with working WikiLinks as eventtitles Timelineplugin (362.1 KB)

3 Likes
#13

New Version with a timeline-builder-sidebar.
$__plugins_oeyoews_timeline_withsidebar.json (372.4 KB)

Some bugs yet have to be tracked:
e.g. :

  • When using the new button to copy the generated timeline code, the last two attributes do not work yet.
  • I would like to be able to build boolean filters in the Timelinebuilder
2 Likes
#14

Is there a demo-wiki showing its use? I can guess from its docs what it’s supposed to do, but I’d love to see it in action before I try to set it up.

#15

I already use it in class, it works… It is quit a lot of work to enter all the dates to make a good detailed timeline so it may take some time.

#16

Don’t go out of your way for this. I didn’t know if there was a sample available. I’m used to plugins having at least minimal examples. But I wasn’t asking you to create one, just hoping there was one that already existed.

1 Like
#17

Had a quick play with this this afternoon. Very nice. It’s much more presentation than the Gantt chart of vis.js.

I may get some use out of this. Thanks.

1 Like
#18

I’ve done a quick set of data and you can see it in vis.js and knight timlines.

2 Likes
#19

Thank you!
The true power of the knightlab-lib gets visible if you use text, media and captions for the entries…

1 Like
#20

A couple of random images from my other wiki and a bit of blah text added to the first couple of dates.

#21

Thank you very much. This makes it much easier to grok!

1 Like