Navigation Icon API
Navigation Icon Overview
A component wrapper around a single navigational icon, managing the state (active/inactive, confirmed).
Join the infusion-users mailing list and ask your questions there.
Adding a Navigation Icon Component
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);
Grades
The base grades used by the the First Discovery Editor:
Model
Path | Description | Values | Default |
---|---|---|---|
| Whether the icon is active (i.e. the related panel is visible) |
| undefined |
isConfirmed | Whether the icon is confirmed (i.e. the related panel adjuster has been confirmed) | Boolean | undefined |
Options
Name | Description | Values | Default |
---|---|---|---|
| The index of the icon, within the set of all navigation icons. |
| position: null |
| Javascript object containing selectors for various fragments of the markup, including the containers for the subcomponents. |
|
See Selectors |
styles | Specific class names used to achieve the look and feel. | styles: { active: "gpii-fd-active", show: "gpii-fd-show" } | |
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 |
Selectors
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 |
---|---|---|
| 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>