How to navigate to ids within a tiddler? Or How to add refresh between two steps of a widget

[Riz]

I was collecting a lot of articles in my TW. Now these HTML obviously have tags with ids associated especially headings (eg: <h2 id="myid">Subheading</h2>).
I was trying to build a build a widget to navigate to these ids (I guess the term is subtiddler navigation)

The idea is to have a widget that takes two parameters: a title and an id. It should then add the tiddler to the storylist followed by scrolling to the id.

Now I was partially successful in getting what I want by tweaking action-navigate widget. Below is the relevant part of widget.

this.dispatchEvent({
        type: "tm-navigate",
        navigateTo: this.actionTo === undefined ? this.getVariable("currentTiddler") : this.actionTo,
        navigateFromTitle: this.getVariable("storyTiddler"),
        navigateFromNode: triggeringWidget,
        navigateFromClientRect: bounds && { top: bounds.top, left: bounds.left, width: bounds.width, right: bounds.right, bottom: bounds.bottom, height: bounds.height
        },
        navigateSuppressNavigation: true
    });

   
if (document.getElementById(this.uniqueid) != null) {
        document.getElementById(this.uniqueid).scrollIntoView();
}

As you can see, it only works if you double click the button. At first click the tiddler is added to storylist, and second click scrolls the id into view (Note that the navigateSuppressNavigation must be set to true for this to work).

I assume it cannot find the id right after the navigation is beacuse there is a need for a refresh between the two steps?

My question is: Is there a way to achieve this?

PS: I tried a few other things namely

1. Have two calls of action-widget under the same button like:

<$button>
<$action-anchor $to="MyTiddler" $id="uniqueid"/>
<$action-anchor $to="MyTiddler" $id="uniqueid"/>
</$button>

2. Programmatically simulate double click on the button with

document.getElementsByClassName('my-unique-class')[0].dispatchEvent(new MouseEvent('dblclick', {'bubbles': true}))

I mean, it is ewwww, but it shows how desperate I am to get this to work.


Sincerely
Riz

[coda coder]

Hi Riz

You should probably read my response here before you spend any more time with this: https://groups.google.com/d/msg/tiddlywikidev/C2JWmchpyaw/czI86aDvAAAJ

But understand, no one will stop you creating ids... if they are replicated via transclusion, DOM APIs will return a node collection. But the problem there is, no one expects ids to be duplicated and return an array/collection.

[Rizwan Ishak]

Hey Coda,

I understand that. This is a special case scenario where usual TW stuff like transclusion won't be used. Plus, I cannot help the existence of ids in the content. As I pointed out, I am merely saving content from the web, which already has ids and id based navigation. 

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywikidev/NcCXnZu-OJE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywikide...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/20d1c3fb-5f94-427b-a7f5-ca10c27773eb%40googlegroups.com.

[coda coder]

Sorry. My bad. I didn't read the whole thing. :blush:

To unsubscribe from this group and all its topics, send an email to tiddly...@googlegroups.com.

[TonyM]

If it helps there is prior work on using anchors in tiddlywiki. It relies on an unconventional use of ##

Regards
Tont

[Rizwan Ishak]

I am aware of that. However if I recall correctly,
1. it only aids navigation if the link and id exists within same tiddler or
will scroll to id if it is already present in storylist.
2. Need to modify ids to fit its unconventional pattern.

You see, the code given in my original post already solved the issue of
scrolling to an id if it exists in the storylist, without having to modify
ids in any manner. My issue was if the id is not present in the story list,
it takes 2 clicks to achieve the navigation: first to bring tiddler to
storylist, second to scroll.

> --
> You received this message because you are subscribed to a topic in the
> Google Groups "TiddlyWikiDev" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/tiddlywikidev/NcCXnZu-OJE/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> tiddlywikide...@googlegroups.com.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/tiddlywikidev/7dd87c37-15ad-447d-8316-6db99459c52c%40googlegroups.com.

[PMario]

Hi Riz,

You are right. The IDs are not available at the time the widget is called the first time.

You could try an "ugly hack" with setTimeout(). You could wrap your if (document.getElementById(this.uniqueid) != null) {
code into a function eg: delayScrollIntoView()... or something similar. And call it from setTimeout() eg: $:/config/AnimationDuration + 50 ms

Or hardcoded 450ms. ..

just an idea.

There is a th-navigating hook, but it is called to early. ... So if you want a clean fix, it would be needed to create a th-post-navigating hook.

have fun!

mario

[TonyM]

Riz,

I understand. This limitation is really because we have a dynamic HTML page here, and the HTML standards did not seem to predict how we can use it in tiddlywiki.

One passing thought, what if select tiddlers not already in the "visible" story, could be display: none (as opposed to display: hidden) below the story and somehow displayed when an anchor to something in them is activated. This of course may not scale too well, but may work for a large number of cases. Come to think of it tiddlers are in memory anyway, perhaps its is not so silly.

Tiddlers to be treated this way could be tagged as such, and those not in the current story are "display: None" and once opened and displayed are not. In some ways this would be an open tiddler cache and since present on the page should be fully addressable with anchors. This could also be used to activate on demand stylesheets.

Regards

Tony

On Thursday, September 19, 2019 at 3:40:20 PM UTC+10, Riz wrote:

I am aware of that. However if I recall correctly,
1. it only aids navigation if the link and id exists within same tiddler or
will scroll to id if it is already present in storylist.
2. Need to modify ids to fit its unconventional pattern.

You see, the code given in my original post already solved the issue of
scrolling to an id if it exists in the storylist, without having to modify
ids in any manner. My issue was if the id is not present in the story list,
it takes 2 clicks to achieve the navigation: first to bring tiddler to
storylist, second to scroll.

On 19 September 2019 11:02:41 AM TonyM <anthon...@gmail.com> wrote:

> If it helps there is prior work on using anchors in tiddlywiki. It relies
> on an unconventional use of ##
>
> Regards
> Tont
>
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "TiddlyWikiDev" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/tiddlywikidev/NcCXnZu-OJE/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to

> tiddly...@googlegroups.com.

[Riz]

Thank you Mario!!!
Just saved me hours of further headbashing.

So status report. I don't have enough knowledge about the codebase to add a post navigation hook.
Instead, I tried adding the event in handleNavigate function after the actual navigation code. This did not work either.

But settimeout worked!! Through trial and error, I reached the conclusion that 4ms is the minimum time delay required to let the browser find the newly added id.
My assumption is, this 4ms mark is either dependent on the specifications of the system running it, or dependent on some setting in TW5 code.
However for my purposes, this is far more than enough. Now I have a widget that can navigate to an id defined midway in a tiddler, if the tiddler name and id name is given as parameters.


May I suggest something interesting that come up during this endeavor. As coda mentioned above, TW5 cannot use ids for subtiddler navigation. However we can use practically anything else.
Imagine an action widget that says

document.querySelector("div > p.myclass").scrollIntoView();

May be TW5 can even specify some data-Attribute value set aside for this? Like

val element = document.querySelector("h1[data-anchor=firstlink]");
element.scrollIntoView();

Sincerely

Riz

[Riz]

Hi Tony,

Thanks for the reply. You are right, that would not have scaled well. Plus, we have a solution. Possibly something we can expand upon too! See above

Sincerely,

Riz

[ajarmund]

Hi!

uplight-dev posted a nice way to catch anchor links in story.js, and ids can easily added in heading.js, so the problem I guess, as mentioned above, is making unique ids. I was wondering if it could be possible to generate ids in heading.js by keeping track of nested headings, say we have a tiddler called "tiddlertitle";

! Header1 <- id = tiddlertitle:Header1

!! Header2 <- id = tiddlertitle:Header1:Header2

!!! Header3 <- id = tiddlertitle:Header1:Header2:Header3

!! Header2b <- id = tiddlertitle:Header1:Header2b

!!! Header3 <- id = tiddlertitle:Header1:Header2b:Header3

Can the parser keep track of this, or will it be awfully complicated?

It wouldn't guarantee uniqueness, of course, but it could still be useful, especially if transclusions would be treated as "ordinary" tiddler content (inheriting the nesting from the transcluding tiddler). Is the structure of when/how different parts of the wiki/DOM is parsed documented anywhere?

Best,

Anders

[Jeremy Ruston]

Hi Anders

Just to note that v5.1.23 has extended the tm-scroll message to enable it to be used much more easily for scrolling within a tiddler:

https://tiddlywiki.com/prerelease/#WidgetMessage%3A%20tm-scroll

Note also that although there’s no easy way to assign an ID to a heading, there is a syntax for adding a class:

!.myClass This is the heading

See:

https://tiddlywiki.com/prerelease/#Headings%20in%20WikiText

Best wishes

Jeremy.

You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/8e7a0e06-8b8d-435e-8f32-419fb9e9f81bn%40googlegroups.com.