Constructor
new ve.ce.FocusableNode([$focusable], [config])abstract
#
ContentEditable focusable node.
Focusable elements have a special treatment by ve.ce.Surface. When the user selects only a single node, if it is focusable, the surface will set the focusable node's focused state. Other systems, such as the context, may also use a focusable node's $focusable property as a hint of where the primary element in the node is. Typically, and by default, the primary element is the root element, but in some cases it may need to be configured to be a specific child element within the node's DOM rendering.
If your focusable node changes size and the highlight must be redrawn, call redrawHighlights(). 'resizeEnd' and 'rerender' are already bound to call this.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
$focusable |
jQuery |
optional |
this.$element | Primary element user is focusing on |
config |
Object |
optional |
Configuration options Properties: |
- Source:
Properties
deleteCommandNamestatic
#
Command to execute when Delete or Backspace is pressed while this node is focused.
Properties:
| Type | Description |
|---|---|
string
|
null
|
- Source:
iconWhenInvisiblestatic
#
Icon to use when the rendering is considered not visible, as defined in #hasRendering
No icon is show if null.
Properties:
| Type | Description |
|---|---|
string
|
null
|
- Source:
Icon to use when the rendering is considered not visible, as defined in #hasRendering
No icon is show if null.
primaryCommandNamestatic
#
Command to execute when Enter is pressed while this node is focused, or when the node is double-clicked.
Properties:
| Type | Description |
|---|---|
string
|
null
|
- Source:
Methods
calculateHighlights()
#
Re-calculate position of highlights
- Source:
clearHighlights()
#
Clears highlight.
- Source:
createHighlight() → {jQuery}
#
createHighlights()
#
Creates highlights.
- Source:
createInvisibleIcon()
#
Create a element to show if the node is invisible
- Source:
executeCommand()
#
Execute the command associated with this node.
- Source:
getBoundingRect() → {Object|null}
#
null}
#
Get the bounding rectangle of the focusable node highlight relative to the surface
- Source:
Returns:
Top, left, bottom & right positions of the focusable node relative to the surface
- Type
-
Object
|
null
getExtraHighlightClasses() → {Array.<string>}
#
getInvisibleIconLabel() → {jQuery|string|OO.ui.HtmlSnippet|function|null}
#
null}
#
Get a label for the invisible icon
Defaults to #getDescription
- Source:
Returns:
Invisible icon label
- Type
-
jQuery
|
string
|
OO.ui.HtmlSnippet
|
function
|
null
Get a label for the invisible icon
Defaults to #getDescription
getRects() → {Array.<Object>}
#
Get list of rectangles outlining the shape of the node relative to the surface
- Source:
Returns:
List of rectangle objects
getStartAndEndRects() → {Object.<string, Object>|null}
#
null}
#
Get start and end rectangles of an inline focusable node relative to the surface
- Source:
Returns:
Start and end rectangles
hasRendering() → {boolean}
#
Check if the rendering is visible
"Visible", in this case, is defined as at least 10px × 4px or 4px × 10px in dimensions (T307527)
- Source:
Returns:
The node has a visible rendering
- Type
- boolean
Check if the rendering is visible
"Visible", in this case, is defined as at least 10px × 4px or 4px × 10px in dimensions (T307527)
isFocused() → {boolean}
#
Check if node is focused.
- Source:
Returns:
Node is focused
- Type
- boolean
isInContentEditableDisabled() → {boolean}
#
Check if the node is inside a ve.ce.ContentEditableNode with editing disabled
Ignore nodes which just disable CE in the DOM manually (e.g. TableNode) as focusables should still be highlightable in these.
- Source:
Returns:
Editing disabled
- Type
- boolean
Check if the node is inside a ve.ce.ContentEditableNode with editing disabled
Ignore nodes which just disable CE in the DOM manually (e.g.
onFocusableDblClick(e)
#
Handle highlight double click events.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
jQuery.Event | Double click event |
- Source:
onFocusableDragEnd(e)
#
Handle element drag end.
If a relocation actually takes place the node is destroyed before this events fires.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
jQuery.Event | Drag end event |
- Source:
onFocusableDragStart(e)
#
Handle element drag start.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
jQuery.Event | Drag start event |
- Source:
onFocusableMouseDown(e)
#
Handle highlight mouse down events.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
jQuery.Event | Mouse down event |
- Source:
onFocusableMouseEnter(e)
#
Handle mouse enter events.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
jQuery.Event | Mouse enter event |
- Source:
onFocusableRerender()
#
Handle rerender event.
- Source:
onFocusableResizeEnd()
#
Handle resize end event.
- Source:
onFocusableResizeStart()
#
Handle resize start events.
- Source:
onFocusableSetup()
#
Handle node setup.
- Source:
onFocusableTeardown()
#
Handle node teardown.
- Source:
onFocusableTouchMove(e)
#
onFocusableTouchStart(e)
#
Handle touch start events.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
jQuery.Event | Touch start event |
- Source:
onSurfaceActivation()
#
Handle activation events from the surface
- Source:
onSurfaceMouseLeave(e)
#
Handle surface mouse leave events.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
jQuery.Event | Mouse leave event |
- Source:
onSurfaceMouseMove(e)
#
Handle surface mouse move events.
Parameters:
| Name | Type | Description |
|---|---|---|
e |
jQuery.Event | Mouse move event |
- Source:
positionHighlights()
#
Positions highlights, and remove collapsed ones
- Source:
redrawHighlights()
#
Redraws highlight.
- Source:
setFocused(value)
#
Set the selected state of the node.
Parameters:
| Name | Type | Description |
|---|---|---|
value |
boolean | Node is focused |
- Source:
Fires:
updateInvisibleIcon()
#
Update the state of icon if this node is invisible
If the node doesn't have a visible rendering, we insert an icon to represent it. If the icon was already present, and this is called again when rendering has developed, we remove the icon.
- Source:
Update the state of icon if this node is invisible
If the node doesn't have a visible rendering, we insert an icon to represent it.
updateInvisibleIconLabel()
#
Update the invisible icon's label
- Source:
updateInvisibleIconSync(showIcon)private
#
Synchronous part of #updateInvisibleIconSync
Parameters:
| Name | Type | Description |
|---|---|---|
showIcon |
boolean | Show the icon |
- Source:
getRectsForElement($element, [relativeRect]) → {Object}static
#
Events
blur()
#
- Source:
focus()
#
- Source: