Ranged Panel - with Disabled Message API

Last updated: Sept 02, 2015 by Alan HarnumVersion comment

2 min read

Ranged Panel - with Disabled Message Overview

The ranged panel - with disabled message component is very similar to Ranged Panel, except that it is able to handle cases when the panel needs to be enabled or disabled. When the panel is disabled, all the control items in the panel including increase and decrease buttons and the meter are disabled. In the meantime, a message that explains the disabled state is displayed. This component is not intended to be used on its own, but provided as a base grade to another component that will use it's capabilities for creating such panels.

This component uses Ranged Panel as a base grade so it has the same component structure as Ranged Panel in aspect of the model and options.

On This Page

See Also

Still need help?

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

Adding a Ranged Panel - with Disabled Message to a Component/Grade

To mixin the Ranged Panel - with Disabled Message into your Component/Grade:

fluid.defaults("my.component", {
    gradeNames: ["gpii.firstDiscovery.panel.rangedWithDisabledMsg", "autoInit"]
});

Grades

The base grades used by the Ranged Panel - with Disabled Message:

gpii.firstDiscovery.panel.range

Methods

The ranged panel - with disabled message component inherits all methods from Ranged Panel Component and more:

Method	Description	Parameters
`toggleDisplay`	Enable (or disable) the increase and decrease buttons and show (or hide) the disabled message.	`isEnabled: boolean`

Selectors

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",
      ...
}

The ranged panel - with disabled message component has same selectors as Ranged Panel Component and more:

Selector Name	Description	Default
`disabledMsg`	The container to show the disabled message.	".gpiic-fd-range-disabledMsg"

Dependencies

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