Badge
A helper that enables the badge feature in the editor and renders a custom view next to the bottom of the editable element (editor root, source editing area, etc.) when the editor is focused.
Properties
- module:ui/badge/badge~Badge#editor- Editor instance the helper was created for. 
- _balloonClass : undefined | stringprivatereadonly- module:ui/badge/badge~Badge#_balloonClass- An additional CSS class added to the - BalloonView.
- _balloonView : null | BalloonPanelViewprivate- module:ui/badge/badge~Badge#_balloonView- A reference to the balloon panel hosting and positioning the badge content. 
- _lastFocusedEditableElement : null | HTMLElementprivate- module:ui/badge/badge~Badge#_lastFocusedEditableElement- A reference to the last editable element (root, source editing area, etc.) focused by the user. Since the focus can move to other focusable elements in the UI, this reference allows positioning the balloon over the right element whether the user is typing or using the UI. 
- _showBalloonThrottled : DebouncedFuncLeading<() => void>private- module:ui/badge/badge~Badge#_showBalloonThrottled- A throttled version of the - _showBalloonmethod meant for frequent use to avoid performance loss.
Methods
- constructor( editor, options = { [options.balloonClass] } )protected- module:ui/badge/badge~Badge#constructor- Creates a badge for a given editor. The feature is initialized on Editor#ready event. - Parameters- editor : Editor
- options : object
- Properties- [ options.balloonClass ] : string
 Defaults to {}
 
- delegate( events ) → EmitterMixinDelegateChaininherited- module:ui/badge/badge~Badge#delegate- Delegates selected events to another - Emitter. For instance:- emitterA.delegate( 'eventX' ).to( emitterB ); emitterA.delegate( 'eventX', 'eventY' ).to( emitterC );Copy code- then - eventXis delegated (fired by)- emitterBand- emitterCalong with- data:- emitterA.fire( 'eventX', data );Copy code- and - eventYis delegated (fired by)- emitterCalong with- data:- emitterA.fire( 'eventY', data );Copy code- Parameters- events : Array<string>
- Event names that will be delegated to another emitter. 
 - Returns
- destroy() → void- module:ui/badge/badge~Badge#destroy
- fire( eventOrInfo, args ) → GetEventInfo<TEvent>[ 'return' ]inherited- module:ui/badge/badge~Badge#fire- Fires an event, executing all callbacks registered for it. - The first parameter passed to callbacks is an - EventInfoobject, followed by the optional- argsprovided in the- fire()method call.- Type parameters- Parameters- eventOrInfo : GetNameOrEventInfo<TEvent>
- The name of the event or - EventInfoobject if event is delegated.
- args : TEvent[ 'args' ]
- Additional arguments to be passed to the callbacks. 
 - Returns- GetEventInfo<TEvent>[ 'return' ]
- By default the method returns - undefined. However, the return value can be changed by listeners through modification of the- evt.return's property (the event info is the first param of every callback).
 
- listenTo( emitter, event, callback, [ options ] ) → voidinherited- module:ui/badge/badge~Badge#listenTo:DOM_EMITTER- Registers a callback function to be executed when an event is fired in a specific (emitter) object. - Events can be grouped in namespaces using - :. When namespaced event is fired, it additionally fires all callbacks for that namespace.- // myEmitter.on( ... ) is a shorthand for myEmitter.listenTo( myEmitter, ... ). myEmitter.on( 'myGroup', genericCallback ); myEmitter.on( 'myGroup:myEvent', specificCallback ); // genericCallback is fired. myEmitter.fire( 'myGroup' ); // both genericCallback and specificCallback are fired. myEmitter.fire( 'myGroup:myEvent' ); // genericCallback is fired even though there are no callbacks for "foo". myEmitter.fire( 'myGroup:foo' );Copy code- An event callback can stop the event and set the return value of the - firemethod.- Type parameters- Parameters- emitter : Emitter
- The object that fires the event. 
- event : TEvent[ 'name' ]
- The name of the event. 
- callback : GetCallback<TEvent>
- The function to be called on event. 
- [ options ] : CallbackOptions
- Additional options. 
 - Returns- void
 
- listenTo( emitter, event, callback, [ options ] ) → voidinherited- module:ui/badge/badge~Badge#listenTo:HTML_EMITTER- Registers a callback function to be executed when an event is fired in a specific Emitter or DOM Node. It is backwards compatible with - listenTo.- Type parameters- K : extends keyof DomEventMap
 - Parameters- emitter : Window | EventTarget | Node
- The object that fires the event. 
- event : K
- The name of the event. 
- callback : ( this: this, ev: EventInfo, event: DomEventMap[ K ] ) => void
- The function to be called on event. 
- [ options ] : object
- Additional options. 
 - Returns- void
 
- off( event, callback ) → voidinherited- module:ui/badge/badge~Badge#off- Stops executing the callback on the given event. Shorthand for - this.stopListening( this, event, callback ).- Parameters- event : string
- The name of the event. 
- callback : Function
- The function to stop being called. 
 - Returns- void
 
- on( event, callback, [ options ] ) → voidinherited- module:ui/badge/badge~Badge#on- Registers a callback function to be executed when an event is fired. - Shorthand for - this.listenTo( this, event, callback, options )(it makes the emitter listen on itself).- Type parameters- Parameters- event : TEvent[ 'name' ]
- The name of the event. 
- callback : GetCallback<TEvent>
- The function to be called on event. 
- [ options ] : GetCallbackOptions<TEvent>
- Additional options. 
 - Returns- void
 
- once( event, callback, [ options ] ) → voidinherited- module:ui/badge/badge~Badge#once- Registers a callback function to be executed on the next time the event is fired only. This is similar to calling - onfollowed by- offin the callback.- Type parameters- Parameters- event : TEvent[ 'name' ]
- The name of the event. 
- callback : GetCallback<TEvent>
- The function to be called on event. 
- [ options ] : GetCallbackOptions<TEvent>
- Additional options. 
 - Returns- void
 
- stopDelegating( [ event ], [ emitter ] ) → voidinherited- module:ui/badge/badge~Badge#stopDelegating- Stops delegating events. It can be used at different levels: - To stop delegating all events.
- To stop delegating a specific event to all emitters.
- To stop delegating a specific event to a specific emitter.
 - Parameters- [ event ] : string
- The name of the event to stop delegating. If omitted, stops it all delegations. 
- [ emitter ] : Emitter
- (requires - event) The object to stop delegating a particular event to. If omitted, stops delegation of- eventto all emitters.
 - Returns- void
 
- stopListening( [ emitter ], [ event ], [ callback ] ) → voidinherited- module:ui/badge/badge~Badge#stopListening:DOM_STOP- Stops listening for events. It can be used at different levels: It is backwards compatible with - listenTo.- To stop listening to a specific callback.
- To stop listening to a specific event.
- To stop listening to all events fired by a specific object.
- To stop listening to all events fired by all objects.
 - Parameters- [ emitter ] : Window | EventTarget | Node | Emitter
- The object to stop listening to. If omitted, stops it for all objects. 
- [ event ] : string
- (Requires the - emitter) The name of the event to stop listening to. If omitted, stops it for all events from- emitter.
- [ callback ] : Function
- (Requires the - event) The function to be removed from the call list for the given- event.
 - Returns- void
 
- _createBadgeContent() → View<HTMLElement>protected- module:ui/badge/badge~Badge#_createBadgeContent
- _getNormalizedConfig() → BadgeConfigprotected- module:ui/badge/badge~Badge#_getNormalizedConfig
- _handleEditorReady() → voidprotected- module:ui/badge/badge~Badge#_handleEditorReady
- _isEnabled() → booleanprotected- module:ui/badge/badge~Badge#_isEnabled
- _createBalloonView() → BalloonPanelViewprivate- module:ui/badge/badge~Badge#_createBalloonView- Creates an instance of the balloon panel with the badge view inside ready for positioning. - Returns
- _getBalloonAttachOptions() → null | Partial<DomOptimalPositionOptions>private- module:ui/badge/badge~Badge#_getBalloonAttachOptions- Returns the options for attaching the balloon to the focused editable element. - Returns- null | Partial<DomOptimalPositionOptions>
 
- _hideBalloon() → voidprivate- module:ui/badge/badge~Badge#_hideBalloon
- _showBalloon() → voidprivate- module:ui/badge/badge~Badge#_showBalloon
- _updateLastFocusedEditableElement() → voidprivate- module:ui/badge/badge~Badge#_updateLastFocusedEditableElement