TwistyPlugin

Summary

Create twisty areas that show/hide content dynamically. This is a convenience plugin for TWiki:Plugins.TwistyContrib.

It has two major features:

• When active, the Twisty javascript library is included in every topic. Note: TWiki:TWiki.PatternSkin also includes this javascript library.
• Provides a convenience syntax to define Twisty areas.

Check TWiki:Plugins.TwistyContrib for more information on the use of Twisty sections.

Syntax Rules

TWISTYSHOW

Show/open link

• Syntax: %TWISTYSHOW{id="myid" ... }%
• Supported parameters:

  Parameter	Description	Value
  id	Unique identifier. Used to link TWISTYSHOW, TWISTYHIDE and TWISTYTOGGLE	required
  link="Link Text"	The text to be used in the Twisty Show link	optional
  mode="div/span"	Specify if the Twisty Show link will use a <div> or a <span> tag	optional, defaults to <span>
  img="image url"	Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic.	optional, defaults to no image
  imgleft="image url"	Specify the url of an image that will be displayed at the left side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic.	optional, defaults to no image
  imgright="image url"	Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic.	optional, defaults to no image

• Example: %TWISTYSHOW{id="demo" link=" Click to Unfold " imgleft="%ICONURLPATH{toggleopen}%"}% expands to:
  <span id="demoshow" class="twistyMakeVisible"><a href="#" class="twistyTrigger"><img src="http://visiblearea.com/devtwiki/pub/TWiki/TWikiDocGraphics/toggleopen.gif" alt="" /><span class="twikiLinkLabel"> Click to Unfold </span></a></span>
• Related: TWISTYHIDE and TWISTYTOGGLE

TWISTYHIDE

Hide/close link

• Syntax: %TWISTYHIDE{id="myid" ... }%
• Supported parameters:

  Parameter	Description	Value
  id	Unique identifier. Used to link TWISTYSHOW, TWISTYHIDE and TWISTYTOGGLE	required
  link="Link Text"	The text to be used in the Twisty Hide link	optional
  mode="div/span"	Specify if the Twisty Hide link will use a <div> or a <span> tag	optional, defaults to <span>
  img="image url"	Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic.	optional, defaults to no image

• Example: %TWISTYHIDE{id="demo" link=" Click to Fold " imgleft="%ICONURLPATH{toggleclose}%"}% expands to:
  <span id="demohide" class="twistyHidden twistyMakeVisible"><a href="#" class="twistyTrigger"><img src="http://visiblearea.com/devtwiki/pub/TWiki/TWikiDocGraphics/toggleclose.gif" alt="" /><span class="twikiLinkLabel"> Click to Fold </span></a></span>
• Related: TWISTYSHOW and TWISTYTOGGLE

TWISTYTOGGLE

Twisty Toggle contents section

• Syntax: %TWISTYTOGGLE{id="myid"}%
• Supported parameters:

  Parameter	Description	Value
  id	Unique identifier. Used to link TWISTYSHOW, TWISTYHIDE and TWISTYTOGGLE.	required
  mode="div/span"	Specify if the Twisty Toggle section will use a <div> or a <span> tag.	optional, defaults to <span>
  remember="on"	When the Twisty is clicked its state is remembered the next time the page is shown. 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.	optional, defaults to forget

• Example: %TWISTYTOGGLE{id="demo" mode="div" remember="on"}% expands to:
  <div id="demotoggle" class="twistyMakeHidden twistyRememberState">
• Related: TWISTYHIDE, TWISTYHIDE an ENDTWISTYTOGGLE

ENDTWISTYTOGGLE

The Twisty closure

• Syntax: %ENDTWISTYTOGGLE%
  • Will end the most inner unclosed Twisty Toggle section, using the proper tag
• Example: %ENDTWISTYTOGGLE% expands to: </div> if mode="div" was used in the last TWISTYTOGGLE,
• Related: TWISTYTOGGLE

TWISTYBUTTON

Shorthand version for TWISTYSHOW & TWISTYHIDE This is useful if both the show and the hide button take the same arguments.

• Syntax: %TWISTYBUTTON{id="myid" ... }%
• Supported parameters:

  Parameter	Description	Value
  id	Unique identifier. Used to link TWISTYBUTTON and TWISTYTOGGLE	required
  link="Link Text"	The text to be used in the Twisty button link	optional
  hidelink="Link Text"	The text to be used in the Twisty hide link	optional
  showlink="Link Text"	The text to be used in the Twisty show link	optional
  mode="div/span"	Specify if the Twisty link will use a <div> or a <span> tag	optional, defaults to <span>
  img="image url"	Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic.	optional, defaults to no image
  imgleft="image url"	Specify the url of an image that will be displayed at the left side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic.	optional, defaults to no image
  imgright="image url"	Specify the url of an image that will be displayed at the right side of the link. You may use ICONURLPATH to display one of the TWikiDocGraphics icons. Alternatively use an image attached to the topic.	optional, defaults to no image
  hideimg="image url"	Specify the image to be show in the Twisty hide link	optiona, defaults to img value
  showimg="image url"	Specify the image to be show in the Twisty show link	optional, defaults to img value

• Related: TWISTYSHOW and TWISTYHIDE

TWISTY

Shorthand version for TWISTYSHOW & TWISTYHIDE & TWISTYTOGGLE This renders the button as well as the toggled content section contained within this and the closing ENDTWISTY tag.

• Syntax: %TWISTY{id="myid" ... }%
• Supported parameters:

  Parameter	Description	Value
  all parameters supported by TWISTYBUTTON
  mode="div/span"	Specify if the Twisty Toggle section will use a <div> or a <span> tag.	optional, defaults to <span>

• Related TWISTYBUTTON and TWISTYTOGGLE

ENDTWISTY

Twisty closure

complements the opening TWISTY tag. See ENDTWISTYTOGGLE.

Demo & Test

If the plugin is properly installed, you should see the Twisty effect below:

Click to show Click to hide

---

Plugin Settings

Plugin settings are stored as preferences variables. To reference a plugin setting write %<plugin>_<setting>%, i.e. %TWISTYPLUGIN_SHORTDESCRIPTION%

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

Plugin Installation Instructions

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

  File:	Description:

%$MANIFEST%

• Optionally, if it exists, run TwistyPlugin_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. %$DEPENDENCIES%
• (Dakar) Visit configure in your TWiki installation, and enable the plugin in the {Plugins} section.

Plugin Info

Authors:	TWiki:Main.RafaelAlvarez
Copyright ©:	2005 Rafael Alvarez
License:	GPL
Dependencies:	%$DEPENDENCIES%
12/09/2005	1.000 First Version
Home:	http://TWiki.org/cgi-bin/view/Plugins/TwistyPlugin
Feedback:	http://TWiki.org/cgi-bin/view/Plugins/TwistyPluginDev
Appraisal:	http://TWiki.org/cgi-bin/view/Plugins/TwistyPluginAppraisal