]>
git.immae.eu Git - perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git/blob - sources/core/focusmanager.js
2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
7 * @fileOverview Defines the {@link CKEDITOR.focusManager} class, which is used
8 * to handle the focus in editor instances.
13 * Manages the focus activity in an editor instance. This class is to be
14 * used mainly by UI element coders when adding interface elements that need
15 * to set the focus state of the editor.
17 * var focusManager = new CKEDITOR.focusManager( editor );
18 * focusManager.focus();
21 * @constructor Creates a focusManager class instance.
22 * @param {CKEDITOR.editor} editor The editor instance.
24 CKEDITOR
.focusManager = function( editor
) {
25 if ( editor
.focusManager
)
26 return editor
.focusManager
;
29 * Indicates that the editor instance has focus.
31 * alert( CKEDITOR.instances.editor1.focusManager.hasFocus ); // e.g. true
33 this.hasFocus
= false;
36 * Indicates the currently focused DOM element that makes the editor activated.
38 * @property {CKEDITOR.dom.domObject}
40 this.currentActive
= null;
43 * Object used to store private stuff.
54 var SLOT_NAME
= 'focusmanager',
55 SLOT_NAME_LISTENERS
= 'focusmanager_handlers';
58 * Object used to store private stuff.
64 CKEDITOR
.focusManager
._
= {
66 * The delay (in milliseconds) to deactivate the editor when a UI DOM element has lost focus.
69 * @property {Number} [blurDelay=200]
70 * @member CKEDITOR.focusManager._
75 CKEDITOR
.focusManager
.prototype = {
78 * Indicates that this editor instance is activated (due to a DOM focus change).
79 * The `activated` state is a symbolic indicator of an active user
80 * interaction session.
82 * **Note:** This method will not introduce UI focus
83 * impact on DOM, it is here to record the editor UI focus state internally.
84 * If you want to make the cursor blink inside the editable, use
85 * {@link CKEDITOR.editor#method-focus} instead.
87 * var editor = CKEDITOR.instances.editor1;
88 * editor.focusManage.focus( editor.editable() );
90 * @param {CKEDITOR.dom.element} [currentActive] The new value of the {@link #currentActive} property.
91 * @member CKEDITOR.focusManager
93 focus: function( currentActive
) {
95 clearTimeout( this._
.timer
);
98 this.currentActive
= currentActive
;
100 if ( !( this.hasFocus
|| this._
.locked
) ) {
101 // If another editor has the current focus, we first "blur" it. In
102 // this way the events happen in a more logical sequence, like:
103 // "focus 1" > "blur 1" > "focus 2"
105 // "focus 1" > "focus 2" > "blur 1"
106 var current
= CKEDITOR
.currentInstance
;
107 current
&& current
.focusManager
.blur( 1 );
109 this.hasFocus
= true;
111 var ct
= this._
.editor
.container
;
112 ct
&& ct
.addClass( 'cke_focus' );
113 this._
.editor
.fire( 'focus' );
118 * Prevents from changing the focus manager state until the next {@link #unlock} is called.
120 * @member CKEDITOR.focusManager
127 * Restores the automatic focus management if {@link #lock} is called.
129 * @member CKEDITOR.focusManager
132 delete this._
.locked
;
136 * Used to indicate that the editor instance has been deactivated by the specified
137 * element which has just lost focus.
139 * **Note:** This function acts asynchronously with a delay of 100ms to
140 * avoid temporary deactivation. Use the `noDelay` parameter instead
141 * to deactivate immediately.
143 * var editor = CKEDITOR.instances.editor1;
144 * editor.focusManager.blur();
146 * @param {Boolean} [noDelay=false] Immediately deactivate the editor instance synchronously.
147 * @member CKEDITOR.focusManager
149 blur: function( noDelay
) {
150 if ( this._
.locked
) {
155 if ( this.hasFocus
) {
156 this.hasFocus
= false;
158 var ct
= this._
.editor
.container
;
159 ct
&& ct
.removeClass( 'cke_focus' );
160 this._
.editor
.fire( 'blur' );
164 if ( this._
.timer
) {
165 clearTimeout( this._
.timer
);
168 var delay
= CKEDITOR
.focusManager
._
.blurDelay
;
169 if ( noDelay
|| !delay
) {
172 this._
.timer
= CKEDITOR
.tools
.setTimeout( function() {
180 * Registers a UI DOM element to the focus manager, which will make the focus manager "hasFocus"
181 * once the input focus is relieved on the element.
182 * This method is designed to be used by plugins to expand the jurisdiction of the editor focus.
184 * @param {CKEDITOR.dom.element} element The container (topmost) element of one UI part.
185 * @param {Boolean} isCapture If specified, {@link CKEDITOR.event#useCapture} will be used when listening to the focus event.
186 * @member CKEDITOR.focusManager
188 add: function( element
, isCapture
) {
189 var fm
= element
.getCustomData( SLOT_NAME
);
190 if ( !fm
|| fm
!= this ) {
191 // If this element is already taken by another instance, dismiss it first.
192 fm
&& fm
.remove( element
);
194 var focusEvent
= 'focus',
197 // Bypass the element's internal DOM focus change.
200 // Use "focusin/focusout" events instead of capture phase in IEs,
201 // which fires synchronously.
202 if ( CKEDITOR
.env
.ie
) {
203 focusEvent
= 'focusin';
204 blurEvent
= 'focusout';
206 CKEDITOR
.event
.useCapture
= 1;
212 if ( element
.equals( this.currentActive
) )
216 this.focus( element
);
220 element
.on( focusEvent
, listeners
.focus
, this );
221 element
.on( blurEvent
, listeners
.blur
, this );
224 CKEDITOR
.event
.useCapture
= 0;
226 element
.setCustomData( SLOT_NAME
, this );
227 element
.setCustomData( SLOT_NAME_LISTENERS
, listeners
);
232 * Dismisses an element from the focus manager delegations added by {@link #add}.
234 * @param {CKEDITOR.dom.element} element The element to be removed from the focus manager.
235 * @member CKEDITOR.focusManager
237 remove: function( element
) {
238 element
.removeCustomData( SLOT_NAME
);
239 var listeners
= element
.removeCustomData( SLOT_NAME_LISTENERS
);
240 element
.removeListener( 'blur', listeners
.blur
);
241 element
.removeListener( 'focus', listeners
.focus
);
249 * Fired when the editor instance receives the input focus.
251 * editor.on( 'focus', function( e ) {
252 * alert( 'The editor named ' + e.editor.name + ' is now focused' );
256 * @member CKEDITOR.editor
257 * @param {CKEDITOR.editor} editor The editor instance.
261 * Fired when the editor instance loses the input focus.
263 * **Note:** This event will **NOT** be triggered when focus is moved internally, e.g. from
264 * an editable to another part of the editor UI like a dialog window.
265 * If you are interested only in the focus state of the editable, listen to the `focus`
266 * and `blur` events of the {@link CKEDITOR.editable} instead.
268 * editor.on( 'blur', function( e ) {
269 * alert( 'The editor named ' + e.editor.name + ' lost the focus' );
273 * @member CKEDITOR.editor
274 * @param {CKEDITOR.editor} editor The editor instance.