{deck:id=Composition|width=907}
{card:label=Overview}
h4. Composition Plugin
This plugin contains macros which allow finer control over the layout (or composition) of a page. Allows control over when content is hidden or displayed and how it is organized.
h5. This plugin includes the following macros:
* *composition-setup*
* *deck* and *card* - Creates tabbed content
* *show-card* - Shows a card in a specified deck.
* *float* - Allows content to float to the left or right of text.
* *toggle-cloak* and *cloak* - Allows content to be hidden or displayed.
{card}
{card:label=Documentation}
{deck:id=compisitionm}
{card:label=composition-setup}
Performs setup operations for some of the composition macros, as well as allowing page-wide defaults to be set. The macro's properties can be put within the body of the macro or attached to the page in a text file. The following *Composition Macros* require the composition-setup macro to function:
* *deck*
* *card*
* *cloak*
* *toggle cloak*
h3. The Code
Properties set within the body of the macro :
{code}
composition-setup}
property.key = value
some.properties = some_values
some.properties = some_values
{composition-setup}
{code}
Properties attached in a text file:
{code}
{composition-setup:defaults=[Home^composition.properties]}
property.key = value
{composition-setup}
{code}
h3. {toggle-cloak:id=10} Properties
{cloak:id=10}
h5. General Properties
These properties should be put into the body of the *composition-setup* macro. Alternately, they can be put into a text file which is attached to a page and linked via the 'defaults' macro property.
||*Name*||*Default*||*Description*||
|import.css| | Allows a Cascading Style Sheet to be imported into the page. The value may be an attachment link (e.g. 'Foo^bar.css'), an absolute link (e.g. 'http://foo.com/bar.css') or a server-relative link (e.g. '/bar.css').|
h5. Cloak Properties
||*Name*||*Default*||*Description*||
|cloak.memory.duration| 0 | The number of days the cloak status should be remembered for.|
|cloak.toggle.type |default|The type of toggle to display. Options are:
* default - Blue arrows pointing up or down.
* custom - A custom image for each of the modes.
* text - Plain text for the two modes.
* wiki - Wiki text for the two modes.
* none - No icon at all. You will probably want to ensure that cloak.toggle.zone is enabled.|
|cloak.toggle.open| |The value to use for the icon when the cloak can be opened.
|cloak.toggle.close| |The value to use for the icon when the cloak can be closed.
|cloak.toggle.exclusive| false |If 'true', all the toggles on the page will be exclusive. That is, at each level, only one cloak is open at a time.
|cloak.toggle.zone| true | If 'true', the heading or paragraph the toggle is in will be clickable.|
h5. Deck Properties
||*Name*||*Default*||*Description*||
|deck.memory.duration| 0 |The number of days the deck status should be remembered for.|
|deck.tab.location| 'top' |'top', 'bottom' or 'none'. The location of the tab bar.|
|deck.tab.active.border | |The border for the active tab (CSS - eg. '1px dashed black')|
|deck.tab.active.background| |The background for the active tab (CSS - eg. '#ff0055')|
|deck.tab.inactive.border| |The border for inactive tabs (CSS)|
|deck.tab.inactive.background| |The background for inactive tabs (CSS)|
|deck.tab.spacer| |The distance between tabs (eg '5px')|
|deck.card.border| |The border for the active card.|
|deck.card.background| |The background for the active card.|
|deck.width/deck.height| |The width and/or height the content will be constrained to (not including any tabs). If not set, the tabs expand to display their content.|
|deck.startHidden| true |If set to 'false', the cards will be initially visible on the page until setup is complete.|
|deck.loopCards| false |If 'true', the deck will loop back to the beginning from the last card and vice versa.|
|deck.nextAfter | |The number of seconds the slides will stay visible before moving to the next one. By default the current slide will not transition until prompted by the user.|
|deck.effect.type |none |The effect to use when moving to a new slide. May be 'fade' or 'none'.|
|deck.effect.duration| 0 |The number of seconds the transition will take to complete. Eg. '1.5'. Defaults to 0.|
{cloak}
h3. {toggle-cloak:id=2} Parameters
{cloak:id=2}
||*Name*||*Required?*||*Default*||*Description*||
|default|(x)| |The name of the page attachment containing the default settings for this page. E.g. 'Home^composition.properties'. The file should be a text file with properties listed as they are in the *Properties* section.|
{cloak}
{card}
{card:label=deck / card}
The *deck and *card* macros work together to create tabbed content.
{note:title=Requires the *composition-setup* macro be placed on the current page.}
h3. The Code
{code}
{deck:id=[Unique Deck ID]}
{card:label=Card 1}
Card 1 content.
{card}
{card:label=Card 2}
Card 2 content.
{card}
{deck}
{code}
h3. {toggle-cloak:id=3} Result
{cloak:id=3}
{deck:id=[Unique Deck ID]}
{card:label=Card 1}
Card 1 content.
{card}
{card:label=Card 2}
Card 2 content.
{card}
{deck}
{cloak}
h3. {toggle-cloak:id=4} Parameters
{cloak:id=4}
h5. Deck Parameters
||*Name*||*Required?*||*Default*||*Description*||
|id|(/)| |The ID for the deck. Must be unique to this page. |
|tabLocation|(x)|top|Either 'top', 'bottom' or 'none'. |
|class|(x)| |The custom CSS class the deck is decorated by. |
|width|(x)| |The width the content will be constrained to (not including any tabs). If not set, the tabs expand to display their content. |
|height|(x)| |The height the content will be constrained to (not including any tabs). If not set, the tabs expand to display their content. |
|startHidden|(x)| true|If set to false, the cards will be initially visible on the page until setup is complete. |
|loopCards|(x)|false|If true, the deck will loop back to the beginning from the last card and vice versa. |
|nextAfter|(x)|never|The number of seconds the slides will stay visible before moving to the next one. By default the current slide will not transition until prompted by the user.
|effectType|(x)|none|The effect to use when moving to a new slide. May be 'fade' or 'none' (the default). |
|effectDuration|(x)|1|The number of seconds the transition will take to complete. Eg. '1.5'. or '10'. |
h5. Card Parameters
||*Name*||*Required?*||*Default*||*Description*||
|label|(/)| | The label for the deck. May contain simple wiki text (e.g. bold, italic, emoticons and images). |
|default|(x)|false|If true, this card will be the default one shown when the page is first viewed. |
|class|(x)| |The custom CSS class the card is decorated by. Inherits its value from the containing {deck} if not specified.|
|accessKey|(x)| | The key that is hot linked to the specified card.
* Works in Firefox 2 using: Alt + Shift + <character> (Note that some characters (for example b, which accesses the bookmarks toolbar and t which accesses the Tools toolbar menu, will not work as an access key as the default browser functionality take precedence)
* accessKeys are not compatible with IE6 and IE7.|
|nextAfter|(x)| |The number of seconds the slide will stay visible before moving to the next one. By default the current slide will not transition until prompted by the user. Inherits its value from the containing *deck* if not specified. |
|effectType|(x)| none| The effect to use when moving to this slide. May be 'fade' or 'none'. Inherits its value from the containing {deck} if not specified.|
|effectDuration|(x)| |The number of seconds the transition will take to complete. Eg. '1.5' or '10'. Inherits its value from the containing {deck} if not specified. |
{cloak}
{card}
{card:label=show-card}
Displays contents of a specific *card*.
{note:title=Only works when referencing *cards / decks* on the current page.}
h3. The Code
{code}
{show-card:deck=[deck id]|card=[card label}Show card{show-card}
{code}
h3. {toggle-cloak:id=5} Parameters
{cloak:id=5}
||*Name*||*Required?*||*Default*||*Description*||
|deck|(/)| |The unique ID of the deck. |
|card|(/)| |The label of the card to show. |
|scrollTo|(x)|true|If false, the page will not scroll to the deck the card is in. |
{cloak}
{card}
{card:label=float}
This macro allows content to 'float' to the left or right of the surrounding text.
h3. The Code
{code}
{float:left}
Content to float.
{float}
{code}
h3. {toggle-cloak:id=6} Result
{cloak:id=6}
!float_left.png!
{cloak}
h3. {toggle-cloak:id=7} Parameters
{cloak:id=7}
||*Name*||*Required?*||*Default*||*Description*||
|default / side|(/)| |The side to float on ('left' or 'right'). |
|width|(x)| |CSS defining the width of the floating block. E.g. '200px'. |
|background|(x)| |CSS defining the background colour or image.|
|border|(x)| |CSS defining the border to put around the floating block. E.g. 'solid blue 1px'.|
|margin|(x)| |CSS defining the margin to surround the block with. E.g. '5px'. |
|padding|(x)| |CSS defining the padding inside the block. E.g. '5px'. |
{float}
{cloak}
{card}
{card:label=toggle-cloak / cloak}
Creates a button to toggle a cloaked section between being visible and hidden.
{note:title=Requires the *composition-setup* macro be placed on the current page.}
h3. The Code
{code}
h5. {toggle-cloak:id=My Cloak} My Cloak
{cloak:id=My Cloak|visible=true}
My Cloak content.
{cloak}
{code}
h3. {toggle-cloak:id=8} Result
{cloak:id=8}
{panel:borderStyle=solid|borderColor=grey|borderWidth=2px}
h5. {toggle-cloak:id=My Cloak} My Cloak
{cloak:id=My Cloak|visible=true}
My Cloak content.
{cloak}
{panel}
{cloak}
h3. {toggle-cloak:id=9} Parameters
{cloak:id=9}
h5. Toggle-cloak Parameters
||*Name*||*Required?*||*Default*||*Description*||
|id|(/)| |The unique ID of the cloaked section to toggle. May be '*' to be have an auto-id. |
|exclusive|(x)|false|If 'true', other cloaked sections at the same level will be hidden when this one is shown. |
h5. Cloak Parameters
||*Name*||*Required?*||*Default*||*Description*||
|id|(/)| |The unique ID of the cloaked section. May be '*' to be an auto-id. |
|visible|(x)|false|If 'true', the section will be visible initially. |
{cloak}
{card}
{deck}
{card}
{deck}
{roundrect:bgcolor=#828282|width=909px|height=50px|corners=false,false,true,true}
{roundrect}
|