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

Plugins
#1

As a historyteacher, I always wnated to have a great timeline in Tiddlywiki.
I used Emkay’s Vis.js-timeline but for quite a while I am not happy with it…
The Knightlab Timeline is better at parsing different date-Types and has a far better visualization.

But without the great option of simply filtering dates in TW it is no fun making a timeline either…So I tried to implement this in TiddlyWiki.

I tried to convert it into a plugin… but I failed… it says the widget is undefined. Can anybody help? Why is it so hard to get a widget to work correctly…

PS: With some help of @Scott_Sauyet , @oeyoews and claude.ai we now have quite a good working version. If you want to help to fix the minor issues like mainly wikitext - formatting, it is in the widget part of the plugin where the filterresult is converted into timline-data.

1 Like
#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

2 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.

1 Like
#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_timelineV5.json (362.1 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:

#12

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

2 Likes