View Source

deck.tab.active.background = #6495ED

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

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').

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.

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.

Parameters

Name	Required?	Default	Description
default			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.

The deck and *card macros work together to create tabbed content.

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

Content to float.

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.

Result

My Cloak

My Cloak content.

Parameters

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		false	If 'true', other cloaked sections at the same level will be hidden when this one is shown.

Cloak Parameters

Name	Required?	Default	Description
id			The unique ID of the cloaked section. May be '*' to be an auto-id.
visible		false	If 'true', the section will be visible initially.