list-filter-called titles sliderized

[Sapphireslinger]

Is there a way to do this?

<$list filter="[tag<currentTiddler>!sort[title]]">

<h2><$link><$transclude field="title" mode="block"/></$link></h2> This line is what I want sliderized.
<$transclude field="text" mode="block"/> Only want this to show up (inline) if I click on the above title.
</$list>

[Eric Shulman]

Try this:

<$list filter="[tag<currentTiddler>!sort[title]]">

<h2>

<$button class="tc-btn-invisible" >

   <$text text={{!!title}} />

   <$reveal state={{{ [[$:/state/slider/]addsuffix<currentTiddler>] }}} type="nomatch" text="show">

      <$action-setfield $tiddler={{{ [[$:/state/slider/]addsuffix<currentTiddler>] }}} text="show" />

   </$reveal>

   <$reveal state={{{ [[$:/state/slider/]addsuffix<currentTiddler>] }}} type="match" text="show">

      <$action-deletetiddler $tiddler={{{ [[$:/state/slider/]addsuffix<currentTiddler>] }}} />

   </$reveal>

</$button>

</h2>

<$reveal state={{{ [[$:/state/slider/]addsuffix<currentTiddler>] }}} type="match" text="show">

   <$transclude field="text" mode="block"/>

</$reveal>

</$list>

Notes:

* $button uses class="tc-btn-invisible" to make it look like regular text

* $text shows the current title

* 1st $reveal sets $:/state/slider/NameOfTiddler to "show" when $button is pressed

* 2nd $reveal deletes $:/state/slider/NameOfTiddler when $button is pressed

* 3rd $reveal does $transclude when $:/state/slider/NameOfTiddler is set to "show"

enjoy,

-e

[Atronoush]

This is a smart solution Eric! Is it possible to have a button to expand collapse all tiddler?

--Atro

[Sapphireslinger]

Wow! And thank you for the explanations on how it works.

1) Your code works even if the first line is <$list filter="[tag[foo]!sort[title]]">

2) I ran into a cosmetic snag. Tiddlers with long titles that wrap get dropped down a line and indented, making the list look messy. Don't know what's causing that.

3) Is there a way to make the list of titles look like the output to <<list-links "[tag[foo]sort[title]]">>

[Eric Shulman]

On Sunday, November 8, 2020 at 6:05:52 AM UTC-8, Atronoush wrote:

This is a smart solution Eric! Is it possible to have a button to expand collapse all tiddler?

As two separate buttons:

<$button> expand all
   <$list filter="[tag<currentTiddler>!sort[title]]">

      <$action-setfield $tiddler={{{ [[$:/state/slider/]addsuffix

<currentTiddler>] }}} text="show" />
   </$list>
</$button>
<$button> collapse all
   <$list filter="[tag<currentTiddler>!sort[title]]">

      <$action-deletetiddler $tiddler={{{ [[$:/state/slider/]addsuffix

<currentTiddler>] }}} />
   </$list>
</$button>

-e

[Atronoush]

Thank you Eric! Works great!

Minor note: in the above solution extra line breaks (perhaps on copy-paste) broke the code!

<$action-deletetiddler $tiddler={{{ [[$:/state/slider/]addsuffix

<currentTiddler>] }}} />

should be

<$action-deletetiddler $tiddler={{{ [[$:/state/slider/]addsuffix<currentTiddler>] }}} />

--Atro

[Eric Shulman]

On Sunday, November 8, 2020 at 6:19:21 AM UTC-8, Atronoush wrote:

Minor note: in the above solution extra line breaks (perhaps on copy-paste) broke the code!

This is a long-standing BUG in GoogleGroups.

The code was actually entered without the extra line breaks, but sometimes stray line breaks are added when code-formatted content is displayed.

-e

[Atronoush]

Thank you!

[Eric Shulman]

On Sunday, November 8, 2020 at 6:09:38 AM UTC-8, Sapphireslinger wrote:

Wow! And thank you for the explanations on how it works.

1) Your code works even if the first line is <$list filter="[tag[foo]!sort[title]]">

It should work with *any* filter; e.g.,  <$list filter="[has:field[foo]!sort[title]]">

2) I ran into a cosmetic snag. Tiddlers with long titles that wrap get dropped down a line and indented, making the list look messy. Don't know what's causing that.

This is because the surrounding <$button> defaults to showing *centered* text.  To fix this, use style="text-align:left;", like this:

<$button class="tc-btn-invisible" style="text-align:left;">

 

3) Is there a way to make the list of titles look like the output to <<list-links "[tag[foo]sort[title]]">>

* remove the <h2> and </h2>

* use this before the $button:

<ul>
<$list filter="[tag<currentTiddler>sort[title]]">
<li>

* use this after the final /$reveal:

</li>
</$list>
</ul>

enjoy,

-e

[Sapphireslinger]

Thank you!

[Mohammad]

While Eric solution is elegant one, using the new features in Tiddlywiki 5.1.23 the Eric solution can be simplified as below

<$list filter="[tag<currentTiddler>!sort[title]]">

<$vars stateTid={{{ [[$:/state/slider/]addsuffix<currentTiddler>] }}}>

<h2>

<$button class="tc-btn-invisible" >  <$text text={{!!title}} />

<$action-listops $tiddler=<<stateTid>> $field="text" $subfilter="+[toggle[show],[hide]]" />

</$button>

</h2>

<$reveal state=<<stateTid>> type="match" text="show">

   <$transclude field="text" mode="block"/>

</$reveal>

</$vars>

</$list>

This new solution uses the semantic operator toggle, which lets you to switch between two opposite states (show, hide). More information can be fined

https://tiddlywiki.com/prerelease/#toggle%20Operator

The below example further shows the use of toggle operator to create a simple slider

\define tslider(tiddler)

<$vars stateTid="$:/state/toggle-slider/$tiddler$">

<$button class="tc-btn-invisible">  <$text text={{{ [<stateTid>get[text]match[show]then[hide]else[show]] }}}/>

<$action-listops $tiddler=<<stateTid>> $field="text" $subfilter="+[toggle[show],[hide]]" />

</$button>

<$reveal state=<<stateTid>> type="match" text="show">

   <$transclude tiddler=<<__tiddler__>> field="text" mode="block"/>

</$reveal>

</$vars>

\end

Copy the above code and put in an empty tiddler with the below line

<<tslider HelloThere>>

and see how it nicely works!

Thank you Saq, and Jeremy for such great features!

Best wishes

Mohammad