TwistyContrib

<--
   Contributions to this TWiki extension are appreciated. Please update the contrib page
   at http://twiki.org/cgi-bin/view/Plugins/TwistyContrib or provide feedback
   at http://twiki.org/cgi-bin/view/Plugins/TwistyContribDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->

Introduction

This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.

TwistyContrib is installed by default in TWiki and used by TwistyPlugin.

It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.

Usage examples

If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.

Basic Twisty

<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
<span id="demo1toggle" class="twistyContent twistyMakeHidden">
my twisty content
</span>

Generates:

Unfold Fold my twisty content

Twisty with placeholder text

<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>
<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
<span id="demo2toggle" class="twistyContent twistyMakeHidden">
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>

Generates:

Expand... Hamlet is without question the most famous play in the English language... Collapse... 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.

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Twisty made easy

Manual written by Harald Joerg. Examples require SpreadSheetPlugin to work (installed by default).

Some of my TWiki users are impressed by the optical effect of what can be done with 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!"

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 copy&pasting 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.

Well, here you are.

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.

You Write

In your Main.TWikiPreferences write:

   * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
       <a href="#">more...</a>
     </span>
     <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
       <a href="#">close</a>
     </span>
     <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
   * Set FLOP = </div>

Your Users Write

In any topic, your users can now write things like this:

   * *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%
   * *Separate your control keywords from the following opening bracket*
     %FLIP%
     Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
     %FLOP%

You See

• Brace and parenthesize in K&R style more... close
  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. ...
• Separate your control keywords from the following opening bracket more... close
  Control structures regulate the dynamic behaviour of a program, so the keywords of control structures are the most critical components of a program. ...

All on, all off

You can toggle all Twisties on or off at once by putting a link or button on the page with class twistyExpandAll or twistyCollapseAll.

<button class="twistyExpandAll twikiButton">Expand all</button> 
<button class="twistyCollapseAll twikiButton">Collapse all</button>

Creates these controls:

Expand all Collapse all

When you want to use links, write:

#VarTOGGLE
<a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
<a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>

Expand all Collapse all

Settings

• Set SHORTDESCRIPTION = Twisty section Javascript library to open/close content dynamically

You can also set the global TWiki variable TWISTYCONTRIB_DEBUG to 1 to make the contrib use uncompressed Javascript sources, in the event of problems.

Installation Instructions

%*INSTALL_INSTRUCTIONS%

• TwistyContrib uses these header includes:

<style type="text/css" media="all">
@import url("%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.js"></script>

Contrib Info

<-- versions below in reverse order -->

Related Topics: TwistyPlugin, TWikiPreferences

TwistyContrib

<--
   Contributions to this TWiki extension are appreciated. Please update the contrib page
   at http://twiki.org/cgi-bin/view/Plugins/TwistyContrib or provide feedback
   at http://twiki.org/cgi-bin/view/Plugins/TwistyContribDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->

Introduction

This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.

TwistyContrib is installed by default in TWiki and used by TwistyPlugin.

It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.

Usage examples

If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.

Basic Twisty

<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
<span id="demo1toggle" class="twistyContent twistyMakeHidden">
my twisty content
</span>

Generates:

Unfold Fold my twisty content

Twisty with placeholder text

<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>
<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
<span id="demo2toggle" class="twistyContent twistyMakeHidden">
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>

Generates:

Expand... Hamlet is without question the most famous play in the English language... Collapse... 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.

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Twisty made easy

Manual written by Harald Joerg. Examples require SpreadSheetPlugin to work (installed by default).

Some of my TWiki users are impressed by the optical effect of what can be done with 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!"

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 copy&pasting 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.

Well, here you are.

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.

You Write

In your Main.TWikiPreferences write:

   * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
       <a href="#">more...</a>
     </span>
     <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
       <a href="#">close</a>
     </span>
     <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
   * Set FLOP = </div>

Your Users Write

In any topic, your users can now write things like this:

   * *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%
   * *Separate your control keywords from the following opening bracket*
     %FLIP%
     Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
     %FLOP%

You See

• Brace and parenthesize in K&R style more... close
  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. ...
• Separate your control keywords from the following opening bracket more... close
  Control structures regulate the dynamic behaviour of a program, so the keywords of control structures are the most critical components of a program. ...

All on, all off

You can toggle all Twisties on or off at once by putting a link or button on the page with class twistyExpandAll or twistyCollapseAll.

<button class="twistyExpandAll twikiButton">Expand all</button> 
<button class="twistyCollapseAll twikiButton">Collapse all</button>

Creates these controls:

Expand all Collapse all

When you want to use links, write:

#VarTOGGLE
<a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
<a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>

Expand all Collapse all

Settings

• Set SHORTDESCRIPTION = Twisty section Javascript library to open/close content dynamically

You can also set the global TWiki variable TWISTYCONTRIB_DEBUG to 1 to make the contrib use uncompressed Javascript sources, in the event of problems.

Installation Instructions

%*INSTALL_INSTRUCTIONS%

• TwistyContrib uses these header includes:

<style type="text/css" media="all">
@import url("%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.css");
</style>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikilib.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiPref.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TWikiJavascripts/twikiCSS.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>
<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/TwistyContrib/twist.js"></script>

Contrib Info

Related Topics: TwistyPlugin, TWikiPreferences

TwistyContrib

Usage examples

If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.

Basic Twisty

<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
<span id="demo1toggle" class="twistyContent twistyMakeHidden">
my twisty content
</span>

Generates:

Unfold Fold my twisty content

Twisty with placeholder text

<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>
<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
<span id="demo2toggle" class="twistyContent twistyMakeHidden">
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>

Generates:

Expand... Hamlet is without question the most famous play in the English language... Collapse... 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.

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Twisty made easy

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.

You Write

   * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
       <a href="#">more...</a>
     </span>
     <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
       <a href="#">close</a>
     </span>
     <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
   * Set FLOP = </div>

Your Users Write

You See

All on, all off

You can toggle all Twisties on or off at once by putting a link or button on the page with class twistyExpandAll or twistyCollapseAll.

<button class="twistyExpandAll twikiButton">Expand all</button> 
<button class="twistyCollapseAll twikiButton">Collapse all</button>

Creates these controls:

Expand all Collapse all

When you want to use links, write:

#VarTOGGLE

Settings

Installation Instructions

Contrib Info

TwistyContrib

This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.

TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.

It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.

This Contrib should work with TWiki 4 and newer.

Usage examples

If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.

Basic Twisty

<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
<span id="demo1toggle" class="twistyContent twistyMakeHidden">
my twisty content
</span>

Generates:

Unfold Fold my twisty content

Twisty with placeholder text

<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>
<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
<span id="demo2toggle" class="twistyContent twistyMakeHidden">
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>

Generates:

Expand... Hamlet is without question the most famous play in the English language... Collapse... 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.

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Twisty made easy

Manual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).

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!"

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.

Well, here you are.

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.

You Write

   * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
       <a href="#">more...</a>
     </span>
     <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
       <a href="#">close</a>
     </span>
     <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
   * Set FLOP = </div>

Your Users Write

   * *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%
   * *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%

You See

• Brace and parenthesize in K&R style more... close
  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. ...
• Separate your control keywords from the following opening bracket more... close
  Control structures regulate the dynamic behaviour of a program, so the keywords of control structures are the most critical components of a program. ...

All on, all off

You can toggle all Twisties on or off at once by putting a link or button on the page with class twistyExpandAll or twistyCollapseAll.

<button class="twistyExpandAll twikiButton">Expand all</button> 
<button class="twistyCollapseAll twikiButton">Collapse all</button>

Creates these controls:

Expand all Collapse all

When you want to use links, write:

#VarTOGGLE

<a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
<a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>

Expand all Collapse all

Settings

• Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically

You can also set the global TWiki variable TWISTYCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

Installation Instructions

• TwistyContrib uses these header includes:

  <style type="text/css" media="all">
  @import url("%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.css");
  </style>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikilib.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiPref.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiCSS.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.js"></script>
  

Contrib Info

<-- versions below in reverse order -->

Related Topics: TWikiPreferences

TwistyContrib

This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.

TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.

It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.

This Contrib should work with TWiki 4 and newer.

Usage examples

If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.

Basic Twisty

<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
<span id="demo1toggle" class="twistyContent twistyMakeHidden">
my twisty content
</span>

Generates:

Unfold Fold my twisty content

Twisty with placeholder text

<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>
<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
<span id="demo2toggle" class="twistyContent twistyMakeHidden">
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>

Generates:

Expand... Hamlet is without question the most famous play in the English language... Collapse... 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.

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Twisty made easy

Manual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).

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!"

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.

Well, here you are.

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.

You Write

   * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
       <a href="#">more...</a>
     </span>
     <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
       <a href="#">close</a>
     </span>
     <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
   * Set FLOP = </div>

Your Users Write

   * *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%
   * *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%

You See

• Brace and parenthesize in K&R style more... close
  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. ...
• Separate your control keywords from the following opening bracket more... close
  Control structures regulate the dynamic behaviour of a program, so the keywords of control structures are the most critical components of a program. ...

All on, all off

You can toggle all Twisties on or off at once by putting a link or button on the page with class twistyExpandAll or twistyCollapseAll.

<button class="twistyExpandAll twikiButton">Expand all</button> 
<button class="twistyCollapseAll twikiButton">Collapse all</button>

Creates these controls:

Expand all Collapse all

When you want to use links, write:

#VarTOGGLE

<a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
<a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>

Expand all Collapse all

Settings

• Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically

You can also set the global TWiki variable TWISTYCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

Installation Instructions

• TwistyContrib uses these header includes:

  <style type="text/css" media="all">
  @import url("%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.css");
  </style>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikilib.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiPref.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiCSS.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.js"></script>
  

Contrib Info

<-- versions below in reverse order -->

Related Topics: TWikiPreferences

TwistyContrib

This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.

TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.

It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.

This Contrib should work with TWiki 4 and newer.

Usage examples

If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.

Basic Twisty

<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
<span id="demo1toggle" class="twistyContent twistyMakeHidden">
my twisty content
</span>

Generates:

Unfold Fold my twisty content

Twisty with placeholder text

<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>
<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
<span id="demo2toggle" class="twistyContent twistyMakeHidden">
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>

Generates:

Expand... Hamlet is without question the most famous play in the English language... Collapse... 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.

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Twisty made easy

Manual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).

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!"

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.

Well, here you are.

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.

You Write

   * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
       <a href="#">more...</a>
     </span>
     <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
       <a href="#">close</a>
     </span>
     <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
   * Set FLOP = </div>

Your Users Write

   * *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%
   * *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%

You See

• Brace and parenthesize in K&R style more... close
  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. ...
• Separate your control keywords from the following opening bracket more... close
  Control structures regulate the dynamic behaviour of a program, so the keywords of control structures are the most critical components of a program. ...

All on, all off

You can toggle all Twisties on or off at once by putting a link or button on the page with class twistyExpandAll or twistyCollapseAll.

<button class="twistyExpandAll twikiButton">Expand all</button> 
<button class="twistyCollapseAll twikiButton">Collapse all</button>

Creates these controls:

Expand all Collapse all

When you want to use links, write:

#VarTOGGLE

<a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
<a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>

Expand all Collapse all

Settings

• Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically

You can also set the global TWiki variable TWISTYCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

Installation Instructions

• TwistyContrib uses these header includes:

  <style type="text/css" media="all">
  @import url("%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.css");
  </style>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikilib.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiPref.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiCSS.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.js"></script>
  

Contrib Info

<-- versions below in reverse order -->

Related Topics: TWikiPreferences

TwistyContrib

This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.

TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.

It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.

This Contrib should work with TWiki 4 and newer.

Usage examples

If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.

Basic Twisty

<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
<span id="demo1toggle" class="twistyContent twistyMakeHidden">
my twisty content
</span>

Generates:

Unfold Fold my twisty content

Twisty with placeholder text

<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>
<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
<span id="demo2toggle" class="twistyContent twistyMakeHidden">
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>

Generates:

Expand... Hamlet is without question the most famous play in the English language... Collapse... 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.

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Twisty made easy

Manual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).

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!"

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.

Well, here you are.

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.

You Write

   * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
       <a href="#">more...</a>
     </span>
     <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
       <a href="#">close</a>
     </span>
     <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
   * Set FLOP = </div>

Your Users Write

   * *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%
   * *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%

You See

• Brace and parenthesize in K&R style more... close
  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. ...
• Separate your control keywords from the following opening bracket more... close
  Control structures regulate the dynamic behaviour of a program, so the keywords of control structures are the most critical components of a program. ...

All on, all off

You can toggle all Twisties on or off at once by putting a link or button on the page with class twistyExpandAll or twistyCollapseAll.

<button class="twistyExpandAll twikiButton">Expand all</button> 
<button class="twistyCollapseAll twikiButton">Collapse all</button>

Creates these controls:

Expand all Collapse all

When you want to use links, write:

#VarTOGGLE

<a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
<a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>

Expand all Collapse all

Settings

• Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically

You can also set the global TWiki variable TWISTYCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

Installation Instructions

• TwistyContrib uses these header includes:

  <style type="text/css" media="all">
  @import url("%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.css");
  </style>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikilib.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiPref.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiCSS.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.js"></script>
  

Contrib Info

<-- versions below in reverse order -->

Related Topics: TWikiPreferences

TwistyContrib

This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.

TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.

It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.

This Contrib should work with TWiki 4 and newer.

Usage examples

If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.

Basic Twisty

<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
<span id="demo1toggle" class="twistyContent twistyMakeHidden">
my twisty content
</span>

Generates:

Unfold Fold my twisty content

Twisty with placeholder text

<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>
<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
<span id="demo2toggle" class="twistyContent twistyMakeHidden">
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>

Generates:

Expand... Hamlet is without question the most famous play in the English language... Collapse... 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.

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Twisty made easy

Manual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).

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!"

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.

Well, here you are.

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.

You Write

   * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
       <a href="#">more...</a>
     </span>
     <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
       <a href="#">close</a>
     </span>
     <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
   * Set FLOP = </div>

Your Users Write

   * *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%
   * *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%

You See

• Brace and parenthesize in K&R style more... close
  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. ...
• Separate your control keywords from the following opening bracket more... close
  Control structures regulate the dynamic behaviour of a program, so the keywords of control structures are the most critical components of a program. ...

All on, all off

You can toggle all Twisties on or off at once by putting a link or button on the page with class twistyExpandAll or twistyCollapseAll.

<button class="twistyExpandAll twikiButton">Expand all</button> 
<button class="twistyCollapseAll twikiButton">Collapse all</button>

Creates these controls:

Expand all Collapse all

When you want to use links, write:

#VarTOGGLE

<a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
<a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>

Expand all Collapse all

Settings

• Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically

You can also set the global TWiki variable TWISTYCONTRIB_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.

Installation Instructions

• TwistyContrib uses these header includes:

  <style type="text/css" media="all">
  @import url("%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.css");
  </style>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikilib.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiPref.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiCSS.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>
  <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.js"></script>
  

Contrib Info

<-- versions below in reverse order -->

Related Topics: TWikiPreferences

TwistyContrib

This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.

TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.

It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.

Usage examples

If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.

Basic Twisty

<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
<span id="demo1toggle" class="twistyContent twistyMakeHidden">
my twisty content
</span>

Generates:

Unfold Fold my twisty content

Twisty with placeholder text

<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>
<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
<span id="demo2toggle" class="twistyContent twistyMakeHidden">
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>

Generates:

Expand... Hamlet is without question the most famous play in the English language... Collapse... 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.

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Twisty made easy

Manual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).

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!"

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.

Well, here you are.

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.

You Write

   * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
       <a href="#">more...</a>
     </span>
     <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
       <a href="#">close</a>
     </span>
     <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
   * Set FLOP = </div>

Your Users Write

   * *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%
   * *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%

You See

• Brace and parenthesize in K&R style more... close
  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. ...
• Separate your control keywords from the following opening bracket more... close
  Control structures regulate the dynamic behaviour of a program, so the keywords of control structures are the most critical components of a program. ...

All on, all off

You can toggle all Twisties on or off at once by putting a link or button on the page with class twistyExpandAll or twistyCollapseAll.

<button class="twistyExpandAll twikiButton">Expand all</button> 
<button class="twistyCollapseAll twikiButton">Collapse all</button>

Creates these controls:

Expand all Collapse all

When you want to use links, write:

#VarTOGGLE

<a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
<a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>

Expand all Collapse all

Settings

• Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically

Contrib Info

TwistyContrib

Settings

• Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically
• Set STUB = TWiki::Contrib::TwistyContrib

Installation Instructions

• Download the ZIP file from the Plugin web (see below)
• Unzip TwistyContrib.zip in your ($TWIKI_ROOT) directory. Content:

  File:	Description:
  data/TWiki/TwistyContrib.txt
  lib/TWiki/Contrib/TwistyContrib.pm

• Optionally, run TwistyContrib_installer to automatically check and install other TWiki modules that this module depends on. You can also do this step manually.
• Alternatively, manually make sure the dependencies listed in the table below are resolved.

Contrib Info

TwistyContrib

Summary

This contrib packages in a convenient way the Javascript library and the CSS file needed to implement TWisty Sections.

See the attached file for a demo and an example of usage.

To use the libraries, you must place the following scriplet either in the head section of the page (by modifying the TWikiSkins) or putting it somewhere in the topic:

<style type="text/css" media="all">
@import url("%PUBURLPATH%/TWiki/TwistyContrib/twist.css");
</style>

<script type="text/javascript" src="%PUBURLPATH%/TWiki/TwistyContrib/twist.js"></script>

It's recommended to use the TWiki:Plugins.TwistyPlugin, as it eases the deployment and use of this contrib.

Caution: If the previous scriplet is put in the HEAD section of the page or the TWiki:Plugins.TwistyPlugin is used, it won't work if the <body onload=""> manager is set by the skin. Check the twist.js file for an idea on how to register an eventmanager for the onload event without overwriting the previous one.

This Contrib should work in all versions of TWiki. It has been tested against TWiki:Codev.CairoRelease and TWiki:Codev.DakarRelease.

Customization

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Settings

• Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically
• Set STUB = TWiki::Contrib::TwistyContrib

Installation Instructions

• Download the ZIP file from the Plugin web (see below)
• Unzip TwistyContrib.zip in your ($TWIKI_ROOT) directory. Content:

  File:	Description:

• Optionally, run TwistyContrib_installer to automatically check and install other TWiki modules that this module depends on. You can also do this step manually.
• Alternatively, manually make sure the dependencies listed in the table below are resolved. None

Demo & Text

If the contrib is properly installed (and Javascript is enabled in your browser!), then you should see some folding sections below. Look at /twiki/bin/view/TWiki.TwistyContrib?raw=on to see how it's done.

Unfold Fold

Expand... Hamlet is without question the most famous play in the English language... Collapse...

Contrib Info

Related Topics: TWikiPreferences

-- TWiki:Main.SamHasler - 12 Sep 2005

<style type="text/css" media="all">
@import url("%PUBURLPATH%/TWiki/TwistyContrib/twist.css");
</style>

<script type="text/javascript" src="%PUBURLPATH%/TWiki/TwistyContrib/twist.js"></script>

It's recommended to use the TWiki:Plugins.TwistyPlugin, as it eases the deployment and use of this contrib.

Caution: If the previous scriplet is put in the HEAD section of the page or the TWiki:Plugins.TwistyPlugin is used, it won't work if the <body onload=""> manager is set by the skin. Check the twist.js file for an idea on how to register an eventmanager for the onload event without overwriting the previous one.

This Contrib should work in all versions of TWiki. It has been tested against TWiki:Codev.CairoRelease and TWiki:Codev.DakarRelease.

Customization

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Settings

• Download the ZIP file from the Plugin web (see below)
• Unzip TwistyContrib.zip in your ($TWIKI_ROOT) directory. Content:

  File:	Description:

• Optionally, run TwistyContrib_installer to automatically check and install other TWiki modules that this module depends on. You can also do this step manually.
• Alternatively, manually make sure the dependencies listed in the table below are resolved. None

Unfold Fold

Expand... Hamlet is without question the most famous play in the English language... Collapse...

Related Topics: TWikiPreferences

TwistyContrib

Summary

This contrib packages in a convenient way the Javascript library and the CSS file needed to implement TWisty Sections.

To use the libraries, you must place the following scriplet either in the head section of the page (by modifying the TWikiSkins) or putting it somewhere in the topic:

<style type="text/css" media="all">
@import url("%PUBURLPATH%/TWiki/TwistyContrib/twist.css");
</style>

<script type="text/javascript" src="%PUBURLPATH%/TWiki/TwistyContrib/twist.js"></script>

It's recommended to use the TWiki:Plugins.TwistyPlugin, as it eases the deployment and use of this contrib.

Caution: If the previous scriplet is put in the HEAD section of the page or the TWiki:Plugins.TwistyPlugin is used, it won't work if the <body onload=""> manager is set by the skin. Check the twist.js file for an idea on how to register an eventmanager for the onload event without overwriting the previous one.

This Contrib should work in all versions of TWiki. It has been tested against TWiki:Codev.CairoRelease and TWiki:Codev.DakarRelease.

Customization

Skins can customize the color of the twisty placeholder by modifiying the .twistyPlaceholder style.

Settings

• Name of the perl package
  • Set STUB = TWiki::Contrib::TwistyContrib

• One line description:
  • Set SHORTDESCRIPTION = Placeholder for the twisty javascript library.

Installation Instructions

• Download the ZIP file from the Plugin web (see below)
• Unzip TwistyContrib.zip in your ($TWIKI_ROOT) directory. Content:

  File:	Description:
  data/TWiki/TwistyContrib.txt	NEW
  lib/TWiki/Contrib/TwistyContrib.pm	NEW
  pub/TWiki/TwistyContrib/toggle-optm-jsoff-sep.html	NEW
  pub/TWiki/TwistyContrib/twist.css	NEW
  pub/TWiki/TwistyContrib/twist.js	NEW

• Optionally, run TwistyContrib_installer to automatically check and install other TWiki modules that this module depends on. You can also do this step manually.
• Alternatively, manually make sure the dependencies listed in the table below are resolved. None

Demo & Text

If the contrib is properly installed (and Javascript is enabled in your browser!), then you should see some folding sections below. Look at /twiki/bin/view/TWiki.TwistyContrib?raw=on to see how it's done.

Unfold Fold

Expand... Hamlet is without question the most famous play in the English language... Collapse...

Contrib Info

Related Topics: TWikiPreferences