data/TWiki/TwistyContrib.txt
changeset 0 414e01d06fd5
child 1 e2915a7cbdfa
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/data/TWiki/TwistyContrib.txt	Sat Jan 26 15:50:53 2008 +0100
     1.3 @@ -0,0 +1,186 @@
     1.4 +%META:TOPICINFO{author="TWikiContributor" date="1140597757" format="1.1" version="5"}%
     1.5 +---+!! <nop>%TOPIC%
     1.6 +
     1.7 +*This contrib packages in a convenient way the !JavaScript library and the CSS file needed to implement Twisty sections.*
     1.8 +
     1.9 +!TwistyContrib is installed by default in TWiki 4 and used by [[TWiki:Plugins.TwistyPlugin][Twisty Plugin]].
    1.10 +
    1.11 +It is recommended to use the !TwistyPlugin as it eases the deployment and use of this contrib.
    1.12 +
    1.13 +This Contrib should work with [[TWiki:Codev.DakarRelease][TWiki 4]] and newer.
    1.14 +
    1.15 +%TOC{title="On this page:"}%
    1.16 +
    1.17 +---++ Usage examples
    1.18 +
    1.19 +If the contrib is properly installed (and !JavaScript is enabled in your browser) you should see two folding sections below.
    1.20 +
    1.21 +---+++ Basic Twisty
    1.22 +<verbatim>
    1.23 +<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
    1.24 +<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
    1.25 +<span id="demo1toggle" class="twistyContent twistyMakeHidden">
    1.26 +my twisty content
    1.27 +</span>
    1.28 +</verbatim>
    1.29 +
    1.30 +Generates:
    1.31 +
    1.32 +<span id="demo1show" class="twistyTrigger twistyMakeVisible"><button class="twikiButton"> Unfold </button></span>
    1.33 +<span id="demo1hide" class="twistyTrigger twistyHidden"><button class="twikiButton"> Fold </button></span>
    1.34 +<span id="demo1toggle" class="twistyContent twistyMakeHidden">
    1.35 +my twisty content
    1.36 +</span>
    1.37 +
    1.38 +---+++ Twisty with placeholder text
    1.39 +<verbatim>
    1.40 +<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>
    1.41 +<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
    1.42 +<span id="demo2toggle" class="twistyContent twistyMakeHidden">
    1.43 +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.
    1.44 +</span>
    1.45 +</verbatim>
    1.46 +
    1.47 +Generates:
    1.48 +
    1.49 +<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>
    1.50 +<span id="demo2hide" class="twistyTrigger twistyHidden"><a href="#">Collapse...</a></span>
    1.51 +<span id="demo2toggle" class="twistyContent twistyMakeHidden">
    1.52 +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.
    1.53 +</span>
    1.54 +
    1.55 +Skins can customize the color of the twisty placeholder by modifiying the =.twistyPlaceholder= style.
    1.56 +
    1.57 +---++ Twisty made easy
    1.58 +
    1.59 +Manual written by [[TWiki:Main.HaraldJoerg][Harald Joerg]]. Examples require [[TWiki:Plugins.SpreadsheetPlugin][Spreadsheet Plugin]] to work (installed by default).
    1.60 +
    1.61 +<blockquote>
    1.62 +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!"
    1.63 +
    1.64 +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.
    1.65 +
    1.66 +Well, here you are.
    1.67 +
    1.68 +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.
    1.69 +</blockquote>
    1.70 +
    1.71 +---+++ You Write 
    1.72 +In your !Main.TWikiPreferences write:
    1.73 +<verbatim>
    1.74 +   * Set FLIP = <span id="twid_%CALC{$SETM(twisty_id, + 1)$GET(twisty_id)}%show" class="twistyTrigger twistyMakeVisible">
    1.75 +       <a href="#">more...</a>
    1.76 +     </span>
    1.77 +     <span id="twid_%CALC{$GET(twisty_id)}%hide" class="twistyTrigger twistyHidden">
    1.78 +       <a href="#">close</a>
    1.79 +     </span>
    1.80 +     <div id="twid_%CALC{$GET(twisty_id)}%toggle" class="twistyContent twistyMakeHidden">
    1.81 +   * Set FLOP = </div>
    1.82 +</verbatim>
    1.83 +%T% You can include the text in a verbatim block if you want (like I have done here).
    1.84 +Additionally I've added plenty of newlines and spaces to make it readable.
    1.85 +This works, and you don't have to care for invalid HTML!
    1.86 +
    1.87 +---+++ Your Users Write
    1.88 +In any topic, your users can now write things like this:
    1.89 +<verbatim>
    1.90 +   * *Brace and parenthesize in K&R style* 
    1.91 +     %FLIP% 
    1.92 +     When setting out a code block, use the K&R style of bracketing.  
    1.93 +     That is, place the opening brace at the end of the construct that controls the block. ... 
    1.94 +     %FLOP%
    1.95 +   * *Separate your control keywords from the following opening bracket* 
    1.96 +     %FLIP% 
    1.97 +     Control structures regulate the dynamic behaviour of a program, so the keywords 
    1.98 +     of control structures are the most critical components of a program. ... 
    1.99 +     %FLOP%
   1.100 +</verbatim>
   1.101 +
   1.102 +---+++ You See
   1.103 +   * *Brace and parenthesize in K&R style* 
   1.104 +     %FLIP% 
   1.105 +     When setting out a code block, use the K&R style of bracketing.  
   1.106 +     That is, place the opening brace at the end of the construct that controls the block. ... 
   1.107 +     %FLOP%
   1.108 +   * *Separate your control keywords from the following opening bracket* 
   1.109 +     %FLIP% 
   1.110 +     Control structures regulate the dynamic behaviour of a program, so the keywords 
   1.111 +     of control structures are the most critical components of a program. ... 
   1.112 +     %FLOP%
   1.113 +
   1.114 +---+++ All on, all off
   1.115 +
   1.116 +You can toggle all Twisties on or off at once by putting a link or button on the page with class =twistyExpandAll= or =twistyCollapseAll=.
   1.117 +
   1.118 +<verbatim>
   1.119 +<button class="twistyExpandAll twikiButton">Expand all</button> 
   1.120 +<button class="twistyCollapseAll twikiButton">Collapse all</button>
   1.121 +</verbatim>
   1.122 +
   1.123 +Creates these controls:
   1.124 +
   1.125 +<button class="twistyExpandAll twikiButton">Expand all</button> 
   1.126 +<button class="twistyCollapseAll twikiButton">Collapse all</button>
   1.127 +
   1.128 +When you want to use links, write:
   1.129 +
   1.130 +<verbatim>
   1.131 +#VarTOGGLE
   1.132 +
   1.133 +<a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
   1.134 +<a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>
   1.135 +</verbatim>
   1.136 +
   1.137 +
   1.138 +#VarTOGGLE
   1.139 +
   1.140 +<a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
   1.141 +<a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>
   1.142 +
   1.143 +
   1.144 +
   1.145 +
   1.146 +---++ Settings
   1.147 +
   1.148 +	* Set SHORTDESCRIPTION = Twisty section javascript library to open/close content dynamically 
   1.149 +
   1.150 +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.
   1.151 +
   1.152 +
   1.153 +---++ Installation Instructions
   1.154 +%*INSTALL_INSTRUCTIONS%
   1.155 +	* !TwistyContrib uses these header includes:
   1.156 +	<verbatim>
   1.157 +<style type="text/css" media="all">
   1.158 +@import url("%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.css");
   1.159 +</style>
   1.160 +<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikilib.js"></script>
   1.161 +<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiPref.js"></script>
   1.162 +<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TWikiJavascripts/twikiCSS.js"></script>
   1.163 +<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>
   1.164 +<script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/TwistyContrib/twist.js"></script>
   1.165 +</verbatim>
   1.166 +
   1.167 +
   1.168 +---++ Contrib Info
   1.169 +
   1.170 +|  Authors: | !JavaScript written by TWiki:Main.ArthurClemens; Contrib packaged by  TWiki:Main.RafaelAlvarez; original !JavaScript written by TWiki:Main.SamHasler. |
   1.171 +|  Copyright &copy;: | 2005 Sam Hasler and Rafael Alvarez; 2006,2007 Arthur Clemens |
   1.172 +|  License: | [[http://www.gnu.org/copyleft/gpl.html][GPL]] |
   1.173 +|  Dependencies: | <table border="1"><tr><th>Name</th><th>Version</th><th>Description</th></tr><tr><td align="left">TWiki::Plugins::BehaviourContrib</td><td align="left">&gt;=1.000</td><td align="left">Required</td></tr></table> |
   1.174 +|  Plugin&nbsp;Version: | 20 Jun 2007 (version 1.4.1)  |
   1.175 +|  Version: | 15675 (22 Jan 2008) |
   1.176 +|  Change&nbsp;History: | <!-- versions below in reverse order -->&nbsp; |
   1.177 +|  20 Jun 2007 | 1.4 Arthur Clemens - Updated script so TwistyPlugin can work without extra javascript 'init' calls. |
   1.178 +|  18 Jun 2007 | 1.3 Arthur Clemens - Updated with TWiki 4 !JavaScript files. |
   1.179 +|  25 Oct 2006 | 1.2 Arthur Clemens - Updated !JavaScript to support !TwistyPlugin version 1.2  |
   1.180 +|  26 Sep 2006 | 1.010 Arthur Clemens - Complete !JavaScript rewrite |
   1.181 +|  12 Sep 2005 | 1.000 First Version |
   1.182 +|  Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
   1.183 +|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
   1.184 +|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |
   1.185 +
   1.186 +__Related Topics:__ %TWIKIWEB%.TWikiPreferences
   1.187 + 
   1.188 +%META:FILEATTACHMENT{name="twist.js" attachment="twist.js" attr="" comment="!JavaScript library" date="1126427179" path="twist.js" size="3441" stream="twist.js" user="TWikiContributor" version="0"}%
   1.189 +%META:FILEATTACHMENT{name="twist.css" attachment="twist.css" attr="" comment="Style Sheet" date="1126427224" path="twist.css" size="122" stream="twist.css" user="TWikiContributor" version="0"}%