Topics

Navigation Icons

Overview

Component Name: gpii.firstDiscovery.navIcons

File: navIcons.js

Wraps the set of Navigation Icons and assists in determining the position of each navigation icon.

Using the Navigation Icons component

Option 1: Typically this component is used as a sub-component of the Navigation:

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

Option 2: Outside the context of the First Discovery Tool, developers may wish to create a standalone component:

var myNavIcons = gpii.firstDiscovery.navIcons(container, options);

Grades

This component uses the following base grades:

Model

This component supports the following model properties:

Path Description Values Default
pageNum Corresponds to the index of the current panel. Panel ID (Number) 0
iconWidth The width of the icon. Used to determine where to scroll to make it visible. Number (in pixels) 0

Supported Events

This component supports the following events:

EventTypeDescriptionParameters
onCreateIcon default Fired to trigger the creation of each navigation icon
element
the DOM element to use as the container for the Navigation Icon
position (number)
the position of the Navigation Icon
onSetConfirmedIcon default Fired to trigger a specific panel icon to show confirmed state
panelNum
the number of the panel whose icon state needs to be set to confirmed
onSetActiveIcon default Fired to trigger a specific panel icon to show active state
panelNum
the number of the panel whose icon state needs to be set to active

Methods

Method Description Parameters
showIconPage Scrolls the icon container to make sure the current active icon is visible. none

Subcomponents

This component has the following subcomponents:

NameDescriptionValuesDefault
icon This is a dynamic component. A new instance is created when the onCreateIcon event is fired. "gpii.firstDiscovery.icon" 
icon: {
    createOnEvent: "onCreateIcon",
    type: "gpii.firstDiscovery.icon",
    container: "{arguments}.0",
    options: {
        position: "{arguments}.1",
        styles: "{navIcons}.options.styles",
        listeners: {
            "{navIcons}.events.onSetConfirmedIcon": {
                funcName: "{that}.setIconState",
                args: ["isConfirmed", "{arguments}.0"]
            },
            "{navIcons}.events.onSetActiveIcon": {
                funcName: "{that}.setIconState",
                args: ["isActive", "{arguments}.0"]
            }
        },
        modelListeners: {
            "{navIcons}.model.pageNum": {
                listener: "gpii.firstDiscovery.icon.measure",
                args: ["{that}", "{navIcons}.applier", "iconWidth"],
                priority: 10
            },
            "{navIcons}.model.currentPanelNum": {
                listener: "gpii.firstDiscovery.navIcons.updateIconModel",
                args: ["{that}", "{change}.value", "{change}.oldValue"]
            }
        }
    }
}

Options

This component can be configured using the following options:

NameDescriptionValuesDefault
pageSize The maximum number of icons to show at a time. Number 
pageSize: 5
iconHoles A list of all the panel positions which have no Navigation Icons. An array of indexes (Number) 
iconHoles: [2, 8]
selectors Javascript object containing selectors for various fragments of the markup, including the containers for the subcomponents. See Selectors below
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
icon The set of containers to render the Navigation Icons. ".gpiic-fd-navIcon"
pager The container of the Navigation Icons. ".gpii-fd-navIcon-outer"

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