ToolbarStyles Class
The ToolbarStyles class hosts the buttons for styling a text selection.
Index
Methods
- _animate
- _getCurrentSelection
- _getFocusAction
- _getFocusDismissAction
- _getFocusMoveDirection
- _getSelectionFunction
- _isValidKey
- _moveFocus
- _refresh
- _updatePosition
- cancelAnimation
- cancelExclusive
- componentDidMount
- componentDidUpdate
- componentWillReceiveProps
- filterExclusive
- focus
- getArrowBoxClasses
- getConstrainedPosition
- getDefaultProps
- getInitialState
- getToolbarButtons
- getWidgetXYPoint
- handleKey
- isVisible
- mergeDropdownProps
- mergeExclusiveProps
- moveFocus
- moveToPoint
- render
- requestExclusive
- show
- toggleDropdown
- updatePosition
Properties
Methods
_animate
-
callback
Requests an animation frame, if possible, to simulate an animation.
Parameters:
-
callbackFunctionThe function to be executed on the scheduled frame.
_getCurrentSelection
()
Object
protected
Analyzes the current editor selection and returns the selection configuration that matches.
Returns:
The matched selection configuration.
_getFocusAction
-
event
Returns the action, if any, that a keyboard event in the current focus manager state should produce.
Parameters:
-
eventObjectThe Keyboard event.
Returns:
An action object with type and direction properties.
_getFocusDismissAction
-
event -
focusMoveDirection
Returns the dismiss action, if any, the focus manager should execute to yield the focus. This will happen in any of these scenarios if a dismiss callback has been specified:
- A dismiss key has been pressed
- In a non-circular focus manager, when:
- The active descendant is the first one and a prev key has been pressed.
- The active descendant is the last one and a next key has been pressed.
Parameters:
-
eventObjectThe Keyboard event.
-
focusMoveDirectionNumberThe focus movement direction (if any).
Returns:
A dismiss action with dismiss and direction properties.
_getFocusMoveDirection
-
event
Returns the direction, if any, in which the focus should be moved. In presence of the shift key modifier, the direction of the movement is inverted.
Parameters:
-
eventObjectThe Keyboard event.
Returns:
The computed direction of the expected focus movement.
_getSelectionFunction
-
selectionFn
Retrieve a function from String. It converts a fully qualified string into the mapped function.
Parameters:
-
selectionFnFunction | StringA function, or a fully qualified string pointing to the desired one (e.g. 'AlloyEditor.SelectionTest.image').
Returns:
The mapped function.
_isValidKey
-
keyCode -
keys
Indicates if a given keyCode is valid for the given set of keys.
Parameters:
-
keyCodeNumberAn event keyCode.
-
keysArray | NumberA key set. Can be a number an array of numbers representing the allowed keyCodes.
Returns:
A boolean value indicating if the key is valid.
_moveFocus
-
direction
Moves the focus among descendants in the especified direction.
Parameters:
-
directionNumberThe direction (1 or -1) of the focus movement among descendants.
_refresh
()
protected
Refreshes the descendants list by executing the CSS selector again and resets the descendants tabIndex.
_updatePosition
()
protected
Calculates and sets the position of the toolbar.
cancelAnimation
()
Cancels an scheduled animation frame.
cancelExclusive
-
itemExclusive
Cancels the exclusive state of an widget.
Parameters:
-
itemExclusiveObjectThe widget which exclusive state should be canceled.
componentDidMount
()
Lifecycle. Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.
componentDidUpdate
-
prevProps -
prevState
Lifecycle. Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.
Parameters:
-
prevPropsObjectThe previous state of the component's properties.
-
prevStateObjectComponent's previous state.
componentWillReceiveProps
()
Lifecycle. Invoked when a component is receiving new props. This method is not called for the initial render.
filterExclusive
-
items
Filters the items and returns only those with exclusive state.
Parameters:
-
itemsArrayThe widgets to be filtered.
Returns:
The item with executive state.
focus
()
Focuses the current active descendant.
Several Widgets can be nested in a component hierarchy by attaching this focus method to the widget DOM node, transferring the DOM focus control to the inner FocusManager.
getArrowBoxClasses
()
String
Returns the list of arrow box classes associated to the current element's state. It relies on the getInteractionPoint method to calculate the selection direction.
Returns:
A string with the arrow box CSS classes.
getConstrainedPosition
-
attrs -
viewPaneSize
Returns an object which contains the position of the element in page coordinates, restricted to fit to given viewport.
Parameters:
-
attrsObjectThe following properties, provided as numbers:
- height
- left
- top
- width
-
viewPaneSizeObjectOptional. If not provided, the current viewport will be used. Should contain at least these properties:
- width
Returns:
An object with x and y properties, which represent the constrained position of the
element.
getDefaultProps
()
Object
Lifecycle. Returns the default values of the properties used in the widget.
Returns:
The default properties.
getInitialState
()
Lifecycle. Invoked once before the component is mounted.
getToolbarButtons
-
buttons -
additionalProps
Analyzes the current selection and the buttons exclusive mode value to figure out which buttons should be present in a given state.
Parameters:
-
buttonsArrayThe buttons could be shown, prior to the state filtering.
-
additionalPropsObjectAdditional props that should be passed down to the buttons.
Returns:
An Array which contains the buttons that should be rendered.
getWidgetXYPoint
-
left -
top -
direction
Returns the position of the Widget taking in consideration the WidgetPosition/gutter:attribute attribute.
Parameters:
-
leftNumberThe left offset in page coordinates where Toolbar should be shown.
-
topNumberThe top offset in page coordinates where Toolbar should be shown.
-
directionNumberThe direction of the selection. May be one of the following: CKEDITOR.SELECTION_BOTTOM_TO_TOP or CKEDITOR.SELECTION_TOP_TO_BOTTOM
Returns:
An Array with left and top offsets in page coordinates.
handleKey
-
event
Handles the key events on a DOM node to execute the appropriate navigation when needed.
Parameters:
-
eventObjectThe Keyboard event that was detected on the widget DOM node.
isVisible
()
Boolean
Returns true if the widget is visible, false otherwise
Returns:
True if the widget is visible, false otherwise
mergeDropdownProps
-
obj -
itemKey
Merges the provided object with two more properties:
- expanded - boolean flag which indicates if an widget should be rendered exclusively.
- toggleDropdown - function, which can be used by an widget in order to obtain exclusive state.
Parameters:
-
objObjectThe properties container which should be merged with the properties, related to dropdown state.
-
itemKeyObjectThey key of an React Widget which contains the dropdown.
Returns:
The merged object.
mergeExclusiveProps
-
obj -
itemKey
Merges the provided object with three more properties:
- cancelExclusive - function, which can be used by a widget in order to cancel executive state.
- renderExclusive - boolean flag which indicates if an widget should be rendered exclusively.
- requestExclusive - function, which can be used by a widget in order to obtain exclusive state.
Parameters:
-
objObjectThe properties container which should be merged with the properties, related to exclusive state.
-
itemKeyObjectThey key of an React Widget which should be rendered exclusively.
Returns:
The merged object.
moveFocus
-
direction
Moves the focus among descendants in the especified direction.
Parameters:
-
directionNumberThe direction (1 or -1) of the focus movement among descendants.
moveToPoint
-
startPoint -
endPoint
Moves a widget from a starting point to a destination point.
Parameters:
-
startPointObjectThe starting point for the movement.
-
endPointObjectThe destination point for the movement.
render
()
Object | Null
Lifecycle. Renders the buttons for adding content or hides the toolbar if user interacted with a non-editable element.
Returns:
The content which should be rendered.
requestExclusive
-
itemExclusive
Requests and sets exclusive state of an widget.
Parameters:
-
itemExclusiveObjectThe widget which requests exclusive state.
show
()
Shows the widget with the default animation transition.
toggleDropdown
-
itemDropdown -
toggleDirection
Sets the active dropdown of the widget or discards the toggled item from the state.
Parameters:
-
itemDropdownObjectThe widget which requests to toggle its dropdown.
-
toggleDirectionNumberUser movement direction when toggled via keyboard.
updatePosition
()
Updates the widget position based on the current interaction point.
Properties
circular
Boolean
Indicates if focus should be set to the first/last descendant when the limits are reached.
config
Object
The toolbar configuration.
constrainToViewport
Boolean
Should the widget to be restricted to the viewport, or not.
Default: true
descendants
String
String representing the CSS selector used to define the elements that should be handled.
editor
Object
The editor instance where the component is being used.
editorEvent
Object
The payload from "editorInteraction" event
focusFirstChild
Boolean
Indicate if should focus the first child of a container
gutter
Object
The gutter (vertical and horizontal) between the interaction point and where the widget should be rendered.
Default: { left: 0, top: 10 }
key
String
static
The name which will be used as an alias of the button in the configuration.
Default: styles
keys
Object
Object representing the keys used to navigate between descendants. The format for the prop is:
{dismiss: value, dismissNext: value, dismissPrev: value, next: value, prev: value} where
value can be both a number or an array of numbers with the allowed keyCodes.
label
String
The label that should be used for accessibility purposes.
onDismiss
Function
Provides a callback which should be executed when a dismiss key is pressed over a toolbar to return the focus to the editor.