[Summary view] [Print] [Text view]

   1  /*

   2  Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.

   3  For licensing, see LICENSE.html or http://ckeditor.com/license

   4  */
   5  
   6  CKEDITOR.plugins.add( 'floatpanel',
   7  {
   8      requires : [ 'panel' ]
   9  });
  10  
  11  (function()
  12  {
  13      var panels = {};
  14      var isShowing = false;
  15  
  16  	function getPanel( editor, doc, parentElement, definition, level )
  17      {
  18          // Generates the panel key: docId-eleId-skinName-langDir[-uiColor][-CSSs][-level]

  19          var key =
  20              doc.getUniqueId() +
  21              '-' + parentElement.getUniqueId() +
  22              '-' + editor.skinName +
  23              '-' + editor.lang.dir +
  24              ( ( editor.uiColor && ( '-' + editor.uiColor ) ) || '' ) +
  25              ( ( definition.css && ( '-' + definition.css ) ) || '' ) +
  26              ( ( level && ( '-' + level ) ) || '' );
  27  
  28          var panel = panels[ key ];
  29  
  30          if ( !panel )
  31          {
  32              panel = panels[ key ] = new CKEDITOR.ui.panel( doc, definition );
  33              panel.element = parentElement.append( CKEDITOR.dom.element.createFromHtml( panel.renderHtml( editor ), doc ) );
  34  
  35              panel.element.setStyles(
  36                  {
  37                      display : 'none',
  38                      position : 'absolute'
  39                  });
  40          }
  41  
  42          return panel;
  43      }
  44  
  45      CKEDITOR.ui.floatPanel = CKEDITOR.tools.createClass(
  46      {
  47          $ : function( editor, parentElement, definition, level )
  48          {
  49              definition.forceIFrame = true;
  50  
  51              var doc = parentElement.getDocument(),
  52                  panel = getPanel( editor, doc, parentElement, definition, level || 0 ),
  53                  element = panel.element,
  54                  iframe = element.getFirst().getFirst();
  55  
  56              this.element = element;
  57  
  58              this._ =
  59              {
  60                  // The panel that will be floating.

  61                  panel : panel,
  62                  parentElement : parentElement,
  63                  definition : definition,
  64                  document : doc,
  65                  iframe : iframe,
  66                  children : [],
  67                  dir : editor.lang.dir
  68              };
  69          },
  70  
  71          proto :
  72          {
  73              addBlock : function( name, block )
  74              {
  75                  return this._.panel.addBlock( name, block );
  76              },
  77  
  78              addListBlock : function( name, multiSelect )
  79              {
  80                  return this._.panel.addListBlock( name, multiSelect );
  81              },
  82  
  83              getBlock : function( name )
  84              {
  85                  return this._.panel.getBlock( name );
  86              },
  87  
  88              /*

  89                  corner (LTR):

  90                      1 = top-left

  91                      2 = top-right

  92                      3 = bottom-right

  93                      4 = bottom-left

  94  

  95                  corner (RTL):

  96                      1 = top-right

  97                      2 = top-left

  98                      3 = bottom-left

  99                      4 = bottom-right

 100               */
 101              showBlock : function( name, offsetParent, corner, offsetX, offsetY )
 102              {
 103                  var panel = this._.panel,
 104                      block = panel.showBlock( name );
 105  
 106                  this.allowBlur( false );
 107                  isShowing = true;
 108  
 109                  var element = this.element,
 110                      iframe = this._.iframe,
 111                      definition = this._.definition,
 112                      position = offsetParent.getDocumentPosition( element.getDocument() ),
 113                      rtl = this._.dir == 'rtl';
 114  
 115                  var left    = position.x + ( offsetX || 0 ),
 116                      top        = position.y + ( offsetY || 0 );
 117  
 118                  // Floating panels are off by (-1px, 0px) in RTL mode. (#3438)

 119                  if ( rtl && ( corner == 1 || corner == 4 ) )
 120                      left += offsetParent.$.offsetWidth;
 121                  else if ( !rtl && ( corner == 2 || corner == 3 ) )
 122                      left += offsetParent.$.offsetWidth - 1;
 123  
 124                  if ( corner == 3 || corner == 4 )
 125                      top += offsetParent.$.offsetHeight - 1;
 126  
 127                  // Memorize offsetParent by it's ID.

 128                  this._.panel._.offsetParentId = offsetParent.getId();
 129  
 130                  element.setStyles(
 131                      {
 132                          top : '-30000px',
 133                          display    : ''
 134                      });
 135                  // Don't use display or visibility style because we need to

 136                  // calculate the rendering layout later and focus the element.

 137                  element.setOpacity( 0 );
 138  
 139                  // To allow the context menu to decrease back their width

 140                  element.getFirst().removeStyle( 'width' );
 141  
 142                  // Configure the IFrame blur event. Do that only once.

 143                  if ( !this._.blurSet )
 144                  {
 145                      // Non IE prefer the event into a window object.

 146                      var focused = CKEDITOR.env.ie ? iframe : new CKEDITOR.dom.window( iframe.$.contentWindow );
 147  
 148                      // With addEventListener compatible browsers, we must

 149                      // useCapture when registering the focus/blur events to

 150                      // guarantee they will be firing in all situations. (#3068, #3222 )

 151                      CKEDITOR.event.useCapture = true;
 152  
 153                      focused.on( 'blur', function( ev )
 154                          {
 155                              if ( !this.allowBlur() )
 156                                  return;
 157  
 158                              // As we are using capture to register the listener,

 159                              // the blur event may get fired even when focusing

 160                              // inside the window itself, so we must ensure the

 161                              // target is out of it.

 162                              var target;
 163                              if ( CKEDITOR.env.ie && !this.allowBlur()
 164                                   || ( target = ev.data.getTarget() )
 165                                        && target.getName && target.getName() != 'iframe' )
 166                                  return;
 167  
 168                              if ( this.visible && !this._.activeChild && !isShowing )
 169                                  this.hide();
 170                          },
 171                          this );
 172  
 173                      focused.on( 'focus', function()
 174                          {
 175                              this._.focused = true;
 176                              this.hideChild();
 177                              this.allowBlur( true );
 178                          },
 179                          this );
 180  
 181                      CKEDITOR.event.useCapture = false;
 182  
 183                      this._.blurSet = 1;
 184                  }
 185  
 186                  panel.onEscape = CKEDITOR.tools.bind( function( keystroke )
 187                      {
 188                          if ( this.onEscape && this.onEscape( keystroke ) === false )
 189                              return false;
 190                      },
 191                      this );
 192  
 193                  CKEDITOR.tools.setTimeout( function()
 194                      {
 195                          if ( rtl )
 196                              left -= element.$.offsetWidth;
 197  
 198                          var panelLoad = CKEDITOR.tools.bind( function ()
 199                          {
 200                              var target = element.getFirst();
 201  
 202                              if ( block.autoSize )
 203                              {
 204                                  // We must adjust first the width or IE6 could include extra lines in the height computation

 205                                  var widthNode = block.element.$;
 206  
 207                                  if ( CKEDITOR.env.gecko || CKEDITOR.env.opera )
 208                                      widthNode = widthNode.parentNode;
 209  
 210                                  if ( CKEDITOR.env.ie )
 211                                      widthNode = widthNode.document.body;
 212  
 213                                  var width = widthNode.scrollWidth;
 214                                  // Account for extra height needed due to IE quirks box model bug:

 215                                  // http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

 216                                  // (#3426)

 217                                  if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && width > 0 )
 218                                      width += ( target.$.offsetWidth || 0 ) - ( target.$.clientWidth || 0 );
 219                                  // A little extra at the end.

 220                                  // If not present, IE6 might break into the next line, but also it looks better this way

 221                                  width += 4 ;
 222  
 223                                  target.setStyle( 'width', width + 'px' );
 224  
 225                                  // IE doesn't compute the scrollWidth if a filter is applied previously

 226                                  block.element.addClass( 'cke_frameLoaded' );
 227  
 228                                  var height = block.element.$.scrollHeight;
 229  
 230                                  // Account for extra height needed due to IE quirks box model bug:

 231                                  // http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

 232                                  // (#3426)

 233                                  if ( CKEDITOR.env.ie && CKEDITOR.env.quirks && height > 0 )
 234                                      height += ( target.$.offsetHeight || 0 ) - ( target.$.clientHeight || 0 );
 235  
 236                                  target.setStyle( 'height', height + 'px' );
 237  
 238                                  // Fix IE < 8 visibility.

 239                                  panel._.currentBlock.element.setStyle( 'display', 'none' ).removeStyle( 'display' );
 240                              }
 241                              else
 242                                  target.removeStyle( 'height' );
 243  
 244                              var panelElement = panel.element,
 245                                  panelWindow = panelElement.getWindow(),
 246                                  windowScroll = panelWindow.getScrollPosition(),
 247                                  viewportSize = panelWindow.getViewPaneSize(),
 248                                  panelSize =
 249                                  {
 250                                      'height' : panelElement.$.offsetHeight,
 251                                      'width' : panelElement.$.offsetWidth
 252                                  };
 253  
 254                              // If the menu is horizontal off, shift it toward

 255                              // the opposite language direction.

 256                              if ( rtl ? left < 0 : left + panelSize.width > viewportSize.width + windowScroll.x )
 257                                  left += ( panelSize.width * ( rtl ? 1 : -1 ) );
 258  
 259                              // Vertical off screen is simpler.

 260                              if ( top + panelSize.height > viewportSize.height + windowScroll.y )
 261                                  top -= panelSize.height;
 262  
 263                              element.setStyles(
 264                                  {
 265                                      top : top + 'px',
 266                                      left : left + 'px'
 267                                  } );
 268                              element.setOpacity( 1 );
 269                          } , this );
 270  
 271                          panel.isLoaded ? panelLoad() : panel.onLoad = panelLoad;
 272  
 273                          // Set the panel frame focus, so the blur event gets fired.

 274                          CKEDITOR.tools.setTimeout( function()
 275                          {
 276                              iframe.$.contentWindow.focus();
 277                              // We need this get fired manually because of unfired focus() function.

 278                              this.allowBlur( true );
 279                          }, 0, this);
 280                      }, 0, this);
 281                  this.visible = 1;
 282  
 283                  if ( this.onShow )
 284                      this.onShow.call( this );
 285  
 286                  isShowing = false;
 287              },
 288  
 289              hide : function()
 290              {
 291                  if ( this.visible && ( !this.onHide || this.onHide.call( this ) !== true ) )
 292                  {
 293                      this.hideChild();
 294                      this.element.setStyle( 'display', 'none' );
 295                      this.visible = 0;
 296                  }
 297              },
 298  
 299              allowBlur : function( allow )    // Prevent editor from hiding the panel. #3222.
 300              {
 301                  var panel = this._.panel;
 302                  if ( allow != undefined )
 303                      panel.allowBlur = allow;
 304  
 305                  return panel.allowBlur;
 306              },
 307  
 308              showAsChild : function( panel, blockName, offsetParent, corner, offsetX, offsetY )
 309              {
 310                  // Skip reshowing of child which is already visible.

 311                  if ( this._.activeChild == panel && panel._.panel._.offsetParentId == offsetParent.getId() )
 312                      return;
 313  
 314                  this.hideChild();
 315  
 316                  panel.onHide = CKEDITOR.tools.bind( function()
 317                      {
 318                          // Use a timeout, so we give time for this menu to get

 319                          // potentially focused.

 320                          CKEDITOR.tools.setTimeout( function()
 321                              {
 322                                  if ( !this._.focused )
 323                                      this.hide();
 324                              },
 325                              0, this );
 326                      },
 327                      this );
 328  
 329                  this._.activeChild = panel;
 330                  this._.focused = false;
 331  
 332                  panel.showBlock( blockName, offsetParent, corner, offsetX, offsetY );
 333  
 334                  /* #3767 IE: Second level menu may not have borders */

 335                  if ( CKEDITOR.env.ie7Compat || ( CKEDITOR.env.ie8 && CKEDITOR.env.ie6Compat ) )
 336                  {
 337                      setTimeout(function()
 338                          {
 339                              panel.element.getChild( 0 ).$.style.cssText += '';
 340                          }, 100);
 341                  }
 342              },
 343  
 344              hideChild : function()
 345              {
 346                  var activeChild = this._.activeChild;
 347  
 348                  if ( activeChild )
 349                  {
 350                      delete activeChild.onHide;
 351                      delete this._.activeChild;
 352                      activeChild.hide();
 353                  }
 354              }
 355          }
 356      });
 357  
 358      CKEDITOR.on( 'instanceDestroyed', function()
 359      {
 360          var isLastInstance = CKEDITOR.tools.isEmpty( CKEDITOR.instances );
 361  
 362          for ( var i in panels )
 363          {
 364              var panel = panels[ i ];
 365              // Safe to destroy it since there're no more instances.(#4241)

 366              if ( isLastInstance )
 367                  panel.destroy();
 368              // Panel might be used by other instances, just hide them.(#4552)

 369              else
 370                  panel.element.hide();
 371          }
 372          // Remove the registration.

 373          isLastInstance && ( panels = {} );
 374  
 375      } );
 376  })();