1 # <a name="%TOPIC%"></a><a name=" %TOPIC%"></a> %TOPIC%
3 **This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.**
5 TwistyContrib is installed by default in TWiki 4 and used by [[Twisty Plugin|TWiki:Plugins/TwistyPlugin]].
7 It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.
9 This Contrib should work in all versions of TWiki. It has been tested against [[TWiki 3|TWiki:Codev/CairoRelease]] and [[TWiki 4|TWiki:Codev/DakarRelease]].
11 <div><span>On this page:</span><ul>
12 <li><a href="#Usage examples"> Usage examples</a><ul>
13 <li><a href="#Basic Twisty"> Basic Twisty</a></li>
14 <li><a href="#Twisty with placeholder text"> Twisty with placeholder text</a></li>
17 <li><a href="#Twisty made easy"> Twisty made easy</a><ul>
18 <li><a href="#You Write"> You Write </a></li>
19 <li><a href="#Your Users Write"> Your Users Write</a></li>
20 <li><a href="#You See"> You See</a></li>
21 <li><a href="#All on, all off"> All on, all off</a></li>
24 <li><a href="#Settings"> Settings</a></li>
25 <li><a href="#Installation Instructions"> Installation Instructions</a></li>
26 <li><a href="#Contrib Info"> Contrib Info</a></li>
30 ## <a name="Usage examples"></a> Usage examples
32 If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.
34 ### <a name="Basic Twisty"></a> Basic Twisty
36 <span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
37 <span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
38 <span id="demo1toggle" class="twistyContent twistyMakeHidden">
46 <button> Unfold </button>
50 <button> Fold </button>
52 <span> my twisty content </span>
54 ### <a name="Twisty with placeholder text"></a> Twisty with placeholder text
56 <span id="demo2show" class="twistyTrigger twistyMakeVisible"><a href="#">Expand...</a> <span class="twistyPlaceholder">Hamlet is without question the most famous play in the English language...</span></span>
57 <span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
58 <span id="demo2toggle" class="twistyContent twistyMakeHidden">
59 Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development.
64 <span>[Expand...](#) <span>Hamlet is without question the most famous play in the English language...</span></span> <span>[Collapse...](#)</span> <span> Hamlet is without question the most famous play in the English language. Probably written in 1601 or 1602, the tragedy is a milestone in Shakespeare's dramatic development. </span>
66 Skins can customize the color of the twisty placeholder by modifiying the `.twistyPlaceholder` style.
68 ## <a name="Twisty made easy"></a> Twisty made easy
70 Manual written by [[Harald Joerg|TWiki:Main/HaraldJoerg]]. Examples require [[Spreadsheet Plugin|TWiki:Plugins/SpreadsheetPlugin]] to work (installed by default).
72 > Some of my TWiki users are impressed by the optical effect of what can be done with TWiki:Plugins.TwistyPlugin - and they keep asking me: "How do I do that? I don't understand the documentation, and I don't understand the raw text of your topics!"
74 > They indeed have a point here. The docs aren't easily understood. It isn't easy to pick all the variables needed from a single example, and just copypasting sometimes fails in embarrassing ways if non-unique `id` attributes are present in a topic. Maybe it is easy for a power user, but it surely isn't easy _enough_. There _ought_ to be a way to make it easier.
78 > Just set a couple of site preferences, and your users will immediately understand your examples and start writing their own twisties. And what's more: They'll do so in a _consistent_ way, across all your topics in all webs.
80 ### <a name="You Write"></a> You Write
82 In your Main.TWikiPreferences write:
84 * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
85 <a href="#">more...</a>
87 <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
90 <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
93 %T% You can include the text in a verbatim block if you want (like I have done here). Additionally I've added plenty of newlines and spaces to make it readable. This works, and you don't have to care for invalid HTML!
95 ### <a name="Your Users Write"></a> Your Users Write
97 In any topic, your users can now write things like this:
99 * *Brace and parenthesize in K&R style*
101 When setting out a code block, use the K&R style of bracketing.
102 That is, place the opening brace at the end of the construct that controls the block. ...
104 * *Separate your control keywords from the following opening bracket*
106 Control structures regulate the dynamic behaviour of a program, so the keywords
107 of control structures are the most critical components of a program. ...
110 ### <a name="You See"></a> You See
112 - **Brace and parenthesize in K&R style** %FLIP% When setting out a code block, use the K&R style of bracketing. That is, place the opening brace at the end of the construct that controls the block. ... %FLOP%
113 - **Separate your control keywords from the following opening bracket** %FLIP% Control structures regulate the dynamic behaviour of a program, so the keywords of control structures are the most critical components of a program. ... %FLOP%
115 ### <a name="All on, all off"></a> All on, all off
117 You can toggle all Twisties on or off at once by putting a link or button on the page with class `twistyExpandAll` or `twistyCollapseAll`.
119 <button class="twistyExpandAll twikiButton">Expand all</button>
120 <button class="twistyCollapseAll twikiButton">Collapse all</button>
122 Creates these controls:
124 <button>Expand all</button>
125 <button>Collapse all</button>
127 When you want to use links, write:
131 <a href="#TOGGLE" class="twistyExpandAll">Expand all</a>
132 <a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>
134 <a name="VarTOGGLE"></a>
136 [Expand all](#TOGGLE) [Collapse all](#TOGGLE)
138 ## <a name="Settings"></a> Settings
140 - Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically
141 - Set STUB = TWiki::Contrib::TwistyContrib
143 ## <a name="Installation Instructions"></a> Installation Instructions
145 - Download the ZIP file from the Plugin web (see below)
146 - Unzip <code>**%TOPIC%.zip**</code> in your ($TWIKI\_ROOT) directory. Content: <table border="1" cellpadding="0" cellspacing="0">
148 <th bgcolor="#99CCCC"><strong> File: </strong></th>
149 <th bgcolor="#99CCCC"><strong> Description: </strong></th>
152 <td><code><b>data/TWiki/TwistyContrib.txt</b></code></td>
156 <td><code><b>lib/TWiki/Contrib/TwistyContrib.pm</b></code></td>
160 <td><code><b>pub/TWiki/TwistyContrib/twist.css</b></code></td>
164 <td><code><b>pub/TWiki/TwistyContrib/twist.js</b></code></td>
168 <td><code><b>pub/TWiki/TwistyContrib/twist.compressed.js</b></code></td>
173 - Optionally, run <code>**%TOPIC%\_installer**</code> to automatically check and install other TWiki modules that this module depends on. You can also do this step manually.
174 - Alternatively, manually make sure the dependencies listed in the table below are resolved. <table border="1">
181 <td align="left">TWiki::Plugins::BehaviourContrib</td>
182 <td align="left">>=1.000</td>
183 <td align="left">Required</td>
187 ## <a name="Contrib Info"></a> Contrib Info
189 <table border="1" cellpadding="0" cellspacing="0">
192 <td> JavaScript created by TWiki:Main.SamHasler, Contrib packaged by TWiki:Main.RafaelAlvarez </td>
195 <td> Copyright ©: </td>
196 <td> 2005 Sam Hasler and Rafael Alvarez, 2006 Arthur Clemens </td>
200 <td><a href="http://www.gnu.org/copyleft/gpl.html" target="_top">GPL</a></td>
203 <td> Dependencies: </td>
212 <td align="left">TWiki::Plugins::BehaviourContrib</td>
213 <td align="left">>=1.000</td>
214 <td align="left">Required</td>
220 <td> 25 Oct 2006 </td>
221 <td> 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2 </td>
224 <td> 26 Sep 2006 </td>
225 <td> 1.010 Arthur Clemens - Complete JavaScript rewrite </td>
228 <td> 12 Sep 2005 </td>
229 <td> 1.000 First Version </td>
233 <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%</a></td>
237 <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev</a></td>
240 <td> Appraisal: </td>
241 <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal</a></td>
245 **_Related Topics:_** [[TWikiPreferences]]