dijit/_CssStateMixin.js

• Provides:

  • dijit._CssStateMixin

• dijit._CssStateMixin

  • type

    Function

  • summary

    Mixin for widgets to set CSS classes on the widget DOM nodes depending on hover/mouse press/focus
    state changes, and also higher-level state changes such becoming disabled or selected.

  • description

    By mixing this class into your widget, and setting the this.baseClass attribute, it will automatically
    maintain CSS classes on the widget root node (this.domNode) depending on hover,
    active, focus, etc. state.   Ex: with a baseClass of dijitButton, it will apply the classes
    dijitButtonHovered and dijitButtonActive, as the user moves the mouse over the widget and clicks it.
    
    It also sets CSS like dijitButtonDisabled based on widget semantic state.
    
    By setting the cssStateNodes attribute, a widget can also track events on subnodes (like buttons
    within the widget).

• dijit._CssStateMixin.cssStateNodes

  • tags:
  • type

    Object

  • summary

    List of sub-nodes within the widget that need CSS classes applied on mouse hover/press and focus
    .
    Each entry in the hash is a an attachpoint names (like "upArrowButton") mapped to a CSS class names
    (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.

• dijit._CssStateMixin.hovering

  • tags: readonly
  • type

    Boolean

  • summary

    True if cursor is over this widget

• dijit._CssStateMixin.active

  • tags: readonly
  • type

    Boolean

  • summary

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

• dijit._CssStateMixin._applyAttributes

  • type

    Function

• dijit._CssStateMixin._cssMouseEvent

  • parameters:
    • event: (typeof Event)
  • summary

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

  • type

    Function

• dijit._CssStateMixin._mouseDown

  • type

    Object

• dijit._CssStateMixin._setStateClass

  • summary

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

  • description

    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

  • type

    Function

• dijit._CssStateMixin.stateNode

  • type

    Object

• dijit._CssStateMixin.stateNode.className

  • type

    Object

• dijit._CssStateMixin._stateClasses

• dijit._CssStateMixin._trackMouseState

  • parameters:
    • node: (typeof 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: (typeof String)

      CSS class name (ex: dijitSliderUpArrow).

  • summary

    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.

  • description

    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.

  • type

    Function

• dijit

  • type

    Object