ColorPalette

ColorPalette is another simple standalone widget that is helpful for providing a more visual and interactive way of allowing a user to select a color—perfect for situations in which you allow the user to customize the theme of an application, for example. By default, the palette comes in two canned sizes, 3 × 4 or 7 × 10, with pre-selected popular web colors.

Tip

You may already be wondering why you can't configure your own set of colors for the palette. As it turns out, the palettes that appear are images, not panes of HTML markup, and they were designed this way for a11y reasons, even though it does not seem ideal. Thus, if you want to extend ColorPalette to display a custom selection, it is certainly doable—you'd just have to read the source and get your hands dirty by hacking on some of the private attributes.

Using a ColorPalette in markup is quite simple; the following listing illustrates:

<div dojoType="dijit.ColorPalette">
    <script type="dojo/method" event="onChange" args="selectedColor">
        /* hide the palette, perhaps? */
        console.log(selectedColor);
    </script>
</div>

Like ProgressBar, ColorPalette is a nice and simple standalone. Table 15-4 shows the full story.

Table 15-4. ColorPalette API

Name (default)

Type

Comment

defaultTimeout

Integer

The duration before a key that is held down becomes typematic. 500 by default.

timeoutChangeRate

Number

The amount of time that is used to change the typematic rate. A value of 1.0 means that typematic events are fired at regular intervals, while values less than 1.0 mean that the typematic rate accelerates accordingly. The default value is 0.9.

palette

String

The size of the palette, which must be either 7 × 10 (the default) or 3 × 4.

onChange(/*String*/ hexColor)

Function

Extension point triggered when a color is selected.

Programmatic creation is straightforward enough:

var cp = new dijit.ColorPalette({/*attributes go here */});
/* Now stick it somewhere on the page...*/
dojo.body(  ).appendChild(cp.domNode);

Get Dojo: The Definitive Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.