Solving navigation within tiddlers

[Riz]

Hello Community,

You know at least rarely we have that long tiddler and wish there was a way to navigate to parts of tiddler same way you navigate to different tiddlers. Well say no more.

How to see it is working?
1. Download the 2 JSONs attached
2. Download TWO empty wikis. Drag and drop "working-example-with-id" to emptywiki-1 and "working-example-without-id-reccommended" to emptywiki-2
3. Refresh both wikis :IMPORTANT:
4. Open the tiddler named "One"
5. Click on the links and see if it is moving you correctly to intended targets.
6. Now close tiddler name "One" :IMPORTANT:
7. Open tiddler named "Two"
8. Click on the link and see if you are correctly navigated to third heading in tiddler named "One"
9. Repeat the process in emptywiki-2


working-example-with-id: How to use it?
Remember one thing. You should not use it. Coda has very well explained why TW community should not use it in here.

Then why are you giving us the "working-example-with-id"?
Well, funsies. Sometimes we have to do exactly the thing we are told not to. So who cares if HTML police will come after us? Live precariously and die while you are still handsome, am I right?

Enough. How to actually use it?

1. When you are writing a long tiddler and have a part you want linked to, give it a UNIQUE "id". For eg:

<div id="ultimateIDtheSecond"> Whatcha lookin' at</div>

or

<h2 id="pleasePassMeSomeCurry">Horrified Rabbit</h2>

2. Now you can link it like this

<$link to="mytiddler" scroll="no" anchor="ultimateIDtheSecond">Link to ultimateIDtheSecond</$link>
<$link to="myOthertiddler" scroll="no" anchor="pleasePassMeSomeCurry">Link to pleasePassMeSomeCurry</$link>

3. Note a few important things:
   - As you must have guessed, anchor part is where you give the id to link to.
   - scroll="no" is a must. Why is it a must? Well if scroll is set to yes(which it is by default), TW5 will try to scroll to the title of the tiddler.
   - You can link to the ID from any tiddler, anywhere (Sure, within the same wiki. This is not magic, after all)
   - If you are linking to IDs in the same tiddler, you may drop the "to" part.

   <$link scroll="no" anchor="ultimateIDtheSecond">Link to ultimateIDtheSecond</$link>

   - If you are too lazy to write 'scroll="no"', you may drop it. However you will have to press down Control when you click.

Then how to use working-example-without-id-reccommended

Well, the same. Except this time, you have to write "data-id" instead of "id" inside the html tags. So it will be like

<span data-id="tiddloidIsAwesomeGuys">I will admit to nothing</span>
<article data-id="oneLastTimeSomebodyPassMeTheCurry">Have you thought about how we might be the last few generations of humans to ever exist?</article>

Links widget should be used to same way as above. Eg:

<$link to="mytiddler" scroll="no" anchor="tiddloidIsAwesomeGuys">Link to tiddloidIsAwesomeGuys</$link>

What happens if two elements have same data-id or we transclude tiddlers and thus data-ids got duplicated?
Well, browser will scroll you to whichver instance is at the top most.

But the JSON is large!
Well, the whole feature is under 20 lines of code. Not bad for someone whose primary language is not JS(pats on the back). However, those 20 lines appear between some big core tiddlers. So you know how these things are. The code is here. If anybody want it as a part of core, they have all the necessary permissions to create a PR.
PS: I swear I could have done it under 15 but VS-Code said it has to look pretty:/

Can we use both JSONs in same wiki?
No. Although if you want links targetting both ids, data-ids or you want to link to things in a more generalised way - say link to a div with class "whiteGlobularCap" or something, it will only require very slight modifications.

There are some edge cases here. What to do?
I am not promising any support. However if you post it, I might be atleast curious to see what happened?

Credits

PMario figured out a rather important piece of puzzle here

Are you batman?
I will neither confirm nor deny that. Only nobody has seen batman and me in the same room.

Sincerely,
Riz

Solving big things in small ways.

[Mohammad]

Hi Riz,

Thank you for your efforts.

 I like the one with no id as it is more Tiddlywiki friendly!

I hope you discuss this with Jeremy and hopefully it can be supported!

--Mohammad

[David Gifford]

Wow, that is great Riz.

I added a link to this page in the Toolmap, in the links section and the navigation misc section, but with the caution that this method overrides core tiddlers.

[TonyM]

Riz

Thanks for his work. I am wrong or is this fact curious?

Links widget should be used to same way as above. Eg:

<$link to="mytiddler" scroll="no" anchor="tiddloidIsAwesomeGuys">Link to tiddloidIsAwesomeGuys</$link>

That is, the anchor is automatically recognising data-id ?

It's pointing to an interesting fact about html

Regards

Tony 

[Riz]

Hi Mohammad,

Definitely, the one without ids is the recommended one. I just left the one with id there in case say, somebody copies an entire article from a website and want to build a mini table of contents for that article without having to go through the pain of converting all ids.

As for supporting it, I was thinking another modification. Currently in TW5 there is support for a pre-navigation hook - for something to happen just before navigation to start. However if we can have a post navigation hook, this method can be implemented in a more native TW5 way, as pointed out by PMario.

[Riz]

Glad you liked it David. I appreciate you adding to the toolmap :-)

[Riz]

You are welcome Tony!

No, it is not automatically being recognized. The attribute anchor is converted to 'data-id=id' format behind the scenes.The we instruct the document to specifically find an attribute called data-id and a value we gave, and scroll to it. The good thing is, this can be expanded. Document can be instructed to find anything including specific classes, other attributes etc.

If we carefully plan it, we can have buttons that can modify even the non transcluded sections within tiddlers. However, TW5 already has the more robust transclusion mechanism for it, so I did not bother to explore.

Sincerely,

Riz