Navigation Icons API

Owned by Justin Obara
Last updated: Sept 02, 2015 by Alan HarnumVersion comment
2 min read

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

On This Page
See Also
Still need help?

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

Option 1: Typically used as a sub-component of a Navigation component.

Adding as sub-component:

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

Option 2: Adding as a stand alone component:

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

The base grades used by the Navigation Icons:

Path

Description

Values

Default

pageNum

Corresponds to the index of the current panel.

Panel ID (Number)

0
iconWidthThe width of the icon. Used to determine where to scroll to make it visible.Number (in pixels)0

Event

Type

Description

Parameters

Parameter Description

onCreateIcon

default

Fired to trigger the creation of each navigation icon

element, position

element: the DOM element to use as the container for the Navigation Icon

position: the position of the Navigation Icon

Name

Description

Values

Default

icon

This is a dynamic component. A new instance is created for each onCreateIcon event that is fired.

"gpii.firstDiscovery.icon"

icon: {
    createOnEvent: "onCreateIcon",
    type: "gpii.firstDiscovery.icon",
    container: "{arguments}.0",
    options: {
        position: "{arguments}.1",
        styles: "{navIcons}.options.styles",
        modelListeners: {
            "{navIcons}.model.currentPanelNum": {
                listener: "gpii.firstDiscovery.navIcons.updateIconModel",
                args: ["{that}", "{change}.value", "{change}.oldValue"]
            },
            "{navIcons}.model.pageNum": {
                listener: "gpii.firstDiscovery.icon.measure",
                args: ["{that}", "{navIcons}.applier", "iconWidth"],
                priority: 10
            }
        }
    }
}

Name

Description

Values

Default

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

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

icon

The set of containers to use the Navigation Icons.

".gpiic-fd-navIcon"
pagerThe container of the Navigation Icons.".gpii-fd-navIcon-outer"

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