Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#10613 closed enhancement (fixed)

_CssStateMixin

Reported by: bill Owned by: bill
Priority: high Milestone: 1.5
Component: Dijit Version: 1.4.0
Keywords: Cc:
Blocked By: Blocking:

Description

Create new mixin for applying CSS classes to Widget root nodes and subnodes representing mouse state (hover and active), focus state, and other semantic states such as disabled, checked, selected.

Will split off the code from _FormWidget, but change the way that subnodes are handled, applying a class to the subnode itself rather than the widget DOMNode.

This code is needed for lucid as they have lots of hover/active effects on widgets and subnodes within widgets.

It does a few tricky things that per-widget code might not remember to do:

  • mouse-up detection needs to be on <body>, not on the specified node, to allow for mouse-down on a node, mouse-move off the node, and then a mouse-up event
  • hover and active effects should not be applied if the widget is disabled (or in read-only mode)

Change History (22)

comment:1 Changed 9 years ago by bill

(In [21116]) New mixin for all widgets that set CSS classes based on thier state, both hover/active/focused state, and semantic state such as disabled, checked, etc.

Code taken from _FormWidget.js, but with some changes:

  • Automatically monitors events on widget root node, so widget templates no longer required to setup dojoAttachEvent="..." on root node to send onmouseenter, onmouseleave and onmousedown events to _onMouse().
  • New _trackMouseState() method for monitoring mouse/focus events on sub nodes, and set CSS classes on those sub nodes, rather than stateModifier code that modifies the CSS class on the root nodes based on events in sub nodes. Similar to above, widget templates no longer setup dojoAttachEvent="...: _onMouse()" on sub nodes.

Refs #10613 !strict.

comment:2 Changed 9 years ago by bill

(In [21117]) Initial conversion of form widgets to use _CssStateMixin. Changes are mostly transparent except for subnodes within widgets, like the up/down arrows of a Spinner, where the active/hover state is now being indicated on the arrow node rather than the widget root node.

Refs #10613 !strict.

comment:3 Changed 9 years ago by bill

(In [21118]) Remove remaining _onMouse() references. Refs #10613 !strict.

comment:4 Changed 9 years ago by bill

(In [21136]) Remove some manual _setStateClass() calls in widgets (and focus.js) that can be done via code in _CssStateMixin. We still need some manual ones I think, like when the state of a ValidationTextBox changes to/from error state. Refs #10613 !strict.

comment:5 Changed 9 years ago by bill

(In [21138]) Use _CssStateMixin to get dijitMenuActive for menu items in addition to dijitMenuHover. The former is needed by lucid. Refs #10613, #10527 !strict.

comment:6 Changed 9 years ago by bill

(In [21144]) Convert TabContainer (specifically the tab buttons and the left/right scroll buttons) to use _CssStateMixin. Also fixed some CSS names that didn't contain "dijit": 

.dijitTab .closeButton --> .dijitTabCloseButton
.dijitTab .closeButton-hover --> .dijitTabCloseButtonHover   (close button for individual tab)
.dijitTabBtnDisabled --> .dijitTabDisabled   (left and right scroll buttons on tab strip)
.dijitTab .closeImage --> .dijitTabCloseIcon   (icon inside of close button)
.dijitTab .closeText --> .dijitTabCloseText      (text inside of close button, for a11y)

Refs #10613 !strict.

comment:7 Changed 9 years ago by bill

(In [21146]) Forgot to remove these obsolete methods in last checkin. Refs #10613 !strict.

comment:8 Changed 9 years ago by bill

(In [21147]) Disabled CSS class is handled by _CssStateMixin, we don't need an addClass() call in Menu. Refs #10613, #10527 !strict.

comment:9 Changed 9 years ago by bill

(In [21150]) Make TitlePane extend _CssStateMixin. Changed .dijitTitlePaneTitle-hover --> .dijitTitlePaneHover.

Refs #10613 !strict.

comment:10 Changed 9 years ago by bill

(In [21171]) Use _CssStateMixin rather than manually setting up handlers for hover of each cell, especially since lucid also wants a handler for mousedown on cells. Also removing the focus handler; it turns out to be unnecessary. Refs #10613 !strict.

comment:11 Changed 9 years ago by bill

(In [21174]) Change InlineEditBox -disabled to Disabled. The only -disabled CSS class name left now is tabStrip-disabled, which is a bit different than the others in that it means the tab strip is not displayed, rather than that the user can't interact with it. Refs #10613 !strict.

comment:12 Changed 9 years ago by bill

(In [21299]) Move onclick --> focus() code from _CssStateMixin back to _FormWidget.

This code was added in to _FormWidget in [11894] and [13893] so that clicking a non-focusable part of a form widget (ValidationTextBox validation icon, or the spinner up/down arrows) would cause the form widget to focus. But, it's inappropriate for bigger widgets, in particular Editor.

Actually I was nervous that it wouldn't even work correctly for ComboButton (which has two focus points), but it seems to.

Refs #5434, #6888, #10613. Fixes #10708 !strict.

comment:13 Changed 9 years ago by bill

(In [21305]) _CssStateMixin needs help clearing dijitMenuItemHover when clicking a MenuItem makes the whole Menu disappear. Refs #10613 !strict.

comment:14 Changed 9 years ago by bill

Resolution: → fixed
Status: new → closed

comment:15 Changed 9 years ago by bill

(In [21383]) More fixes related to _onMouse() function (removed as part of _CssStateMixin changes).

Refs #10613 !strict.

comment:16 Changed 9 years ago by bill

(In [21387]) Put onMouseUp --> focus() handling in FormWidget not FormValueWidget, as it was in the 1.4 release.

Otherwise on hrome clicking a button doesn't give it focus, which leads to problems restoring focus when closing a Dialog. (Dialog_menu.html is actually failing because focus is restored to the DateTextBox inside of the dialog, Refs #5434, #6888, #10613. Fixes #10708 !strict.

comment:17 Changed 9 years ago by bill

(In [21767]) Ctrl-click (an effective right-click on the mac) shouldn't focus a TabButton, or any button. In the case of the TabButton, this behavior was causing the TabButton's close menu to appear on mouse down but then disappear on mouse up. (And thus causing an error in the regression test.) Refs #10613 !strict.

comment:18 Changed 9 years ago by bill

(In [21851]) At least currently (in Menu for example), disabled widgets can get focus, and probably readonly widget too, so apply focus class even when readonly/disabled. Refs #10613 !strict.

comment:19 Changed 9 years ago by bill

(In [22002]) Fix tabbing into TabContainer?, left/right/mouse buttons should not be navigable. [21144] exposed this bug, so check in refs #10613.

comment:20 Changed 9 years ago by bill

See also [22104] fixes #11107: in IE, the onmousedown connection initialized in postCreate prevent IE from showing the file picker dialog overwrite the postCreate with an empty one in FileInput

comment:21 Changed 9 years ago by bill

(In [22187]) Fix a number of TabContainer issues related to close icon:

  • no [x] text appears in IE7 or IE quirks high-contrast RTL mode (fixes #11153)
  • icon appears on left rather than right in RTL mode
  • hover effect broken in tundra, soria, nihilo (regression from [21144], refs #10613)
  • height problems mixing closable and unclosable tabs on webkit (fixes #11155, !strict):
    • border under unselected tabs also appears under selected tab
    • closable tabs are 1px too tall, obscuring that same border
  • hovering close button in high-contrast mode causes tab to expand horizontally

The main change was to make the close icon a sibling of the label, rather than nested inside of the closeButton span. This avoids browser bugs on webkit and IE. Also stopped using an <img> tag to display the icon since that has issues with the title/alt attributes on IE6/7.

comment:22 Changed 9 years ago by bill

(In [22262]) migration script for CSS name changes, refs #10613

Note: See TracTickets for help on using tickets.