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.
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.
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
The Code
Properties set within the body of the macro :
composition-setup}
property.key = value
some.properties = some_values
some.properties = some_values
{composition-setup}
Properties attached in a text file:
{composition-setup:defaults=[Home^composition.properties]}
property.key = value
{composition-setup}
Properties
Parameters
The deck and *card macros work together to create tabbed content.
Requires the *composition-setup* macro be placed on the current page.
The Code
Card 1 content.
Card 2 content.
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
Show card
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
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
My Cloak
My Cloak content.
