[TW5] Nested Sliders in TW5

206 views
Skip to first unread message

Chong

unread,
May 20, 2015, 4:16:25 AM5/20/15
to tiddl...@googlegroups.com
In TW5 I can't nest the reveal buttons inside each other without having other tiddlers with more reveal buttons. 
I want be to able to do something like this all in one tiddler:

I went to store. 
<<moredetail "
   it was raining so I decided to drive instead of walk
   <<moredetail "
      the car took a while to start since it was so cold
   ">>
   I arrived at 5pm
   <<moredetail "
      It was Sunday so they were just closing up
   ">>
">>
Then I bought a tomato
<<more detail "...">>

Eric Shulman's NestedSliders plugin for TWC seems to do exactly this - but is there any way to do it in TW5?

Eric Shulman

unread,
May 20, 2015, 5:56:59 AM5/20/15
to tiddl...@googlegroups.com
On Wednesday, May 20, 2015 at 1:16:25 AM UTC-7, Chong wrote:
In TW5 I can't nest the reveal buttons inside each other without having other tiddlers with more reveal buttons. 
I want be to able to do something like this all in one tiddler:

I went to store. 
<<moredetail "
   it was raining so I decided to drive instead of walk
   <<moredetail "
      the car took a while to start since it was so cold
   ">>
   I arrived at 5pm
   <<moredetail "
      It was Sunday so they were just closing up
   ">>
">>
Then I bought a tomato
<<more detail "...">>

The first problem is that you can't nest macros, so you can't put <<moredetail >> *within* the parameters of a call to <<moredetail>>.

However, it *is* possible to implement a "nested reveal" in TW5, though the syntax is probably not quiet as simple as you want.

Try this:

\define b(s,t)
<$reveal type="nomatch" text="show" state="$:/state/$s$">
   <$button class="tc-btn-invisible" tooltip="more details">
      <$action-setfield $tiddler="$:/state/$s$" text="show"/>
      $t$
   </$button>
</$reveal>
<$reveal type="match" text="show" state="$:/state/$s$">
   <$button class="tc-btn-invisible" tooltip="less details">
      <$action-deletetiddler $tiddler="$:/state/$s$"/>
      $t$
   </$button>
</$reveal>
\end

<<b 1 "I went to the store...">>
<$reveal type="match" text="show" state="$:/state/1">

   <<b 2 "It was raining so I decided to drive instead of walk...">>
   <$reveal type="match" text="show" state="$:/state/2">

      The car took a while to start since it was so cold.
   </$reveal>
   <<b 3 "I arrived at 5pm...">>
   <$reveal type="match" text="show" state="$:/state/3">

       It was Sunday so they were just closing up.
   </$reveal>
</$reveal>
<<b 4 "Then I bought a tomato...">>
<$reveal type="match" text="show" state="$:/state/4">

   It was delicious.
</$reveal>

The macro <<b>> outputs text that is a "show/hide" toggle.  It uses $:/state/xxx to track when the details are shown, and then *removes* $:/state/xxx when the details are toggled closed.  This avoids an accumulation of random state tracking tiddlers.  Note also that $:/state/* tiddlers are 'system' tiddlers, so they don't appear in the sidebar (except in the "more>system" tab, of course).  This avoids the ugliness of seeing them appear and disappear as you toggle the text.

Let me know how it goes...

enjoy,
-e
Eric Shulman
ELS Design Studios
TiddlyTools - "Small Tools for Big Ideas!"
InsideTiddlyWiki: The Missing Manuals

YOUR DONATIONS ARE VERY IMPORTANT!
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:

Chong

unread,
May 21, 2015, 12:59:53 AM5/21/15
to tiddl...@googlegroups.com
Thanks again Eric, I don't quite understand how that works, but it does. The only problems are that it's hard to see where the actual text lies while you're editing, and that the button is the entire block of text, so when there's a lot of text it'll be quite a big button. 

For the record I've gotten rid of the $t$ argument for the "b" macro, and modified the rest to this:

===========================================
* I went to the store... <<b 1>><$reveal type="match" text="show" state="$:/state/1">

* asdafd
* It was raining so I decided to drive instead of walk... the quick brown fox jumps over the lazy dogs hiufhio dhuijsoj 
* g8uygu <<b 2>><$reveal type="match" text="show" state="$:/state/2">
   
* The car took a while to start since it was so cold.   
        </$reveal>
        
* I arrived at 5pm...<<b 3>><$reveal type="match" text="show" state="$:/state/3">
   
* It was Sunday so they were just closing up.
        </$reveal>
</$reveal>
===========================================

Eric Shulman

unread,
May 21, 2015, 3:01:56 AM5/21/15
to tiddl...@googlegroups.com
On Wednesday, May 20, 2015 at 9:59:53 PM UTC-7, Chong wrote:
Thanks again Eric, I don't quite understand how that works, but it does. The only problems are that it's hard to see where the actual text lies while you're editing, and that the button is the entire block of text, so when there's a lot of text it'll be quite a big button.  

For the record I've gotten rid of the $t$ argument for the "b" macro, and modified the rest to this:

Without using $t$ as the text for the button, how do you even *see* the button, since it uses class="tc-btn-invisible" so that there is no button border or fill and only the text is shown.

In terms of "how it works"":

The <<b>> macro uses the technique described in the RevealWidget documentation on how to create a "slider" button.

The number param that you pass to it is used to construct the name of a "state tracking" tiddler that starts with "$:/state/" so that it is hidden from normal view (i.e., it won't appear in the sidebar, except in the "more>system" tab).

If the state tiddler does not contain the text "show" (or the tiddler doesn't exist), then the <<b>> macro outputs a button that creates the tiddler and sets the text to "show".  However, if the state tiddler already exists and contains "show", then the <<b>> macro output the a button that deletes the state tiddler.

Thus, <<b 1>> creates a single button that *toggles* the existence (and content) of $:/state/1.

Then, by writing
   <$reveal type="match" text="show" state="$:/state/1"> your content goes here </$reveal>
you can use the <<b 1>> button to toggle the display of that content.

As you can see from the example I provided, you can nest the <$reveal>...</$reveal> as many levels deep as you need, as long as each has it's own corresponding $:/state/N tiddler and a button to toggle it.

Hope this explanation helps,
Reply all
Reply to author
Forward
0 new messages