[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( 'panel',
   7  {
   8      beforeInit : function( editor )
   9      {
  10          editor.ui.addHandler( CKEDITOR.UI_PANEL, CKEDITOR.ui.panel.handler );
  11      }
  12  });
  13  
  14  /**

  15   * Panel UI element.

  16   * @constant

  17   * @example

  18   */
  19  CKEDITOR.UI_PANEL = 2;
  20  
  21  CKEDITOR.ui.panel = function( document, definition )
  22  {
  23      // Copy all definition properties to this object.

  24      if ( definition )
  25          CKEDITOR.tools.extend( this, definition );
  26  
  27      // Set defaults.

  28      CKEDITOR.tools.extend( this,
  29          {
  30              className : '',
  31              css : []
  32          });
  33  
  34      this.id = CKEDITOR.tools.getNextNumber();
  35      this.document = document;
  36  
  37      this._ =
  38      {
  39          blocks : {}
  40      };
  41  };
  42  
  43  /**

  44   * Transforms a rich combo definition in a {@link CKEDITOR.ui.richCombo}

  45   * instance.

  46   * @type Object

  47   * @example

  48   */
  49  CKEDITOR.ui.panel.handler =
  50  {
  51      create : function( definition )
  52      {
  53          return new CKEDITOR.ui.panel( definition );
  54      }
  55  };
  56  
  57  CKEDITOR.ui.panel.prototype =
  58  {
  59      renderHtml : function( editor )
  60      {
  61          var output = [];
  62          this.render( editor, output );
  63          return output.join( '' );
  64      },
  65  
  66      /**

  67       * Renders the combo.

  68       * @param {CKEDITOR.editor} editor The editor instance which this button is

  69       *        to be used by.

  70       * @param {Array} output The output array to which append the HTML relative

  71       *        to this button.

  72       * @example

  73       */
  74      render : function( editor, output )
  75      {
  76          var id = 'cke_' + this.id;
  77  
  78          output.push(
  79              '<div class="', editor.skinClass ,'"' +
  80                  ' lang="', editor.langCode, '"' +
  81                  ' role="presentation"' +
  82                  // iframe loading need sometime, keep the panel hidden(#4186).

  83                  ' style="display:none;z-index:' + ( editor.config.baseFloatZIndex + 1 ) + '">' +
  84                  '<div' +
  85                      ' id=', id,
  86                      ' dir=', editor.lang.dir,
  87                      ' role="presentation"' +
  88                      ' class="cke_panel cke_', editor.lang.dir );
  89  
  90          if ( this.className )
  91              output.push( ' ', this.className );
  92  
  93          output.push(
  94                  '">' );
  95  
  96          if ( this.forceIFrame || this.css.length )
  97          {
  98              output.push(
  99                          '<iframe id="', id, '_frame"' +
 100                              ' frameborder="0"' +
 101                              ' role="application" src="javascript:void(' );
 102  
 103              output.push(
 104                              // Support for custom document.domain in IE.

 105                              CKEDITOR.env.isCustomDomain() ?
 106                                  '(function(){' +
 107                                      'document.open();' +
 108                                      'document.domain=\'' + document.domain + '\';' +
 109                                      'document.close();' +
 110                                  '})()'
 111                              :
 112                                  '0' );
 113  
 114              output.push(
 115                          ')"></iframe>' );
 116          }
 117  
 118          output.push(
 119                  '</div>' +
 120              '</div>' );
 121  
 122          return id;
 123      },
 124  
 125      getHolderElement : function()
 126      {
 127          var holder = this._.holder;
 128  
 129          if ( !holder )
 130          {
 131              if ( this.forceIFrame || this.css.length )
 132              {
 133                  var iframe = this.document.getById( 'cke_' + this.id + '_frame' ),
 134                      parentDiv = iframe.getParent(),
 135                      dir = parentDiv.getAttribute( 'dir' ),
 136                      className = parentDiv.getParent().getAttribute( 'class' ),
 137                      langCode = parentDiv.getParent().getAttribute( 'lang' ),
 138                      doc = iframe.getFrameDocument();
 139                  // Initialize the IFRAME document body.

 140                  doc.$.open();
 141  
 142                  // Support for custom document.domain in IE.

 143                  if ( CKEDITOR.env.isCustomDomain() )
 144                      doc.$.domain = document.domain;
 145  
 146                  var onLoad = CKEDITOR.tools.addFunction( CKEDITOR.tools.bind( function( ev )
 147                      {
 148                          this.isLoaded = true;
 149                          if ( this.onLoad )
 150                              this.onLoad();
 151                      }, this ) );
 152  
 153                  doc.$.write(
 154                      '<!DOCTYPE html>' +
 155                      '<html dir="' + dir + '" class="' + className + '_container" lang="' + langCode + '">' +
 156                          '<head>' +
 157                              '<style>.' + className + '_container{visibility:hidden}</style>' +
 158                          '</head>' +
 159                          '<body class="cke_' + dir + ' cke_panel_frame ' + CKEDITOR.env.cssClass + '" style="margin:0;padding:0"' +
 160                          ' onload="( window.CKEDITOR || window.parent.CKEDITOR ).tools.callFunction(' + onLoad + ');"></body>' +
 161                          // It looks strange, but for FF2, the styles must go

 162                          // after <body>, so it (body) becames immediatelly

 163                          // available. (#3031)

 164                          CKEDITOR.tools.buildStyleHtml( this.css ) +
 165                      '<\/html>' );
 166                  doc.$.close();
 167  
 168                  var win = doc.getWindow();
 169  
 170                  // Register the CKEDITOR global.

 171                  win.$.CKEDITOR = CKEDITOR;
 172  
 173                  doc.on( 'keydown', function( evt )
 174                      {
 175                          var keystroke = evt.data.getKeystroke(),
 176                              dir = this.document.getById( 'cke_' + this.id ).getAttribute( 'dir' );
 177  
 178                          // Delegate key processing to block.

 179                          if ( this._.onKeyDown && this._.onKeyDown( keystroke ) === false )
 180                          {
 181                              evt.data.preventDefault();
 182                              return;
 183                          }
 184  
 185                          // ESC/ARROW-LEFT(ltr) OR ARROW-RIGHT(rtl)

 186                          if ( keystroke == 27 || keystroke == ( dir == 'rtl' ? 39 : 37 ) )
 187                          {
 188                              if ( this.onEscape && this.onEscape( keystroke ) === false )
 189                                  evt.data.preventDefault( );
 190                          }
 191                      },
 192                      this );
 193  
 194                  holder = doc.getBody();
 195                  holder.unselectable();
 196              }
 197              else
 198                  holder = this.document.getById( 'cke_' + this.id );
 199  
 200              this._.holder = holder;
 201          }
 202  
 203          return holder;
 204      },
 205  
 206      addBlock : function( name, block )
 207      {
 208          block = this._.blocks[ name ] = block instanceof CKEDITOR.ui.panel.block ?  block
 209                  : new CKEDITOR.ui.panel.block( this.getHolderElement(), block );
 210  
 211          if ( !this._.currentBlock )
 212              this.showBlock( name );
 213  
 214          return block;
 215      },
 216  
 217      getBlock : function( name )
 218      {
 219          return this._.blocks[ name ];
 220      },
 221  
 222      showBlock : function( name )
 223      {
 224          var blocks = this._.blocks,
 225              block = blocks[ name ],
 226              current = this._.currentBlock,
 227              holder = this.forceIFrame ?
 228                  this.document.getById( 'cke_' + this.id + '_frame' )
 229                  : this._.holder;
 230  
 231          // Disable context menu for block panel.

 232          holder.getParent().getParent().disableContextMenu();
 233  
 234          if ( current )
 235          {
 236              // Clean up the current block's effects on holder.

 237              holder.removeAttributes( current.attributes );
 238              current.hide();
 239          }
 240  
 241          this._.currentBlock = block;
 242  
 243          holder.setAttributes( block.attributes );
 244          CKEDITOR.fire( 'ariaWidget', holder );
 245  
 246          // Reset the focus index, so it will always go into the first one.

 247          block._.focusIndex = -1;
 248  
 249          this._.onKeyDown = block.onKeyDown && CKEDITOR.tools.bind( block.onKeyDown, block );
 250  
 251          block.onMark = function( item )
 252          {
 253              holder.setAttribute( 'aria-activedescendant', item.getId() + '_option' );
 254          };
 255  
 256          block.onUnmark = function()
 257          {
 258              holder.removeAttribute( 'aria-activedescendant' );
 259          };
 260  
 261          block.show();
 262  
 263          return block;
 264      },
 265  
 266      destroy : function()
 267      {
 268          this.element && this.element.remove();
 269      }
 270  };
 271  
 272  CKEDITOR.ui.panel.block = CKEDITOR.tools.createClass(
 273  {
 274      $ : function( blockHolder, blockDefinition )
 275      {
 276          this.element = blockHolder.append(
 277              blockHolder.getDocument().createElement( 'div',
 278                  {
 279                      attributes :
 280                      {
 281                          'tabIndex' : -1,
 282                          'class' : 'cke_panel_block',
 283                          'role' : 'presentation'
 284                      },
 285                      styles :
 286                      {
 287                          display : 'none'
 288                      }
 289                  }) );
 290  
 291          // Copy all definition properties to this object.

 292          if ( blockDefinition )
 293              CKEDITOR.tools.extend( this, blockDefinition );
 294  
 295          if ( !this.attributes.title )
 296              this.attributes.title = this.attributes[ 'aria-label' ];
 297  
 298          this.keys = {};
 299  
 300          this._.focusIndex = -1;
 301  
 302          // Disable context menu for panels.

 303          this.element.disableContextMenu();
 304      },
 305  
 306      _ : {
 307  
 308          /**

 309           * Mark the item specified by the index as current activated.

 310           */
 311          markItem: function( index )
 312          {
 313              if ( index == -1 )
 314                  return;
 315              var links = this.element.getElementsByTag( 'a' );
 316              var item = links.getItem( this._.focusIndex = index );
 317  
 318              // Safari need focus on the iframe window first(#3389), but we need

 319              // lock the blur to avoid hiding the panel.

 320              if ( CKEDITOR.env.webkit )
 321                  item.getDocument().getWindow().focus();
 322              item.focus();
 323  
 324              this.onMark && this.onMark( item );
 325          }
 326      },
 327  
 328      proto :
 329      {
 330          show : function()
 331          {
 332              this.element.setStyle( 'display', '' );
 333          },
 334  
 335          hide : function()
 336          {
 337              if ( !this.onHide || this.onHide.call( this )  !== true )
 338                  this.element.setStyle( 'display', 'none' );
 339          },
 340  
 341          onKeyDown : function( keystroke )
 342          {
 343              var keyAction = this.keys[ keystroke ];
 344              switch ( keyAction )
 345              {
 346                  // Move forward.

 347                  case 'next' :
 348                      var index = this._.focusIndex,
 349                          links = this.element.getElementsByTag( 'a' ),
 350                          link;
 351  
 352                      while ( ( link = links.getItem( ++index ) ) )
 353                      {
 354                          // Move the focus only if the element is marked with

 355                          // the _cke_focus and it it's visible (check if it has

 356                          // width).

 357                          if ( link.getAttribute( '_cke_focus' ) && link.$.offsetWidth )
 358                          {
 359                              this._.focusIndex = index;
 360                              link.focus();
 361                              break;
 362                          }
 363                      }
 364                      return false;
 365  
 366                  // Move backward.

 367                  case 'prev' :
 368                      index = this._.focusIndex;
 369                      links = this.element.getElementsByTag( 'a' );
 370  
 371                      while ( index > 0 && ( link = links.getItem( --index ) ) )
 372                      {
 373                          // Move the focus only if the element is marked with

 374                          // the _cke_focus and it it's visible (check if it has

 375                          // width).

 376                          if ( link.getAttribute( '_cke_focus' ) && link.$.offsetWidth )
 377                          {
 378                              this._.focusIndex = index;
 379                              link.focus();
 380                              break;
 381                          }
 382                      }
 383                      return false;
 384  
 385                  case 'click' :
 386                      index = this._.focusIndex;
 387                      link = index >= 0 && this.element.getElementsByTag( 'a' ).getItem( index );
 388  
 389                      if ( link )
 390                          link.$.click ? link.$.click() : link.$.onclick();
 391  
 392                      return false;
 393              }
 394  
 395              return true;
 396          }
 397      }
 398  });