]>
git.immae.eu Git - perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git/blob - sources/plugins/floatingspace/plugin.js
2 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
7 var win
= CKEDITOR
.document
.getWindow(),
8 pixelate
= CKEDITOR
.tools
.cssLength
;
10 CKEDITOR
.plugins
.add( 'floatingspace', {
11 init: function( editor
) {
12 // Add listener with lower priority than that in themedui creator.
13 // Thereby floatingspace will be created only if themedui wasn't used.
14 editor
.on( 'loaded', function() {
20 function scrollOffset( side
) {
21 var pageOffset
= side
== 'left' ? 'pageXOffset' : 'pageYOffset',
22 docScrollOffset
= side
== 'left' ? 'scrollLeft' : 'scrollTop';
24 return ( pageOffset
in win
.$ ) ? win
.$[ pageOffset
] : CKEDITOR
.document
.$.documentElement
[ docScrollOffset
];
27 function attach( editor
) {
28 var config
= editor
.config
,
30 // Get the HTML for the predefined spaces.
31 topHtml
= editor
.fire( 'uiSpace', { space: 'top', html: '' } ).html
,
33 // Re-positioning of the space.
34 layout
= ( function() {
35 // Mode indicates the vertical aligning mode.
37 spaceRect
, editorRect
, viewRect
, spaceHeight
, pageScrollX
,
39 // Allow minor adjustments of the float space from custom configs.
40 dockedOffsetX
= config
.floatSpaceDockedOffsetX
|| 0,
41 dockedOffsetY
= config
.floatSpaceDockedOffsetY
|| 0,
42 pinnedOffsetX
= config
.floatSpacePinnedOffsetX
|| 0,
43 pinnedOffsetY
= config
.floatSpacePinnedOffsetY
|| 0;
45 // Update the float space position.
46 function updatePos( pos
, prop
, val
) {
47 floatSpace
.setStyle( prop
, pixelate( val
) );
48 floatSpace
.setStyle( 'position', pos
);
51 // Change the current mode and update float space position accordingly.
52 function changeMode( newMode
) {
53 var editorPos
= editable
.getDocumentPosition();
57 updatePos( 'absolute', 'top', editorPos
.y
- spaceHeight
- dockedOffsetY
);
60 updatePos( 'fixed', 'top', pinnedOffsetY
);
63 updatePos( 'absolute', 'top', editorPos
.y
+ ( editorRect
.height
|| editorRect
.bottom
- editorRect
.top
) + dockedOffsetY
);
70 return function( evt
) {
71 // #10112 Do not fail on editable-less editor.
72 if ( !( editable
= editor
.editable() ) )
75 var show
= ( evt
&& evt
.name
== 'focus' );
77 // Show up the space on focus gain.
82 editor
.fire( 'floatingSpaceLayout', { show: show
} );
84 // Reset the horizontal position for below measurement.
85 floatSpace
.removeStyle( 'left' );
86 floatSpace
.removeStyle( 'right' );
88 // Compute the screen position from the TextRectangle object would
89 // be very simple, even though the "width"/"height" property is not
90 // available for all, it's safe to figure that out from the rest.
92 // http://help.dottoro.com/ljgupwlp.php
93 spaceRect
= floatSpace
.getClientRect();
94 editorRect
= editable
.getClientRect();
95 viewRect
= win
.getViewPaneSize();
96 spaceHeight
= spaceRect
.height
;
97 pageScrollX
= scrollOffset( 'left' );
99 // We initialize it as pin mode.
103 // Call for a refresh to the actual layout.
108 // +------------------------ Viewport -+ \
109 // | | |-> floatSpaceDockedOffsetY
110 // | ................................. | /
112 // | +------ Space -+ |
114 // | +--------------+ |
115 // | +------------------ Editor -+ |
118 if ( spaceHeight
+ dockedOffsetY
<= editorRect
.top
)
121 // +- - - - - - - - - Editor -+
123 // +------------------------ Viewport -+ \
124 // | | | | |-> floatSpacePinnedOffsetY
125 // | ................................. | /
126 // | +------ Space -+ | |
128 // | +--------------+ | |
130 // | +---------------------------+ |
131 // +-----------------------------------+
133 else if ( spaceHeight
+ dockedOffsetY
> viewRect
.height
- editorRect
.bottom
)
136 // +- - - - - - - - - Editor -+
138 // +------------------------ Viewport -+ \
139 // | | | | |-> floatSpacePinnedOffsetY
140 // | ................................. | /
143 // | +---------------------------+ |
144 // | +------ Space -+ |
146 // | +--------------+ |
149 changeMode( 'bottom' );
151 var mid
= viewRect
.width
/ 2,
154 if ( config
.floatSpacePreferRight
) {
156 } else if ( editorRect
.left
> 0 && editorRect
.right
< viewRect
.width
&& editorRect
.width
> spaceRect
.width
) {
157 alignSide
= config
.contentsLangDirection
== 'rtl' ? 'right' : 'left';
159 alignSide
= mid
- editorRect
.left
> editorRect
.right
- mid
? 'left' : 'right';
162 // (#9769) If viewport width is less than space width,
163 // make sure space never cross the left boundary of the viewport.
164 // In other words: top-left corner of the space is always visible.
165 if ( spaceRect
.width
> viewRect
.width
) {
170 if ( alignSide
== 'left' ) {
171 // If the space rect fits into viewport, align it
172 // to the left edge of editor:
174 // +------------------------ Viewport -+
176 // | +------------- Space -+ |
178 // | +---------------------+ |
179 // | +------------------ Editor -+ |
182 if ( editorRect
.left
> 0 )
183 offset
= editorRect
.left
;
185 // If the left part of the editor is cut off by the left
186 // edge of the viewport, stick the space to the viewport:
188 // +------------------------ Viewport -+
190 // +---------------- Space -+ |
192 // +------------------------+ |
193 // +----|------------- Editor -+ |
200 // If the space rect fits into viewport, align it
201 // to the right edge of editor:
203 // +------------------------ Viewport -+
205 // | +------------- Space -+ |
207 // | +---------------------+ |
208 // | +------------------ Editor -+ |
211 if ( editorRect
.right
< viewRect
.width
)
212 offset
= viewRect
.width
- editorRect
.right
;
214 // If the right part of the editor is cut off by the right
215 // edge of the viewport, stick the space to the viewport:
217 // +------------------------ Viewport -+
219 // | +------------- Space -+
221 // | +---------------------+
222 // | +-----------------|- Editor -+
229 // (#9769) Finally, stick the space to the opposite side of
230 // the viewport when it's cut off horizontally on the left/right
233 // This trick reveals cut off space in some edge cases and
234 // hence it improves accessibility.
236 // +------------------------ Viewport -+
238 // | +--------------------|-- Space -+
240 // | +--------------------|----------+
241 // | +------- Editor -+ |
246 // +------------------------ Viewport -+
248 // | +----------------------- Space -+
250 // | +-------------------------------+
251 // | +------- Editor -+ |
254 if ( offset
+ spaceRect
.width
> viewRect
.width
) {
255 alignSide
= alignSide
== 'left' ? 'right' : 'left';
260 // Pin mode is fixed, so don't include scroll-x.
261 // (#9903) For mode is "top" or "bottom", add opposite scroll-x for right-aligned space.
262 var scroll
= mode
== 'pin' ? 0 : alignSide
== 'left' ? pageScrollX : -pageScrollX
;
264 floatSpace
.setStyle( alignSide
, pixelate( ( mode
== 'pin' ? pinnedOffsetX : dockedOffsetX
) + offset
+ scroll
) );
269 var floatSpaceTpl
= new CKEDITOR
.template(
272 ' class="cke {id} cke_reset_all cke_chrome cke_editor_{name} cke_float cke_{langDir} ' + CKEDITOR
.env
.cssClass
+ '"' +
274 ' title="' + ( CKEDITOR
.env
.gecko
? ' ' : '' ) + '"' +
275 ' lang="{langCode}"' +
276 ' role="application"' +
278 ( editor
.title
? ' aria-labelledby="cke_{name}_arialbl"' : ' ' ) +
280 ( editor
.title
? '<span id="cke_{name}_arialbl" class="cke_voice_label">{voiceLabel}</span>' : ' ' ) +
281 '<div class="cke_inner">' +
282 '<div id="{topId}" class="cke_top" role="presentation">{content}</div>' +
285 floatSpace
= CKEDITOR
.document
.getBody().append( CKEDITOR
.dom
.element
.createFromHtml( floatSpaceTpl
.output( {
288 langDir: editor
.lang
.dir
,
289 langCode: editor
.langCode
,
291 style: 'display:none;z-index:' + ( config
.baseFloatZIndex
- 1 ),
292 topId: editor
.ui
.spaceId( 'top' ),
293 voiceLabel: editor
.title
296 // Use event buffers to reduce CPU load when tons of events are fired.
297 changeBuffer
= CKEDITOR
.tools
.eventsBuffer( 500, layout
),
298 uiBuffer
= CKEDITOR
.tools
.eventsBuffer( 100, layout
);
300 // There's no need for the floatSpace to be selectable.
301 floatSpace
.unselectable();
303 // Prevent clicking on non-buttons area of the space from blurring editor.
304 floatSpace
.on( 'mousedown', function( evt
) {
306 if ( !evt
.getTarget().hasAscendant( 'a', 1 ) )
307 evt
.preventDefault();
310 editor
.on( 'focus', function( evt
) {
312 editor
.on( 'change', changeBuffer
.input
);
313 win
.on( 'scroll', uiBuffer
.input
);
314 win
.on( 'resize', uiBuffer
.input
);
317 editor
.on( 'blur', function() {
319 editor
.removeListener( 'change', changeBuffer
.input
);
320 win
.removeListener( 'scroll', uiBuffer
.input
);
321 win
.removeListener( 'resize', uiBuffer
.input
);
324 editor
.on( 'destroy', function() {
325 win
.removeListener( 'scroll', uiBuffer
.input
);
326 win
.removeListener( 'resize', uiBuffer
.input
);
327 floatSpace
.clearCustomData();
331 // Handle initial focus.
332 if ( editor
.focusManager
.hasFocus
)
335 // Register this UI space to the focus manager.
336 editor
.focusManager
.add( floatSpace
, 1 );
342 * Along with {@link #floatSpaceDockedOffsetY} it defines the
343 * amount of offset (in pixels) between the float space and the editable left/right
344 * boundaries when the space element is docked on either side of the editable.
346 * config.floatSpaceDockedOffsetX = 10;
348 * @cfg {Number} [floatSpaceDockedOffsetX=0]
349 * @member CKEDITOR.config
353 * Along with {@link #floatSpaceDockedOffsetX} it defines the
354 * amount of offset (in pixels) between the float space and the editable top/bottom
355 * boundaries when the space element is docked on either side of the editable.
357 * config.floatSpaceDockedOffsetY = 10;
359 * @cfg {Number} [floatSpaceDockedOffsetY=0]
360 * @member CKEDITOR.config
364 * Along with {@link #floatSpacePinnedOffsetY} it defines the
365 * amount of offset (in pixels) between the float space and the viewport boundaries
366 * when the space element is pinned.
368 * config.floatSpacePinnedOffsetX = 20;
370 * @cfg {Number} [floatSpacePinnedOffsetX=0]
371 * @member CKEDITOR.config
375 * Along with {@link #floatSpacePinnedOffsetX} it defines the
376 * amount of offset (in pixels) between the float space and the viewport boundaries
377 * when the space element is pinned.
379 * config.floatSpacePinnedOffsetY = 20;
381 * @cfg {Number} [floatSpacePinnedOffsetY=0]
382 * @member CKEDITOR.config
386 * Indicates that the float space should be aligned to the right side
387 * of the editable area rather than to the left (if possible).
389 * config.floatSpacePreferRight = true;
392 * @cfg {Boolean} [floatSpacePreferRight=false]
393 * @member CKEDITOR.config
397 * Fired when the viewport or editor parameters change and the floating space needs to check and
398 * eventually update its position and dimensions.
401 * @event floatingSpaceLayout
402 * @member CKEDITOR.editor
403 * @param {CKEDITOR.editor} editor The editor instance.
405 * @param {Boolean} data.show True if the float space should show up as a result of this event.