CKEDITOR.ui.balloonToolbarView
A class representing the view of the balloon toolbar, used by CKEDITOR.ui.balloonToolbar.
Filtering
Properties
-
Event listeners associated with this balloon panel, active as long as the panel is shown. See addShowListener, activateShowListeners, deactivateShowListeners.
Defaults to
{}
-
The editor for this balloon panel.
-
Focusable elements in this balloon panel. See registerFocusable, deregisterFocusable and CKEDITOR.focusManager.
Defaults to
{}
-
-
-
Event listeners associated with this balloon panel, activated on panel show. See addShowListener, activateShowListeners, deactivateShowListeners.
Defaults to
{}
-
Balloon panel templates. Automatically converted into a CKEDITOR.template in the panel constructor.
-
Templates for UI elements in this balloon panel. See templateDefinitions, parts.
Defaults to
{}
-
The default height of the triangle that points to the element in the editable.
Defaults to
20
-
The default distance between the triangle and the vertical edge of the panel.
Defaults to
40
-
The default width of the triangle that points to the element in the editable.
Defaults to
20
-
-
-
The DOM element used by the balloon toolbar to attach to.
Methods
-
since 4.8.0
constructor( editor, definition ) → balloonToolbarView
CKEDITOR.ui.balloonToolbarView#constructor
Creates a balloon toolbar view instance.
Parameters
editor : editor
The editor instance for which the toolbar is created.
definition : Object
An object containing the toolbar definition. See CKEDITOR.ui.balloonPanel documentation for an example definition.
Returns
balloonToolbarView
-
Parameters
window : window
Returns
Object
Returns viewport position, taking scroll offset into account.
Propertiestop : Number
bottom : Number
left : Number
right : Number
-
Activates an event listener associated with this balloon panel. See showListeners, activeShowListeners, deactivateShowListener, addShowListener, removeShowListener.
Parameters
id : Object
-
Activates all event listeners associated with this balloon panel. See showListeners, activeShowListeners, deactivateShowListeners, addShowListener, removeShowListener.
-
Adds an event listener associated with this balloon panel. This listener will be activated on panel
show
and deactivated on panelhide
. See showListeners, activeShowListeners, activateShowListeners, deactivateShowListeners.Parameters
listener : Function
A function that, if called, attaches the listener and returns the listener object.
Returns
Object
An object containing the
removeListener
method that removes the listener from the collection.
-
Places the balloon panel next to a specified element or a selection so the tip of the balloon's triangle touches that element or the center of the selection. Once the panel is attached it gains focus.
Parameters
elementOrSelection : element | selection
The element or selection to which the panel is attached. Since 4.11.0 instead of an element it is possible to pass a selection CKEDITOR.dom.selection.
[ options ] : Object | element | Boolean
Since 4.8.0 this parameter works as an
options
object.If a
CKEDITOR.dom.element/Boolean
instance is given, this parameter acts as anoptions.focusElement
.Properties[ focusElement ] : element | Boolean
The element to be focused after the panel is attached. By default the
panel
property of parts will be focused. You might specify the element to be focused by passing any CKEDITOR.dom.element instance. You can also prevent changing the focus at all by setting it tofalse
.[ show ] : Boolean
Defines if the balloon panel should be shown after being attached.
Defaults to
true
-
Moves the focus back to the editor's editable.
-
Builds the UI of the balloon panel.
-
Deactivates an event listener associated with this balloon panel. See activateShowListener.
Parameters
id : Object
-
Removes all event listeners associated with this balloon panel. See activateShowListeners.
-
Unregisters an element from editor's focus manager. See focusables.
Parameters
element : element
An element to be registered.
-
Destroys the balloon panel by removing it from DOM and purging all associated event listeners.
-
-
-
Hides the balloon panel and moves the focus back to the editable.
-
Moves the upper-left balloon panel corner to the specified absolute position.
Parameters
top : Number
left : Number
-
Registers a new focusable element in the editor's focus manager so the instance does not blur once the child of the balloon panel gains focus. See focusables.
Parameters
element : element
An element to be registered.
-
Removes an event listener associated with this balloon panel visible state. See addShowListener.
Parameters
id : Number
An ID of the listener.
-
renderItems( items )
CKEDITOR.ui.balloonToolbarView#renderItems
Renders provided UI elements inside the view.
Parameters
items : button[] | richCombo[]
An array of UI element objects.
-
Repositions the balloon toolbar, pointing to the previously attached
element
. -
Resizes the balloon panel container to given dimensions. Use
'auto'
to make the dimensions of the panel flexible.Parameters
width : Number
height : Number
-
-
Changes the position of the balloon's triangle that points to the element in the editable.
Parameters
side : String
One of 'left', 'right', 'top' or 'bottom'.
-
Shows the balloon panel.
-
private inherited
_adjustElementRect( elementRect, editorRect )
CKEDITOR.ui.balloonToolbarView#_adjustElementRect
This method will modify
elementRect
if the element is outside ofeditorRect
. If it is outside, it is going to change it into a rectangle that is withineditorRect
.For example here
elementRect
is going to be changed into a very narrow rectangle (with unmodified height) representation withineditorRect
.+------------------------------------------+ | | | #| +----------+ | #| | | | #| | | | editorRect #| |elmentRect| | #| | | | #| | | | #| +----------+ | | +------------------------------------------+
Parameters
elementRect : Object
Rectangle object that should be contained within
editorRect
. This object might be modified.editorRect : Object
Reference container that should contain
elementRect
.
-
since 4.9.0 private
_deregisterItemFocusables()
CKEDITOR.ui.balloonToolbarView#_deregisterItemFocusables
Deregisters focusables registered by UI items, like buttons.
-
Detaches all listeners.
-
private inherited
_getAlignments( elementRect, panelWidth, panelHeight ) → Object
CKEDITOR.ui.balloonToolbarView#_getAlignments
Returns a dictionary containing different alignment positions.
Keys tell where the balloon is positioned relative to the element, e.g. this would be the result for "top center":
[Editor] +-------------------------------------+ | [Panel] | | +-----------------+ | | | | | | [El.] +--------v--------+ | | +-------------------------------+ | | | | | | | | | +--+-------------------------------+--+
Sample result:
{ "right vcenter": { top: 529.5, left: 175 }, "left vcenter": { top: 529.5, left: 10}, "top hcenter": { top: 402, left: 92.5}, "top left": { top: 402, left: 102.5}, "top right": { top: 402, left: 82.5}, "bottom hcenter": { top: 643, left: 92.5}, "bottom left": { top: 643, left: 102.5}, "bottom right": { top: 643, left: 82.5} }
Parameters
elementRect : Object
panelWidth : Number
panelHeight : Number
Returns
Object