2
* @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
3
* For licensing, see LICENSE.md or http://ckeditor.com/license
7
var floatSpaceTpl = CKEDITOR.addTemplate( 'floatcontainer', '<div' +
9
' class="cke {id} cke_reset_all cke_chrome cke_editor_{name} cke_float cke_{langDir} ' + CKEDITOR.env.cssClass + '"' +
11
' title="' + ( CKEDITOR.env.gecko ? ' ' : '' ) + '"' +
12
' lang="{langCode}"' +
13
' role="application"' +
15
' aria-labelledby="cke_{name}_arialbl"' +
17
'<span id="cke_{name}_arialbl" class="cke_voice_label">{voiceLabel}</span>' +
18
'<div class="cke_inner">' +
19
'<div id="{topId}" class="cke_top" role="presentation">{content}</div>' +
22
win = CKEDITOR.document.getWindow(),
23
pixelate = CKEDITOR.tools.cssLength;
25
CKEDITOR.plugins.add( 'floatingspace', {
26
init: function( editor ) {
27
// Add listener with lower priority than that in themedui creator.
28
// Thereby floatingspace will be created only if themedui wasn't used.
29
editor.on( 'loaded', function() {
35
function scrollOffset( side ) {
36
var pageOffset = side == 'left' ? 'pageXOffset' : 'pageYOffset',
37
docScrollOffset = side == 'left' ? 'scrollLeft' : 'scrollTop';
39
return ( pageOffset in win.$ ) ?
42
CKEDITOR.document.$.documentElement[ docScrollOffset ];
45
function attach( editor ) {
46
var config = editor.config,
48
// Get the HTML for the predefined spaces.
49
topHtml = editor.fire( 'uiSpace', { space: 'top', html: '' } ).html,
51
// Re-positioning of the space.
52
layout = ( function() {
53
// Mode indicates the vertical aligning mode.
55
spaceRect, editorRect, viewRect, spaceHeight, pageScrollX,
57
// Allow minor adjustments of the float space from custom configs.
58
dockedOffsetX = config.floatSpaceDockedOffsetX || 0,
59
dockedOffsetY = config.floatSpaceDockedOffsetY || 0,
60
pinnedOffsetX = config.floatSpacePinnedOffsetX || 0,
61
pinnedOffsetY = config.floatSpacePinnedOffsetY || 0;
63
// Update the float space position.
64
function updatePos( pos, prop, val ) {
65
floatSpace.setStyle( prop, pixelate( val ) );
66
floatSpace.setStyle( 'position', pos );
69
// Change the current mode and update float space position accordingly.
70
function changeMode( newMode ) {
71
var editorPos = editable.getDocumentPosition();
75
updatePos( 'absolute', 'top', editorPos.y - spaceHeight - dockedOffsetY );
78
updatePos( 'fixed', 'top', pinnedOffsetY );
81
updatePos( 'absolute', 'top', editorPos.y + ( editorRect.height || editorRect.bottom - editorRect.top ) + dockedOffsetY );
88
return function( evt ) {
89
// #10112 Do not fail on editable-less editor.
90
if ( !( editable = editor.editable() ) )
93
// Show up the space on focus gain.
94
evt && evt.name == 'focus' && floatSpace.show();
96
// Reset the horizontal position for below measurement.
97
floatSpace.removeStyle( 'left' );
98
floatSpace.removeStyle( 'right' );
100
// Compute the screen position from the TextRectangle object would
101
// be very simple, even though the "width"/"height" property is not
102
// available for all, it's safe to figure that out from the rest.
104
// http://help.dottoro.com/ljgupwlp.php
105
spaceRect = floatSpace.getClientRect();
106
editorRect = editable.getClientRect();
107
viewRect = win.getViewPaneSize();
108
spaceHeight = spaceRect.height;
109
pageScrollX = scrollOffset( 'left' );
111
// We initialize it as pin mode.
115
// Call for a refresh to the actual layout.
120
// +------------------------ Viewport -+ \
121
// | | |-> floatSpaceDockedOffsetY
122
// | ................................. | /
124
// | +------ Space -+ |
126
// | +--------------+ |
127
// | +------------------ Editor -+ |
130
if ( spaceHeight + dockedOffsetY <= editorRect.top )
133
// +- - - - - - - - - Editor -+
135
// +------------------------ Viewport -+ \
136
// | | | | |-> floatSpacePinnedOffsetY
137
// | ................................. | /
138
// | +------ Space -+ | |
140
// | +--------------+ | |
142
// | +---------------------------+ |
143
// +-----------------------------------+
145
else if ( spaceHeight + dockedOffsetY > viewRect.height - editorRect.bottom )
148
// +- - - - - - - - - Editor -+
150
// +------------------------ Viewport -+ \
151
// | | | | |-> floatSpacePinnedOffsetY
152
// | ................................. | /
155
// | +---------------------------+ |
156
// | +------ Space -+ |
158
// | +--------------+ |
161
changeMode( 'bottom' );
163
var mid = viewRect.width / 2,
165
( editorRect.left > 0 && editorRect.right < viewRect.width && editorRect.width > spaceRect.width ) ?
166
( editor.config.contentsLangDirection == 'rtl' ? 'right' : 'left' )
168
( mid - editorRect.left > editorRect.right - mid ? 'left' : 'right' ),
171
// (#9769) If viewport width is less than space width,
172
// make sure space never cross the left boundary of the viewport.
173
// In other words: top-left corner of the space is always visible.
174
if ( spaceRect.width > viewRect.width ) {
179
if ( alignSide == 'left' ) {
180
// If the space rect fits into viewport, align it
181
// to the left edge of editor:
183
// +------------------------ Viewport -+
185
// | +------------- Space -+ |
187
// | +---------------------+ |
188
// | +------------------ Editor -+ |
191
if ( editorRect.left > 0 )
192
offset = editorRect.left;
194
// If the left part of the editor is cut off by the left
195
// edge of the viewport, stick the space to the viewport:
197
// +------------------------ Viewport -+
199
// +---------------- Space -+ |
201
// +------------------------+ |
202
// +----|------------- Editor -+ |
209
// If the space rect fits into viewport, align it
210
// to the right edge of editor:
212
// +------------------------ Viewport -+
214
// | +------------- Space -+ |
216
// | +---------------------+ |
217
// | +------------------ Editor -+ |
220
if ( editorRect.right < viewRect.width )
221
offset = viewRect.width - editorRect.right;
223
// If the right part of the editor is cut off by the right
224
// edge of the viewport, stick the space to the viewport:
226
// +------------------------ Viewport -+
228
// | +------------- Space -+
230
// | +---------------------+
231
// | +-----------------|- Editor -+
238
// (#9769) Finally, stick the space to the opposite side of
239
// the viewport when it's cut off horizontally on the left/right
242
// This trick reveals cut off space in some edge cases and
243
// hence it improves accessibility.
245
// +------------------------ Viewport -+
247
// | +--------------------|-- Space -+
249
// | +--------------------|----------+
250
// | +------- Editor -+ |
255
// +------------------------ Viewport -+
257
// | +----------------------- Space -+
259
// | +-------------------------------+
260
// | +------- Editor -+ |
263
if ( offset + spaceRect.width > viewRect.width ) {
264
alignSide = alignSide == 'left' ? 'right' : 'left';
269
// Pin mode is fixed, so don't include scroll-x.
270
// (#9903) For mode is "top" or "bottom", add opposite scroll-x for right-aligned space.
271
var scroll = mode == 'pin' ?
274
alignSide == 'left' ? pageScrollX : -pageScrollX;
276
floatSpace.setStyle( alignSide, pixelate( ( mode == 'pin' ? pinnedOffsetX : dockedOffsetX ) + offset + scroll ) );
281
var floatSpace = CKEDITOR.document.getBody().append( CKEDITOR.dom.element.createFromHtml( floatSpaceTpl.output( {
284
langDir: editor.lang.dir,
285
langCode: editor.langCode,
287
style: 'display:none;z-index:' + ( config.baseFloatZIndex - 1 ),
288
topId: editor.ui.spaceId( 'top' ),
289
voiceLabel: editor.lang.editorPanel + ', ' + editor.name
292
// Use event buffers to reduce CPU load when tons of events are fired.
293
changeBuffer = CKEDITOR.tools.eventsBuffer( 500, layout ),
294
uiBuffer = CKEDITOR.tools.eventsBuffer( 100, layout );
296
// There's no need for the floatSpace to be selectable.
297
floatSpace.unselectable();
299
// Prevent clicking on non-buttons area of the space from blurring editor.
300
floatSpace.on( 'mousedown', function( evt ) {
302
if ( !evt.getTarget().hasAscendant( 'a', 1 ) )
303
evt.preventDefault();
306
editor.on( 'focus', function( evt ) {
308
editor.on( 'change', changeBuffer.input );
309
win.on( 'scroll', uiBuffer.input );
310
win.on( 'resize', uiBuffer.input );
313
editor.on( 'blur', function() {
315
editor.removeListener( 'change', changeBuffer.input );
316
win.removeListener( 'scroll', uiBuffer.input );
317
win.removeListener( 'resize', uiBuffer.input );
320
editor.on( 'destroy', function() {
321
win.removeListener( 'scroll', uiBuffer.input );
322
win.removeListener( 'resize', uiBuffer.input );
323
floatSpace.clearCustomData();
327
// Handle initial focus.
328
if ( editor.focusManager.hasFocus )
331
// Register this UI space to the focus manager.
332
editor.focusManager.add( floatSpace, 1 );
338
* Along with {@link #floatSpaceDockedOffsetY} it defines the
339
* amount of offset (in pixels) between float space and the editable left/right
340
* boundaries when space element is docked at either side of the editable.
342
* config.floatSpaceDockedOffsetX = 10;
344
* @cfg {Number} [floatSpaceDockedOffsetX=0]
345
* @member CKEDITOR.config
349
* Along with {@link #floatSpaceDockedOffsetX} it defines the
350
* amount of offset (in pixels) between float space and the editable top/bottom
351
* boundaries when space element is docked at either side of the editable.
353
* config.floatSpaceDockedOffsetY = 10;
355
* @cfg {Number} [floatSpaceDockedOffsetY=0]
356
* @member CKEDITOR.config
360
* Along with {@link #floatSpacePinnedOffsetY} it defines the
361
* amount of offset (in pixels) between float space and the view port boundaries
362
* when space element is pinned.
364
* config.floatSpacePinnedOffsetX = 20;
366
* @cfg {Number} [floatSpacePinnedOffsetX=0]
367
* @member CKEDITOR.config
371
* Along with {@link #floatSpacePinnedOffsetX} it defines the
372
* amount of offset (in pixels) between float space and the view port boundaries
373
* when space element is pinned.
375
* config.floatSpacePinnedOffsetY = 20;
377
* @cfg {Number} [floatSpacePinnedOffsetY=0]
378
* @member CKEDITOR.config