Navigation API

Owned by Justin Obara
Last updated: Sept 02, 2015 by Alan HarnumVersion comment
3 min read

Handles the navigation between panels as well as maintaining a set of icons representing each panel.

On This Page
See Also
Still need help?

Join the infusion-users mailing list and ask your questions there.

Option 1: Typically used as a sub-component of a Preferences Editor Loader, particularly the First Discovery Tool Editor.

Adding as sub-component:

nav: {
    type: "gpii.firstDiscovery.nav",
    container: "{that}.dom.nav",
    options: {}
}

Option 2: Adding as a stand alone component:

var myNav = gpii.firstDiscovery.nav(container, options);

The base grades used by the the Navigation:

Path

Description

Values

Default

currentPanelNum

The panel currently displayed.

Panel ID (Number)

1

Name

Description

Values

Default

navButtons

Specifies the component to manage the buttons and their states for navigating between panels.

"gpii.firstDiscovery.navButtons"

navButtons: {
    type: "gpii.firstDiscovery.navButtons",
    container: "{that}.dom.navButtons",
    options: {
        model: {
            currentPanelNum: "{nav}.model.currentPanelNum"
        },
        messageBase: "{nav}.options.messageBase",
        styles: "{nav}.options.styles",
        panelTotalNum: "{nav}.options.panelTotalNum"
    }
}
navIconsSpecifies the component which is responsible for displaying the panel icons and managing their state.
"gpii.firstDiscovery.navIcons"
navIcons: {
    type: "gpii.firstDiscovery.navIcons",
    container: "{nav}.dom.navIcons",
    options: {
        model: {
            currentPanelNum: "{nav}.model.currentPanelNum"
        },
        styles: "{nav}.options.styles"
    }
}
stepCountSpecifies the component responsible for displaying the current step message. ( I.E. a textual indicator of the current panel id and progress. )
"gpii.firstDiscovery.stepCount"
stepCount: {
    type: "gpii.firstDiscovery.stepCount",
    container: "{that}.dom.stepCount",
    options: {
        messageBase: "{nav}.options.messageBase",
        model: {
            currentPanelNum: "{nav}.model.currentPanelNum"
        },
        panelTotalNum: "{nav}.options.panelTotalNum"
    }
}

Name

Description

Values

Default

panelTotalNum

The total number of panels in the editor. This must be supplied by an integrator.

Any valid integer

 

panelTotalNum: null

messageBase

The loaded message bundle.

 

Any valid key/value pairing, where the value is a localized string. The key could also take a namespace by providing a prefix (e.g. namespace-key). This allows for grouping strings to be accessed as an array of strings. (See: Message Lookup API)

 

messageBase: {
    "someMessage": "a localized message",
    "myNamespace-string1": "The first localized string",
    "myNamespace-string2": "The second localized string"
}
tooltipOptions: {
    delay: 0,
    duration: 0,
    position: {
        my: "left bottom",
        at: "right+1 top"
    },
    styles: {
        tooltip: "gpii-fd-tooltip"
    },
    items: ".gpiic-fd-tooltip:not([disabled])"
}

selectors

Javascript object containing selectors for various fragments of the markup, including the containers for the subcomponents.

 

 

See Selectors

stylesSpecific class names used to achieve the look and feel. 
styles: {
    active: "gpii-fd-active",
    show: "gpii-fd-show"
}

One of the options that can be provided to the Navigation component is a set of CSS-based selectors identifying where in the DOM different elements can be found. The value for the option is itself a Javascript object containing name/value pairs:

 

selectors: {
    selector1Name: "selector 1 string",
    selector2Name: "selector 2 string",
      ...
}

Selector Name

Description

Default

navButtons

The container for the navButtons sub-component

".gpiic-fd-navButtons"
navIconsThe container for the navIcons sub-component".gpiic-fd-navIcons"
stepCountThe container for the stepCount sub-component".gpiic-fd-stepCountMsg"

<script type="text/javascript" src="src/lib/infusion/infusion-custom.js"></script>
<script src="src/js/msgLookup.js"></script>
<script src="src/js/tooltip.js"></script>
<script src="src/js/navIcons.js"></script>
<script src="src/js/navButtons.js"></script>
<script src="src/js/stepCount.js"></script>
<script src="src/js/nav.js"></script>