How to mark tiddlers with draft status in TOC

, , ,
#1

Hello everybody,

I have a fast growing wiki with many tiddlers tagged “draft”. I would like to make this status visible in the TOC by giving them another style rule e.g. opacity: 0.5 or sth. like that.
Is it possible to filter the TOC entries and add such a rule? How could I accomplish this? Thanks for any advice!

#2

The appearance of each TOC item is controlled by the toc-caption() macro definition which is found in the $:/core/macros/toc TWCore shadow tiddler:

\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

To change this definition, you do NOT need to modify the TWCore shadow tiddler. Instead, just paste the above macro definition into a new tiddler (e.g., “MyTOCCaption”), and tag that tiddler with $:/tags/Global.

Then, to add your desired CSS style rule, you can modify that copy of the macro definition by changing this line:

<span class="tc-toc-caption tc-tiny-gap-left">

to this:

<span class="tc-toc-caption tc-tiny-gap-left"
      style={{{ [<currentTiddler>tag[draft]then[opacity:0.5]] }}}>

Notes:

  • Within the TOC code, the currentTiddler variable is used to refer to each TOC item being rendered
  • The added style=... attribute uses a “filtered transclusion” (the triple curly syntax) to see if the currentTiddler is tagged with “draft” and, if it is, it applies the opacity:0.5 style to the TOC item output.

enjoy,
-e

4 Likes
#3

Eric beats me to it again!

My solution was very similar, except that I add a class name rather than a style tag:

<span class=`tc-toc-caption ${ [<currentTiddler>tag[draft]then[draft ]] }$tc-tiny-gap-left`>

And then I would add to a existing stylesheet, or create a new one, with whatever rules I choose for such spans:

title: toc-draft-styles
tags: $:/tags/Stylesheet

span.tc-toc-caption.draft {
  opacity:.5; 
  background: #ffc; 
  &::after { content: "✎" }
}

You can test by downloading the following and dragging the resulting file onto your wiki: toc-draft-caption.json (656 Bytes)

1 Like
#4

This works like a charm, thank you!

#5

Thank you, Scott, I’ve tried your solution but couldn’t get it to work. Double-checked everything but the styles are not applied. Neither is the class when I look it up in the inspector window. I’d prefer styling this way because I already have a stylesheet in my wiki for extra styling. Do you have any idea what could be wrong?

#6

Did you follow the rest of @Eric’s suggestion, making sure that the tiddler with the new toc-caption code has the tag $:/tags/Global?

Did you try my attachment? You should be able to click on it to download and simply drag the file onto your wiki. But note that this one and the one from Eric are not compatible. If they’re both there, then his might override mine, which might be the issue.

Also, what version of TW are you using? If it’s older than 5.3.0, then the Substituted Attribute Values syntax wouldn’t be available.

If none of those answers the question, do you have a public wiki we could try this on?

#7

Sorry, it was the simple quotation marks in the <span>. I had changed them to double ones … Now it works! Many thanks :pray:

1 Like