data/TWiki/TwistyPlugin.txt,v
changeset 0 414e01d06fd5
child 1 e2915a7cbdfa
equal deleted inserted replaced
-1:000000000000 0:414e01d06fd5
       
     1 head	1.2;
       
     2 access;
       
     3 symbols;
       
     4 locks; strict;
       
     5 comment	@# @;
       
     6 
       
     7 
       
     8 1.2
       
     9 date	2008.01.22.03.21.32;	author TWikiContributor;	state Exp;
       
    10 branches;
       
    11 next	1.1;
       
    12 
       
    13 1.1
       
    14 date	2007.01.16.04.12.00;	author TWikiContributor;	state Exp;
       
    15 branches;
       
    16 next	;
       
    17 
       
    18 
       
    19 desc
       
    20 @buildrelease
       
    21 @
       
    22 
       
    23 
       
    24 1.2
       
    25 log
       
    26 @buildrelease
       
    27 @
       
    28 text
       
    29 @%META:TOPICINFO{author="BaseUserMapping_333" date="1195487956" format="1.1" version="2"}%
       
    30 ---+!! <nop>%TOPIC%
       
    31 
       
    32 *A "twisty" is an interface toggle control to show and hide content.*
       
    33 
       
    34 !TwistyPlugin gives you several options to control the appearance of a twisty:
       
    35    * use link text or buttons
       
    36    * position an icon left or right
       
    37    * remember the state at the next visit of the page
       
    38    * start the Twisty open or closed
       
    39    * start the Twisty open or closed for the first visit
       
    40    * use a span or div for the content
       
    41    * set a class for the content span or div
       
    42 
       
    43 Twisty has a fallback mechanism in case !JavaScript is not available: all content is displayed and the control buttons are hidden.
       
    44 
       
    45 %TOC{title="On this page:"}%
       
    46 
       
    47 ---++ Usage examples
       
    48 ---+++ Triad
       
    49 A Twisty consists of 3 elements:
       
    50    1 Show button
       
    51    1 Hide button
       
    52    1 Collapsing content ('Toggle')
       
    53    
       
    54 The typical !TwistyPlugin triad will look like this (pseudo code):
       
    55 
       
    56 <verbatim>
       
    57 %TWISTYSHOW{}% %TWISTYHIDE{}%
       
    58 (there may be other things between buttons and content)
       
    59 %TWISTYTOGGLE{}% my content %ENDTWISTYTOGGLE%
       
    60 </verbatim>
       
    61 
       
    62 ---+++ Shorthand
       
    63 
       
    64 The Twisty triad is conveniently packed into shorthand =%<nop>TWISTY{some parameters}% Collapsing content %<nop>ENDTWISTY%=:
       
    65 
       
    66 <verbatim>
       
    67 %TWISTY{}%
       
    68 my twisty content
       
    69 %ENDTWISTY%
       
    70 </verbatim>
       
    71 
       
    72 Will generate:
       
    73 
       
    74 %TWISTY{}%
       
    75 %GREEN% my twisty content %ENDCOLOR%
       
    76 %ENDTWISTY%
       
    77 
       
    78 You may have noticed that no parameters are passed to =%<nop>TWISTY{}%= but the show and hide links _do_ have text! The default values are fetched from plugin settings =TWISTYSHOWLINK= and =TWISTYHIDELINK=, see [[#PluginSettings][Plugin Settings]] below.
       
    79 
       
    80 
       
    81 ---+++ Twisty with icons
       
    82 We will use =mode="div"= to put the collapsing content below the button (the default mode is ="span"=).
       
    83 
       
    84 <verbatim>
       
    85 %TWISTY{
       
    86 mode="div"
       
    87 showlink="Show..."
       
    88 hidelink="Hide"
       
    89 showimgleft="%ICONURLPATH{toggleopen-small}%"
       
    90 hideimgleft="%ICONURLPATH{toggleclose-small}%"
       
    91 }%
       
    92 my twisty content
       
    93 %ENDTWISTY%
       
    94 </verbatim>
       
    95 
       
    96 It will look like this:
       
    97 
       
    98 %TWISTY{
       
    99 mode="div"
       
   100 showlink="Show..."
       
   101 hidelink="Hide"
       
   102 showimgleft="%ICONURLPATH{toggleopen-small}%"
       
   103 hideimgleft="%ICONURLPATH{toggleclose-small}%"
       
   104 }%
       
   105 %GREEN% my twisty content %ENDCOLOR%
       
   106 %ENDTWISTY%
       
   107 
       
   108 To put icons at the right side, write
       
   109 <verbatim>
       
   110 %TWISTY{
       
   111 mode="div"
       
   112 showlink="Show&nbsp;"
       
   113 hidelink="Hide&nbsp;"
       
   114 showimgright="%ICONURLPATH{toggleopen-small}%"
       
   115 hideimgright="%ICONURLPATH{toggleclose-small}%"
       
   116 }%
       
   117 my twisty content
       
   118 %ENDTWISTY%
       
   119 </verbatim>
       
   120 
       
   121 %TWISTY{
       
   122 mode="div"
       
   123 showlink="Show&nbsp;"
       
   124 hidelink="Hide&nbsp;"
       
   125 showimgright="%ICONURLPATH{toggleopen-small}%"
       
   126 hideimgright="%ICONURLPATH{toggleclose-small}%"
       
   127 }%
       
   128 %GREEN% my twisty content %ENDCOLOR%
       
   129 %ENDTWISTY%
       
   130 
       
   131 
       
   132 
       
   133 ---+++ Make it remember
       
   134 To store the last state in a TWIKIPREF cookie, add the parameter =remember="on"=.%BR%
       
   135 To test this, reload the page after toggling.
       
   136 
       
   137 <verbatim>
       
   138 %TWISTY{
       
   139 showlink="Show..."
       
   140 hidelink="Hide"
       
   141 remember="on"
       
   142 }%
       
   143 my twisty content
       
   144 %ENDTWISTY%
       
   145 </verbatim>
       
   146 
       
   147 %TWISTY{
       
   148 showlink="Show..."
       
   149 hidelink="Hide"
       
   150 remember="on"
       
   151 }%
       
   152 %GREEN% my twisty content %ENDCOLOR%
       
   153 %ENDTWISTY%
       
   154 
       
   155 If a Twisty state has been stored in a TWIKIPREF cookie before, it can be cleared by using =remember="off"=:
       
   156 
       
   157 <verbatim>
       
   158 %TWISTY{
       
   159 showlink="Show..."
       
   160 hidelink="Hide"
       
   161 remember="off"
       
   162 }%
       
   163 my twisty content
       
   164 %ENDTWISTY%
       
   165 </verbatim>
       
   166 
       
   167 %TWISTY{
       
   168 showlink="Show..."
       
   169 hidelink="Hide"
       
   170 remember="off"
       
   171 }%
       
   172 %GREEN% my twisty content %ENDCOLOR%
       
   173 %ENDTWISTY%
       
   174 
       
   175 *NOTE:* Twisty ids are generated automatically. If you need control over exactly _which_ Twisty should be remembered, add the parameter =id=:
       
   176 
       
   177 <verbatim>
       
   178 %TWISTY{
       
   179 id="currentCustomerList"
       
   180 showlink="Show..."
       
   181 hidelink="Hide"
       
   182 remember="on"
       
   183 }%
       
   184 my customer list
       
   185 %ENDTWISTY%
       
   186 </verbatim>
       
   187 
       
   188 Note that =id= sets a sitewide cookie. To create a unique id, add topic or web variables:
       
   189 <verbatim>
       
   190 id="%WEB%_%TOPIC%_currentCustomerList"
       
   191 </verbatim>
       
   192 
       
   193 
       
   194 
       
   195 ---+++ Make it obey
       
   196 To let the Twisty start with its content folded open, add parameter =start="show"=. 
       
   197 
       
   198 <verbatim>
       
   199 %TWISTY{
       
   200 showlink="Show..."
       
   201 hidelink="Hide"
       
   202 start="show"
       
   203 }%
       
   204 my twisty content
       
   205 %ENDTWISTY%
       
   206 </verbatim>
       
   207 
       
   208 %TWISTY{
       
   209 showlink="Show..."
       
   210 hidelink="Hide"
       
   211 start="show"
       
   212 }%
       
   213 %GREEN% my twisty content %ENDCOLOR%
       
   214 %ENDTWISTY%
       
   215 
       
   216 Likewise use =start="hide"= to start with hidden content.
       
   217 
       
   218 <verbatim>
       
   219 %TWISTY{
       
   220 showlink="Show..."
       
   221 hidelink="Hide
       
   222 start="hide"
       
   223 }%
       
   224 my twisty content
       
   225 %ENDTWISTY%
       
   226 </verbatim>
       
   227 
       
   228 %TWISTY{
       
   229 showlink="Show..."
       
   230 hidelink="Hide
       
   231 start="hide"
       
   232 }%
       
   233 %GREEN% my twisty content %ENDCOLOR%
       
   234 %ENDTWISTY%
       
   235 
       
   236 
       
   237 
       
   238 ---+++ Make it obey only the first time
       
   239 To let the Twisty start with its content folded open the first time the visitor sees the Twisty, add the parameter =firststart="show"=.
       
   240 If =remember="on"= is used, subsequential visits to the page will display the Twisty according the cookie setting.
       
   241 
       
   242 <verbatim>
       
   243 %TWISTY{
       
   244 showlink="Show..."
       
   245 hidelink="Hide"
       
   246 firststart="show"
       
   247 }%
       
   248 my twisty content
       
   249 %ENDTWISTY%
       
   250 </verbatim>
       
   251 
       
   252 %TWISTY{
       
   253 showlink="Show..."
       
   254 hidelink="Hide"
       
   255 firststart="show"
       
   256 }%
       
   257 %GREEN% my twisty content %ENDCOLOR%
       
   258 %ENDTWISTY%
       
   259 
       
   260 
       
   261 ---+++ Other use: hide interface parts in case of no !JavaScript
       
   262 
       
   263 You can use Twisty to show interface elements that should only be visible with !JavaScript enabled. For instance the textbox control buttons in the edit screen need !JavaScript to work. If a visitor does not have !JavaScript on it would not make sense to show these buttons.
       
   264 
       
   265 Put the "JavaScript content" in an almost bare bones Twisty. Write =showlink="" hidelink=""= to not display any default link texts.
       
   266 
       
   267 <verbatim>
       
   268 %TWISTY{
       
   269 link=""
       
   270 noscript="hide"
       
   271 start="show"
       
   272 }%
       
   273 <input type="submit" class="twikiButton" value="You surely have !JavaScript" />
       
   274 %ENDTWISTY%
       
   275 </verbatim>
       
   276 
       
   277 %TWISTY{
       
   278 link=""
       
   279 noscript="hide"
       
   280 start="show"
       
   281 }%
       
   282 <input type="submit" class="twikiButton" value="You surely have !JavaScript" />
       
   283 %ENDTWISTY%
       
   284 
       
   285 Do not forget to set =start="show"= to show the Twisty content at all. 
       
   286 
       
   287 When !JavaScript is off, the button should be invisible.
       
   288 
       
   289 This code will show the button when !JavaScript is off:
       
   290 
       
   291 <verbatim>
       
   292 %TWISTY{
       
   293 link=""
       
   294 start="show"
       
   295 }%
       
   296 <input type="submit" class="twikiButton" value="You might have !JavaScript" />
       
   297 %ENDTWISTY%
       
   298 </verbatim>
       
   299 
       
   300 %TWISTY{
       
   301 link=""
       
   302 start="show"
       
   303 }%
       
   304 <input type="submit" class="twikiButton" value="You might have !JavaScript" />
       
   305 %ENDTWISTY%
       
   306 
       
   307 
       
   308 
       
   309 ---+++ Styling the Twisty
       
   310 Use parameter =class= to style the content div or class:
       
   311 
       
   312 <verbatim>
       
   313 %TWISTY{
       
   314 mode="div"
       
   315 showlink="Show..."
       
   316 hidelink="Hide"
       
   317 class="twikiHelp"
       
   318 }%
       
   319 my twisty content
       
   320 %ENDTWISTY%
       
   321 </verbatim>
       
   322 
       
   323 Generates: %BR%
       
   324 %TWISTY{
       
   325 mode="div"
       
   326 showlink="Show..."
       
   327 hidelink="Hide"
       
   328 class="twikiHelp"
       
   329 }%
       
   330 %GREEN% my twisty content %ENDCOLOR%
       
   331 %ENDTWISTY%
       
   332 
       
   333 
       
   334 ---+++ Twisty headers
       
   335 To be able to use header tags like =&lt;h2>=, use the properties =prefix= and =suffix=. Because we have identical show and hide links we can use the shorthand property =link=.
       
   336 
       
   337 <verbatim>
       
   338 %TWISTY{
       
   339 prefix="<h4>!!"
       
   340 mode="div"
       
   341 link="Header"
       
   342 showimgleft="%ICONURLPATH{toggleopen}%"
       
   343 hideimgleft="%ICONURLPATH{toggleclose}%"
       
   344 suffix="</h4>"
       
   345 }%
       
   346 my twisty content
       
   347 %ENDTWISTY%
       
   348 </verbatim>
       
   349 
       
   350 Add the =!!= to prevent the twisty header appear in the table of contents when you use =%<nop>TOC%=.
       
   351 
       
   352 Will create:
       
   353 
       
   354 %TWISTY{
       
   355 prefix="<h4>!!"
       
   356 link="Header"
       
   357 showimgleft="%ICONURLPATH{toggleopen}%"
       
   358 hideimgleft="%ICONURLPATH{toggleclose}%"
       
   359 suffix="</h4>"
       
   360 }%
       
   361 %GREEN% my twisty content %ENDCOLOR%
       
   362 %ENDTWISTY%
       
   363 
       
   364 ---+++ All on, all off
       
   365 
       
   366 You can toggle all Twisties on or off at once by putting a link or button on the page with class =twistyExpandAll= or =twistyCollapseAll=.
       
   367 
       
   368 <verbatim>
       
   369 <button class="twistyExpandAll twikiButton">Expand all</button> &nbsp; <button class="twistyCollapseAll twikiButton">Collapse all</button>
       
   370 </verbatim>
       
   371 
       
   372 Creates these controls:
       
   373 
       
   374 <button class="twistyExpandAll twikiButton">Expand all</button> &nbsp; 
       
   375 <button class="twistyCollapseAll twikiButton">Collapse all</button>
       
   376 
       
   377 When you want to use links, write:
       
   378 
       
   379 <verbatim>
       
   380 #VarTOGGLE
       
   381 
       
   382 <a href="#TOGGLE" class="twistyExpandAll">Expand all</a> &nbsp; 
       
   383 <a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>
       
   384 </verbatim>
       
   385 
       
   386 
       
   387 #VarTOGGLE
       
   388 
       
   389 <a href="#TOGGLE" class="twistyExpandAll">Expand all</a> &nbsp; 
       
   390 <a href="#TOGGLE" class="twistyCollapseAll">Collapse all</a>
       
   391 
       
   392 
       
   393 ---++ Special syntax: format tokens
       
   394 If you use TWiki variables inside TWISTY parameters chances are it will mess up the variable, or the rendered html. Use format tokens to 'delay' rendering of these variables until the Twisty parameters are parsed.
       
   395 
       
   396 The format tokens are the same as with %TWIKIWEB%.FormattedSearch:
       
   397 
       
   398 | *Escape:* | *Expands To:* |
       
   399 | =$n= or =$n()= | New line. Use =$n()= if followed by alphanumeric character, e.g. write =Foo$n()Bar= instead of =Foo$nBar= |
       
   400 | =$nop= or =$nop()= | Is a "no operation". |
       
   401 | =$quot= | Double quote (="=) |
       
   402 | =$percnt= | Percent sign (=%=) |
       
   403 | =$dollar= | Dollar sign (=$=) |
       
   404 
       
   405 
       
   406 For example, to show an icon inside the link, do not write:
       
   407 <verbatim>
       
   408 link="%Y%"
       
   409 </verbatim>
       
   410 
       
   411 but use format tokens:
       
   412 
       
   413 <verbatim>
       
   414 link="$percntY$percnt"
       
   415 </verbatim>
       
   416 
       
   417 ... to get:
       
   418 
       
   419 %TWISTY{
       
   420 mode="div"
       
   421 link="$percntY$percnt"
       
   422 showimgleft="%ICONURLPATH{toggleopen-small}%"
       
   423 hideimgleft="%ICONURLPATH{toggleclose-small}%"
       
   424 }%
       
   425 my twisty content
       
   426 %ENDTWISTY%
       
   427 
       
   428 Or a more complex example using %TWIKIWEB%.SpreadsheetPlugin; do not write:
       
   429 
       
   430 <verbatim>
       
   431 link="Count: (%CALC{"$GET(infoCount)"}%)"
       
   432 </verbatim>
       
   433 
       
   434 but use format tokens:
       
   435 
       
   436 <verbatim>
       
   437 link="Count: ($percntCALC{$quot$dollarGET(infoCount)$quot}$percnt)"
       
   438 </verbatim>
       
   439 
       
   440 
       
   441 ---++ Syntax
       
   442 
       
   443 #VarTWISTY
       
   444 ---+++ TWISTY
       
   445 This renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag. %BR%
       
   446 Usage: =%<nop>TWISTY{ ... }% Toggable contents %<nop>ENDTWISTY%=
       
   447 
       
   448     | *Parameter*    | *Value* | *Description* | *Remark* |
       
   449     | =id=           | Unique identifier | Used to link [[#VarTWISTYBUTTON][TWISTYBUTTON]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]] | optional  |
       
   450     | =link=         | Link label | Link label for both show and hide links  | optional |
       
   451     | =hidelink=     | Link label | Hide link label  | optional |
       
   452     | =showlink=     | Link label | Show link label  | optional |
       
   453     | =mode=         | ="div"= or ="span"= | Specify if the Twisty Toggle section will use a =&lt;div&gt;= or a =&lt;span&gt;= tag.  | optional, defaults to =&lt;span&gt;= |
       
   454 	| =showimgleft=  | Image url | Specify the url of an image that will be displayed with the show link at the left side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
       
   455 	| =hideimgleft=  | Image url | Specify the url of an image that will be displayed with the hide link at the left side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
       
   456 	| =showimgright= | Image url | Specify the url of an image that will be displayed with the show link at the right side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
       
   457 	| =hideimgright= | Image url | Specify the url of an image that will be displayed with the hide link at the right side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
       
   458     | =remember=     | ="on"=, ="off"= | If ="on"=, the Twisty state is remembered the next time the page is shown. If ="off"=, the stored setting will be cleared.<br /> *Note:* when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
       
   459     | =start=        | ="hide"= or ="show"= | Initial state of the Twisty; this will override any setting stored in a cookie (see =remember=).  | optional, default no initial state |
       
   460     | =firststart=   | ="hide"= or ="show"= | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see =remember=).  | optional, default no initial state |
       
   461     | =noscript=     | ="hide"= | Make content hidden in case use does not have !JavaScript on | optional, default content is shown in case !JavaScript if off |
       
   462     | =class=        | CSS class name | Class for Twisty div or span | optional, default none |
       
   463     | =prefix=       | Text      | Text to display before the show/hide links | optional, default none |
       
   464     | =suffix=       | Text      | Text to display after the show/hide links | optional, default none |
       
   465     | =img=          | Image url | %GREEN%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
       
   466     | =imgleft=      | Image url | %GREEN%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
       
   467     | =imgright=     | Image url | %GREEN%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
       
   468     | =hideimg=      | Image url | %GREEN%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
       
   469     | =showimg=      | Image url | %GREEN%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
       
   470    * Related [[#VarTWISTYSHOW][TWISTYBUTTON]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]]
       
   471 
       
   472 #VarENDTWISTY
       
   473 ---+++ ENDTWISTY
       
   474 *Twisty closure, complements the opening TWISTY tag.*
       
   475    * Syntax: =%<nop>ENDTWISTY%=
       
   476 
       
   477 See [[#VarENDTWISTYTOGGLE][ENDTWISTYTOGGLE]].
       
   478 
       
   479 ---++ Twisty components syntax
       
   480 
       
   481 <div style="background-color:#eee; padding:.5em; margin:-.5em;">
       
   482 
       
   483 Ocassionally you might need to create a custom set of individual Twisty components:
       
   484 
       
   485 #VarTWISTYBUTTON
       
   486 ---+++ TWISTYBUTTON
       
   487 *Shorthand version for TWISTYSHOW &amp; TWISTYHIDE*
       
   488 This is useful if both the show and the hide button take the same arguments.
       
   489    * Supported parameters: all parameters supported by [[#VarTWISTYSHOW][TWISTY]], except for =noscript= and =class= (only used for 'toggle' content)
       
   490    * Parameter differences:
       
   491       * =mode=: button mode defaults to span
       
   492    * Syntax: =%<nop>TWISTYBUTTON{id="myid" ... }%=
       
   493    * Supported parameters:
       
   494     | *Parameter* | *Value* | *Description* | *Remark* |
       
   495     | =mode= | ="div"= or ="span"= | Specify if the *Twisty button* will use a =&lt;div&gt;= or a =&lt;span&gt;= tag  | optional, defaults to =&lt;span&gt;= |
       
   496    * Related: [[#VarTWISTYSHOW][TWISTYSHOW]] and [[#VarTWISTYHIDE][TWISTYHIDE]]
       
   497 
       
   498 #VarTWISTYSHOW
       
   499 ---+++ TWISTYSHOW
       
   500 *Show/open link*
       
   501    * Syntax: =%<nop>TWISTYSHOW{id="myid" ... }%=
       
   502    * Supported parameters:
       
   503     | *Parameter* | *Value* | *Description* | *Remark* |
       
   504     | =id= | Unique identifier | Used to link [[#VarTWISTYSHOW][TWISTYSHOW]], [[#VarTWISTYHIDE ][TWISTYHIDE ]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]] | required  |
       
   505     | =link= | Link label | Show link label  | optional |
       
   506     | =mode= | ="div"= or ="span"= | Specify if the Twisty Show link will use a =&lt;div&gt;= or a =&lt;span&gt;= tag  | optional, defaults to =&lt;span&gt;= |
       
   507     | =img= | Image url | Specify the url of an image that will be displayed at the *right side* of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
       
   508     | =imgleft=| Image url | Specify the url of an image that will be displayed at the left side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
       
   509     | =imgright= | Image url | Specify the url of an image that will be displayed at the right side of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
       
   510     | =remember= | ="on"=, ="off"= | If ="on"=, the Twisty state is remembered the next time the page is shown. If ="off"=, the stored setting will be cleared.<br /> *Note:* when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
       
   511     | =start= | ="hide"= or ="show"= | Initial state of the Twisty; this will override any setting stored in a cookie (see =remember=).  | optional, default no initial state |
       
   512     | =firststart= | ="hide"= or ="show"= | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see =remember=).  | optional, default no initial state |
       
   513    * Example: =%<nop>TWISTYSHOW{id="demo" link=" Click to Unfold " imgleft="%<nop>ICONURLPATH{toggleopen}%"}%=
       
   514    * Related: [[#VarTWISTYHIDE][TWISTYHIDE]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]]
       
   515 
       
   516 #VarTWISTYHIDE
       
   517 ---+++ TWISTYHIDE
       
   518 *Hide/close link*
       
   519    * Syntax: =%<nop>TWISTYHIDE{id="myid" ... }%=
       
   520    * Supported parameters:
       
   521     | *Parameter* | *Value* | *Description* | *Remark* |
       
   522     | =id= | Unique identifier | Used to link [[#VarTWISTYSHOW][TWISTYSHOW]], [[#VarTWISTYHIDE ][TWISTYHIDE ]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]] | required  |
       
   523     | =link= | Link label | Hide link label | optional |
       
   524     | =mode= | ="div"= or ="span"= | Specify if the Twisty Hide link will use a =&lt;div&gt;= or a =&lt;span&gt;= tag  | optional, defaults to =&lt;span&gt;= |
       
   525     | =img= | Image url | Specify the url of an image that will be displayed at the *right side* of the link. <br />You may use [[%TWIKIWEB%.TWikiVariables#VarICONURLPATH][ICONURLPATH]] to display one of the %TWIKIWEB%.TWikiDocGraphics icons. Alternatively use an image attached to the topic. | optional, defaults to no image |
       
   526     | =remember= | ="on"=, ="off"= | If ="on"=, the Twisty state is remembered the next time the page is shown. If ="off"=, the stored setting will be cleared.<br /> *Note:* when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
       
   527     | =start= | ="hide"= or ="show"= | Initial state of the Twisty; this will override any setting stored in a cookie (see =remember=).  | optional, default no initial state |
       
   528     | =firststart= | ="hide"= or ="show"= | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see =remember=).  | optional, default no initial state |
       
   529    * Example: =%<nop>TWISTYHIDE{id="demo" link=" Click to Fold " imgleft="%<nop>ICONURLPATH{toggleclose}%"}%=
       
   530    * Related: [[#VarTWISTYSHOW][TWISTYSHOW]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]]
       
   531 
       
   532 #VarTWISTYTOGGLE
       
   533 ---+++ TWISTYTOGGLE
       
   534 *Twisty Toggle contents section*
       
   535    * Syntax: =%<nop>TWISTYTOGGLE{id="myid"}%=
       
   536    * Supported parameters:
       
   537     | *Parameter* | *Value* | *Description* | *Remark* |
       
   538     | =id= | Unique identifier | Used to link [[#VarTWISTYSHOW][TWISTYSHOW]], [[#VarTWISTYHIDE ][TWISTYHIDE ]] and [[#VarTWISTYTOGGLE][TWISTYTOGGLE]].  | required  |
       
   539     | =mode= | ="div"= or ="span"= | Specify if the Twisty Toggle section will use a =&lt;div&gt;= or a =&lt;span&gt;= tag.  | optional, defaults to =&lt;span&gt;= |
       
   540     | =class= | CSS class name | Class for content div or span | optional, default none |
       
   541     | =remember= | ="on"=, ="off"= | If ="on"=, the Twisty state is remembered the next time the page is shown. If ="off"=, the stored setting will be cleared.<br /> *Note:* when used, think carefully about a unique name (id) for the Twisty, otherwise the cookie that is set might affect other Twisties with the same name. Also note that only interaction is stored, not the state of the Twisty when left unclicked. | optional, no default |
       
   542     | =start= | ="hide"= or ="show"= | Initial state of the Twisty; this will override any setting stored in a cookie (see =remember=).  | optional, default no initial state |
       
   543     | =firststart= | ="hide"= or ="show"= | Initial state of the Twisty the first time the visitor gets to see the Twisty; this will NOT override cookie settings (see =remember=).  | optional, default no initial state |
       
   544     | =noscript= | ="hide"= | Make content hidden in case use does not have !JavaScript on | optional, default content is shown with no !JavaScript |
       
   545    * Example: =%<nop>TWISTYTOGGLE{id="demo" mode="div" remember="on"}%My content%<nop>ENDTWISTYTOGGLE%=
       
   546    * Related: [[#VarTWISTYHIDE][TWISTYHIDE]], [[#VarTWISTYHIDE][TWISTYHIDE]] an [[#VarENDTWISTYTOGGLE][ENDTWISTYTOGGLE]]
       
   547 
       
   548 #VarENDTWISTYTOGGLE
       
   549 ---+++ ENDTWISTYTOGGLE
       
   550 *The Twisty closure*
       
   551    * Syntax: =%<nop>ENDTWISTYTOGGLE%=
       
   552       * Will end the most inner unclosed Twisty Toggle section, using the proper tag
       
   553    * Example: =%<nop>ENDTWISTYTOGGLE%=
       
   554    * Related: [[#VarTWISTYTOGGLE][TWISTYTOGGLE]]
       
   555 </div>
       
   556 
       
   557 ---++ The Fine Print
       
   558 
       
   559 !TwistyPlugin is a convenience plugin for TWiki:Plugins.TwistyContrib.
       
   560 
       
   561 Major features are:
       
   562    * When active, the Twisty !JavaScript library is included in every topic
       
   563    * Provides a convenience syntax to define Twisty areas
       
   564    * Automatically generates ids
       
   565    * Automatically fills in default values
       
   566    * Global preference settings can be set in this topic or locally in individual topics
       
   567 
       
   568 #PluginSettings
       
   569 ---++ Plugin Settings
       
   570 
       
   571 Plugin settings are stored as preferences variables. To reference
       
   572 a plugin setting write ==%<nop>&lt;plugin&gt;_&lt;setting&gt;%==, i.e. ==%<nop>TWISTYPLUGIN_SHORTDESCRIPTION%==
       
   573 
       
   574    * Set TWISTYSHOWLINK = %MAKETEXT{"More..."}%
       
   575       * For example: =More...=
       
   576    * Set TWISTYHIDELINK = %MAKETEXT{"Close"}%
       
   577       * For example: =Close=
       
   578    * Set TWISTYMODE = 
       
   579       * Either =div= or =span=; =span= if nothing set
       
   580    * Set TWISTYREMEMBER = 
       
   581       * Either =on= or =off=; default is not specified. If set to =on= all Twisty states will be stored in a TWIKIPREF cookie; if set to =off= the TWIKIPREF cookie will be cleared
       
   582 
       
   583    * Set SHORTDESCRIPTION = Twisty section !JavaScript library to open/close content dynamically
       
   584    * Set DEBUG = 0
       
   585    
       
   586 ---++ Plugin Installation Instructions
       
   587    * Download the ZIP file from the Plugin web (see below)
       
   588    * Unzip ==%TOPIC%.zip== in your root ($TWIKI_ROOT) directory. Content:
       
   589    | *File:* | *Description:* |
       
   590    | ==TwistyBundleTWiki04x02_installer== |  |
       
   591    | ==TwistyBundleTWiki04x02_installer.pl== |  |
       
   592    | ==data/TWiki/TwistyBundleTWiki04x02.txt== |  |
       
   593    | ==data/TWiki/BehaviourContrib.txt== |  |
       
   594    | ==data/TWiki/TwistyContrib.txt== |  |
       
   595    | ==data/TWiki/TwistyPlugin.txt== |  |
       
   596    | ==lib/TWiki/Contrib/BehaviourContrib.pm== |  |
       
   597    | ==lib/TWiki/Contrib/TwistyBundleTWiki04x02.pm== |  |
       
   598    | ==lib/TWiki/Contrib/TwistyContrib.pm== |  |
       
   599    | ==lib/TWiki/Plugins/TwistyPlugin.pm== |  |
       
   600    | ==pub/TWiki/BehaviourContrib/behaviour.compressed.js== |  |
       
   601    | ==pub/TWiki/BehaviourContrib/behaviour.compressed_src.js== |  |
       
   602    | ==pub/TWiki/BehaviourContrib/behaviour.js== |  |
       
   603    | ==pub/TWiki/BehaviourContrib/behaviour_src.js== |  |
       
   604    | ==pub/TWiki/BehaviourContrib/cssQuery/cssQuery-p.js== |  |
       
   605    | ==pub/TWiki/BehaviourContrib/cssQuery/src/cssQuery-level2.js== |  |
       
   606    | ==pub/TWiki/BehaviourContrib/cssQuery/src/cssQuery-level3.js== |  |
       
   607    | ==pub/TWiki/BehaviourContrib/cssQuery/src/cssQuery-standard.js== |  |
       
   608    | ==pub/TWiki/BehaviourContrib/cssQuery/src/cssQuery.js== |  |
       
   609    | ==pub/TWiki/BehaviourContrib/cssQuery/src/test.html== |  |
       
   610    | ==pub/TWiki/BehaviourContrib/cssQuery/test.html== |  |
       
   611    | ==pub/TWiki/TwistyContrib/twist.compressed.js== |  |
       
   612    | ==pub/TWiki/TwistyContrib/twist.compressed_src.js== |  |
       
   613    | ==pub/TWiki/TwistyContrib/twist.css== |  |
       
   614    | ==pub/TWiki/TwistyContrib/twist.js== |  |
       
   615    | ==pub/TWiki/TwistyContrib/twist_src.js== |  |
       
   616 
       
   617    * Optionally, if it exists, run ==%TOPIC%_installer== to automatically check and install other TWiki modules that this module depends on. You can also do this step manually.
       
   618    * Alternatively, manually make sure the dependencies listed in the table below are resolved.
       
   619    None
       
   620    * Visit =configure= in your TWiki installation, and enable the plugin in the {Plugins} section.
       
   621 
       
   622 
       
   623 ---++ Plugin Info
       
   624 
       
   625 | Authors: | TWiki:Main.RafaelAlvarez, TWiki:Main.ArthurClemens |
       
   626 | Copyright &copy;: | 2005 Rafael Alvarez; 2006, 2007 Arthur Clemens |
       
   627 | License: | [[http://www.gnu.org/copyleft/gpl.html][GPL]] |
       
   628 | Dependencies: | None |
       
   629 | Plugin&nbsp;Version: | 24 Nov 2007 (version 1.4.8)  |
       
   630 | Change&nbsp;History: | <!-- versions below in reverse order -->&nbsp; |
       
   631 | 24 Nov 2007 | 1.4.6 - 1.4.8 Arthur Clemens - Added format tokens. |
       
   632 | 07 Oct 2007 | 1.4.5 Arthur Clemens - Fix html tag with show/hide controls. |
       
   633 | 25 Sep 2007 | 1.4.4 Arthur Clemens - Fix rendering of headers when =prefix= is used. |
       
   634 | 11 Jul 2007 | 1.4.3 Arthur Clemens - Fix invalid html when =prefix= and =suffix= is used. |
       
   635 | 23 Jun 2007 | 1.4.2 Arthur Clemens - Fixed bugs with parameters =firststart= and =noscript= (since version 1.4). |
       
   636 | 20 Jun 2007 | 1.4 Arthur Clemens - Updated to work without ugly inserted javascript 'init' calls. This will change nothing to the functionality, but it will produce cleaner HTML, while at the same time the twisty is still set immediately (not at page onload) and graceful fallback in case of no javascript is maintained. |
       
   637 | 19 Jun 2006 | 1.3 Arthur Clemens - Updated with TWiki 4 !JavaScript files. |
       
   638 | 25 Oct 2006 | 1.2 New variables to set default values: =TWISTYSHOWLINK=, =TWISTYHIDELINK=, =TWISTYMODE=, =TWISTYREMEMBER=; property =id= is no longer required as this is automatically set (still recommended in some cases with =remember="on"=); property value =remember="off"= will clear a previously stored cookie; new properties =prefix= and =suffix=; !JavaScript to collapse or expand all Twisties on the page.  |
       
   639 | 27 Sep 2006 | 1.101 Fixes !JavaScript handling when !AllowInlineScript in configure is not set |
       
   640 | 11 June 2006 | 1.100 Added parameters =start=, =firststart=, =noscript= and =class=; complete !JavaScript rewrite for speed |
       
   641 | 12 Sep 2005 | 1.000 First Version |
       
   642 | Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
       
   643 | Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
       
   644 | Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |
       
   645 @
       
   646 
       
   647 
       
   648 1.1
       
   649 log
       
   650 @buildrelease
       
   651 @
       
   652 text
       
   653 @d1 1
       
   654 a1 1
       
   655 %META:TOPICINFO{author="TWikiContributor" date="1130850299" format="1.1" version="1"}%
       
   656 d15 1
       
   657 a15 10
       
   658 Twisty has a fallback mechanism in case !JavaScript is not available: all content is displayed and the control buttons are hidden. Unless parameter =noscript="hide"= is used to specifically set the content to hide.
       
   659 
       
   660 <div class="twikiHelp">
       
   661 *What's new in version 1.2:*
       
   662    * New variables to set default values: =TWISTYSHOWLINK=, =TWISTYHIDELINK=, =TWISTYMODE=, =TWISTYREMEMBER= 
       
   663    * Property =id= is no longer required as this is automatically set (still recommended in some cases with =remember="on"=)
       
   664    * Property value =remember="off"= will clear a previously stored setting
       
   665    * New properties =prefix= and =suffix=
       
   666    * !JavaScript to collapse or expand all Twisties on the page
       
   667 </div>
       
   668 d34 1
       
   669 a34 3
       
   670 
       
   671 
       
   672 ---+++ Working Twisty
       
   673 d39 1
       
   674 a39 1
       
   675 %TWISTY{showlink="Show..." hidelink="Hide"}%
       
   676 d44 1
       
   677 a44 1
       
   678 It will look like this:
       
   679 d46 2
       
   680 a47 2
       
   681 %TWISTY{showlink="Show..." hidelink="Hide"}%
       
   682 my twisty content
       
   683 d50 1
       
   684 d54 1
       
   685 a54 1
       
   686 We will use =mode="div"= to put the collapsing content below the button.
       
   687 d57 7
       
   688 a63 3
       
   689 %TWISTY{mode="div" showlink="Show..." hidelink="Hide"
       
   690 showimgleft="%ICONURLPATH{toggleopen-small}%" 
       
   691 hideimgleft="%ICONURLPATH{toggleclose-small}%"}%
       
   692 d70 8
       
   693 a77 4
       
   694 %TWISTY{mode="div" showlink="Show..." hidelink="Hide"
       
   695 showimgleft="%ICONURLPATH{toggleopen-small}%" 
       
   696 hideimgleft="%ICONURLPATH{toggleclose-small}%"}%
       
   697 my twisty content
       
   698 d82 7
       
   699 a88 3
       
   700 %TWISTY{mode="div" showlink="Show&nbsp;" hidelink="Hide&nbsp;"
       
   701 showimgright="%ICONURLPATH{toggleopen-small}%" 
       
   702 hideimgright="%ICONURLPATH{toggleclose-small}%"}%
       
   703 d93 8
       
   704 a100 4
       
   705 %TWISTY{mode="div" showlink="Show&nbsp;" hidelink="Hide&nbsp;"
       
   706 showimgright="%ICONURLPATH{toggleopen-small}%" 
       
   707 hideimgright="%ICONURLPATH{toggleclose-small}%"}%
       
   708 my twisty content
       
   709 d110 5
       
   710 a114 1
       
   711 %TWISTY{showlink="Show..." hidelink="Hide" remember="on"}%
       
   712 d119 6
       
   713 a124 2
       
   714 %TWISTY{showlink="Show..." hidelink="Hide" remember="on"}%
       
   715 my twisty content
       
   716 d130 5
       
   717 a134 1
       
   718 %TWISTY{showlink="Show..." hidelink="Hide" remember="off"}%
       
   719 d139 6
       
   720 a144 2
       
   721 %TWISTY{showlink="Show..." hidelink="Hide" remember="off"}%
       
   722 my twisty content
       
   723 d150 6
       
   724 a155 1
       
   725 %TWISTY{id="currentCustomerList" showlink="Show..." hidelink="Hide" remember="on"}%
       
   726 d160 5
       
   727 d171 5
       
   728 a175 1
       
   729 %TWISTY{showlink="Show..." hidelink="Hide" start="show"}%
       
   730 d180 6
       
   731 a185 2
       
   732 %TWISTY{showlink="Show..." hidelink="Hide" start="show"}%
       
   733 my twisty content
       
   734 d191 5
       
   735 a195 1
       
   736 %TWISTY{showlink="Show..." hidelink="Hide" start="hide"}%
       
   737 d200 6
       
   738 a205 2
       
   739 %TWISTY{showlink="Show..." hidelink="Hide" start="hide"}%
       
   740 my twisty content
       
   741 d215 5
       
   742 a219 1
       
   743 %TWISTY{showlink="Show..." hidelink="Hide" firststart="show"}%
       
   744 d224 6
       
   745 a229 2
       
   746 %TWISTY{showlink="Show..." hidelink="Hide" firststart="show"}%
       
   747 my twisty content
       
   748 d234 1
       
   749 d240 5
       
   750 a244 1
       
   751 %TWISTY{link="" noscript="hide" start="show"}%
       
   752 d249 5
       
   753 a253 1
       
   754 %TWISTY{link="" noscript="hide" start="show"}%
       
   755 d264 5
       
   756 a268 2
       
   757 %TWISTY{link="" start="show"}%
       
   758 <input type="submit" class="twikiButton" value="You surely have !JavaScript" />
       
   759 d272 5
       
   760 a276 2
       
   761 %TWISTY{link="" start="show"}%
       
   762 <input type="submit" class="twikiButton" value="You surely have !JavaScript" />
       
   763 d285 6
       
   764 a290 1
       
   765 %TWISTY{mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp"}%
       
   766 d296 7
       
   767 a302 2
       
   768 %TWISTY{mode="div" showlink="Show..." hidelink="Hide" class="twikiHelp"}%
       
   769 my twisty content
       
   770 d310 4
       
   771 a313 1
       
   772 %TWISTY{prefix="<h4>!!" link="Header"
       
   773 d315 3
       
   774 a317 1
       
   775 hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>"}%
       
   776 d322 2
       
   777 d326 3
       
   778 a328 1
       
   779 %TWISTY{prefix="<h4>!!" link="Header"
       
   780 d330 4
       
   781 a333 2
       
   782 hideimgleft="%ICONURLPATH{toggleclose}%" suffix="</h4>"}%
       
   783 my twisty content
       
   784 d341 1
       
   785 a341 2
       
   786 <button class="twistyExpandAll twikiButton">Expand all</button> 
       
   787 <button class="twistyCollapseAll twikiButton">Collapse all</button>
       
   788 d346 1
       
   789 a346 1
       
   790 <button class="twistyExpandAll twikiButton">Expand all</button> 
       
   791 d354 1
       
   792 a354 1
       
   793 <a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
       
   794 d361 1
       
   795 a361 1
       
   796 <a href="#TOGGLE" class="twistyExpandAll">Expand all</a> 
       
   797 d365 47
       
   798 d437 5
       
   799 a441 5
       
   800     | =img=          | Image url | %RED%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
       
   801     | =imgleft=      | Image url | %RED%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
       
   802     | =imgright=     | Image url | %RED%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
       
   803     | =hideimg=      | Image url | %RED%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
       
   804     | =showimg=      | Image url | %RED%Deprecated, use showimgleft, hideimgleft, showimgright or hideimgright.%ENDCOLOR% | optional, defaults to no image |
       
   805 d540 1
       
   806 d562 5
       
   807 d568 3
       
   808 d572 16
       
   809 d591 1
       
   810 a591 1
       
   811    <table border="1"><tr><th>Name</th><th>Version</th><th>Description</th></tr><tr><td align="left">TWiki::Contrib::TwistyContrib</td><td align="left">&gt;=1.200</td><td align="left">Required. Twisty javascript library</td></tr></table>
       
   812 d598 1
       
   813 a598 1
       
   814 | Copyright &copy;: | 2005 Rafael Alvarez, 2006 Arthur Clemens |
       
   815 d600 10
       
   816 a609 1
       
   817 | Dependencies: | <table border="1"><tr><th>Name</th><th>Version</th><th>Description</th></tr><tr><td align="left">TWiki::Contrib::TwistyContrib</td><td align="left">&gt;=1.200</td><td align="left">Required. Twisty javascript library</td></tr></table> |
       
   818 @