HTML anchor in a list widget?

#1

Hi everyone,

I want to export a loooong static html showing the results of a filter. Each tiddler will have an html details element, and the summary will show $view = title and the details will show $transclude = text. This much I know how to do.

The part I can’t figure out is this: I would like each tiddler displayed by the list widget to have a unique HTML anchor. I could add a unique anchor in a custom field of each tiddler, but what would I add to the list widget so that the anchor would be there, so that when clicking a link to the anchor from somewhere else, it would take me to that section of the static html?

2 Likes
#2

You can use anchor links if you only want to link from within the same large tiddler. I don’t think there is any technique to deep link into a tiddler from the outside, but I may be missing it.

This examples is not complete, as it really should use the qualify macro somehow, but it should give the general sense of it:

Long List.json (645 Bytes) (drag onto tiddlywiki.com)

<div style="column-width: 8em;">
<$list filter="[tag[Filter Operators]sort[]]" counter="i">
   <a href=`##op-$(i)$` class="tc-tiddlylink"><$text text={{{ [{!!title}removesuffix[ Operator]] }}} /></a><br/>
</$list>
</div>

<hr/>

<$list filter="[tag[Filter Operators]sort[]]" counter="i">
  <a id=`#op-$(i)$`></a><br/><br/>
  <details>
    <summary><$link/></summary>
     <$transclude $mode="block" $tiddler="$:/editions/tw5.com/operator-template"/>
     <$transclude $mode="block" />
  </details>
</$list>

Note that when we generate the ids for each section (in the lower half) choose something like "#op-17" including the leading octothorpe (#). The links (in the upper half) link in turn to ##op-17. When you select that link, the browser sees the initial octothorpe as a signal that it wants to jump to the item with the id in the remainder of the string, namely #op-17.

While it’s not complete, I’m hoping it will be a good start for you.

2 Likes
#3

Thanks Scott, that is definitely a good start! I can take this from here. Blessings!

#4

Here is my final version. Apparently with this I don’t even need unique id’s?

<div style="column-width: 16em;">
<$list filter="[search:article[yes]!tag[.Transfers]sort[order]]" counter="i"><a href=`##op-$(i)$` class="tc-tiddlylink"><$text text={{{ [{!!title}] }}} /></a><br></$list>
</div>

<hr/>

<$list filter="[search:article[yes]!tag[.Transfers]sort[order]]" counter="i">
  <a id=`#op-$(i)$`></a><details><summary><span class="subtopicwine"><$view field="title"/>&nbsp;»&nbsp;^^<$link><span style="fill: #ccc;">{{$:/core/images/link|16px}}</span></$link>^^</span></summary><span class="indent1">

<$transclude field="text" mode="block"/>

</span></details>
#5

ooooohhh, I get it now, this is a counter. Shoot. So as I add more sections, the link for the sections will change. And it is such a cool answer, too!

So, setting aside the issue of the toc at the top, there is no way to do something like this for the bottom section?

where $tid$ = {{!!foo}} (the foo custom field of each tiddler in the list)

<a id="#$tid$"></a>

And then in the foo field have #bar etc as the unique id’s?

#6

I’m on my mobile phone now and can’t test, but that should work fine, and would probably be more useful than my counters. I’m fact that demo would be better if I used the abbreviated title used in the index as the main part of the the id. Perhaps I’ll try that when I’m back behind a keyboard larger than my palm.

But you’ll have to look out for spaces and other special characters in that field. You might look at slugify it you go this route.

1 Like
#7

I created another version. It uses the titles for ids (you could use any field, of course), and runs them through slugify to remove any special characters, including spaces. Typically this is used for URLs, but it is also appropriate for DOM ids.

It also incorporates qualify. This handles the case where you have multiple tiddlers that would otherwise generate the same id. Easiest to test is if you simply transclude Long List into a second tiddler. If both are open in the story rive, when you click the link, it would take you to the first-opened one, even if it was in another tiddler. Qualify gives us a key unique to our current path, which we append to the generated ids.

Long Lists.json (883 Bytes)

1 Like
#8

Hi Scott

I finally got a chance to try this out just now. This is great! Thank you so much!

[edit: I looked up the answer to my question about why there is a suffix. Got it. Just one remaining question: will the suffix change each time I export to static? That would defeat part of my purpose, that of being able to share links to a specific section, links that will not change as I update the file.]

1 Like
#10

I have very little experience with static exports. My guess is that so long as your structure doesn’t change, the suffix will remain consistent. But if your content is currently transcluded from Tiddler A, and you decide to wrap it up so you transclude Tiddler B, which transcludes Tiddller A, then they would likely change.

However, I think that if your case is about static exports, then you don’t need the suffix at all. The only reason to include it was to distinguish, for instance, in my example, the ##getindex-operator found in Long List from an identically named one in Another Long List, which transcludes Long List.

If you’re doing static imports, you can easily avoid that scenario.

That would remove the need for the wrapping <$let> widget, leaving something like

<div style="column-width: 8em;">
<$list filter="[tag[Filter Operators]sort[]]">
   <a href={{{ [{!!title}slugify[]addprefix[##]] }}} class="tc-tiddlylink"><$text text={{{ [{!!title}removesuffix[ Operator]] }}} /></a><br/>
</$list>
</div>

<hr/>

<$list filter="[tag[Filter Operators]sort[]]">
  <a id={{{ [{!!title}slugify[]addprefix[#]] }}} ></a><br/><br/>
  <details>
    <summary><$link/></summary>
     <$transclude $mode="block" $tiddler="$:/editions/tw5.com/operator-template"/>
     <$transclude $mode="block" />
  </details>
</$list>
1 Like
#11

Oh, okay that makes sense. No, I don’t really need the suffix.

Thanks again for the time you have taken on this. This opens up some interesting new possibilities.

#12

Very much my pleasure!