Difference: TwistyContrib (1 vs. 18)

Revision 182018-07-06 - TWikiContributor

 

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.
-->
Twisty section Javascript library to open/close content dynamically

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:

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

Your Users Write

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

   * *Brace and parenthesize in K&amp;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:

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

This module is pre-installed. TWiki administrators can upgrade the module as needed on the TWiki server.

<--/twistyPlugin twikiMakeVisibleInline-->

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

<--/twistyPlugin-->

Contrib Info

Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler
Changed:
<
<
Copyright: © 2005 Sam Hasler and Rafael Alvarez
© 2006-2007 Arthur Clemens
© 2008-2015 Peter Thoeny
© 2005-2015 TWiki:TWiki.TWikiContributor
>
>
Copyright: © 2005 Sam Hasler and Rafael Alvarez
© 2006-2007 Arthur Clemens
© 2008-2018 Peter Thoeny
© 2005-2018 TWiki:TWiki.TWikiContributor
 
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Changed:
<
<
Version: 2015-04-28
>
>
Version: 2018-07-06
 
<--/twistyPlugin twikiMakeVisibleInline-->
Added:
>
>
2018-07-06: TWikibug:Item7841: Copyright update to 2018
2016-01-09: TWikibug:Item7708: Copyright update to 2016
 
2015-04-28: TWikibug:Item7648: Less intrusive Twisty link - no dotted underlines
2013-02-16: TWikibug:Item7123: Use TWISTY in installation instructions and change history
2011-07-10: TWikibug:Item6725: Change global package variables from "use vars" to "our"
2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 Initial version
<--/twistyPlugin-->
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TwistyPlugin, TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 172015-04-28 - TWikiContributor

 

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.
-->
Changed:
<
<
>
>
Added:
>
>
 
Added:
>
>
 Twisty section Javascript library to open/close content dynamically

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:

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

Your Users Write

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

   * *Brace and parenthesize in K&amp;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:

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

This module is pre-installed. TWiki administrators can upgrade the module as needed on the TWiki server.

<--/twistyPlugin twikiMakeVisibleInline-->

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

<--/twistyPlugin-->

Contrib Info

Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler
Changed:
<
<
Copyright: © 2005 Sam Hasler and Rafael Alvarez
© 2006-2007 Arthur Clemens
© 2008-2013 Peter Thoeny
© 2005-2013 TWiki:TWiki.TWikiContributor
>
>
Copyright: © 2005 Sam Hasler and Rafael Alvarez
© 2006-2007 Arthur Clemens
© 2008-2015 Peter Thoeny
© 2005-2015 TWiki:TWiki.TWikiContributor
 
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Changed:
<
<
Version: 2013-02-16
>
>
Version: 2015-04-28
 
<--/twistyPlugin twikiMakeVisibleInline-->
Added:
>
>
2015-04-28: TWikibug:Item7648: Less intrusive Twisty link - no dotted underlines
 
2013-02-16: TWikibug:Item7123: Use TWISTY in installation instructions and change history
2011-07-10: TWikibug:Item6725: Change global package variables from "use vars" to "our"
2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 Initial version
<--/twistyPlugin-->
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TwistyPlugin, TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 162013-02-16 - TWikiContributor

 

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.
-->
Twisty section Javascript library to open/close content dynamically

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:

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

Your Users Write

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

   * *Brace and parenthesize in K&amp;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:

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

Added:
>
>
This module is pre-installed. TWiki administrators can upgrade the module as needed on the TWiki server.
<--/twistyPlugin twikiMakeVisibleInline-->
 %*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>
Added:
>
>
<--/twistyPlugin-->
 

Contrib Info

Added:
>
>
 
Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler
Changed:
<
<
Copyright: © 2005 Sam Hasler and Rafael Alvarez;
© 2006-2007 Arthur Clemens;
© 2005-2011 TWiki:TWiki.TWikiContributor
>
>
Copyright: © 2005 Sam Hasler and Rafael Alvarez
© 2006-2007 Arthur Clemens
© 2008-2013 Peter Thoeny
© 2005-2013 TWiki:TWiki.TWikiContributor
 
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Changed:
<
<
Plugin Version: 2011-07-10
Version: 21651 (2012-12-16)
Change History:
<-- versions below in reverse order -->
 
>
>
Version: 2013-02-16
%TWISTY{ mode="div"
Added:
>
>
showlink="Show Change History https://twiki.pp.rl.ac.uk/twiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif" hidelink="Hide Change History https://twiki.pp.rl.ac.uk/twiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" }%
2013-02-16: TWikibug:Item7123: Use TWISTY in installation instructions and change history
 
2011-07-10: TWikibug:Item6725: Change global package variables from "use vars" to "our"
2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
Changed:
<
<
12 Sep 2005 1.000 First Version
>
>
12 Sep 2005 1.000 Initial version
Added:
>
>
</>
<--/twistyPlugin-->
 
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TwistyPlugin, TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 152011-07-10 - TWikiContributor

 

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.
-->
Twisty section Javascript library to open/close content dynamically

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:

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

Your Users Write

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

   * *Brace and parenthesize in K&amp;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:

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

Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler
Copyright: © 2005 Sam Hasler and Rafael Alvarez;
© 2006-2007 Arthur Clemens;
© 2005-2011 TWiki:TWiki.TWikiContributor
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Plugin Version: 2011-07-10
Changed:
<
<
Version: 21651 (2012-10-07)
>
>
Version: 21651 (2012-12-16)
 
Change History:
<-- versions below in reverse order -->
 
2011-07-10: TWikibug:Item6725: Change global package variables from "use vars" to "our"
2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TwistyPlugin, TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 142011-07-10 - TWikiContributor

 

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.
-->
Twisty section Javascript library to open/close content dynamically

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:

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

Your Users Write

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

   * *Brace and parenthesize in K&amp;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:

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

Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler
Copyright: © 2005 Sam Hasler and Rafael Alvarez;
© 2006-2007 Arthur Clemens;
© 2005-2011 TWiki:TWiki.TWikiContributor
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Plugin Version: 2011-07-10
Changed:
<
<
Version: 21651 (2012-01-14)
>
>
Version: 21651 (2012-10-07)
 
Change History:
<-- versions below in reverse order -->
 
2011-07-10: TWikibug:Item6725: Change global package variables from "use vars" to "our"
2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TwistyPlugin, TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 132011-07-10 - TWikiContributor

 

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.
-->
Twisty section Javascript library to open/close content dynamically

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:

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

Your Users Write

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

   * *Brace and parenthesize in K&amp;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:

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

Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler
Copyright: © 2005 Sam Hasler and Rafael Alvarez;
© 2006-2007 Arthur Clemens;
© 2005-2011 TWiki:TWiki.TWikiContributor
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Plugin Version: 2011-07-10
Changed:
<
<
Version: 21651 (2011-08-20)
>
>
Version: 21651 (2012-01-14)
 
Change History:
<-- versions below in reverse order -->
 
2011-07-10: TWikibug:Item6725: Change global package variables from "use vars" to "our"
2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TwistyPlugin, TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 122011-07-10 - TWikiContributor

 

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.
-->
Twisty section Javascript library to open/close content dynamically

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:

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

Your Users Write

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

   * *Brace and parenthesize in K&amp;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:

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

Changed:
<
<
Authors: JavaScript written by TWiki:Main/ArthurClemens; Contrib packaged by TWiki:Main/RafaelAlvarez; original JavaScript written by TWiki:Main/SamHasler.
Copyright: © 2005 Sam Hasler and Rafael Alvarez;
© 2006-2007 Arthur Clemens,
© 2005-2010 TWiki:TWiki/TWikiContributor
>
>
Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler
Copyright: © 2005 Sam Hasler and Rafael Alvarez;
© 2006-2007 Arthur Clemens;
© 2005-2011 TWiki:TWiki.TWikiContributor
 
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Changed:
<
<
Plugin Version: 2010-05-15 (version 1.5)
Version: 18692 (2010-05-29)
>
>
Plugin Version: 2011-07-10
Version: 21651 (2011-08-20)
 
Change History:
<-- versions below in reverse order -->
 
Added:
>
>
2011-07-10: TWikibug:Item6725: Change global package variables from "use vars" to "our"
 
2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TwistyPlugin, TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 112010-05-16 - TWikiContributor

 

TwistyContrib

Added:
>
>
<--
   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.
-->
Twisty section Javascript library to open/close content dynamically
 
Changed:
<
<
This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.
>
>

Introduction

 
Changed:
<
<
TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.
>
>
This contrib packages in a convenient way the JavaScript library and the CSS file needed to implement Twisty sections.
 
Added:
>
>
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.
Deleted:
<
<
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

Added:
>
>
 
<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:

my twisty content

Twisty with placeholder text

Added:
>
>
 
<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

Changed:
<
<
Manual written by Harald Joerg. Examples require Spreadsheet Plugin to work (installed by default).
>
>
Manual written by Harald Joerg. Examples require SpreadSheetPlugin to work (installed by default).
 
Changed:
<
<
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!"
>
>
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!"
 
Changed:
<
<
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.
>
>
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

Changed:
<
<
In your Main.TWikiPreferences write:
>
>
Added:
>
>
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>
Changed:
<
<
TIP You can include the text in a verbatim block if you want (like I have done here).
>
>
TIP 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!
Deleted:
<
<
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!
 

Your Users Write

Added:
>
>
 In any topic, your users can now write things like this:
Changed:
<
<
  • Brace and parenthesize in K&R style more... close
    When setting out a code block, use the K&R style of bracketing.
>
>
  • 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. ...
Deleted:
<
<
That is, place the opening brace at the end of the construct that controls the block. ...
 
Changed:
<
<
  • Separate your control keywords from the following opening bracket more... close
    Control structures regulate the dynamic behaviour of a program, so the keywords
>
>
  • Separate your control keywords from the following opening bracket more... close
    Control structures regulate the dynamic behavior of a program, so the keywords of control structures are the most critical components of a program. ...
Deleted:
<
<
of control structures are the most critical components of a program. ...
 

You See

Changed:
<
<
  • 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. ...
>
>
  • 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. ...
 
Changed:
<
<
  • Separate your control keywords from the following opening bracket more... close
    Control structures regulate the dynamic behaviour of a program, so the keywords
>
>
  • 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. ...
Deleted:
<
<
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:

When you want to use links, write:

#VarTOGGLE
Deleted:
<
<
 Expand all Collapse all
Deleted:
<
<
 
Deleted:
<
<
 Expand all Collapse all
Deleted:
<
<
 

Settings

Changed:
<
<
  • Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically
>
>
  • Set SHORTDESCRIPTION = Twisty section Javascript library to open/close content dynamically
 
Changed:
<
<
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.
>
>
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.
 
Deleted:
<
<
 

Installation Instructions

Added:
>
>
 %*INSTALL_INSTRUCTIONS%
Changed:
<
<
  • TwistyContrib uses these header includes:

>
>
  • TwistyContrib uses these header includes:
 
Changed:
<
<
>
>
 
Deleted:
<
<
 

Contrib Info

Changed:
<
<
Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler.
Copyright ©: 2005 Sam Hasler and Rafael Alvarez; 2006,2007 Arthur Clemens
>
>
Authors: JavaScript written by TWiki:Main/ArthurClemens; Contrib packaged by TWiki:Main/RafaelAlvarez; original JavaScript written by TWiki:Main/SamHasler.
Copyright: © 2005 Sam Hasler and Rafael Alvarez;
© 2006-2007 Arthur Clemens,
© 2005-2010 TWiki:TWiki/TWikiContributor
 
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Changed:
<
<
Plugin Version: 20 Jun 2007 (version 1.4.1)
Version: 17595 (02 Sep 2009)
>
>
Plugin Version: 2010-05-15 (version 1.5)
Version: 18692 (2010-05-29)
 
Change History:
<-- versions below in reverse order -->
 
Added:
>
>
2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
 
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal
Changed:
<
<
Related Topics: TWikiPreferences

>
>
Related Topics: TwistyPlugin, TWikiPreferences
 
META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 102006-02-22 - TWikiContributor

 

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:

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

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

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 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:

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

Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler.
Copyright ©: 2005 Sam Hasler and Rafael Alvarez; 2006,2007 Arthur Clemens
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Plugin Version: 20 Jun 2007 (version 1.4.1)
Changed:
<
<
Version: 17595 (29 Apr 2009)
>
>
Version: 17595 (02 Sep 2009)
 
Change History:
<-- versions below in reverse order -->
 
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 92006-02-22 - TWikiContributor

 

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:

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

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

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 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:

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

Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler.
Copyright ©: 2005 Sam Hasler and Rafael Alvarez; 2006,2007 Arthur Clemens
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Plugin Version: 20 Jun 2007 (version 1.4.1)
Changed:
<
<
Version: 17595 (30 Mar 2009)
>
>
Version: 17595 (29 Apr 2009)
 
Change History:
<-- versions below in reverse order -->
 
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 82006-02-22 - TWikiContributor

 

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:

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

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

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 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:

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

Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler.
Copyright ©: 2005 Sam Hasler and Rafael Alvarez; 2006,2007 Arthur Clemens
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Plugin Version: 20 Jun 2007 (version 1.4.1)
Changed:
<
<
Version: 17595 (06 Dec 2008)
>
>
Version: 17595 (30 Mar 2009)
 
Change History:
<-- versions below in reverse order -->
 
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 72006-02-22 - TWikiContributor

 

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:

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

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

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 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:

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

Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler.
Copyright ©: 2005 Sam Hasler and Rafael Alvarez; 2006,2007 Arthur Clemens
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Plugin Version: 20 Jun 2007 (version 1.4.1)
Changed:
<
<
Version: 15675 (04 Aug 2008)
>
>
Version: 17595 (06 Dec 2008)
 
Change History:
<-- versions below in reverse order -->
 
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 62006-02-22 - TWikiContributor

 

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:

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

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

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 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:

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

Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler.
Copyright ©: 2005 Sam Hasler and Rafael Alvarez; 2006,2007 Arthur Clemens
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Plugin Version: 20 Jun 2007 (version 1.4.1)
Changed:
<
<
Version: 15675 (22 Jan 2008)
>
>
Version: 15675 (04 Aug 2008)
 
Change History:
<-- versions below in reverse order -->
 
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"

Revision 52006-02-22 - TWikiContributor

 

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.

Changed:
<
<
This Contrib should work in all versions of TWiki. It has been tested against TWiki 3 and TWiki 4.
>
>
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:

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

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

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 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:

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
Deleted:
<
<
  • Set STUB = TWiki::Contrib::TwistyContrib
 
Changed:
<
<

Installation Instructions

>
>
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.
 
Deleted:
<
<
  • 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  
    pub/TWiki/TwistyContrib/twist.css  
    pub/TWiki/TwistyContrib/twist.js  
    pub/TWiki/TwistyContrib/twist.compressed.js  
 
Changed:
<
<
  • 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.
    NameVersionDescription
    TWiki::Plugins::BehaviourContrib>=1.000Required
>
>

Installation Instructions

%*INSTALL_INSTRUCTIONS%
  • TwistyContrib uses these header includes:
Added:
>
>
<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

Changed:
<
<
Authors: JavaScript created by TWiki:Main.SamHasler, Contrib packaged by TWiki:Main.RafaelAlvarez
Copyright ©: 2005 Sam Hasler and Rafael Alvarez, 2006 Arthur Clemens
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal
>
>
Authors: JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by TWiki:Main.RafaelAlvarez; original JavaScript written by TWiki:Main.SamHasler.
Copyright ©: 2005 Sam Hasler and Rafael Alvarez; 2006,2007 Arthur Clemens
License: GPL
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
Plugin Version: 20 Jun 2007 (version 1.4.1)
Version: 15675 (22 Jan 2008)
Change History:
<-- versions below in reverse order -->
 
20 Jun 2007 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls.
18 Jun 2007 1.3 Arthur Clemens - Updated with TWiki 4 JavaScript files.
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
Added:
>
>
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal
  Related Topics: TWikiPreferences

Changed:
<
<
META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributors" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributors" version="0"
>
>
META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"
 

Revision 42006-02-22 - TWikiContributor

 

TwistyContrib

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

Summary

>
>
TwistyContrib is installed by default in TWiki 4 and used by Twisty Plugin.
 
Changed:
<
<
This contrib packages in a convenient way the Javascript library and the CSS file needed to implement TWisty Sections.
>
>
It is recommended to use the TwistyPlugin as it eases the deployment and use of this contrib.
 
Changed:
<
<
See the attached file for a demo and an example of usage.
>
>
This Contrib should work in all versions of TWiki. It has been tested against TWiki 3 and TWiki 4.
 
Changed:
<
<
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:
>
>
 
Changed:
<
<
>
>

Usage examples

Deleted:
<
<
 
Changed:
<
<
>
>
If the contrib is properly installed (and JavaScript is enabled in your browser) you should see two folding sections below.
Added:
>
>

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>
 
Changed:
<
<
It's recommended to use the TWiki:Plugins.TwistyPlugin, as it eases the deployment and use of this contrib.
>
>
Generates:
 
Changed:
<
<
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.
>
>
Added:
>
>
my twisty content
 
Changed:
<
<
This Contrib should work in all versions of TWiki. It has been tested against TWiki:Codev.CairoRelease and TWiki:Codev.DakarRelease.
>
>

Twisty with placeholder text

Added:
>
>
<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>
 
Changed:
<
<

Customization

>
>
Generates:
 
Added:
>
>
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.
Added:
>
>

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

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

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 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:

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
  • 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  
Deleted:
<
<
pub/TWiki/TwistyContrib/toggle-optm-jsoff-sep.html  
 
pub/TWiki/TwistyContrib/twist.css  
pub/TWiki/TwistyContrib/twist.js  
Added:
>
>
pub/TWiki/TwistyContrib/twist.compressed.js  
 
  • 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.
Changed:
<
<
None
>
>
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
 
Deleted:
<
<

Demo & Text

 
Deleted:
<
<
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.


Click on the button above to fold this section.

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; the playwright achieved artistic maturity in this work through his brilliant depiction of the hero's struggle with two opposing forces: moral integrity and the need to avenge his father's murder.

More... Hide more

For more Shakespeare plays, see Wikipedia:WilliamShakespeare
 

Contrib Info

Changed:
<
<
Authors: Javascript created by TWiki:Main.SamHasler, Contrib packaged by TWiki:Main.RafaelAlvarez
Copyright ©: 2005 Sam Hasler and Rafael Alvarez
>
>
Authors: JavaScript created by TWiki:Main.SamHasler, Contrib packaged by TWiki:Main.RafaelAlvarez
Copyright ©: 2005 Sam Hasler and Rafael Alvarez, 2006 Arthur Clemens
 
License: GPL
Changed:
<
<
Dependencies: None
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal
>
>
Dependencies:
NameVersionDescription
TWiki::Plugins::BehaviourContrib>=1.000Required
25 Oct 2006 1.2 Arthur Clemens - Updated JavaScript to support TwistyPlugin version 1.2
26 Sep 2006 1.010 Arthur Clemens - Complete JavaScript rewrite
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Added:
>
>
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal
  Related Topics: TWikiPreferences

Changed:
<
<
-- TWiki:Main.SamHasler - 12 Sep 2005
>
>
META FILEATTACHMENT attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributors" version="0"
Deleted:
<
<
META FILEATTACHMENT attachment="twist.js" attr="" comment="Javscript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributors" version="0"
 
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributors" version="0"
Deleted:
<
<
META FILEATTACHMENT attachment="toggle-optm-jsoff-sep.html" attr="" comment="Example of usage" date="1126427282" name="toggle-optm-jsoff-sep.html" path="toggle-optm-jsoff-sep.html" size="1716" stream="toggle-optm-jsoff-sep.html" user="TWikiContributors" version="0"
 

Revision 32006-02-22 - TWikiContributor

 

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:
Changed:
<
<
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
>
>
data/TWiki/TwistyContrib.txt  
lib/TWiki/Contrib/TwistyContrib.pm  
pub/TWiki/TwistyContrib/toggle-optm-jsoff-sep.html  
pub/TWiki/TwistyContrib/twist.css  
pub/TWiki/TwistyContrib/twist.js  
 
  • 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.


Click on the button above to fold this section.

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; the playwright achieved artistic maturity in this work through his brilliant depiction of the hero's struggle with two opposing forces: moral integrity and the need to avenge his father's murder.

More... Hide more

For more Shakespeare plays, see Wikipedia:WilliamShakespeare

Contrib Info

Authors: Javascript created by TWiki:Main.SamHasler, Contrib packaged by TWiki:Main.RafaelAlvarez
Copyright ©: 2005 Sam Hasler and Rafael Alvarez
License: GPL
Dependencies: None
12 Sep 2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TWikiPreferences

-- TWiki:Main.SamHasler - 12 Sep 2005

META FILEATTACHMENT attachment="twist.js" attr="" comment="Javscript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributors" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributors" version="0"
META FILEATTACHMENT attachment="toggle-optm-jsoff-sep.html" attr="" comment="Example of usage" date="1126427282" name="toggle-optm-jsoff-sep.html" path="toggle-optm-jsoff-sep.html" size="1716" stream="toggle-optm-jsoff-sep.html" user="TWikiContributors" version="0"

Revision 22006-02-22 - TWikiContributor

Changed:
<
<

TwistyContrib

>
>

TwistyContrib

 
Changed:
<
<

Summary

>
>

Summary

  This contrib packages in a convenient way the Javascript library and the CSS file needed to implement TWisty Sections.
Added:
>
>
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

Changed:
<
<
  • Name of the perl package
    • Set STUB = TWiki::Contrib::TwistyContrib
>
>
  • Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically
  • Set STUB = TWiki::Contrib::TwistyContrib
 
Changed:
<
<
  • One line description:
>
>

Installation Instructions

Deleted:
<
<
    • Set SHORTDESCRIPTION = Placeholder for the twisty javascript library.
 
Deleted:
<
<

Installation Instructions

 
  • Download the ZIP file from the Plugin web (see below)
  • Unzip TwistyContrib.zip in your ($TWIKI_ROOT) directory. Content:
    File: Description:
Changed:
<
<
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
>
>
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
Changed:
<
<

Demo & Text

>
>

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.


Click on the button above to fold this section.

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; the playwright achieved artistic maturity in this work through his brilliant depiction of the hero's struggle with two opposing forces: moral integrity and the need to avenge his father's murder.

More... Hide more

For more Shakespeare plays, see Wikipedia:WilliamShakespeare
Changed:
<
<

Contrib Info

>
>

Contrib Info

 
Authors: Javascript created by TWiki:Main.SamHasler, Contrib packaged by TWiki:Main.RafaelAlvarez
Copyright ©: 2005 Sam Hasler and Rafael Alvarez
License: GPL
Dependencies: None
Changed:
<
<
12/09/2005 1.000 First Version
>
>
12 Sep 2005 1.000 First Version
 
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TWikiPreferences

Changed:
<
<
META FILEATTACHMENT attachment="twist.js" attr="" comment="Javscript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="Main.RafaelAlvarez" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="Main.RafaelAlvarez" version="0"
META FILEATTACHMENT attachment="toggle-optm-jsoff-sep.html" attr="" comment="Example of usage" date="1126427282" name="toggle-optm-jsoff-sep.html" path="toggle-optm-jsoff-sep.html" size="1716" stream="toggle-optm-jsoff-sep.html" user="Main.RafaelAlvarez" version="0"
>
>
-- TWiki:Main.SamHasler - 12 Sep 2005
META FILEATTACHMENT attachment="twist.js" attr="" comment="Javscript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="TWikiContributors" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="TWikiContributors" version="0"
META FILEATTACHMENT attachment="toggle-optm-jsoff-sep.html" attr="" comment="Example of usage" date="1126427282" name="toggle-optm-jsoff-sep.html" path="toggle-optm-jsoff-sep.html" size="1716" stream="toggle-optm-jsoff-sep.html" user="TWikiContributors" version="0"
 

Revision 12005-09-12 - RafaelAlvarez

 

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.


Click on the button above to fold this section.

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; the playwright achieved artistic maturity in this work through his brilliant depiction of the hero's struggle with two opposing forces: moral integrity and the need to avenge his father's murder.

More... Hide more

For more Shakespeare plays, see Wikipedia:WilliamShakespeare

Contrib Info

Authors: Javascript created by TWiki:Main.SamHasler, Contrib packaged by TWiki:Main.RafaelAlvarez
Copyright ©: 2005 Sam Hasler and Rafael Alvarez
License: GPL
Dependencies: None
12/09/2005 1.000 First Version
Home: http://TWiki.org/cgi-bin/view/Plugins/TwistyContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TwistyContribAppraisal

Related Topics: TWikiPreferences

META FILEATTACHMENT attachment="twist.js" attr="" comment="Javscript library" date="1126427179" name="twist.js" path="twist.js" size="3441" stream="twist.js" user="Main.RafaelAlvarez" version="0"
META FILEATTACHMENT attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" name="twist.css" path="twist.css" size="122" stream="twist.css" user="Main.RafaelAlvarez" version="0"
META FILEATTACHMENT attachment="toggle-optm-jsoff-sep.html" attr="" comment="Example of usage" date="1126427282" name="toggle-optm-jsoff-sep.html" path="toggle-optm-jsoff-sep.html" size="1716" stream="toggle-optm-jsoff-sep.html" user="Main.RafaelAlvarez" version="0"
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TwistyContrib.