Topics

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:

NameDescriptionValuesDefault
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 below
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 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>

Edit this Page on GitHub