Navigation item of the wheel - Source code: wheelnav.navItem.js

Navitem basics


navItems

navItem

navSlice

navLine

navTitle

navItems
Wheelnav contains a zero based navItems array. You can override properties of a navItem before createWheel().

wheel = new wheelnav('wheelDiv');
wheel.wheelRadius = 100;
wheel.maxPercent = 1.6;
wheel.slicePathFunction = slicePath().MenuSlice;
wheel.initWheel(["item", "slice", "line", "title"]);
wheel.navItems[0].slicePathFunction = slicePath().MenuSliceWithoutLine;
wheel.createWheel();

After createWheel() is called, you can register callback functions to be triggered by specific SVG DOM events or the internal navigateFunction.

wheel.navItems[0].navigateFunction = function () { alert('Hello wheel!'); };
wheel.navItems[1].navSlice.mousedown(function () { alert('Hello navSlice!'); });
wheel.navItems[2].navLine.mouseover(function () { alert('Hello navLine!'); });
wheel.navItems[3].navTitle.mouseup(function () { alert('Hello navTitle!'); });

navItem
The navItem created by slicePathFunction, this stores svg data for navSlice, navLine and navTitle.
Every navItem stores his itemIndex and can be selected or hovered state.

!!! Source code !!!
navItem.itemIndex = itemIndex from wheelnav;
navItem.selected = false;
navItem.hovered = false;

navSlice
The navSlice is a svg path, created by slicePathString property.
You can override background color of navSlice with fillAttr.

!!! Source code !!!
navItem.navSlice = navItem.wheelnav.raphael.path(slicePath.slicePathString);
navItem.fillAttr = { fill: "#CCC" };

navLine
The navLine is a svg path, created by linePathString property.

!!! Source code !!!
navItem.navLine = navItem.wheelnav.raphael.path(slicePath.linePathString);

navTitle
The navTitle can be text, svg path, image and positioned by titlePosX and titlePosY properties.
You can override font of text with titleFont and set the width and height of an image or path with titleWidth and titleHeight properties.

!!! Source code !!!
//Title defined by path
navItem.navTitle = navItem.wheelnav.raphael.path(currentTitle.path);
//Title defined by image
navItem.navTitle = navItem.wheelnav.raphael.image(currentTitle.title, slicePath.titlePosX, slicePath.titlePosY);
navitem.titleWidth = 32;
navitem.titleHeight = 32;

//Title defined by text
navItem.navTitle = navItem.wheelnav.raphael.text(slicePath.titlePosX, slicePath.titlePosY, currentTitle.title);
navItem.titleFont = '100 24px Impact, Charcoal, sans-serif';

Navitem attributes


default

basic

hover

select

Here is the default wheel.
Default basic, hovered, and selected attributes.
You can use null in createWheel/initWheel methods for an empty navItem.

basic attributes
Every navItem element has an Attr property.

hover attributes
You can set attributes over hovered state.

selected attributes
You can set attributes over selected state.


            

Navitem animations


default

animate

path

transform

percent

Here is the default wheel.
Default animation, path, transform and percent.

animate
You can set the number of milliseconds for animation to run and the easing type.

path
The path of a navItem can be animated on hover and selection.
The slicePath class contains some default paths.

transform
The transformation of a navItem can be animated on hover and selection.
The sliceTransform class contains some default transforms.

percent
The percent of a navItem can be animated on hover and selection.