Help on polishing a plugin: Navigate to a link from within a widget

Plugins
,
#1

With the help of @oeyoews we converted the beautifull knightlab-timelimeline to a plugin, that works quite nice. But I am not able to solve some issues yet. Currently my main issue is that I want the widget to be able to navigate to the tiddlers (I would like to use this with the linkcatcher to show the information that will and can not be displayed in the timline in an overlay)

This is my attempt that does not do the job:


const event = {
  start_date: startDate,
  text: {
    // Create a clickable headline that triggers tm-navigate
    headline: `<a href="javascript:;" 
                 onclick="$tw.rootWidget.dispatchEvent({type: 'tm-navigate', navigateTo: '${tiddlerTitle}'}, event); 
                          event.stopPropagation(); return false;">${headline}</a>`,
    text: processedText
  }

For those who enjoy bughunting:
Other issues are:
Solved: Display of dates before Christ.
Display of Lists in the timeline.

Here is the $widget (36.0 KB) and her is the entire plugin (36.0 KB)

I asked AI to create a chessboard widget and this is the result
#2

This approach obviously doesn’t work because the click event will be intercepted in tiddlywiki. My solution is to add events by traversing the corresponding DOM after rendering is completed, but I remember that timeline also has click events by default, and the two should conflict with each other. I haven’t had time to study it in depth yet.

1 Like
#3

Thank you, but you should use this new version of the Widget which has some further issues solved.$__plugins_oeyoews_timeline_widgetV8.js.json (36.8 KB)

#4

maybe simpler link would work

`<a href="#${tiddlerTitle}">${headline}</a>`
#5

Thank you @buggyj - but this reloads the wiki with only the linked tiddler open.

#6

HeyHo,
I made a new version of the Plugin which removes some bugs in displaying the tiddertext (such as the double appearance of media in text and media).

new widget (27.8 KB)

@oeyoews, I tried a new workaround to navigate tiddlylinks rsp. to open a modal by this trick in the widget - which still does not work. So your help on escaping the widggets DOM would be very welcome.

const links = container.querySelectorAll('a.tc-tiddlylink');
    if (links && links.length > 0) {
      links.forEach(link => {
        const href = link.getAttribute('href');
        if (href) {
          // Extract the tiddler name from the href
          const tiddlerTitle = decodeURIComponent(href);
          
          // Set onclick handler to create modal tiddler
          link.setAttribute('onclick', `
            // Create the modal tiddler
            $tw.wiki.setText('$:/temp/timelinemodal', 'text', null, '${tiddlerTitle}');
            // Navigate to the tiddler
            $tw.rootWidget.dispatchEvent({type: 'tm-navigate', navigateTo: '${tiddlerTitle}'}, event);
            event.stopPropagation();
            return false;
          `);
          link.setAttribute('href', 'javascript:;');
        }
#7

The ‘tm-navigate’ is handled by the $navigator widget not the rootwidget. dispatchEvent can be called on any widget and will ascend the widget tree to the navigate widget. so

myWidget.dispatchEvent({...})
1 Like
#8

Thank you for the hint… but I did not manage to implement it. Could you help a tiny step more.

#9

do not use $tw.rootWidget.dispatchEvent use ‘yourwidget.dispatch’ - maybe ‘this.dispatch?’

#10 
const links = container.querySelectorAll('a.tc-tiddlylink');
    if (links && links.length > 0) {
      links.forEach(link => {
        const href = link.getAttribute('href');
        if (href) {
          // Extract the tiddler name from the href
          const tiddlerTitle = decodeURIComponent(href);
          
          // Set onclick handler to create modal tiddler
          link.setAttribute('onclick', `
            // Create the modal tiddler
            $tw.wiki.setText('$:/temp/timelinemodal', 'text', null, '${tiddlerTitle}');
            // Navigate to the tiddler
           TimelineWidget.dispatchEvent({type: 'tm-navigate', navigateTo: '${tiddlerTitle}'}, event);
            event.stopPropagation();
            return false;
          `);
          link.setAttribute('href', 'javascript:;');
        }

Hi @buggyj :

TimelineWidget.dispatchEvent({type: ‘tm-navigate’, navigateTo: ‘${tiddlerTitle}’}, event); as above…
or
this.dispatchEvent({type: ‘tm-navigate’, navigateTo: ‘${tiddlerTitle}’}, event);
do not work yet…

#11

probably the code with need to be like this:

link.addEventListener('click', (event) => {
    $tw.wiki.setText('$:/temp/timelinemodal', 'text', null, '${tiddlerTitle}');
    // Navigate to the tiddler
    this.dispatchEvent({type: 'tm-navigate', navigateTo: '${tiddlerTitle}'}, event);
    event.stopPropagation();
    return false;
})
2 Likes
#12

correction:

link.addEventListener('click', (event) => {
    $tw.wiki.setText('$:/temp/timelinemodal', 'text', null, tiddlerTitle);
    // Navigate to the tiddler
    this.dispatchEvent({type: 'tm-navigate', navigateTo: tiddlerTitle});
    event.stopPropagation();
    return false;
})
1 Like
#13

you-reka (heureka) :wink: