_source/plugins/floatpanel/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2009, 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 =\r
  20                         doc.getUniqueId() +\r
  21                         '-' + parentElement.getUniqueId() +\r
  22                         '-' + editor.skinName +\r
  23                         '-' + editor.lang.dir +\r
  24                         ( ( editor.uiColor && ( '-' + editor.uiColor ) ) || '' ) +\r
  25                         ( ( definition.css && ( '-' + definition.css ) ) || '' ) +\r
  26                         ( ( level && ( '-' + level ) ) || '' );\r
  27 \r
  28                 var panel = panels[ key ];\r
  29 \r
  30                 if ( !panel )\r
  31                 {\r
  32                         panel = panels[ key ] = new CKEDITOR.ui.panel( doc, definition );\r
  33                         panel.element = parentElement.append( CKEDITOR.dom.element.createFromHtml( panel.renderHtml( editor ), doc ) );\r
  34 \r
  35                         panel.element.setStyles(\r
  36                                 {\r
  37                                         display : 'none',\r
  38                                         position : 'absolute'\r
  39                                 });\r
  40                 }\r
  41 \r
  42                 return panel;\r
  43         }\r
  44 \r
  45         CKEDITOR.ui.floatPanel = CKEDITOR.tools.createClass(\r
  46         {\r
  47                 $ : function( editor, parentElement, definition, level )\r
  48                 {\r
  49                         definition.forceIFrame = true;\r
  50 \r
  51                         var doc = parentElement.getDocument(),\r
  52                                 panel = getPanel( editor, doc, parentElement, definition, level || 0 ),\r
  53                                 element = panel.element,\r
  54                                 iframe = element.getFirst().getFirst();\r
  55 \r
  56                         this.element = element;\r
  57 \r
  58                         // Register panels to editor for easy destroying ( #4241 ).\r
  59                         editor.panels ? editor.panels.push( element ) : editor.panels = [ element ];\r
  60 \r
  61 \r
  62                         this._ =\r
  63                         {\r
  64                                 // The panel that will be floating.\r
  65                                 panel : panel,\r
  66                                 parentElement : parentElement,\r
  67                                 definition : definition,\r
  68                                 document : doc,\r
  69                                 iframe : iframe,\r
  70                                 children : [],\r
  71                                 dir : editor.lang.dir\r
  72                         };\r
  73                 },\r
  74 \r
  75                 proto :\r
  76                 {\r
  77                         addBlock : function( name, block )\r
  78                         {\r
  79                                 return this._.panel.addBlock( name, block );\r
  80                         },\r
  81 \r
  82                         addListBlock : function( name, multiSelect )\r
  83                         {\r
  84                                 return this._.panel.addListBlock( name, multiSelect );\r
  85                         },\r
  86 \r
  87                         getBlock : function( name )\r
  88                         {\r
  89                                 return this._.panel.getBlock( name );\r
  90                         },\r
  91 \r
  92                         /*\r
  93                                 corner (LTR):\r
  94                                         1 = top-left\r
  95                                         2 = top-right\r
  96                                         3 = bottom-right\r
  97                                         4 = bottom-left\r
  98 \r
  99                                 corner (RTL):\r
 100                                         1 = top-right\r
 101                                         2 = top-left\r
 102                                         3 = bottom-left\r
 103                                         4 = bottom-right\r
 104                          */\r
 105                         showBlock : function( name, offsetParent, corner, offsetX, offsetY )\r
 106                         {\r
 107                                 var panel = this._.panel,\r
 108                                         block = panel.showBlock( name );\r
 109 \r
 110                                 this.allowBlur( false );\r
 111                                 isShowing = true;\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 : '-3000px',\r
 138                                                 visibility : 'hidden',\r
 139                                                 opacity : '0',  // FF3 is ignoring "visibility"\r
 140                                                 display : ''\r
 141                                         });\r
 142 \r
 143                                 // Configure the IFrame blur event. Do that only once.\r
 144                                 if ( !this._.blurSet )\r
 145                                 {\r
 146                                         // Non IE prefer the event into a window object.\r
 147                                         var focused = CKEDITOR.env.ie ? iframe : new CKEDITOR.dom.window( iframe.$.contentWindow );\r
 148 \r
 149                                         // With addEventListener compatible browsers, we must\r
 150                                         // useCapture when registering the focus/blur events to\r
 151                                         // guarantee they will be firing in all situations. (#3068, #3222 )\r
 152                                         CKEDITOR.event.useCapture = true;\r
 153 \r
 154                                         focused.on( 'blur', function( ev )\r
 155                                                 {\r
 156                                                         if ( CKEDITOR.env.ie && !this.allowBlur() )\r
 157                                                                 return;\r
 158 \r
 159                                                         // As we are using capture to register the listener,\r
 160                                                         // the blur event may get fired even when focusing\r
 161                                                         // inside the window itself, so we must ensure the\r
 162                                                         // target is out of it.\r
 163                                                         var target = ev.data.getTarget(),\r
 164                                                                 targetWindow = target.getWindow && target.getWindow();\r
 165 \r
 166                                                         if ( targetWindow && targetWindow.equals( focused ) )\r
 167                                                                 return;\r
 168 \r
 169                                                         if ( this.visible && !this._.activeChild && !isShowing )\r
 170                                                                 this.hide();\r
 171                                                 },\r
 172                                                 this );\r
 173 \r
 174                                         focused.on( 'focus', function()\r
 175                                                 {\r
 176                                                         this._.focused = true;\r
 177                                                         this.hideChild();\r
 178                                                         this.allowBlur( true );\r
 179                                                 },\r
 180                                                 this );\r
 181 \r
 182                                         CKEDITOR.event.useCapture = false;\r
 183 \r
 184                                         this._.blurSet = 1;\r
 185                                 }\r
 186 \r
 187                                 panel.onEscape = CKEDITOR.tools.bind( function()\r
 188                                         {\r
 189                                                 this.onEscape && this.onEscape();\r
 190                                         },\r
 191                                         this );\r
 192 \r
 193                                 CKEDITOR.tools.setTimeout( function()\r
 194                                         {\r
 195                                                 if ( rtl )\r
 196                                                         left -= element.$.offsetWidth;\r
 197 \r
 198                                                 element.setStyles(\r
 199                                                         {\r
 200                                                                 left : left + 'px',\r
 201                                                                 visibility      : '',\r
 202                                                                 opacity : '1'   // FF3 is ignoring "visibility"\r
 203                                                         });\r
 204 \r
 205                                                 if ( block.autoSize )\r
 206                                                 {\r
 207                                                         function setHeight()\r
 208                                                         {\r
 209                                                                 var target = element.getFirst();\r
 210                                                                 var height = block.element.$.scrollHeight;\r
 211 \r
 212                                                                 // Account for extra height needed due to IE quirks box model bug:\r
 213                                                                 // http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug\r
 214                                                                 // (#3426)\r
 215                                                                 if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && height > 0 )\r
 216                                                                         height += ( target.$.offsetHeight || 0 ) - ( target.$.clientHeight || 0 );\r
 217 \r
 218                                                                 target.setStyle( 'height', height + 'px' );\r
 219 \r
 220                                                                 // Fix IE < 8 visibility.\r
 221                                                                 panel._.currentBlock.element.setStyle( 'display', 'none' ).removeStyle( 'display' );\r
 222                                                         }\r
 223 \r
 224                                                         if ( panel.isLoaded )\r
 225                                                                 setHeight();\r
 226                                                         else\r
 227                                                                 panel.onLoad = setHeight;\r
 228                                                 }\r
 229                                                 else\r
 230                                                         element.getFirst().removeStyle( 'height' );\r
 231 \r
 232                                                 // Set the IFrame focus, so the blur event gets fired.\r
 233                                                 CKEDITOR.tools.setTimeout( function()\r
 234                                                         {\r
 235                                                                 if ( definition.voiceLabel )\r
 236                                                                 {\r
 237                                                                         if ( CKEDITOR.env.gecko )\r
 238                                                                         {\r
 239                                                                                 var container = iframe.getParent();\r
 240                                                                                 container.setAttribute( 'role', 'region' );\r
 241                                                                                 container.setAttribute( 'title', definition.voiceLabel );\r
 242                                                                                 iframe.setAttribute( 'role', 'region' );\r
 243                                                                                 iframe.setAttribute( 'title', ' ' );\r
 244                                                                         }\r
 245                                                                 }\r
 246                                                                 if ( CKEDITOR.env.ie && CKEDITOR.env.quirks )\r
 247                                                                         iframe.focus();\r
 248                                                                 else\r
 249                                                                         iframe.$.contentWindow.focus();\r
 250 \r
 251                                                                 // We need this get fired manually because of unfired focus() function.\r
 252                                                                 if ( CKEDITOR.env.ie && !CKEDITOR.env.quirks )\r
 253                                                                         this.allowBlur( true );\r
 254                                                         }, 0, this);\r
 255                                         }, 0, this);\r
 256                                 this.visible = 1;\r
 257 \r
 258                                 if ( this.onShow )\r
 259                                         this.onShow.call( this );\r
 260 \r
 261                                 isShowing = false;\r
 262                         },\r
 263 \r
 264                         hide : function()\r
 265                         {\r
 266                                 if ( this.visible && ( !this.onHide || this.onHide.call( this ) !== true ) )\r
 267                                 {\r
 268                                         this.hideChild();\r
 269                                         this.element.setStyle( 'display', 'none' );\r
 270                                         this.visible = 0;\r
 271                                 }\r
 272                         },\r
 273 \r
 274                         allowBlur : function( allow )   // Prevent editor from hiding the panel. #3222.\r
 275                         {\r
 276                                 var panel = this._.panel;\r
 277                                 if ( allow != undefined )\r
 278                                         panel.allowBlur = allow;\r
 279 \r
 280                                 return panel.allowBlur;\r
 281                         },\r
 282 \r
 283                         showAsChild : function( panel, blockName, offsetParent, corner, offsetX, offsetY )\r
 284                         {\r
 285                                 // Skip reshowing of child which is already visible.\r
 286                                 if ( this._.activeChild == panel && panel._.panel._.offsetParentId == offsetParent.getId() )\r
 287                                         return;\r
 288 \r
 289                                 this.hideChild();\r
 290 \r
 291                                 panel.onHide = CKEDITOR.tools.bind( function()\r
 292                                         {\r
 293                                                 // Use a timeout, so we give time for this menu to get\r
 294                                                 // potentially focused.\r
 295                                                 CKEDITOR.tools.setTimeout( function()\r
 296                                                         {\r
 297                                                                 if ( !this._.focused )\r
 298                                                                         this.hide();\r
 299                                                         },\r
 300                                                         0, this );\r
 301                                         },\r
 302                                         this );\r
 303 \r
 304                                 this._.activeChild = panel;\r
 305                                 this._.focused = false;\r
 306 \r
 307                                 panel.showBlock( blockName, offsetParent, corner, offsetX, offsetY );\r
 308 \r
 309                                 /* #3767 IE: Second level menu may not have borders */\r
 310                                 if ( CKEDITOR.env.ie7Compat || ( CKEDITOR.env.ie8 && CKEDITOR.env.ie6Compat ) )\r
 311                                 {\r
 312                                         setTimeout(function()\r
 313                                                 {\r
 314                                                         panel.element.getChild( 0 ).$.style.cssText += '';\r
 315                                                 }, 100);\r
 316                                 }\r
 317                         },\r
 318 \r
 319                         hideChild : function()\r
 320                         {\r
 321                                 var activeChild = this._.activeChild;\r
 322 \r
 323                                 if ( activeChild )\r
 324                                 {\r
 325                                         delete activeChild.onHide;\r
 326                                         delete this._.activeChild;\r
 327                                         activeChild.hide();\r
 328                                 }\r
 329                         }\r
 330                 }\r
 331         });\r
 332 })();\r