Menu

# JavaScript – behavior layer

## Call parameters

The TreeMenu constructor takes two arguments, `menuId` and `allowWhitspace`.
Note: both arguments are optional.

menuId
  id of the `<div>` element surrounding the menu. Defaults to `"menu"`.
allowWhitespace
  allow for whitespace in the menu HTML code when true. Defaults to `true`. The script runs slightly faster when whitespace is not allowed (but in this case you have to make sure there really is no whitespace in the HTML source).

## Configuration settings

### Sections

The settings are divided into three sections:

- `config`
- `hooks`
- `texts`

To change settings, use:

- Change settings of all instances:
  - `Nornix.TreeMenu.prototype.config`
  - `Nornix.TreeMenu.prototype.hooks`
  - `Nornix.TreeMenu.prototype.texts`
- Change settings of a single instance:
  - `myMenu.config`
  - `myMenu.hooks`
  - `myMenu.texts`

Sample code:

    var treemenu = new Nornix.TreeMenu();
    treemenu.config.dynamicClasses = false;
    treemenu.config.menuLinkElement = "menulink";
    Nornix.TreeMenu.prototype.texts.openFolderTitle  = "öppna mapp";

### `config` properties

dynamicClasses
  set to true if the server does not insert the needed classes
  Note: the needed classes are: `root`, `folder`, `document`, `last` and `open`.
openCloseAll
  set to true to enable clickable icons for opening/closing all folders.
markCurrentItem
  This is a setting to add an empty span element in the beginning of the anchor element representing the current page. Set to false to avoid this action.
contentElement
  set this to the id of the page content block. Keyboard users will benefit from this. Defaults to `content`. Set to false to disable this function. When the users presses the ESC key, focus is moved from the menu to the content.
menuLinkElement
  Setting for link to the menu. Set to id of the link to the menu, to make it really focus the root link of the menu, and prevent scrolling. Defaults to `menuLink`. Set to false to disable this function. In the example pages, the word "Menu" is linked to the menu.
preloadImages
  array of image file names. Preloding the menu images can make them appear faster on the screen. Set to `false` to prohibit preloading.
  Note: the order of the images is important! Make sure to update the image filenames if you use other image files.
imagePath
  path to the menu images. Make sure it can be added in front of the image file names to give the right location of the files.

### `hooks` properties

dynamicDocumentLinks
  function that will be called on document node clicks and keyboard `Enter` events.
  The function is provided the activated link as an argument. The function should return false to prevent further event handlers or true to let them run.
dynamicFolderLinks
  function that will be called on folder node clicks and keyboard `Enter` events.
  The function is provided the activated link as an argument. The function should return false to prevent further event handlers or true to let them run.

Sample code:

    treemenu.hooks.dynamicDocumentLinks = function (a)
    {
    	$("#ajax-load").hide().load(a.href, function (){
    		$("#ajax-load").slideDown(400);
    	});
    	return false;
    };

This code uses the jQuery library to insert the contents of the linked documents into the page using Ajax-style loading. Another possible use for this feature would be in an application context.

### `texts` properties

Set the properties in this section to change the language of the tree menu. Please refer to the source code. The meaning of the different texts should be pretty obvious. For an example, see Internationalization below.

## Invoking the script

    // create instance of TreeMenu
    var treemenu = new Nornix.TreeMenu();
    // set configuration settings as needed
    treemenu.config.dynamicClasses = false;
    // start the script
    treemenu.start();

There is no need to wait for the page to load before invoking the tree menu, it will by itself keep track on when the menu is available in the DOM. While waiting for the (X)HTML to get parsed by the browser, it will preload the images.

## Internationalization

To modify the texts used as titles for the toggle symbols, you can put code like this in a separate script or in a `<script>` element:

    Nornix.TreeMenu.prototype.texts.closeTreeTitle   = "stäng alla mappar";
    Nornix.TreeMenu.prototype.texts.openTreeTitle    = "öppna alla mappar";
    Nornix.TreeMenu.prototype.texts.closeFolderTitle = "stäng mapp";
    Nornix.TreeMenu.prototype.texts.openFolderTitle  = "öppna mapp";

or like this:

    Nornix.TreeMenu.prototype.texts =
    {
    	"closeTreeTitle"   : "stäng alla mappar",
    	"openTreeTitle"    : "öppna alla mappar",
    	"closeFolderTitle" : "stäng mapp",
    	"openFolderTitle"  : "öppna mapp"
    };

## Functions

There are some functions available to call after the menu has been stated:

openAll()
  opens all folders
closeAll()
  closes all folders

You call the functions like this:

- `myMenu.openAll()`
- `myMenu.closeAll()`

Last modified: 2008-03-11