This macro I started some time ago finally has most of its kinks worked out.
It allows you to use a tag in order to create an accordion-type list of tiddlers. (It doesn’t yet automatically close the last opened section like most accordion menus.)
Declaration
Makes for a good snippet for a global macro.
<<preview-list foldup:"none" tagged:"twhelp" hedr:"3" clr:"rgba(125, 125, 125, 0.25)" >>
Features
- The state works such that if a tiddler has two or more [different] tags in declarations that are listed on the same page, then each declaration will expand independently. Macro declarations with the same tag unfortunately still open in both locations, though that’s generally pointless anyway.
- Each heading has an edit link to edit the original tiddler
- Clicking the whole heading, rather than just the heading text, will expand the section
- Uses an adjustable heading for emphasis
- Allows for a foldup button for cases where tiddlers are longer. Simply leave out the foldup option on declaration, and it will default to have the button.
- States are stored as fields grouped in a single tiddler
Possible Modifications
- Make declaration option to toggle single/multiple simultaneously opened sections (use a single field to swap the last value)
- Declare with a filter rather than just a tag
- Option to put states in the temp path
- Create a meta macro that takes a list of tags for hastening multiple declarations.
Other Notes
- It’s a hilarious hack of checkboxes!
- This is a macro, because it uses a lot of text substitution for CSS etc.
- I haven’t been ready to look at this with fresh eyes, as I’m still stuck in macro land as opposed to including procedures. It could possibly use a complete refactor for any number of reasons.
Use Example
This makes for a great method of providing quick access to a large variety of information on a wiki’s default tiddler. Present all the multiple topics of the entire wiki. Requires less navigation per information! The headings provide the right emphasis for this purpose.
This means using multiple declarations with different tags. Subsequently adding tiddlers to each list via tagging feels kinda slick.
\define preview-list( foldup:"inherit" tagged:"help" sort:"created" hedclr hedr:"2" clr:"lightgrey" )
<$let sttid="$:/user/state/set/preview-list" >
<$list filter="[tag[$tagged$]sort[$sort$]] -[regexp:title[^Draft of \'.*]]">
<$let stfld={{{ [<currentTiddler>] [<qualify>] +[join[]] }}} >
<style type="text/css">
.exheading [type="checkbox"]{display:none;}
</style>
<div class="exheading" style="position:relative;">
<$checkbox tiddler=<<sttid>> field=<<stfld>> checked="yes" unchecked="no">
<h$hedr$ style="color:$hedclr$; border-radius:4px; text-decoration:none; border:0px; margin-top:6px; margin-bottom:4px; padding-left:6px; padding-top:6px; padding-bottom:2px; background-color:$clr$;">
{{$:/core/images/unfold-button}}
<$view field="caption"><$view field="title" /></$view><span style="position: absolute; right: 10px; font-size:smaller;"><$link>[edit]</$link></span>
</h$hedr$>
</$checkbox>
</div>
<div style="margin-left:16px; padding-left:8px; margin-right:14px;">
<$reveal stateTitle=<<sttid>> stateField=<<stfld>> type="match" text="yes">
<$transclude field="text" mode="block"/>
<div class="exheading" style="display:$foldup$; position:absolute; ">
<$checkbox tiddler=<<sttid>> field=<<stfld>> checked="yes" unchecked="no">
<span style="position:relative; left:-20px; top:-40px;"> {{$:/core/images/fold-button}} </span>
</$checkbox>
</div>
</$reveal>
</div>
</$let>
</$list>
</$let>
\end
preview-list macro.json (1.6 KB)