Page History

Composition Setup
deck.tab.active.background = #6495ED

Section

Column

width	20%15%

Excerpt Include

	pluglib:Advanced Macros Pluginpluglib:
	Advanced Macros Plugin
nopanel	true

Column

width	60%

Deck of Cards

width	907
id	Composition

Card

label	Overview

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.

Wiki Markup

{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}

Card

label	Documentation

Deck of Cards

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

The Code

Properties set within the body of the macro :

Code Block


composition-setup}
property.key = value
some.properties = some_values
some.properties = some_values
{composition-setup}

{code}

Properties

attached

in

a

text

file:

Code Block
{

code} {composition

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.

	10

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 Properties

Name	Default	Description
cloak.memory.duration

| 0 | The number of days the cloak status should be remembered for.| |

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

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

		The value to use for the icon when the cloak can be closed.
cloak.toggle.exclusive

| false |If

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

If 'true',

the

heading

or

paragraph

the

toggle

is

in

will

be

clickable.

| h5. Deck Properties ||*Name*||*Default*||*Description*|| |

Deck Properties

Name	Default	Description
deck.memory.duration

| 0 |The number of days the deck status should be remembered for.| |

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

		The border for the active tab (CSS - eg. '1px dashed black')
deck.tab.active.background

| |The background for the active tab (CSS - eg.

The background for the active tab (CSS - eg. '#ff0055')

| |

deck.tab.inactive.border

| |The border for inactive tabs

The border for inactive tabs (CSS)

| |

deck.tab.inactive.background

| |The background for inactive tabs

The background for inactive tabs (CSS)

| |

deck.tab.spacer

| |The distance between tabs (eg

The distance between tabs (eg '5px')

| |

deck.card.border

| |The border for the active card.| |

		The border for the active card.
deck.card.background

| |The background for the active card.| |

		The background for the active card.
deck.width/deck.height

| |The width

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

		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.

0

The number of seconds the transition will take to complete. Eg. '1.5'.

Defaults

to

0.

| {cloak} h3. {toggle

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.

	2

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.

| {cloak} {card} {card:label=deck / card} The *deck and *card* macros work together to create tabbed content. {note:title=Requires the

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 Block

Deck of Cards

id	[Unique Deck ID]

Card

label	Card 1

Card 1 content.

Card

label	Card 2

Card 2 content.

Code Block

 
{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

Code Block


 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 
Float left:
{code}
{float:left}
Content to float.
{float}
{code}
Float right:
{code}
{float:right}
Content to float.
{float}
{code}

Float

	left
	left

Content to float.

Code Block


h3. {toggle-cloak:id=6} Result 
{cloak:id=6}
!float_left.png!
{cloak}

h3. {toggle-cloak:id=67} Result Parameters
{cloak:id=6}
Float left:
{float:left}
Content to float.
{float}
Float right:
{float:right}
Content to float.
{float}
{cloak}
h3. {toggle-cloak:id=7} Parameters
{cloak:id=7}
||*Name*||*Required?*||*Default*||*Description*||
{cloak}
{card}

{card:label=toggle-cloak / cloak}
h3. The Code 
{code}
{code}
h3. {toggle-cloak:id=8}Result 
{cloak:id=8}
{cloak}
h3. {toggle-cloak:id=9}Parameters
{cloak:id=9}
||*Name*||*Required?*||*Default*||*Description*||
{cloak}
{card}
{deck}

{card}
{deck}
{roundrect:bgcolor=#828282|width=909px|height=50px|corners=false,false,true,true}
{roundrect}

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

Toggle Cloak
id My Cloak
My Cloak

Cloak

visible	true
id	My Cloak

My Cloak content.

Code Block

Toggle Cloak
id 8
Result

Cloak

id	8

solidgrey2px

My Cloak My Cloak

My Cloaktrue

My Cloak content.

Panel

Cloak

9 Parameters

9

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.

Card

Deck of Cards

Deck of Cards

Round Rectangle

corners	false,false,true,true
bgcolor	#828282
width	909px
height	50px

Column

width	20%

Child pages

Versions Compared

Old Version 16

New Version Current

Key

Composition Plugin

This plugin includes the following macros:

The Code

Toggle Cloak

id

10

Properties

Cloak

General Properties

Cloak Properties

Deck Properties

toggle-cloak

id

2

Parameters

Cloak

The

Code

Toggle Cloak
id My Cloak
My Cloak

Toggle Cloak
id 8
Result

My Cloak My Cloak

9 Parameters

Toggle-cloak Parameters

Cloak Parameters

Child pages

Page History

Versions Compared

Old Version 16

New Version Current

Key

Composition Plugin

This plugin includes the following macros:

The Code

Toggle Cloak

id

10

Properties

Cloak

General Properties

Cloak Properties

Deck Properties

toggle-cloak

id

2

Parameters

Cloak

The

Code

Toggle CloakidMy Cloak My Cloak

Toggle Cloakid8 Result

My Cloak My Cloak

9 Parameters

Toggle-cloak Parameters

Cloak Parameters

Toggle Cloak
id My Cloak
My Cloak

Toggle Cloak
id 8
Result