Show additional info in TOC sidebar

Is there a way to show more content in addition to title/caption in a select-expandable TOC?

Use case: I’m using built-in toc-selective-expandable macro. I have some tiddlers listed in TOC, usually at second-level or more that have a field added with variable value when they are “complete.” I want to indicate in TOC that such a tiddler is complete.

I was thinking of showing the caption and adding a mark/glyph in the TOC list to show the tiddler is complete. How do I go about doing this?

EDIT: Anyone who considers using this as a basis for their own code should consider the below from @EricShulman . This code is meant to be a demonstration of the fact that such a TOC can be constructed, and works specifically under unique tagging conditions which may not match your own. Further work may be required to make functional for your setup. Use caution. Always backup.

Something like this?

Been meaning to make some modifications to this code, but what you’re talking about should definitely be doable – you could use this as a start

\define toc-item(item, level)
<$set name="state" value=<<expand>> >
  <$set name="toc-item-class" filter="[<__item__>addsuffix[-]addsuffix<__level__>]" value="toc-item-selected" emptyValue="toc-item">
    <li class=<<toc-item-class>> >
      <$reveal type="nomatch" state=<<state>> text="show">
        <$button set=<<state>> setTo="show" class="tc-btn-invisible">
          {{$:/core/images/right-arrow}}
          <$link to=<<__item__>>>
            <$view tiddler=<<__item__>> field="caption">
              <$view tiddler=<<__item__>> field="title"/>
            </$view>
          </$link>
        </$button>
      </$reveal>
      <$reveal type="match" state=<<state>> text="show">
        <$button set=<<state>> setTo="" class="tc-btn-invisible">
          {{$:/core/images/down-arrow}}
          <$link to=<<__item__>>>
            <$view tiddler=<<__item__>> field="caption">
              <$view tiddler=<<__item__>> field="title"/>
            </$view>
          </$link>
        </$button>
      </$reveal>
      <$list filter="[all[current]tag[Completed]]">
        <span class="tc-tag-label">Completed</span>
      </$list>
      <$reveal type="match" state=<<state>> text="show">
        <ol>
          <$list filter="[tag<__item__>!has[draft.of]sort[created]]">
            <$macrocall $name="toc-item" item=<<currentTiddler>> level={{!!level+1}} />
          </$list>
        </ol>
      </$reveal>
    </li>
  </$set>
</$set>
\end
<ol class="tc-table-of-contents">
  <$list filter="[tag<currentTiddler>!has[draft.of]sort[created]]">
    <$macrocall $name="toc-item" item=<<currentTiddler>> level="1" />
  </$list>
</ol>

Hello @well-noted,
that looks very good.
Would you please give an example of how it’s used.
Tiddler tagging, fields required etc.
I am sure it is simple but I am missing something.
Thanks,
Sunny

I use this as a template, but you can see how it works by adding the content to a new tiddler.

Anything that is tagging that tiddler will show up in the TOC list. And if it is tagged Completed the tag will appear (you will need to add the style code if you want it to show up as if it were a tag:

<style>
  .tc-tag-label {
    background-color: #ecf2f9;
    border: 1px solid #bbc8d6;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.8em;
    margin-left: 5px;
  }
</style>

If you do as I have, and make it a template, you might name it something like $:/readingListTemplate, and then any tiddler you want to have a list you can pass through the template with {{||$:/readingListTemplate}} will have a list of items which are tagging that tiddler, and the completed tag will show up if it’s also tagged completed.

The section <$list filter="[all[current]tag[Completed]]"> could be modified to be any field and value that you wish.

Thank you @well-noted for providing more information on how you use the template.
I am however, still confused.
I have created a tidlyhost site here, which shows my failed attempt to use your code.
What is needed to make this work? - Can you help please.
Thanks,
Sunny

No problem. You’ve nearly got it, however you only included the pragma in the template, you did not actually call it.

Change the contents of your template to the following and it should work:

\define toc-item(item, level)
<$set name="state" value=<<expand>> >
  <$set name="toc-item-class" filter="[<__item__>addsuffix[-]addsuffix<__level__>]" value="toc-item-selected" emptyValue="toc-item">
    <li class=<<toc-item-class>> >
      <$reveal type="nomatch" state=<<state>> text="show">
        <$button set=<<state>> setTo="show" class="tc-btn-invisible">
          {{$:/core/images/right-arrow}}
          <$link to=<<__item__>>>
            <$view tiddler=<<__item__>> field="caption">
              <$view tiddler=<<__item__>> field="title"/>
            </$view>
          </$link>
        </$button>
      </$reveal>
      <$reveal type="match" state=<<state>> text="show">
        <$button set=<<state>> setTo="" class="tc-btn-invisible">
          {{$:/core/images/down-arrow}}
          <$link to=<<__item__>>>
            <$view tiddler=<<__item__>> field="caption">
              <$view tiddler=<<__item__>> field="title"/>
            </$view>
          </$link>
        </$button>
      </$reveal>
      <$list filter="[all[current]tag[Completed]]">
        <span class="tc-tag-label">Completed</span>
      </$list>
      <$reveal type="match" state=<<state>> text="show">
        <ol>
          <$list filter="[tag<__item__>!has[draft.of]sort[created]]">
            <$macrocall $name="toc-item" item=<<currentTiddler>> level={{!!level+1}} />
          </$list>
        </ol>
      </$reveal>
    </li>
  </$set>
</$set>
\end


<!-- THIS PART IS NECESSARY IN THE TEMPLATE -->
<ol class="tc-table-of-contents">
  <$list filter="[tag<currentTiddler>!has[draft.of]sort[created]]">
    <$macrocall $name="toc-item" item=<<currentTiddler>> level="1" />
  </$list>
</ol>



<!-- FOR SIMPLICITY, STYLE SHOULD BE INCLUDED IN TEMPLATE -->
<style>
  .tc-tag-label {
    background-color: #ecf2f9;
    border: 1px solid #bbc8d6;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.8em;
    margin-left: 5px;
  }
</style>

For what it’s worth, here is my entire ReadingListTemplate – it is one of the first more complex tiddler templates I ever constructed and is extremely janky (so take it for what it’s worth), and, though it does work, I plan to do some major renovations on it very soon (incorporating multiple authors for example).

At the risk of confusing you further…
$__readinglisttemplate.json (13.3 KB)

Thank You very much @well-noted
It worked as you suggested. I thought the second part was required in another tiddler. I had added the Style in a Stylesheet previously, but deleted it when nothing worked.
I look forward to studying your entire ReadingListTemplate and possibly your renovations too.
Thanks again for your help.

This syntax is not correct because

  • !!level is a field reference, but the actual level value was passed in as a macro parameter, so <<__level__>> (or <__level__> within filter syntax) would be the correct way to get the value.
  • To add 1 to a value, you need to use filter syntax with the add[1] operator, like this:
level={{{ [<__level__>add[1]] }}}

Also, your recursion doesn’t protect against infinite loops. For example, if TiddlerB is tagged with TiddlerA, AND TiddlerA is tagged with TiddlerB, then you will get a tree like this:

TiddlerA
   TiddlerB
      TiddlerA
         TiddlerB
... etc ...

With infinite recursion until the browser hangs or crashes with an “out of memory” error.

To address this, the TWCore TOC macros (as well as my TiddlyTools/TOC macros and @pmario’s TOCP macros) all use an “exclude” parameter that automatically keeps track of tree nodes that have already been “visited” on the current branch, so that they won’t be re-visited to prevent infinite loops.

-e

1 Like

'preciate it, @EricShulman, as mentioned this code is in terrible need of revision – it was kitbashed together in 2020, and held together with pieces of duct tape found along the way.

I’ve gotten pretty far in developing the modal to input authors for the new version, but I haven’t been in a rush overall because it is functional for the time being (and, importantly, for the very specific way that I’ve organized my reading notes).

Anyone looking at this code as a basis for their own should definitely see it as more of a proof of concept and consider what Eric is saying… Infinite recursion is no fun

@well-noted
It will take me a while to digest your entire ReadingListTemplate

Points noted @EricShulman thanks.

Thank You both.

Keep us up to date here, @Sunny, as I’ve said multiple times this is something that I verymuch intend to come back to - - whatever you make of it, I will be very interested to see.

My problem is I’m like a kid in a sweet shop, everywhere I look …
I need to concentrate on a specific project and progress step by step.
If and when I get there I’ll let you know :grinning:

By the way, have you seen Daily Bad by @DaveGifford

2 Likes

A quick suggestion for how one might address @EricShulman’s points:

\define toc-item(item, level, exclude:"")
<$set name="state" value=<<expand>> >
  <$set name="toc-item-class" filter="[<__item__>addsuffix[-]addsuffix<__level__>]" value="toc-item-selected" emptyValue="toc-item">
    <li class=<<toc-item-class>> >
      <$reveal type="nomatch" state=<<state>> text="show">
        <$button set=<<state>> setTo="show" class="tc-btn-invisible">
          {{$:/core/images/right-arrow}}
          <$link to=<<__item__>>>
            <$view tiddler=<<__item__>> field="caption">
              <$view tiddler=<<__item__>> field="title"/>
            </$view>
          </$link>
        </$button>
      </$reveal>
      <$reveal type="match" state=<<state>> text="show">
        <$button set=<<state>> setTo="" class="tc-btn-invisible">
          {{$:/core/images/down-arrow}}
          <$link to=<<__item__>>>
            <$view tiddler=<<__item__>> field="caption">
              <$view tiddler=<<__item__>> field="title"/>
            </$view>
          </$link>
        </$button>
      </$reveal>
      <$list filter="[all[current]tag[Completed]]">
        <span class="tc-tag-label">Completed</span>
      </$list>
      <$reveal type="match" state=<<state>> text="show">
        <ol>
          <$list filter="[tag<__item__>!has[draft.of]sort[created]] -[<__exclude__>split[ ]]">
            <$macrocall $name="toc-item" 
              item=<<currentTiddler>> 
              level={{{ [<__level__>add[1]] }}} 
              exclude={{{ [<__exclude__>] [<__item__>] +[join[ ]] }}}
            />
          </$list>
        </ol>
      </$reveal>
    </li>
  </$set>
</$set>
\end

It appears as if it continues to work and does not cause recursion in the tiddlerA/TiddlerB scenario described.

I feel you with the kid in the candy store analogy - - I have come around to allowing myself to pursue whatever it is my mind is drawn to at any given time, and just keeping extensive documentation in order to advance projects.

I have not seen Daily Bad, will have a look :slight_smile:

Thanks for the update. I did edit your previous entire ReadingListTemplate as @EricShulman suggested re

level={{{ [<level>add[1]] }}}

I’ll try your new version, thanks again