Modifying the body with ViewTemplate

[Stobot]

Hello all,

I'm making sure there's not a better way to do this... I want to have tiddlers with certain tags have their body wrapped with the <$details> widget to keep the tiddlers short. 

I know I can ADD things to the body by adding ViewTemplate tags as outlined:

https://groups.google.com/g/tiddlywiki/c/Jg-nmLk-yxs/m/yGricD4sBwAJ

I know that I can HIDE things in the normal ViewTemplate by using CSS as Eric showed:

https://groups.google.com/g/tiddlywiki/c/K6uHR4XtJ0o/m/MNxAhRxQAgAJ

But I can't see how that would help what I want to do. Instead I've just hacked the actual $:/core/ui/ViewTemplate/body - which I know I don't want to do...

\define use-details()

<$details summary="Notes">

<$transclude>

<$transclude tiddler="$:/language/MissingTiddler/Hint"/>

</$transclude>

</$details>

\end

\define no-details()

<$transclude>

<$transclude tiddler="$:/language/MissingTiddler/Hint"/>

</$transclude>

\end

<$reveal tag="div" class="tc-tiddler-body" type="nomatch" stateTitle=<<folded-state>> text="hide" retain="yes" animate="yes">

<$list filter="[all[current]!has[plugin-type]!field:hide-body[yes]]">

<$list filter="[all[current]tag[Tasks]] [all[current]tag[Meetings]] [all[current]tag[Projects]] [all[current]tag[Debriefs]]" emptyMessage=<<no-details>> variable="X">

<<use-details>>

</$list>

</$list>

</$reveal>

[Anjar]

Maybe it is possible to have  <$details> in one tiddler and  </$details> in another tiddler and use list-before/after to manipulate the position of the two?

Best,

Anders

[Stobot]

Good thought Anjar - just tested it, doesn't appear to work unfortunately... I get the "details" section above the body but expanding it doesn't do anything, and and a </$details> text showing down below - seemingly indicating that it's not finding it's <$details> match above... thanks for responding though.

Any other ideas?

[Odin]

If modifying shadow tiddlers of the core is the issue:
Clone the  $:/core/ui/ViewTemplate/body tiddler and add your modifications. Add it conditionally based on tag. Hide the normal  $:/core/ui/ViewTemplate/body conditionally based on tag. This way, you don't modify the core tiddlers and only add your own tiddlers.

Op donderdag 29 april 2021 om 21:56:12 UTC+2 schreef Stobot:

[Stobot]

Thanks Odin - I get most of that and sounds like a promising path, but how do I "Hide the normal $:/core/ui/ViewTemplate/body conditionally based on tag" without modifying the core?

[Soren Bjornstad]

I ran across this situation recently. I wanted tiddlers with a particular tag to not use the default template at all. I ended up using the data-tags styling functionality to target the body as rendered by the standard ViewTemplate and hide it completely. In a tiddler tagged $:/tags/Stylesheet:

div[data-tags*="MyTag"] div.tc-tiddler-body {

display: none;

}

Then I added a new template tagged $:/tags/ViewTemplate that displayed what I wanted, and wrapped it in a list widget so it appeared only when tagged MyTag:

 <$list filter="[all[current]tag[MyTag]">

   ...your template here...

</$list>

You might have to play with the CSS selectors if you want something more complicated than a single tag, but presumably you can do something similar to that.

I'm not sure whether TiddlyWiki bothers rendering things that are behind a display: none rule. If it does, the possibility of slightly decreased performance might be the one drawback to this approach.

[Soren Bjornstad]

On Thursday, April 29, 2021 at 8:51:57 PM UTC-5 Soren Bjornstad wrote:

I wanted tiddlers with a particular tag to not use the default template at all.

Correction: By this I mean "not to show the text field at all." The only thing this approach hides is the content defined in $:/core/ui/ViewTemplate/body -- the other components of the default view template are still included.

 

[Stobot]

Thanks Soren - that got me what I needed. I do worry a slight bit about the performance myself, as it does seem like I'll be double-rendering, but at least it solves it without modifying the core. I'll have to think about the lesser of evils.

Note in case anyone else follows this, I got stuck temporarily as I followed Odin's path too literally - cloning the original core $:/core/ui/ViewTemplate/body which included the tc-tiddler-body class too. When I stripped that out, it worked fine.

I'd not used data-tag styling before, so that's good learning for me. Because I needed to apply to multiple tags and only one particular chunk, I ended up having to do separate lines (like below) whereas the instructions indicate it may be possible to do all as one with [data-tags*="Tasks"],[data-tags*="Projects],... but the div.tc-tiddler-body thing I couldn't work in. 

[data-tags*="Tasks"] div.tc-tiddler-body {display:none;}

[data-tags*="Projects"] div.tc-tiddler-body {display:none;}

[data-tags*="Initiatives"] div.tc-tiddler-body {display:none;}

[data-tags*="Meetings"] div.tc-tiddler-body {display:none;}

[data-tags*="Debriefs"] div.tc-tiddler-body {display:none;}

[Soren Bjornstad]

I think you're right that there's no way to avoid repeating the div.tc-tiddler-body, but you can still simplify this down to:

[data-tags*="Tasks"] div.tc-tiddler-body,

[data-tags*="Projects"] div.tc-tiddler-body,

[data-tags*="Initiatives"] div.tc-tiddler-body,

[data-tags*="Meetings"] div.tc-tiddler-body,

[data-tags*="Debriefs"] div.tc-tiddler-body {

    display:none;

}

Then at least you don't have to have the same formatting rule 5 times.