CKEDITOR.ui.balloonToolbarView
A class representing the view of the balloon toolbar, used by CKEDITOR.ui.balloonToolbar.
Filtering
Properties
-
activeShowListeners : Object
CKEDITOR.ui.balloonToolbarView#activeShowListeners
inherited
Event listeners associated with this balloon panel, active as long as the panel is shown. See addShowListener, activateShowListeners, deactivateShowListeners.
Defaults to
{}
-
editor : Object
CKEDITOR.ui.balloonToolbarView#editor
inherited
The editor for this balloon panel.
-
focusables : Object
CKEDITOR.ui.balloonToolbarView#focusables
inherited
Focusable elements in this balloon panel. See registerFocusable, deregisterFocusable and CKEDITOR.focusManager.
Defaults to
{}
-
height : String
CKEDITOR.ui.balloonToolbarView#height
inherited
The default height of the balloon panel.
Defaults to
'auto'
-
parts : Object
CKEDITOR.ui.balloonToolbarView#parts
inherited
The UI elements of the balloon panel.
Defaults to
{}
-
rect : Object
CKEDITOR.ui.balloonToolbarView#rect
inherited
-
showListeners : Object
CKEDITOR.ui.balloonToolbarView#showListeners
inherited
Event listeners associated with this balloon panel, activated on panel show. See addShowListener, activateShowListeners, deactivateShowListeners.
Defaults to
{}
-
templateDefinitions : Object
CKEDITOR.ui.balloonToolbarView#templateDefinitions
inherited
Balloon panel templates. Automatically converted into a CKEDITOR.template in the panel constructor.
-
templates : Object
CKEDITOR.ui.balloonToolbarView#templates
inherited
Templates for UI elements in this balloon panel. See templateDefinitions, parts.
Defaults to
{}
-
triangleHeight : Number
CKEDITOR.ui.balloonToolbarView#triangleHeight
inherited
The default height of the triangle that points to the element in the editable.
Defaults to
20
-
triangleMinDistance : Number
CKEDITOR.ui.balloonToolbarView#triangleMinDistance
inherited
The default distance between the triangle and the vertical edge of the panel.
Defaults to
40
-
triangleWidth : Number
CKEDITOR.ui.balloonToolbarView#triangleWidth
inherited
The default width of the triangle that points to the element in the editable.
Defaults to
20
-
width : Number
CKEDITOR.ui.balloonToolbarView#width
inherited
The default width of the balloon panel.
Defaults to
360
-
_listeners : Array
CKEDITOR.ui.balloonToolbarView#_listeners
private
Listeners registered by this toolbar view.
Defaults to
[]
-
_pointedElement : Object
CKEDITOR.ui.balloonToolbarView#_pointedElement
private
The DOM element used by the balloon toolbar to attach to.
Methods
-
constructor( editor, definition ) → balloonToolbarView
CKEDITOR.ui.balloonToolbarView#constructor
since 4.8.0
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
-
_getViewPaneRect( window ) → Object
CKEDITOR.ui.balloonToolbarView#_getViewPaneRect
inherited
Parameters
window : window
Returns
Object
Returns viewport position, taking scroll offset into account.
Propertiestop : Number
bottom : Number
left : Number
right : Number
-
activateShowListener( id )
CKEDITOR.ui.balloonToolbarView#activateShowListener
inherited
Activates an event listener associated with this balloon panel. See showListeners, activeShowListeners, deactivateShowListener, addShowListener, removeShowListener.
Parameters
id : Object
-
activateShowListeners()
CKEDITOR.ui.balloonToolbarView#activateShowListeners
inherited
Activates all event listeners associated with this balloon panel. See showListeners, activeShowListeners, deactivateShowListeners, addShowListener, removeShowListener.
-
addShowListener( listener ) → Object
CKEDITOR.ui.balloonToolbarView#addShowListener
inherited
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.
-
attach( elementOrSelection, [ options ] )
CKEDITOR.ui.balloonToolbarView#attach
inherited
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
-
blur()
CKEDITOR.ui.balloonToolbarView#blur
inherited
Moves the focus back to the editor's editable.
-
build()
CKEDITOR.ui.balloonToolbarView#build
inherited
Builds the UI of the balloon panel.
-
deactivateShowListener( id )
CKEDITOR.ui.balloonToolbarView#deactivateShowListener
inherited
Deactivates an event listener associated with this balloon panel. See activateShowListener.
Parameters
id : Object
-
deactivateShowListeners()
CKEDITOR.ui.balloonToolbarView#deactivateShowListeners
inherited
Removes all event listeners associated with this balloon panel. See activateShowListeners.
-
deregisterFocusable( element )
CKEDITOR.ui.balloonToolbarView#deregisterFocusable
inherited
Unregisters an element from editor's focus manager. See focusables.
Parameters
element : element
An element to be registered.
-
destroy()
CKEDITOR.ui.balloonToolbarView#destroy
inherited
Destroys the balloon panel by removing it from DOM and purging all associated event listeners.
-
getHeight() → Number
CKEDITOR.ui.balloonToolbarView#getHeight
inherited
Returns the balloon panel height.
Returns
Number
-
getWidth() → Number
CKEDITOR.ui.balloonToolbarView#getWidth
inherited
Returns the balloon panel width.
Returns
Number
-
hide()
CKEDITOR.ui.balloonToolbarView#hide
inherited
Hides the balloon panel and moves the focus back to the editable.
-
move( top, left )
CKEDITOR.ui.balloonToolbarView#move
inherited
Moves the upper-left balloon panel corner to the specified absolute position.
Parameters
top : Number
left : Number
-
registerFocusable( element )
CKEDITOR.ui.balloonToolbarView#registerFocusable
inherited
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.
-
removeShowListener( id )
CKEDITOR.ui.balloonToolbarView#removeShowListener
inherited
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.
-
reposition()
CKEDITOR.ui.balloonToolbarView#reposition
since 4.12.0
Repositions the balloon toolbar, pointing to the previously attached
element
. -
resize( width, height )
CKEDITOR.ui.balloonToolbarView#resize
inherited
Resizes the balloon panel container to given dimensions. Use
'auto'
to make the dimensions of the panel flexible.Parameters
width : Number
height : Number
-
setTitle( title )
CKEDITOR.ui.balloonToolbarView#setTitle
inherited
Sets the balloon panel title.
Parameters
title : String
A new panel title.
-
setTriangle( side )
CKEDITOR.ui.balloonToolbarView#setTriangle
inherited
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'.
-
show()
CKEDITOR.ui.balloonToolbarView#show
inherited
Shows the balloon panel.
-
_adjustElementRect( elementRect, editorRect )
CKEDITOR.ui.balloonToolbarView#_adjustElementRect
private inherited
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
.
-
_deregisterItemFocusables()
CKEDITOR.ui.balloonToolbarView#_deregisterItemFocusables
since 4.9.0 private
Deregisters focusables registered by UI items, like buttons.
-
_detachListeners()
CKEDITOR.ui.balloonToolbarView#_detachListeners
private
Detaches all listeners.
-
_getAlignments( elementRect, panelWidth, panelHeight ) → Object
CKEDITOR.ui.balloonToolbarView#_getAlignments
private inherited
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