Navigation Buttons

Overview

Component Name: gpii.firstDiscovery.navButtons

File: navButtons.js

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

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

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

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

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

Grades

This component uses the following base grades:

Model

This component supports the following model properties:

Path	Description	Values	Default
`currentPanelNum`	The panel currently displayed. Must be in a range from `options.panelStartNum` to `options.panelTotalNum`. (See Options below.)	Panel ID (Number)	undefined
`isFirstPanel`	Whether or not the current panel is the first panel	Boolean	undefined
`isLastPanel`	Whether or not the current panel is the last panel	Boolean	undefined

Methods

Method	Description	Parameters
`setButtonLabels`	Sets the labels and tooltip content for the navigation buttons	none
`toggleButtonStates`	Toggles an element between an enabled/disabled state	`element` (jQuery object) A jQuery element `disabled` (boolean) value of the disabled state to set
`adjustCurrentPanelNum`	Changes the current panel by a specified change amount	`toChange` (number)
`backButtonClicked`	Moves the current panel back one position	none
`nextButtonClicked`	Moves the current panel forward one position	none
`indexToDisposition`	Returns the index of the label (or tooltip) messages array for the current panel	none

Options

This component can be configured using the following options:

Name	Description	Values	Default
`panelTotalNum`	The total number of panels that the buttons will be navigating through.	Number	`panelTotalNum: 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 below
`styles`	Specific class names used to achieve the look and feel		`{ 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
`back`	The back button	`"#gpiic-fd-navButtons-back"`
`backLabel`	The label for the back button	`".gpiic-fd-navButtons-backLabel"`
`next`	The next button	`"#gpiic-fd-navButtons-next"`
`nextLabel`	The label for the next button	`".gpiic-fd-navButtons-nextLabel"`

Dependencies

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

Edit this Page on GitHub

Documentation for the First Discovery Tool

First Discovery Tool