Navigation Icon API

A component wrapper around a single navigational icon, managing the state (active/inactive, confirmed).

On This Page
Still need help?

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


Option 1: Typically used as a dynamic sub-component of a Navigations Icons component.

Adding as sub-component:

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

Option 2: Adding as a stand alone component:

var myNavIcon = gpii.firstDiscovery.icon(container, options);

The base grades used by the the First Discovery Editor:

Path

Description

Values

Default

isActive

Whether the icon is active (i.e. the related panel is visible)

Boolean

undefined
isConfirmedWhether the icon is confirmed (i.e. the related panel adjuster has been confirmed)Booleanundefined

Name

Description

Values

Default

position

The index of the icon, within the set of all navigation icons.

Number

 

position: null

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"
}
modelListenersJavaScript object containing model paths and the listeners that are activated when changes happen to those paths.Keys in the object are event names, values are functions or arrays of functions.See Model

One of the options that can be provided to the First Discovery Editor 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

confirmedIndicator

The confirmation badge that will be applied to the icon after its related panel's adjuster has been confirmed.

".gpiic-fd-confirmedIndicator"

<script type="text/javascript" src="src/lib/infusion/infusion-custom.js"></script>
<script type="text/javascript" src="src/js/navIcons.js"></script>