dijit/_PaletteMixin (version 1.10)

dijit/_CssStateMixin

Summary

A keyboard accessible palette, for picking a color/emoticon/etc.

A mixin for a grid showing various entities, so the user can pick a certain entity.

See the dijit/_PaletteMixin reference documentation for more information.

Property Summary

  • _currentFocusThe currently focused cell (if the palette itself has focus), or otherwise the cell to be focused when the palette itself gets focus.
  • _selectedCellIndex of the currently selected cell.
  • _xDimThis is the number of cells horizontally across.
  • _yDimThis is the number of cells vertically down.
  • activeTrue if mouse was pressed while over this widget, and hasn't been released yet
  • cellClassCSS class applied to each cell in the palette
  • cssStateNodesSubclasses may define a cssStateNodes property that lists sub-nodes within the widget that need CSS classes applied on mouse hover/press and focus.
  • defaultTimeoutNumber of milliseconds before a held key or button becomes typematic
  • dyeClassConstructor for Object created for each cell of the palette. dyeClass should implement the dijit/_PaletteMixin.__Dye interface.
  • hoveringTrue if cursor is over this widget
  • tabIndexWidget tab index.
  • timeoutChangeRateFraction of time used to change the typematic timer between events 1.0 means that each typematic event fires at defaultTimeout intervals Less than 1.0 means that each typematic event fires at an increasing faster rate
  • valueCurrently selected color/emoticon/etc.

Method Summary

  • __Dye()
  • _applyAttributes()
  • _cssMouseEvent(event) Handler for CSS event on this.domNode.
  • _dyeFactory(value,row,col,title) Return instance of dijit.Dye for specified cell of palette
  • _getDye(cell) Get JS object for given cell DOMNode
  • _navigateByKey(increment,typeCount) This is the callback for typematic.
  • _preparePalette(choices,titles) Subclass must call _preparePalette() from postCreate(), passing in the tooltip for each cell
  • _setCurrent(node) Sets which node is the focused cell.
  • _setStateClass() Update the visual state of the widget by setting the css classes on this.domNode (or this.stateNode if defined) by combining this.baseClass with various suffixes that represent the current widget state(s).
  • _setValueAttr(value,priorityChange) This selects a cell.
  • _subnodeCssMouseEvent(node,clazz,evt) Handler for hover/active mouse event on widget's subnode
  • _trackMouseState(node,clazz) Track mouse/focus events on specified node and set CSS class on that node to indicate current state.
  • focus() Focus this widget.
  • postCreate()

Event Summary

  • _onCellClick(evt) Handler for click, enter key & space key.
  • onChange(value) Callback when a cell is selected.

Properties

_currentFocus
Defined by: dijit/_PaletteMixin

The currently focused cell (if the palette itself has focus), or otherwise the cell to be focused when the palette itself gets focus. Different from value, which represents the selected (i.e. clicked) cell.

_selectedCell
Defined by: dijit/_PaletteMixin

Index of the currently selected cell. Initially, none selected

_xDim
Defined by: dijit/_PaletteMixin

This is the number of cells horizontally across.

_yDim
Defined by: dijit/_PaletteMixin

This is the number of cells vertically down.

active
Defined by: dijit/_CssStateMixin

True if mouse was pressed while over this widget, and hasn't been released yet

cellClass
Defined by: dijit/_PaletteMixin

CSS class applied to each cell in the palette

cssStateNodes
Defined by: dijit/_CssStateMixin

Subclasses may define a cssStateNodes property that lists sub-nodes within the widget that need CSS classes applied on mouse hover/press and focus.

Each entry in this optional hash is a an attach-point name (like "upArrowButton") mapped to a CSS class name (like "dijitUpArrowButton"). Example: 

{
    "upArrowButton": "dijitUpArrowButton",
    "downArrowButton": "dijitDownArrowButton"
}

The above will set the CSS class dijitUpArrowButton to the this.upArrowButton DOMNode when it

is hovered, etc.

defaultTimeout
Defined by: dijit/_PaletteMixin

Number of milliseconds before a held key or button becomes typematic

dyeClass
Defined by: dijit/_PaletteMixin

Constructor for Object created for each cell of the palette. dyeClass should implement the dijit/_PaletteMixin.__Dye interface.

hovering
Defined by: dijit/_CssStateMixin

True if cursor is over this widget

tabIndex
Defined by: dijit/_PaletteMixin

Widget tab index.

timeoutChangeRate
Defined by: dijit/_PaletteMixin

Fraction of time used to change the typematic timer between events 1.0 means that each typematic event fires at defaultTimeout intervals Less than 1.0 means that each typematic event fires at an increasing faster rate

value
Defined by: dijit/_PaletteMixin

Currently selected color/emoticon/etc.

Methods

__Dye()
Defined by dijit/_PaletteMixin
_applyAttributes()
Defined by dijit/_CssStateMixin
_cssMouseEvent(event)
Defined by dijit/_CssStateMixin

Handler for CSS event on this.domNode. Sets hovering and active properties depending on mouse state, which triggers _setStateClass() to set appropriate CSS classes for this.domNode.

Parameter Type Description
event Event
_dyeFactory(value,row,col,title)
Defined by dijit/_PaletteMixin

Return instance of dijit.Dye for specified cell of palette

Parameter Type Description
value undefined
row undefined
col undefined
title undefined
Returns:instance
_getDye(cell)
Defined by dijit/_PaletteMixin

Get JS object for given cell DOMNode

Parameter Type Description
cell DomNode
Returns:undefined
_navigateByKey(increment,typeCount)
Defined by dijit/_PaletteMixin

This is the callback for typematic. It changes the focus and the highlighed cell.

Parameter Type Description
increment undefined

How much the key is navigated.
typeCount undefined

How many times typematic has fired.
_preparePalette(choices,titles)
Defined by dijit/_PaletteMixin

Subclass must call _preparePalette() from postCreate(), passing in the tooltip for each cell

Parameter Type Description
choices String[][]

id's for each cell of the palette, used to create Dye JS object for each cell
titles String[]

Localized tooltip for each cell
_setCurrent(node)
Defined by dijit/_PaletteMixin

Sets which node is the focused cell.

At any point in time there's exactly one cell with tabIndex != -1. If focus is inside the palette then focus is on that cell.

After calling this method, arrow key handlers and mouse click handlers should focus the cell in a setTimeout().

Parameter Type Description
node DomNode
_setStateClass()
Defined by dijit/_CssStateMixin

Update the visual state of the widget by setting the css classes on this.domNode (or this.stateNode if defined) by combining this.baseClass with various suffixes that represent the current widget state(s).

In the case where a widget has multiple states, it sets the class based on all possible combinations. For example, an invalid form widget that is being hovered will be "dijitInput dijitInputInvalid dijitInputHover dijitInputInvalidHover".

The widget may have one or more of the following states, determined by this.state, this.checked, this.valid, and this.selected:

  • Error - ValidationTextBox sets this.state to "Error" if the current input value is invalid
  • Incomplete - ValidationTextBox sets this.state to "Incomplete" if the current input value is not finished yet
  • Checked - ex: a checkmark or a ToggleButton in a checked state, will have this.checked==true
  • Selected - ex: currently selected tab will have this.selected==true

In addition, it may have one or more of the following states, based on this.disabled and flags set in _onMouse (this.active, this.hovering) and from focus manager (this.focused):

  • Disabled - if the widget is disabled
  • Active - if the mouse (or space/enter key?) is being pressed down
  • Focused - if the widget has focus
  • Hover - if the mouse is over the widget
_setValueAttr(value,priorityChange)
Defined by dijit/_PaletteMixin

This selects a cell. It triggers the onChange event.

Parameter Type Description
value String

Value of the cell to select
priorityChange Boolean
Optional

Optional parameter used to tell the select whether or not to fire onChange event.
_subnodeCssMouseEvent(node,clazz,evt)
Defined by dijit/_CssStateMixin

Handler for hover/active mouse event on widget's subnode

Parameter Type Description
node undefined
clazz undefined
evt undefined
_trackMouseState(node,clazz)
Defined by dijit/_CssStateMixin

Track mouse/focus events on specified node and set CSS class on that node to indicate current state. Usually not called directly, but via cssStateNodes attribute.

Given class=foo, will set the following CSS class on the node

  • fooActive: if the user is currently pressing down the mouse button while over the node
  • fooHover: if the user is hovering the mouse over the node, but not pressing down a button
  • fooFocus: if the node is focused

Note that it won't set any classes if the widget is disabled.

Parameter Type Description
node DomNode

Should be a sub-node of the widget, not the top node (this.domNode), since the top node is handled specially and automatically just by mixing in this class.
clazz String

CSS class name (ex: dijitSliderUpArrow)
focus()
Defined by dijit/_PaletteMixin

Focus this widget. Puts focus on the most recently focused cell.

postCreate()
Defined by dijit/_PaletteMixin

Events

_onCellClick(evt)
Defined by: dijit/_PaletteMixin

Handler for click, enter key & space key. Selects the cell.

Parameter Type Description
evt Event

The event.
onChange(value)
Defined by: dijit/_PaletteMixin

Callback when a cell is selected.

Parameter Type Description
value String

Value corresponding to cell.
Error in the documentation? Can’t find what you are looking for? Let us know!