DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: FoldoutMenu¶

Author:	Kasper Skårhøj
Created:	2002-11-01T00:32:00
Changed:	2006-01-08T15:27:27
Author:	Peter Klein
Email:	peter@umloud.dk
Info 3:
Info 4:

EXT: FoldoutMenu¶

Extension Key: foldoutmenu

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.com

Table of Contents¶

EXT: FoldoutMenu 1

Introduction 1

What does it do? 1

Screenshots 2

Users manual 2

Configuration 3

The TMENU object: 3

The TEXT Object: 5

Reference 6

Known problems 9

To-Do list 9

Changelog 9

Introduction¶

What does it do?¶

An addon for TMENUs, allowing you to create foldable menus. A bit like GMENU_FOLDOUT, but supporting unlimited levels. (GMENU_FOLDOUT only supports 2 levels)
Menu created by using standard ordered or unordered lists (OL/LI - UL/LI)
XHTML 1.0 compliant. - Well that depends on your code ;)
Tested in the following browsers:
Internet Explorer 4.0-6.0 (PC)
Mozilla 1.05-1.5 (PC + Mac)
Opera 7.0 (PC)
Safari 1.0 (Mac)
Konqueror 3.4 (Linux)

Screenshots¶

Users manual¶

The foldout menu consists of 2 files:

foldout.js JavaScript to fold/unfold the menu items.

foldoutmenu.php 2 small PHP functions. One which loads the javascript file, and creates aregister value, containing a list of pageids for all the pages which has sub items.And another which creates the initializing javascript code.

To use this extension, you just have to include the PHP file somewhere in your typoscript setup (similar to when using TMENU_LAYERS/GMENU_LAYERS), like this:

includeLibs.foldoutmenu = typo3conf/ext/foldoutmenu/foldoutmenu.php

Or if you have installed the extension as global instead of local:

includeLibs.foldoutmenu = typo3/ext/foldoutmenu/foldoutmenu.php

Configuration¶

To create the Typoscript for the menu, you just create a normal TMENU object, wrapped in UL/LI tags (VERY important, as the menu works by folding/unfolding UL tags) and combine it with a TEXT object, which initializes the JavaScript menu system.

The TMENU object:¶

In the TMENU object you'll need to activate the 1st PHP function (the one that creates the register value), by adding this line:

itemArrayProcFunc = user_foldoutMenu->getIfSubUidList

Your menu also needs to contain an IFSUB state, which should look something like this:

# This example assumes that the menu prefix
# would be set to "amenu" in the TEXT object.
IFSUB {
  # Enable replacing the "{elementUid}" with the actual pageid. (Required)
  subst_elementUid = 1

  # Don’t create a normal link on the title.
  doNotLinkIt = 1

  # Create the link to fold/unfold the menu.
  # (Required, but you don't have to set it using "linkWrap")
  linkWrap = <A onmousedown="amenu.foldMenu('amenu-{elementUid}');return false;" style="cursor: pointer;">|</A>

  # The next 2 lines creates correct nesting of the UL/LI tags,
  # and adds the pageid to the UL tag (Required)
  allWrap = <li>|<ul id="amenu-{elementUid}">
  wrapItemAndSub = |</ul></li>
}

If you would use another menu prefix instead of "amenu", you need to change it in 3 places. (in these 2 lines):

linkWrap = <A onmousedown="amenu.foldMenu('amenu-{elementUid}');return false;" style="cursor: pointer;">|</A>
allWrap = <li>|<ul id="amenu-{elementUid}">

As of version 1.1.0, the javascript function “foldMenu” now accepts an additional parameter after the menuID.(Only functioning if "autoFold=0")

If the 2 ^nd parameter is set to “0” then the folding mode will be explicit set to “Collapse”, and clicks on that item will only collapse the menu.
If the 2 ^nd parameter is set to “1” then the folding mode will be explicit set to “Expand”, and clicks on that item will only expand the menu.
If the 2 ^nd parameter is ommitted (default) it will just toggle between expanded/collapsed mode.

An example of usage can be found in the example “Double Buttons”

NOTE: If your site is using Mountpoints, you try to use the default links from the TMENU, and not generate them by “typolink” as that will break Mountpoint support. (All the examples works 100% with Mountpoints.)

Image Swapping:¶

Suppose your menu also have some images you want swapped when the menu folds/unfolds, you'll need to set an ID on the image like in these examples:

# Example using the "afterImg" property.
afterImg = media/bullets/arrow_no.gif
afterImgTagParams = id="amenu-{elementUid}-0"



# Example using the "stdWrap" property.
stdWrap.cObject = COA
stdWrap.cObject {
  20 = IMAGE
  20.file = media/bullets/arrow_no.gif
  20.params = id="amenu-{elementUid}-0"
}

Syntax for the image ID: <prefix>-<pageid>-<imagenumber>

Lets say your menu have 3 images, you set the ID of the first like this:

id="amenu-{elementUid}-0"

The ID of the second, like this:

id="amenu-{elementUid}-1"

And the ID of the third, like this:

id="amenu-{elementUid}-2"

The TEXT Object:¶

In the TEXT object (which retrieves the register value) you can set various options (See Reference section).

Here's a couple example TEXT objects:

# This is the MINIMUM settings for a menu.
10 = TEXT

# Get the register value
10.data = register:ifSubUidList

# parse the content thru the PHP function
10.postUserFunc = user_foldoutMenu->JSWrapper

# set the prefix for the menu
10.postUserFunc.prefix = amenu

# Only render this object if the register value contains some pageids
10.required = 1

# Another example, with several options set.
= TEXT
data = register:ifSubUidList
postUserFunc = user_foldoutMenu->JSWrapper
postUserFunc.prefix = bmenu
postUserFunc.autoFold = 1
postUserFunc.startFolded = 1
postUserFunc.foldCurrent = 1
postUserFunc.imagePath = media/bullets/
postUserFunc.imageSwap = ["arrow_no.gif","arrow_act.gif"]
postUserFunc.altSwap = ["Click to open","Click to close"]
required = 1

Reference¶

The library consists of various functions.

The function “user_foldoutMenu->getIfSubUidList” is used on the HMENU object, in order to generate a list of Ids for all pages which have subpages.

prefix¶

Property

prefix

Data type

string

Description

Prefix for the menu. - Normally not set.

However if this option is set, then the pageIDs will be prefixed with the menuprefix.

Usefull for creating expand/collapse all buttons. (See the example “DropDownSitemap” for usage.)

Default

[tsref:(cObject).foldoutmenu]

The function “user_foldoutMenu->JSWrapper” is used on the TEXT object which activates the various menu options.

prefix¶

Property

prefix

Data type

string

Description

Prefix for the menu. (This is the only option which is NOT optional)

Default

autoFold¶

Property

autoFold

Data type

boolean

Description

Autofold the unfolded item when clicking on a new item?

(0=no, 1=yes )

Default

0

foldCurrent¶

Property

foldCurrent

Data type

boolean

Description

Allow current unfolded item to be folded? (Only active if "autoFold = 1")

(0=no, 1=yes)

Default

0

startFolded¶

Property

startFolded

Data type

boolean

Description

Should menu start with all items folded (Only active if "autoFold = 0")

(0=no, 1=yes)

Default

0

direction¶

Property

direction

Data type

boolean

Description

Default

0

enableCookie¶

Property

enableCookie

Data type

boolean

Description

Save current menu state in a cookie? (0=no, 1=yes)

Default

0

cookieLifetime¶

Property

cookieLifetime

Data type

int

Description

Lifetime of persistent cookie, in days. If set to 0 then a session cookie is set.

Default

0

imagePath¶

Property

imagePath

Data type

string

Description

Path to image files.

Default

imageSwap¶

Property

imageSwap

Data type

string

Description

Array of images to swap.

(1st image is "closed image(s)", 2nd is "expanded image(s)"Syntax for the for the imageSwap/altSwap array(s): ["closedImage.gif","expandedImage"]

Here's a couple examples:

# Simple setup with just one image swap. (No alt/title swap)
10.postUserFunc.imageSwap = ["arrow_no.gif","arrow_act.gif"]



# Simple setup with one image + alt/title swap.
10.postUserFunc.imageSwap = ["arrow_no.gif","arrow_act.gif"]
10.postUserFunc.altSwap = ["Click to open","Click to close"]



# A more advanced setup, with 5 images + alt/title swaps.
10.postUserFunc.imageSwap (
 ["menu_folder_closed.png","menu_folder_open.png"],
 ["menu_collapse.png","menu_expand.png"],
 ["menu_collapse_corner.png","menu_expand_corner.png"],
 ["menu_collapse_corner_first.png","menu_expand_corner_first.png"],
 ["menu_collapse_first.png","menu_expand_first.png"]
)
10.postUserFunc.altSwap (
 ["Click to open","Click to close"],
 ["-","+"],
 ["-","+"],
 ["-","+"],
 ["-","+"]
)

Default

altSwap¶

Property

altSwap

Data type

string

Description

If imageSwap is set, then you can set the optional array "altSwap" to ALT/TITLE text you want on the images.

Default

[tsref:(cObject).foldoutmenu]

The last function “user_foldoutMenu->setOnMouseDown” can be used to set the onClick handler on the links, in cases where it's not possible to do it by typoscript. (An example of usage can be found in the “Graphical” example.)

NOTE: This function has no properties.

((generated))¶

Example¶

# Simple menu with no image swap.
lib.simplemenu = COA
lib.simplemenu {
  10 = HMENU
  10.wrap = <ul>|</ul>
  10.1 = TMENU
  10.1 {
    expAll = 1
    itemArrayProcFunc = user_foldoutMenu->getIfSubUidList
    NO {
      allWrap = <li>|</li>
    }
    IFSUB < .NO
    IFSUB = 1
    IFSUB {
      subst_elementUid = 1
      doNotLinkIt = 1
      linkWrap = <A onmousedown="amenu.foldMenu('amenu-{elementUid}');return false;" style="cursor: pointer;">|</A>
      allWrap = <li>|<ul id="amenu-{elementUid}">
      wrapItemAndSub = |</ul></li>
    }
  }
  10.2 < .10.1
  10.3 < .10.1
  10.4 < .10.1

  20 = TEXT
  20.data = register:ifSubUidList
  20.postUserFunc = user_foldoutMenu->JSWrapper
  20.postUserFunc.prefix = amenu
  20.required = 1
}

page.10 < lib.simplemenu



# Simple menu with one image swap.
lib.foldoutmenu2 = COA
lib.foldoutmenu2 {
  10 = HMENU
  10.wrap = <ul>|</ul>
  10.1 = TMENU
  10.1 {
    expAll = 1
    itemArrayProcFunc = user_foldoutMenu->getIfSubUidList
    NO {
      allWrap = <li>|</li>
    }
    IFSUB < .NO
    IFSUB = 1
    IFSUB {
      subst_elementUid = 1
      doNotLinkIt = 1
      stdWrap.cObject = COA
      stdWrap.cObject {
        10 = TEXT
        10.field = title
        20 = IMAGE
        20.file = media/bullets/arrow_no.gif
        20.params = id="bmenu-{elementUid}-0"
      }
      linkWrap = <A onmousedown="bmenu.foldMenu('bmenu-{elementUid}');return false;" style="cursor: pointer;">|</A>
      allWrap = <li>|<ul id="bmenu-{elementUid}">
      wrapItemAndSub = |</ul></li>
    }
  }
  10.2 < .10.1
  10.3 < .10.1
  10.4 < .10.1

  20 = TEXT
  20.data = register:ifSubUidList
  20.postUserFunc = user_foldoutMenu->JSWrapper
  20.postUserFunc.prefix = bmenu
  20.postUserFunc.autoFold = 1
  20.postUserFunc.startFolded = 1
  20.postUserFunc.foldCurrent = 1
  20.postUserFunc.imagePath = media/bullets/
  20.postUserFunc.imageSwap = ["arrow_no.gif","arrow_act.gif"]
  20.postUserFunc.altSwap = ["Click to open","Click to close"]
  20.required = 1
}


page.20 < lib.foldoutmenu2

Check the folder “examples” for more advanced example menu setups.

If you create some interesting menu setups using this package, please email me the Typoscript code for your menu, so I can include it as an example in the next release!

Known problems¶

None

To-Do list¶

Nothing at the moment.

Changelog¶

5-Sep-05
First release.
8-Jan-06
Fixed bugs:
Cookie path was incorrectly set for each each page, instead of global for entire site.
javascript error returned if altSwap wasn't set when using imageSwap.
this.displayMode wasn't set in the setMenu function, which caused problems when autoFold was enabled.
Treemenu - minus & plus had to be swapped in the Constants so the output is correct.
Treemenu - error in TS where the wrong TMENU objects got copied. Thanks to Volker Hochgürtel for reporting this one..
New Additions:
Now works with ordered lists as well (OL/LI)
Parameter added to the PHP userfunction, in order to generate a list of prefixed ids for use in ExpandAll/CollapseAll buttons.
Parameter added to the main javascript function to explicit set the menu to Expand or Collapse (default mode is Toggle.) - Only functioning if "autoFold=0"
All examples now works correctly with MountPoint.

EXT: FoldoutMenu - 9