Navigation Buttons API

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

Provides the back/next buttons for navigating between the panels of the First Discovery Tool.

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.

Adding as sub-component:

navButtons: {
    type: "gpii.firstDiscovery.navButtons",
    container: "{that}.dom.navButtons",
    options: {}
}

Option 2: Adding as a stand alone component:

var myNavButtons = gpii.firstDiscovery.navButtons(container, options);

The base grades used by the Navigation Buttons:

Path

Description

Values

Default

currentPanelNum

The panel currently displayed. Must be in a range from panelStartNum to panelTotalNum.

Panel ID (Number)

undefined
isFirstPanelWhether or not the current panel is the first panel.Booleanundefined
isLastPanel Whether or not the current panel is the last panel.Boolean undefined

Method

Description

Parameters

setButtonLabels

Sets the labels and tooltip content for the navigation buttons.

 

toggleButtonStates

Toggles an element between an enabled/disabled state

element: A jQuery element

disabled: A Boolean value of the disabled state to set

adjustCurrentPanelNumChanges the current panel by a specified change amount.toChange: A Number
backButtonClickedMoves the current panel back one position 
nextButtonClickedMoves the current panel forward one position 

Name

Description

Values

Default

panelTotalNum

The total number of panels that the buttons will be navigating through.

Number

 

panelTotoalNum: null

panelStartNum

The initial panel. This becomes the lower bound index for which panels can be indexed from.

Number

 

panelStartNum: 1

selectors

Javascript object containing selectors for various fragments of the markup, including the containers for the subcomponents.

 

 

See Selectors

stylesSpecific class names used to achieve the look and feel. 
{
    show: "gpii-fd-show"
}
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

back

The back button.

"#gpiic-fd-navButtons-back"
backLabelThe label for the back button.".gpiic-fd-navButtons-backLabel"
nextThe next button."#gpiic-fd-navButtons-next"
nextLabel

The label for the next button.

".gpiic-fd-navButtons-nextLabel"

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