| 1 | /** |
|---|
| 2 | * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved. |
|---|
| 3 | * For licensing, see LICENSE.md or http://ckeditor.com/license |
|---|
| 4 | */ |
|---|
| 5 | |
|---|
| 6 | ( function() { |
|---|
| 7 | var floatSpaceTpl = CKEDITOR.addTemplate( 'floatcontainer', '<div' + |
|---|
| 8 | ' id="cke_{name}"' + |
|---|
| 9 | ' class="cke {id} cke_reset_all cke_chrome cke_editor_{name} cke_float cke_{langDir} ' + CKEDITOR.env.cssClass + '"' + |
|---|
| 10 | ' dir="{langDir}"' + |
|---|
| 11 | ' title="' + ( CKEDITOR.env.gecko ? ' ' : '' ) + '"' + |
|---|
| 12 | ' lang="{langCode}"' + |
|---|
| 13 | ' role="application"' + |
|---|
| 14 | ' style="{style}"' + |
|---|
| 15 | ' aria-labelledby="cke_{name}_arialbl"' + |
|---|
| 16 | '>' + |
|---|
| 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>' + |
|---|
| 20 | '</div>' + |
|---|
| 21 | '</div>' ), |
|---|
| 22 | win = CKEDITOR.document.getWindow(), |
|---|
| 23 | pixelate = CKEDITOR.tools.cssLength; |
|---|
| 24 | |
|---|
| 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() { |
|---|
| 30 | attach( this ); |
|---|
| 31 | }, null, null, 20 ); |
|---|
| 32 | } |
|---|
| 33 | } ); |
|---|
| 34 | |
|---|
| 35 | function scrollOffset( side ) { |
|---|
| 36 | var pageOffset = side == 'left' ? 'pageXOffset' : 'pageYOffset', |
|---|
| 37 | docScrollOffset = side == 'left' ? 'scrollLeft' : 'scrollTop'; |
|---|
| 38 | |
|---|
| 39 | return ( pageOffset in win.$ ) ? |
|---|
| 40 | win.$[ pageOffset ] |
|---|
| 41 | : |
|---|
| 42 | CKEDITOR.document.$.documentElement[ docScrollOffset ]; |
|---|
| 43 | } |
|---|
| 44 | |
|---|
| 45 | function attach( editor ) { |
|---|
| 46 | var config = editor.config, |
|---|
| 47 | |
|---|
| 48 | // Get the HTML for the predefined spaces. |
|---|
| 49 | topHtml = editor.fire( 'uiSpace', { space: 'top', html: '' } ).html, |
|---|
| 50 | |
|---|
| 51 | // Re-positioning of the space. |
|---|
| 52 | layout = ( function() { |
|---|
| 53 | // Mode indicates the vertical aligning mode. |
|---|
| 54 | var mode, editable, |
|---|
| 55 | spaceRect, editorRect, viewRect, spaceHeight, pageScrollX, |
|---|
| 56 | |
|---|
| 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; |
|---|
| 62 | |
|---|
| 63 | // Update the float space position. |
|---|
| 64 | function updatePos( pos, prop, val ) { |
|---|
| 65 | floatSpace.setStyle( prop, pixelate( val ) ); |
|---|
| 66 | floatSpace.setStyle( 'position', pos ); |
|---|
| 67 | } |
|---|
| 68 | |
|---|
| 69 | // Change the current mode and update float space position accordingly. |
|---|
| 70 | function changeMode( newMode ) { |
|---|
| 71 | var editorPos = editable.getDocumentPosition(); |
|---|
| 72 | |
|---|
| 73 | switch ( newMode ) { |
|---|
| 74 | case 'top': |
|---|
| 75 | updatePos( 'absolute', 'top', editorPos.y - spaceHeight - dockedOffsetY ); |
|---|
| 76 | break; |
|---|
| 77 | case 'pin': |
|---|
| 78 | updatePos( 'fixed', 'top', pinnedOffsetY ); |
|---|
| 79 | break; |
|---|
| 80 | case 'bottom': |
|---|
| 81 | updatePos( 'absolute', 'top', editorPos.y + ( editorRect.height || editorRect.bottom - editorRect.top ) + dockedOffsetY ); |
|---|
| 82 | break; |
|---|
| 83 | } |
|---|
| 84 | |
|---|
| 85 | mode = newMode; |
|---|
| 86 | } |
|---|
| 87 | |
|---|
| 88 | return function( evt ) { |
|---|
| 89 | // #10112 Do not fail on editable-less editor. |
|---|
| 90 | if ( !( editable = editor.editable() ) ) |
|---|
| 91 | return; |
|---|
| 92 | |
|---|
| 93 | // Show up the space on focus gain. |
|---|
| 94 | evt && evt.name == 'focus' && floatSpace.show(); |
|---|
| 95 | |
|---|
| 96 | // Reset the horizontal position for below measurement. |
|---|
| 97 | floatSpace.removeStyle( 'left' ); |
|---|
| 98 | floatSpace.removeStyle( 'right' ); |
|---|
| 99 | |
|---|
| 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. |
|---|
| 103 | |
|---|
| 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' ); |
|---|
| 110 | |
|---|
| 111 | // We initialize it as pin mode. |
|---|
| 112 | if ( !mode ) { |
|---|
| 113 | mode = 'pin'; |
|---|
| 114 | changeMode( 'pin' ); |
|---|
| 115 | // Call for a refresh to the actual layout. |
|---|
| 116 | layout( evt ); |
|---|
| 117 | return; |
|---|
| 118 | } |
|---|
| 119 | // +------------------------ Viewport -+ \ |
|---|
| 120 | // | | |-> floatSpaceDockedOffsetY |
|---|
| 121 | // | ................................. | / |
|---|
| 122 | // | | |
|---|
| 123 | // | +------ Space -+ | |
|---|
| 124 | // | | | | |
|---|
| 125 | // | +--------------+ | |
|---|
| 126 | // | +------------------ Editor -+ | |
|---|
| 127 | // | | | | |
|---|
| 128 | // |
|---|
| 129 | if ((!editor.config.toolbarLocationFixed || editor.config.toolbarLocationFixed == 'top') && spaceHeight + dockedOffsetY <= editorRect.top ) |
|---|
| 130 | changeMode( 'top' ); |
|---|
| 131 | |
|---|
| 132 | // +- - - - - - - - - Editor -+ |
|---|
| 133 | // | | |
|---|
| 134 | // +------------------------ Viewport -+ \ |
|---|
| 135 | // | | | | |-> floatSpacePinnedOffsetY |
|---|
| 136 | // | ................................. | / |
|---|
| 137 | // | +------ Space -+ | | |
|---|
| 138 | // | | | | | |
|---|
| 139 | // | +--------------+ | | |
|---|
| 140 | // | | | | |
|---|
| 141 | // | +---------------------------+ | |
|---|
| 142 | // +-----------------------------------+ |
|---|
| 143 | // |
|---|
| 144 | else if ((!editor.config.toolbarLocationFixed || editor.config.toolbarLocationFixed == 'pin') && spaceHeight + dockedOffsetY > viewRect.height - editorRect.bottom ) |
|---|
| 145 | changeMode( 'pin' ); |
|---|
| 146 | |
|---|
| 147 | // +- - - - - - - - - Editor -+ |
|---|
| 148 | // | | |
|---|
| 149 | // +------------------------ Viewport -+ \ |
|---|
| 150 | // | | | | |-> floatSpacePinnedOffsetY |
|---|
| 151 | // | ................................. | / |
|---|
| 152 | // | | | | |
|---|
| 153 | // | | | | |
|---|
| 154 | // | +---------------------------+ | |
|---|
| 155 | // | +------ Space -+ | |
|---|
| 156 | // | | | | |
|---|
| 157 | // | +--------------+ | |
|---|
| 158 | // |
|---|
| 159 | else if (!editor.config.toolbarLocationFixed || editor.config.toolbarLocationFixed == 'bottom') |
|---|
| 160 | changeMode( 'bottom' ); |
|---|
| 161 | |
|---|
| 162 | var mid = viewRect.width / 2, |
|---|
| 163 | alignSide = |
|---|
| 164 | ( editorRect.left > 0 && editorRect.right < viewRect.width && editorRect.width > spaceRect.width ) ? |
|---|
| 165 | ( editor.config.contentsLangDirection == 'rtl' ? 'right' : 'left' ) |
|---|
| 166 | : |
|---|
| 167 | ( mid - editorRect.left > editorRect.right - mid ? 'left' : 'right' ), |
|---|
| 168 | offset; |
|---|
| 169 | |
|---|
| 170 | // (#9769) If viewport width is less than space width, |
|---|
| 171 | // make sure space never cross the left boundary of the viewport. |
|---|
| 172 | // In other words: top-left corner of the space is always visible. |
|---|
| 173 | if ( spaceRect.width > viewRect.width ) { |
|---|
| 174 | alignSide = 'left'; |
|---|
| 175 | offset = 0; |
|---|
| 176 | } |
|---|
| 177 | else { |
|---|
| 178 | if ( alignSide == 'left' ) { |
|---|
| 179 | // If the space rect fits into viewport, align it |
|---|
| 180 | // to the left edge of editor: |
|---|
| 181 | // |
|---|
| 182 | // +------------------------ Viewport -+ |
|---|
| 183 | // | | |
|---|
| 184 | // | +------------- Space -+ | |
|---|
| 185 | // | | | | |
|---|
| 186 | // | +---------------------+ | |
|---|
| 187 | // | +------------------ Editor -+ | |
|---|
| 188 | // | | | | |
|---|
| 189 | // |
|---|
| 190 | if ( editorRect.left > 0 ) |
|---|
| 191 | offset = editorRect.left; |
|---|
| 192 | |
|---|
| 193 | // If the left part of the editor is cut off by the left |
|---|
| 194 | // edge of the viewport, stick the space to the viewport: |
|---|
| 195 | // |
|---|
| 196 | // +------------------------ Viewport -+ |
|---|
| 197 | // | | |
|---|
| 198 | // +---------------- Space -+ | |
|---|
| 199 | // | | | |
|---|
| 200 | // +------------------------+ | |
|---|
| 201 | // +----|------------- Editor -+ | |
|---|
| 202 | // | | | | |
|---|
| 203 | // |
|---|
| 204 | else |
|---|
| 205 | offset = 0; |
|---|
| 206 | } |
|---|
| 207 | else { |
|---|
| 208 | // If the space rect fits into viewport, align it |
|---|
| 209 | // to the right edge of editor: |
|---|
| 210 | // |
|---|
| 211 | // +------------------------ Viewport -+ |
|---|
| 212 | // | | |
|---|
| 213 | // | +------------- Space -+ | |
|---|
| 214 | // | | | | |
|---|
| 215 | // | +---------------------+ | |
|---|
| 216 | // | +------------------ Editor -+ | |
|---|
| 217 | // | | | | |
|---|
| 218 | // |
|---|
| 219 | if ( editorRect.right < viewRect.width ) |
|---|
| 220 | offset = viewRect.width - editorRect.right; |
|---|
| 221 | |
|---|
| 222 | // If the right part of the editor is cut off by the right |
|---|
| 223 | // edge of the viewport, stick the space to the viewport: |
|---|
| 224 | // |
|---|
| 225 | // +------------------------ Viewport -+ |
|---|
| 226 | // | | |
|---|
| 227 | // | +------------- Space -+ |
|---|
| 228 | // | | | |
|---|
| 229 | // | +---------------------+ |
|---|
| 230 | // | +-----------------|- Editor -+ |
|---|
| 231 | // | | | | |
|---|
| 232 | // |
|---|
| 233 | else |
|---|
| 234 | offset = 0; |
|---|
| 235 | } |
|---|
| 236 | |
|---|
| 237 | // (#9769) Finally, stick the space to the opposite side of |
|---|
| 238 | // the viewport when it's cut off horizontally on the left/right |
|---|
| 239 | // side like below. |
|---|
| 240 | // |
|---|
| 241 | // This trick reveals cut off space in some edge cases and |
|---|
| 242 | // hence it improves accessibility. |
|---|
| 243 | // |
|---|
| 244 | // +------------------------ Viewport -+ |
|---|
| 245 | // | | |
|---|
| 246 | // | +--------------------|-- Space -+ |
|---|
| 247 | // | | | | |
|---|
| 248 | // | +--------------------|----------+ |
|---|
| 249 | // | +------- Editor -+ | |
|---|
| 250 | // | | | | |
|---|
| 251 | // |
|---|
| 252 | // becomes: |
|---|
| 253 | // |
|---|
| 254 | // +------------------------ Viewport -+ |
|---|
| 255 | // | | |
|---|
| 256 | // | +----------------------- Space -+ |
|---|
| 257 | // | | | |
|---|
| 258 | // | +-------------------------------+ |
|---|
| 259 | // | +------- Editor -+ | |
|---|
| 260 | // | | | | |
|---|
| 261 | // |
|---|
| 262 | if ( offset + spaceRect.width > viewRect.width ) { |
|---|
| 263 | alignSide = alignSide == 'left' ? 'right' : 'left'; |
|---|
| 264 | offset = 0; |
|---|
| 265 | } |
|---|
| 266 | } |
|---|
| 267 | |
|---|
| 268 | // Pin mode is fixed, so don't include scroll-x. |
|---|
| 269 | // (#9903) For mode is "top" or "bottom", add opposite scroll-x for right-aligned space. |
|---|
| 270 | var scroll = mode == 'pin' ? |
|---|
| 271 | 0 |
|---|
| 272 | : |
|---|
| 273 | alignSide == 'left' ? pageScrollX : -pageScrollX; |
|---|
| 274 | |
|---|
| 275 | floatSpace.setStyle( alignSide, pixelate( ( mode == 'pin' ? pinnedOffsetX : dockedOffsetX ) + offset + scroll ) ); |
|---|
| 276 | }; |
|---|
| 277 | } )(); |
|---|
| 278 | |
|---|
| 279 | if ( topHtml ) { |
|---|
| 280 | var floatSpace = CKEDITOR.document.getBody().append( CKEDITOR.dom.element.createFromHtml( floatSpaceTpl.output( { |
|---|
| 281 | content: topHtml, |
|---|
| 282 | id: editor.id, |
|---|
| 283 | langDir: editor.lang.dir, |
|---|
| 284 | langCode: editor.langCode, |
|---|
| 285 | name: editor.name, |
|---|
| 286 | style: 'display:none;z-index:' + ( config.baseFloatZIndex - 1 ), |
|---|
| 287 | topId: editor.ui.spaceId( 'top' ), |
|---|
| 288 | voiceLabel: editor.lang.editorPanel + ', ' + editor.name |
|---|
| 289 | } ) ) ), |
|---|
| 290 | |
|---|
| 291 | // Use event buffers to reduce CPU load when tons of events are fired. |
|---|
| 292 | changeBuffer = CKEDITOR.tools.eventsBuffer( 500, layout ), |
|---|
| 293 | uiBuffer = CKEDITOR.tools.eventsBuffer( 100, layout ); |
|---|
| 294 | |
|---|
| 295 | // There's no need for the floatSpace to be selectable. |
|---|
| 296 | floatSpace.unselectable(); |
|---|
| 297 | |
|---|
| 298 | // Prevent clicking on non-buttons area of the space from blurring editor. |
|---|
| 299 | floatSpace.on( 'mousedown', function( evt ) { |
|---|
| 300 | evt = evt.data; |
|---|
| 301 | if ( !evt.getTarget().hasAscendant( 'a', 1 ) ) |
|---|
| 302 | evt.preventDefault(); |
|---|
| 303 | } ); |
|---|
| 304 | |
|---|
| 305 | editor.on( 'focus', function( evt ) { |
|---|
| 306 | layout( evt ); |
|---|
| 307 | editor.on( 'change', changeBuffer.input ); |
|---|
| 308 | win.on( 'scroll', uiBuffer.input ); |
|---|
| 309 | win.on( 'resize', uiBuffer.input ); |
|---|
| 310 | } ); |
|---|
| 311 | |
|---|
| 312 | editor.on( 'blur', function() { |
|---|
| 313 | floatSpace.hide(); |
|---|
| 314 | editor.removeListener( 'change', changeBuffer.input ); |
|---|
| 315 | win.removeListener( 'scroll', uiBuffer.input ); |
|---|
| 316 | win.removeListener( 'resize', uiBuffer.input ); |
|---|
| 317 | } ); |
|---|
| 318 | |
|---|
| 319 | editor.on( 'destroy', function() { |
|---|
| 320 | win.removeListener( 'scroll', uiBuffer.input ); |
|---|
| 321 | win.removeListener( 'resize', uiBuffer.input ); |
|---|
| 322 | floatSpace.clearCustomData(); |
|---|
| 323 | floatSpace.remove(); |
|---|
| 324 | } ); |
|---|
| 325 | |
|---|
| 326 | // Handle initial focus. |
|---|
| 327 | if ( editor.focusManager.hasFocus ) |
|---|
| 328 | floatSpace.show(); |
|---|
| 329 | |
|---|
| 330 | // Register this UI space to the focus manager. |
|---|
| 331 | editor.focusManager.add( floatSpace, 1 ); |
|---|
| 332 | } |
|---|
| 333 | } |
|---|
| 334 | } )(); |
|---|
| 335 | |
|---|
| 336 | /** |
|---|
| 337 | * Along with {@link #floatSpaceDockedOffsetY} it defines the |
|---|
| 338 | * amount of offset (in pixels) between float space and the editable left/right |
|---|
| 339 | * boundaries when space element is docked at either side of the editable. |
|---|
| 340 | * |
|---|
| 341 | * config.floatSpaceDockedOffsetX = 10; |
|---|
| 342 | * |
|---|
| 343 | * @cfg {Number} [floatSpaceDockedOffsetX=0] |
|---|
| 344 | * @member CKEDITOR.config |
|---|
| 345 | */ |
|---|
| 346 | |
|---|
| 347 | /** |
|---|
| 348 | * Along with {@link #floatSpaceDockedOffsetX} it defines the |
|---|
| 349 | * amount of offset (in pixels) between float space and the editable top/bottom |
|---|
| 350 | * boundaries when space element is docked at either side of the editable. |
|---|
| 351 | * |
|---|
| 352 | * config.floatSpaceDockedOffsetY = 10; |
|---|
| 353 | * |
|---|
| 354 | * @cfg {Number} [floatSpaceDockedOffsetY=0] |
|---|
| 355 | * @member CKEDITOR.config |
|---|
| 356 | */ |
|---|
| 357 | |
|---|
| 358 | /** |
|---|
| 359 | * Along with {@link #floatSpacePinnedOffsetY} it defines the |
|---|
| 360 | * amount of offset (in pixels) between float space and the view port boundaries |
|---|
| 361 | * when space element is pinned. |
|---|
| 362 | * |
|---|
| 363 | * config.floatSpacePinnedOffsetX = 20; |
|---|
| 364 | * |
|---|
| 365 | * @cfg {Number} [floatSpacePinnedOffsetX=0] |
|---|
| 366 | * @member CKEDITOR.config |
|---|
| 367 | */ |
|---|
| 368 | |
|---|
| 369 | /** |
|---|
| 370 | * Along with {@link #floatSpacePinnedOffsetX} it defines the |
|---|
| 371 | * amount of offset (in pixels) between float space and the view port boundaries |
|---|
| 372 | * when space element is pinned. |
|---|
| 373 | * |
|---|
| 374 | * config.floatSpacePinnedOffsetY = 20; |
|---|
| 375 | * |
|---|
| 376 | * @cfg {Number} [floatSpacePinnedOffsetY=0] |
|---|
| 377 | * @member CKEDITOR.config |
|---|
| 378 | */ |
|---|
