Navigation Icon
Overview
Component Name: gpii.firstDiscovery.icon
File: navIcons.js
A component wrapper around a single navigational icon, managing the state (active/inactive, confirmed).
Using the Navigation Icon component
Option 1: Typically this component is used as a sub-component of the Navigation Icons:
icon: {
type: "gpii.firstDiscovery.icon",
container: "{that}.dom.icon",
options: {...}
}
Option 2: Outside the context of the First Discovery Tool, developers may wish to create a standalone component:
var myNavIcon = gpii.firstDiscovery.icon(container, options);
Grades
This component uses the following base grades:
Model
This component supports the following model properties:
Path | Description | Values | Default |
---|---|---|---|
isActive |
Whether the icon is active (i.e. the related panel is visible) | Boolean | undefined |
isConfirmed |
Whether the icon is confirmed (i.e. the related panel adjuster has been confirmed) | Boolean | undefined |
Options
This component can be configured using the following options:
Name | Description | Values | Default |
---|---|---|---|
position |
The index of the icon, within the set of all navigation icons. | Number |
|
selectors |
Javascript object containing selectors for various fragments of the markup, including the containers for the subcomponents. | See Selectors below | |
styles |
Specific class names used to achieve the look and feel |
|
|
modelListeners |
JavaScript 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 above |
Selectors
One of the options that can be provided to Infusion components is a set of CSS-based selectors identifying where in the DOM different elements can be found. Components use a DOM Binder to access the named elements.
The value for the selectors
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" |
Dependencies
<script type="text/javascript" src="src/lib/infusion/infusion-custom.js"></script>
<script type="text/javascript" src="src/js/navIcons.js"></script>