_source/plugins/floatpanel/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 CKEDITOR.plugins.add( 'floatpanel',\r
   7 {\r
   8         requires : [ 'panel' ]\r
   9 });\r
  10 \r
  11 (function()\r
  12 {\r
  13         var panels = {};\r
  14         var isShowing = false;\r
  15 \r
  16         function getPanel( editor, doc, parentElement, definition, level )\r
  17         {\r
  18                 // Generates the panel key: docId-eleId-skinName-langDir[-uiColor][-CSSs][-level]\r
  19                 var key = CKEDITOR.tools.genKey( doc.getUniqueId(), parentElement.getUniqueId(), editor.skinName, editor.lang.dir,\r
  20                         editor.uiColor || '', definition.css || '', level || '' );\r
  21 \r
  22                 var panel = panels[ key ];\r
  23 \r
  24                 if ( !panel )\r
  25                 {\r
  26                         panel = panels[ key ] = new CKEDITOR.ui.panel( doc, definition );\r
  27                         panel.element = parentElement.append( CKEDITOR.dom.element.createFromHtml( panel.renderHtml( editor ), doc ) );\r
  28 \r
  29                         panel.element.setStyles(\r
  30                                 {\r
  31                                         display : 'none',\r
  32                                         position : 'absolute'\r
  33                                 });\r
  34                 }\r
  35 \r
  36                 return panel;\r
  37         }\r
  38 \r
  39         CKEDITOR.ui.floatPanel = CKEDITOR.tools.createClass(\r
  40         {\r
  41                 $ : function( editor, parentElement, definition, level )\r
  42                 {\r
  43                         definition.forceIFrame = 1;\r
  44 \r
  45                         var doc = parentElement.getDocument(),\r
  46                                 panel = getPanel( editor, doc, parentElement, definition, level || 0 ),\r
  47                                 element = panel.element,\r
  48                                 iframe = element.getFirst().getFirst();\r
  49 \r
  50                         // Disable native browser menu. (#4825)\r
  51                         element.disableContextMenu();\r
  52 \r
  53                         this.element = element;\r
  54 \r
  55                         this._ =\r
  56                         {\r
  57                                 editor : editor,\r
  58                                 // The panel that will be floating.\r
  59                                 panel : panel,\r
  60                                 parentElement : parentElement,\r
  61                                 definition : definition,\r
  62                                 document : doc,\r
  63                                 iframe : iframe,\r
  64                                 children : [],\r
  65                                 dir : editor.lang.dir\r
  66                         };\r
  67 \r
  68                         editor.on( 'mode', function(){ this.hide(); }, this );\r
  69                 },\r
  70 \r
  71                 proto :\r
  72                 {\r
  73                         addBlock : function( name, block )\r
  74                         {\r
  75                                 return this._.panel.addBlock( name, block );\r
  76                         },\r
  77 \r
  78                         addListBlock : function( name, multiSelect )\r
  79                         {\r
  80                                 return this._.panel.addListBlock( name, multiSelect );\r
  81                         },\r
  82 \r
  83                         getBlock : function( name )\r
  84                         {\r
  85                                 return this._.panel.getBlock( name );\r
  86                         },\r
  87 \r
  88                         /*\r
  89                                 corner (LTR):\r
  90                                         1 = top-left\r
  91                                         2 = top-right\r
  92                                         3 = bottom-right\r
  93                                         4 = bottom-left\r
  94 \r
  95                                 corner (RTL):\r
  96                                         1 = top-right\r
  97                                         2 = top-left\r
  98                                         3 = bottom-left\r
  99                                         4 = bottom-right\r
 100                          */\r
 101                         showBlock : function( name, offsetParent, corner, offsetX, offsetY )\r
 102                         {\r
 103                                 var panel = this._.panel,\r
 104                                         block = panel.showBlock( name );\r
 105 \r
 106                                 this.allowBlur( false );\r
 107                                 isShowing = 1;\r
 108 \r
 109                                 // Record from where the focus is when open panel.\r
 110                                 this._.returnFocus = this._.editor.focusManager.hasFocus ? this._.editor : new CKEDITOR.dom.element( CKEDITOR.document.$.activeElement );\r
 111 \r
 112 \r
 113                                 var element = this.element,\r
 114                                         iframe = this._.iframe,\r
 115                                         definition = this._.definition,\r
 116                                         position = offsetParent.getDocumentPosition( element.getDocument() ),\r
 117                                         rtl = this._.dir == 'rtl';\r
 118 \r
 119                                 var left        = position.x + ( offsetX || 0 ),\r
 120                                         top             = position.y + ( offsetY || 0 );\r
 121 \r
 122                                 // Floating panels are off by (-1px, 0px) in RTL mode. (#3438)\r
 123                                 if ( rtl && ( corner == 1 || corner == 4 ) )\r
 124                                         left += offsetParent.$.offsetWidth;\r
 125                                 else if ( !rtl && ( corner == 2 || corner == 3 ) )\r
 126                                         left += offsetParent.$.offsetWidth - 1;\r
 127 \r
 128                                 if ( corner == 3 || corner == 4 )\r
 129                                         top += offsetParent.$.offsetHeight - 1;\r
 130 \r
 131                                 // Memorize offsetParent by it's ID.\r
 132                                 this._.panel._.offsetParentId = offsetParent.getId();\r
 133 \r
 134                                 element.setStyles(\r
 135                                         {\r
 136                                                 top : top + 'px',\r
 137                                                 left: 0,\r
 138                                                 display : ''\r
 139                                         });\r
 140 \r
 141                                 // Don't use display or visibility style because we need to\r
 142                                 // calculate the rendering layout later and focus the element.\r
 143                                 element.setOpacity( 0 );\r
 144 \r
 145                                 // To allow the context menu to decrease back their width\r
 146                                 element.getFirst().removeStyle( 'width' );\r
 147 \r
 148                                 // Configure the IFrame blur event. Do that only once.\r
 149                                 if ( !this._.blurSet )\r
 150                                 {\r
 151                                         // Non IE prefer the event into a window object.\r
 152                                         var focused = CKEDITOR.env.ie ? iframe : new CKEDITOR.dom.window( iframe.$.contentWindow );\r
 153 \r
 154                                         // With addEventListener compatible browsers, we must\r
 155                                         // useCapture when registering the focus/blur events to\r
 156                                         // guarantee they will be firing in all situations. (#3068, #3222 )\r
 157                                         CKEDITOR.event.useCapture = true;\r
 158 \r
 159                                         focused.on( 'blur', function( ev )\r
 160                                                 {\r
 161                                                         if ( !this.allowBlur() )\r
 162                                                                 return;\r
 163 \r
 164                                                         // As we are using capture to register the listener,\r
 165                                                         // the blur event may get fired even when focusing\r
 166                                                         // inside the window itself, so we must ensure the\r
 167                                                         // target is out of it.\r
 168                                                         var target = ev.data.getTarget() ;\r
 169                                                         if ( target.getName && target.getName() != 'iframe' )\r
 170                                                                 return;\r
 171 \r
 172                                                         if ( this.visible && !this._.activeChild && !isShowing )\r
 173                                                         {\r
 174                                                                 // Panel close is caused by user's navigating away the focus, e.g. click outside the panel.\r
 175                                                                 // DO NOT restore focus in this case.\r
 176                                                                 delete this._.returnFocus;\r
 177                                                                 this.hide();\r
 178                                                         }\r
 179                                                 },\r
 180                                                 this );\r
 181 \r
 182                                         focused.on( 'focus', function()\r
 183                                                 {\r
 184                                                         this._.focused = true;\r
 185                                                         this.hideChild();\r
 186                                                         this.allowBlur( true );\r
 187                                                 },\r
 188                                                 this );\r
 189 \r
 190                                         CKEDITOR.event.useCapture = false;\r
 191 \r
 192                                         this._.blurSet = 1;\r
 193                                 }\r
 194 \r
 195                                 panel.onEscape = CKEDITOR.tools.bind( function( keystroke )\r
 196                                         {\r
 197                                                 if ( this.onEscape && this.onEscape( keystroke ) === false )\r
 198                                                         return false;\r
 199                                         },\r
 200                                         this );\r
 201 \r
 202                                 CKEDITOR.tools.setTimeout( function()\r
 203                                         {\r
 204                                                 var panelLoad = CKEDITOR.tools.bind( function ()\r
 205                                                 {\r
 206                                                         var target = element.getFirst();\r
 207 \r
 208                                                         if ( block.autoSize )\r
 209                                                         {\r
 210                                                                 var panelDoc = block.element.getDocument();\r
 211                                                                 var width = ( CKEDITOR.env.webkit? block.element : panelDoc.getBody() )[ '$' ].scrollWidth;\r
 212 \r
 213                                                                 // Account for extra height needed due to IE quirks box model bug:\r
 214                                                                 // http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug\r
 215                                                                 // (#3426)\r
 216                                                                 if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && width > 0 )\r
 217                                                                         width += ( target.$.offsetWidth || 0 ) - ( target.$.clientWidth || 0 ) + 3;\r
 218                                                                 // A little extra at the end.\r
 219                                                                 // If not present, IE6 might break into the next line, but also it looks better this way\r
 220                                                                 width += 4 ;\r
 221 \r
 222                                                                 target.setStyle( 'width', width + 'px' );\r
 223 \r
 224                                                                 // IE doesn't compute the scrollWidth if a filter is applied previously\r
 225                                                                 block.element.addClass( 'cke_frameLoaded' );\r
 226 \r
 227                                                                 var height = block.element.$.scrollHeight;\r
 228 \r
 229                                                                 // Account for extra height needed due to IE quirks box model bug:\r
 230                                                                 // http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug\r
 231                                                                 // (#3426)\r
 232                                                                 if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && height > 0 )\r
 233                                                                         height += ( target.$.offsetHeight || 0 ) - ( target.$.clientHeight || 0 ) + 3;\r
 234 \r
 235                                                                 target.setStyle( 'height', height + 'px' );\r
 236 \r
 237                                                                 // Fix IE < 8 visibility.\r
 238                                                                 panel._.currentBlock.element.setStyle( 'display', 'none' ).removeStyle( 'display' );\r
 239                                                         }\r
 240                                                         else\r
 241                                                                 target.removeStyle( 'height' );\r
 242 \r
 243                                                         // Flip panel layout horizontally in RTL with known width.\r
 244                                                         if ( rtl )\r
 245                                                                 left -= element.$.offsetWidth;\r
 246 \r
 247                                                         // Pop the style now for measurement.\r
 248                                                         element.setStyle( 'left', left + 'px' );\r
 249 \r
 250                                                         /* panel layout smartly fit the viewport size. */\r
 251                                                         var panelElement = panel.element,\r
 252                                                                 panelWindow = panelElement.getWindow(),\r
 253                                                                 rect = element.$.getBoundingClientRect(),\r
 254                                                                 viewportSize = panelWindow.getViewPaneSize();\r
 255 \r
 256                                                         // Compensation for browsers that dont support "width" and "height".\r
 257                                                         var rectWidth = rect.width || rect.right - rect.left,\r
 258                                                         rectHeight = rect.height || rect.bottom - rect.top;\r
 259 \r
 260                                                         // Check if default horizontal layout is impossible.\r
 261                                                         var spaceAfter = rtl ? rect.right : viewportSize.width - rect.left,\r
 262                                                                 spaceBefore = rtl ? viewportSize.width - rect.right : rect.left;\r
 263 \r
 264                                                         if ( rtl )\r
 265                                                         {\r
 266                                                                 if ( spaceAfter < rectWidth )\r
 267                                                                 {\r
 268                                                                         // Flip to show on right.\r
 269                                                                         if ( spaceBefore > rectWidth )\r
 270                                                                                 left += rectWidth;\r
 271                                                                         // Align to window left.\r
 272                                                                         else if ( viewportSize.width > rectWidth )\r
 273                                                                                 left = left - rect.left;\r
 274                                                                         // Align to window right, never cutting the panel at right.\r
 275                                                                         else\r
 276                                                                                 left = left - rect.right + viewportSize.width;\r
 277                                                                 }\r
 278                                                         }\r
 279                                                         else if ( spaceAfter < rectWidth )\r
 280                                                         {\r
 281                                                                         // Flip to show on left.\r
 282                                                                         if ( spaceBefore > rectWidth )\r
 283                                                                                 left -= rectWidth;\r
 284                                                                         // Align to window right.\r
 285                                                                         else if ( viewportSize.width > rectWidth )\r
 286                                                                                 left = left - rect.right + viewportSize.width;\r
 287                                                                         // Align to window left, never cutting the panel at left.\r
 288                                                                         else\r
 289                                                                                 left = left - rect.left;\r
 290                                                                 }\r
 291 \r
 292 \r
 293                                                         // Check if the default vertical layout is possible.\r
 294                                                         var spaceBelow = viewportSize.height - rect.top,\r
 295                                                                 spaceAbove = rect.top;\r
 296 \r
 297                                                         if ( spaceBelow < rectHeight )\r
 298                                                         {\r
 299                                                                 // Flip to show above.\r
 300                                                                 if ( spaceAbove > rectHeight )\r
 301                                                                         top -= rectHeight;\r
 302                                                                 // Align to window bottom.\r
 303                                                                 else if ( viewportSize.height > rectHeight )\r
 304                                                                         top = top - rect.bottom + viewportSize.height;\r
 305                                                                 // Align to top, never cutting the panel at top.\r
 306                                                                 else\r
 307                                                                         top = top - rect.top;\r
 308                                                         }\r
 309 \r
 310                                                         // If IE is in RTL, we have troubles with absolute\r
 311                                                         // position and horizontal scrolls. Here we have a\r
 312                                                         // series of hacks to workaround it. (#6146)\r
 313                                                         if ( CKEDITOR.env.ie )\r
 314                                                         {\r
 315                                                                 var offsetParent = new CKEDITOR.dom.element( element.$.offsetParent ),\r
 316                                                                         scrollParent = offsetParent;\r
 317 \r
 318                                                                 // Quirks returns <body>, but standards returns <html>.\r
 319                                                                 if ( scrollParent.getName() == 'html' )\r
 320                                                                         scrollParent = scrollParent.getDocument().getBody();\r
 321 \r
 322                                                                 if ( scrollParent.getComputedStyle( 'direction' ) == 'rtl' )\r
 323                                                                 {\r
 324                                                                         // For IE8, there is not much logic on this, but it works.\r
 325                                                                         if ( CKEDITOR.env.ie8Compat )\r
 326                                                                                 left -= element.getDocument().getDocumentElement().$.scrollLeft * 2;\r
 327                                                                         else\r
 328                                                                                 left -= ( offsetParent.$.scrollWidth - offsetParent.$.clientWidth );\r
 329                                                                 }\r
 330                                                         }\r
 331 \r
 332                                                         // Trigger the onHide event of the previously active panel to prevent\r
 333                                                         // incorrect styles from being applied (#6170)\r
 334                                                         var innerElement = element.getFirst(),\r
 335                                                                 activePanel;\r
 336                                                         if ( ( activePanel = innerElement.getCustomData( 'activePanel' ) ) )\r
 337                                                                 activePanel.onHide && activePanel.onHide.call( this, 1 );\r
 338                                                         innerElement.setCustomData( 'activePanel', this );\r
 339 \r
 340                                                         element.setStyles(\r
 341                                                                 {\r
 342                                                                         top : top + 'px',\r
 343                                                                         left : left + 'px'\r
 344                                                                 } );\r
 345                                                         element.setOpacity( 1 );\r
 346                                                 } , this );\r
 347 \r
 348                                                 panel.isLoaded ? panelLoad() : panel.onLoad = panelLoad;\r
 349 \r
 350                                                 // Set the panel frame focus, so the blur event gets fired.\r
 351                                                 CKEDITOR.tools.setTimeout( function()\r
 352                                                 {\r
 353                                                         iframe.$.contentWindow.focus();\r
 354                                                         // We need this get fired manually because of unfired focus() function.\r
 355                                                         this.allowBlur( true );\r
 356                                                 }, 0, this);\r
 357                                         },  CKEDITOR.env.air ? 200 : 0, this);\r
 358                                 this.visible = 1;\r
 359 \r
 360                                 if ( this.onShow )\r
 361                                         this.onShow.call( this );\r
 362 \r
 363                                 isShowing = 0;\r
 364                         },\r
 365 \r
 366                         hide : function( returnFocus )\r
 367                         {\r
 368                                 if ( this.visible && ( !this.onHide || this.onHide.call( this ) !== true ) )\r
 369                                 {\r
 370                                         this.hideChild();\r
 371                                         // Blur previously focused element. (#6671)\r
 372                                         CKEDITOR.env.gecko && this._.iframe.getFrameDocument().$.activeElement.blur();\r
 373                                         this.element.setStyle( 'display', 'none' );\r
 374                                         this.visible = 0;\r
 375                                         this.element.getFirst().removeCustomData( 'activePanel' );\r
 376 \r
 377                                         // Return focus properly. (#6247)\r
 378                                         var focusReturn = returnFocus !== false && this._.returnFocus;\r
 379                                         if ( focusReturn )\r
 380                                         {\r
 381                                                 // Webkit requires focus moved out panel iframe first.\r
 382                                                 if ( CKEDITOR.env.webkit && focusReturn.type )\r
 383                                                         focusReturn.getWindow().$.focus();\r
 384 \r
 385                                                 focusReturn.focus();\r
 386                                         }\r
 387                                 }\r
 388                         },\r
 389 \r
 390                         allowBlur : function( allow )   // Prevent editor from hiding the panel. #3222.\r
 391                         {\r
 392                                 var panel = this._.panel;\r
 393                                 if ( allow != undefined )\r
 394                                         panel.allowBlur = allow;\r
 395 \r
 396                                 return panel.allowBlur;\r
 397                         },\r
 398 \r
 399                         showAsChild : function( panel, blockName, offsetParent, corner, offsetX, offsetY )\r
 400                         {\r
 401                                 // Skip reshowing of child which is already visible.\r
 402                                 if ( this._.activeChild == panel && panel._.panel._.offsetParentId == offsetParent.getId() )\r
 403                                         return;\r
 404 \r
 405                                 this.hideChild();\r
 406 \r
 407                                 panel.onHide = CKEDITOR.tools.bind( function()\r
 408                                         {\r
 409                                                 // Use a timeout, so we give time for this menu to get\r
 410                                                 // potentially focused.\r
 411                                                 CKEDITOR.tools.setTimeout( function()\r
 412                                                         {\r
 413                                                                 if ( !this._.focused )\r
 414                                                                         this.hide();\r
 415                                                         },\r
 416                                                         0, this );\r
 417                                         },\r
 418                                         this );\r
 419 \r
 420                                 this._.activeChild = panel;\r
 421                                 this._.focused = false;\r
 422 \r
 423                                 panel.showBlock( blockName, offsetParent, corner, offsetX, offsetY );\r
 424 \r
 425                                 /* #3767 IE: Second level menu may not have borders */\r
 426                                 if ( CKEDITOR.env.ie7Compat || ( CKEDITOR.env.ie8 && CKEDITOR.env.ie6Compat ) )\r
 427                                 {\r
 428                                         setTimeout(function()\r
 429                                                 {\r
 430                                                         panel.element.getChild( 0 ).$.style.cssText += '';\r
 431                                                 }, 100);\r
 432                                 }\r
 433                         },\r
 434 \r
 435                         hideChild : function()\r
 436                         {\r
 437                                 var activeChild = this._.activeChild;\r
 438 \r
 439                                 if ( activeChild )\r
 440                                 {\r
 441                                         delete activeChild.onHide;\r
 442                                         // Sub panels don't manage focus. (#7881)\r
 443                                         delete activeChild._.returnFocus;\r
 444                                         delete this._.activeChild;\r
 445                                         activeChild.hide();\r
 446                                 }\r
 447                         }\r
 448                 }\r
 449         });\r
 450 \r
 451         CKEDITOR.on( 'instanceDestroyed', function()\r
 452         {\r
 453                 var isLastInstance = CKEDITOR.tools.isEmpty( CKEDITOR.instances );\r
 454 \r
 455                 for ( var i in panels )\r
 456                 {\r
 457                         var panel = panels[ i ];\r
 458                         // Safe to destroy it since there're no more instances.(#4241)\r
 459                         if ( isLastInstance )\r
 460                                 panel.destroy();\r
 461                         // Panel might be used by other instances, just hide them.(#4552)\r
 462                         else\r
 463                                 panel.element.hide();\r
 464                 }\r
 465                 // Remove the registration.\r
 466                 isLastInstance && ( panels = {} );\r
 467 \r
 468         } );\r
 469 })();\r