Dojo: The Definitive Guide

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