How do I Preview a tiddler and apply other viewtemplate elements?

1

Folks,

I seem to have a momentary “designer block”. Can anyone tell me how I could provide a preview button for list items such that we don’t only get the wikified body but also other elements that would appear on the tiddler due to the items tagged $:/tags/ViewTemplate - and example may be a footer you can see when you open the tiddler in the story, but I want to see this in the preview.

Here is a simple preview of the body;

<$list filter="[<currentTiddler>has[text]]" variable=~>
<$button tooltip="preview" popup={{{ [<currentTiddler>addprefix[$:/temp/preview/]] }}} class="tc-btn-invisible">
{{$:/core/images/preview-open}}
</$button>

<$reveal type="popup" state={{{ [<currentTiddler>addprefix[$:/temp/preview/]] }}} >
<div class="tc-drop-down" style="padding: 0 .5em 0 .5em">

<$transclude/>

</div>
</$reveal>
</$list>

Alternatively perhaps a custom modal ?

2

If that were/is possible it would be very useful because then we can show a tiddler inside a tiddler and talk “meta” about it, for teaching purposes.

I can only come up with some probably insufficient solutions:

  • the InnerWiki plugin
  • create a faux tiddler, i.e transclude the content from the various fields and style them like they are styled for real, to be shown inside the text field of a tiddler.

You do request the preview to show the stuff so unless you’re talking about some custom made preview feature then it will have to be stuff in the tiddlers text field, which speaks for my second suggestion here above.

3

I am thinking of an icon in a list which you click on a a popup preview is shown;

Like this

Snag_a1d070
Snag_a1d070509×157 14.6 KB

However I want to see the other view template items in the preview as well, As I would see if I opened the tiddler, like the tag pills, streams, Projectify elements etc… that are displayed via the tag $:/tags/ViewTemplate.

Now this should be simple, because TiddlyWiki already does this in the story river adding the toolbar, title, subtitle and icon icon title etc…

  • I thought I knew how to do it, but today it escapes me :frowning_face:
4

Well, if I understand your question, you’ll basically have to repeat what the core viewtemplate does.

5

I have tried that but somethings wrong with the context or something because its only returning the wikified text field.

6

To show the equivalent of a tiddler in the story, replace <$transclude/> with <$transclude tiddler="$:/core/ui/StoryTiddlerTemplate"/>. This respects the cascade. If you don’t care about the cascade you can also transclude the default tiddler view template from the value of $:/config/ui/ViewTemplate.

I imagine the CSS will be somewhat off and the display not quite what was expected.

I do something somewhat similar with a floating window (via Floats) rather than a modal but I exclude things like the tiddler toolbar etc that would not make sense in that context.

7

Tones, if you solve this particular bit then it would be useful as a separate plugin for others to use, i.e to show a (generated) generic tiddler in the textarea of another tiddler so that it can be used for meta discussions about tiddlers. Ideally it would automatically adapt if the user has modified e.g the order of the templates etc. Jeremy, understandably, doesn’t want images in the docs and just in general I think it would be very useful for when people make plugins if they can “point” to different parts of the tiddler etc to illustrate stuff.

8

@twMat Does it really need a plugin? A simple macro wouldn’t do?

\define preview-tiddler(tiddler)
<$tiddler tiddler=<<__tiddler__>> >
<$transclude tiddler="$:/core/ui/StoryTiddlerTemplate"/>
</$tiddler>
\end

<<preview-tiddler HelloThere>>
9

Hahaaa!!! This opens up for much better documentation. Check this out:

\define preview-tiddler(tiddler)
<faux-tid>
<$tiddler tiddler=<<__tiddler__>> >
<$transclude tiddler="$:/core/ui/StoryTiddlerTemplate"/>
</$tiddler>
</faux-tid>
\end

<<preview-tiddler HelloThere>>

<style>
faux-tid .tc-tiddler-body p:nth-child(3) {
  outline:5px solid #ff000080;
  outline-offset:2px;
  border-radius:50%;
}
faux-tid .tc-tiddler-body p:nth-child(3):before {
  content:"&rarr;";
  position:absolute;
  margin-left:-10%;
  color:red;
  font-size:4em;
}
</style>
10

I though as much myself, but thanks for a second opinion. This is unfortunately not working in the context I am using it.

  • It still only returns the text wikified.

I am trying to get a simple demo of the issue, but the current code is deep in a Projectify list item.