Is it possible to make the TOC show some content based on other tiddler dynamically rather than the fixed title or caption?

#1

I know that the TOC macro could build the Table of Content; however, I need some functions that the TOC macro does not support right now. What I want is as follows:

  1. The name of an entry shows on the table can be any field, and which field will be presented depends on the value of a specific tiddler. Or， the caption can be set by a macro/procedure and show the result of the macro/procedure.

  2. The width of the TOC can be adjusted by clicking a button to show more content of the showing tiddler. It will be better if the width of the TOC could be adjusted by dragging the mouse.

Are there any methods for the official TOC to satisfy this requirement? Or, could any other plugin do this?

#2

Perhaps tell us where the TOC is, are to talking about the one in the contents tab?

  • If so you want to resize the sidebar?

The caption will be used already if available, if you say any field do you mean on every item in the contents?

Please explain a little more, so the community can help.

There are more than one toc macro, have you tried them all? you may like one of them better.

#3

Welcome back, @likuan61!

Two of our most knowledgeable and helpful regulars have built extended TOC tools:

I keep saying I’m going to try them but I always end up writing custom versions for my own use-cases, but it would be worth investigating whether they meet your needs.

Take a look at Sidebar Slider [Plugin] — a Plugin for TiddlyWiki5 (discussion at #12583.)

#4

Thanks for your kind response.

The TOC that I mentioned is in the content area, namely, a tiddler working as a reader interface, rather than the sidebar.

I try to build a bilingual note system. For any tiddler that contains some notes, I have designed a macro by using the Widget to show the content in the selected language, or both. With regard to the fields that I want to show in the table, for instance, are entitle and cntitle. While the content of the tiddler shows in English/Chinese, the entitle/cntitle will be shown. When the content of the tiddler shows in bilingual, both entitle and cntitle will be shown in a combination format.

In order to read the content of the text field in a tiddler comfortably, the width of the Table of Contents can be adjusted, for example, not more than 10 letters. It is best if the width could be adjusted by dragging the mouse.

#5

@Scott_Sauyet I appreciate your valuable hints.

#6

Thanks you have explained that well now.

I do think your could find your solution in @pmario’s TOC Macros Rewrite (part 1 and part 2.) or Erics (untested by me)

As I understand it you will want to modify how the TOC displays the toc items, or the list item, the list item template. To include additional data found in each tiddler.

This may be a good argument for you to write your own simpler version of the TOC to have more control over how they are listed. The main feature of a toc list is a recursive process to follow the tree of tiddlers, as on the Contents Tab of tiddlywiki.com. We can help you.

Questions;

  • What is your TOC filter?
    • Are you listing such structured tiddlers or is it a “flat list” of titles?
  • What code would you like to use for each listed item?
#7

For your first objective:

In the TOC macros, the “name of the entry” is rendered by a small macro named “toc-caption()”, which has the following default definition:

\define toc-caption()
\whitespace trim
<span class="tc-toc-caption tc-tiny-gap-left">
<$set name="tv-wikilinks" value="no">
  <$transclude field="caption">
    <$view field="title"/>
  </$transclude>
</$set>
</span>
\end

What this does is: “If the current tiddler has a caption field then render it. If there is no caption field in the current tiddler, then show that tiddler’s title”

To customize this output:

Within the tiddler you are using to display your TOC, you can re-define the toc-caption() macro to change what it will display. Thus, for your objective – " which field will be presented depends on the value of a specific tiddler" – you could put the following at the top of your TOC display tiddler:

\define toc-caption()
\whitespace trim
<span class="tc-toc-caption tc-tiny-gap-left">
<$set name="tv-wikilinks" value="no">
  <$transclude field={{MyTOCConfig}}>
    <$transclude field="caption">
      <$view field="title"/>
    </$transclude>
  </$transclude>
</$set>
</span>
\end

<div class="tc-table-of-contents"><<toc-tabbed-internal-nav "TableOfContents">></div>

Note how I’ve added this line: <$transclude field={{MyTOCConfig}}> (and it’s matching </$transclude>).
What this does is attempt to display a field from the current tiddler, where the name of that field is stored in the text field of MyTOCConfig. If that field doesn’t exist for the current tiddler, it falls back to using the default “use the caption or title” handling.

enjoy,
-e

2 Likes
#8

For this objective, start by adding the following macro to the top of your TOC display tiddler:

\define toggleTOCwidth()
<$tiddler tiddler="MyTOCConfig">
<$button actions="<$action-setfield TOCwidth={{{ [{!!TOCwidth}match[]then[10em]else[]] }}}/>">
<$transclude $tiddler={{{ [{!!TOCwidth}match[]then[$:/core/images/chevron-left]else[$:/core/images/chevron-right]] }}}/>
</$button>
<$let TOCwidth={{!!TOCwidth}}>
<style>
.my-toc-styles .tc-tabbed-table-of-contents > .tc-table-of-contents
   { max-width:<<TOCwidth>>; white-space:nowrap; overflow:hidden; }
</style>
</$let>
\end

The toggleTOCwidth() macro does the following:

  • First, show a $button widget. The label for this button will be determined by the current value of the TOCwidth field. If it’s currently blank, show a “chevron-left” icon. If its not blank, show a “chevron-right” icon.
  • When the button is clicked, it sets/clears the value in the TOCwidth field of the MyTOCConfig tiddler
  • Following the button, we get the current TOCwidth field value into a variable
  • We define some CSS to adjust the max-width attribute of the .tc-table-of-contents class, based on the <<TOCwidth>> variable’s value
  • Note the CSS selector: .my-toc-styles .tc-tabbed-table-of-contents > .tc-table-of-contents
    • .my-toc-styles is an added classname so the effect of this CSS will only apply to TOC displays that are contained within that custom class
    • .tc-tabbed-table-of-contents > .tc-table-of-contents refers specfically to the left-side table of contents tree created by using the <<toc-tabbed-internal-nav>> macro to display your TOC.

Then, to show the $button and apply the CSS to your TOC, use:

<div class="tc-table-of-contents my-toc-styles">
<<toggleTOCwidth>>
<<toc-tabbed-internal-nav "TableOfContents">>
</div>
  • The class for the outer div wrapper includes “my-toc-styles”
  • Above the TOC display itself, we show the <<toggleTOCwidth>> button

That’s it. You can now click on the button to shrink/restore the width of the TOC tree.

enjoy,
-e

1 Like