_source/plugins/panel/plugin.js

   1 /*
   2 Copyright (c) 2003-2011, 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 = 'panel';
  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.getNextId();
  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 = 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( 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
 140                                 var onLoad = CKEDITOR.tools.addFunction( CKEDITOR.tools.bind( function( ev )
 141                                         {
 142                                                 this.isLoaded = true;
 143                                                 if ( this.onLoad )
 144                                                         this.onLoad();
 145                                         }, this ) );
 146
 147                                 var data =
 148                                         '<!DOCTYPE html>' +
 149                                         '<html dir="' + dir + '" class="' + className + '_container" lang="' + langCode + '">' +
 150                                                 '<head>' +
 151                                                         '<style>.' + className + '_container{visibility:hidden}</style>' +
 152                                                 '</head>' +
 153                                                 '<body class="cke_' + dir + ' cke_panel_frame ' + CKEDITOR.env.cssClass + '" style="margin:0;padding:0"' +
 154                                                 ' onload="( window.CKEDITOR || window.parent.CKEDITOR ).tools.callFunction(' + onLoad + ');"></body>' +
 155                                                 // It looks strange, but for FF2, the styles must go
 156                                                 // after <body>, so it (body) becames immediatelly
 157                                                 // available. (#3031)
 158                                                 CKEDITOR.tools.buildStyleHtml( this.css ) +
 159                                         '<\/html>';
 160
 161                                 doc.write( data );
 162
 163                                 var win = doc.getWindow();
 164
 165                                 // Register the CKEDITOR global.
 166                                 win.$.CKEDITOR = CKEDITOR;
 167
 168                                 // Arrow keys for scrolling is only preventable with 'keypress' event in Opera (#4534).
 169                                 doc.on( 'key' + ( CKEDITOR.env.opera? 'press':'down' ), function( evt )
 170                                         {
 171                                                 var keystroke = evt.data.getKeystroke(),
 172                                                         dir = this.document.getById( this.id ).getAttribute( 'dir' );
 173
 174                                                 // Delegate key processing to block.
 175                                                 if ( this._.onKeyDown && this._.onKeyDown( keystroke ) === false )
 176                                                 {
 177                                                         evt.data.preventDefault();
 178                                                         return;
 179                                                 }
 180
 181                                                 // ESC/ARROW-LEFT(ltr) OR ARROW-RIGHT(rtl)
 182                                                 if ( keystroke == 27 || keystroke == ( dir == 'rtl' ? 39 : 37 ) )
 183                                                 {
 184                                                         if ( this.onEscape && this.onEscape( keystroke ) === false )
 185                                                                 evt.data.preventDefault();
 186                                                 }
 187                                         },
 188                                         this );
 189
 190                                 holder = doc.getBody();
 191                                 holder.unselectable();
 192                                 CKEDITOR.env.air && CKEDITOR.tools.callFunction( onLoad );
 193                         }
 194                         else
 195                                 holder = this.document.getById( this.id );
 196
 197                         this._.holder = holder;
 198                 }
 199
 200                 return holder;
 201         },
 202
 203         addBlock : function( name, block )
 204         {
 205                 block = this._.blocks[ name ] = block instanceof CKEDITOR.ui.panel.block ?  block
 206                                 : new CKEDITOR.ui.panel.block( this.getHolderElement(), block );
 207
 208                 if ( !this._.currentBlock )
 209                         this.showBlock( name );
 210
 211                 return block;
 212         },
 213
 214         getBlock : function( name )
 215         {
 216                 return this._.blocks[ name ];
 217         },
 218
 219         showBlock : function( name )
 220         {
 221                 var blocks = this._.blocks,
 222                         block = blocks[ name ],
 223                         current = this._.currentBlock,
 224                         holder = this.forceIFrame ?
 225                                 this.document.getById( this.id + '_frame' )
 226                                 : this._.holder;
 227
 228                 // Disable context menu for block panel.
 229                 holder.getParent().getParent().disableContextMenu();
 230
 231                 if ( current )
 232                 {
 233                         // Clean up the current block's effects on holder.
 234                         holder.removeAttributes( current.attributes );
 235                         current.hide();
 236                 }
 237
 238                 this._.currentBlock = block;
 239
 240                 holder.setAttributes( block.attributes );
 241                 CKEDITOR.fire( 'ariaWidget', holder );
 242
 243                 // Reset the focus index, so it will always go into the first one.
 244                 block._.focusIndex = -1;
 245
 246                 this._.onKeyDown = block.onKeyDown && CKEDITOR.tools.bind( block.onKeyDown, block );
 247
 248                 block.onMark = function( item )
 249                 {
 250                         holder.setAttribute( 'aria-activedescendant', item.getId() + '_option' );
 251                 };
 252
 253                 block.onUnmark = function()
 254                 {
 255                         holder.removeAttribute( 'aria-activedescendant' );
 256                 };
 257
 258                 block.show();
 259
 260                 return block;
 261         },
 262
 263         destroy : function()
 264         {
 265                 this.element && this.element.remove();
 266         }
 267 };
 268
 269 CKEDITOR.ui.panel.block = CKEDITOR.tools.createClass(
 270 {
 271         $ : function( blockHolder, blockDefinition )
 272         {
 273                 this.element = blockHolder.append(
 274                         blockHolder.getDocument().createElement( 'div',
 275                                 {
 276                                         attributes :
 277                                         {
 278                                                 'tabIndex' : -1,
 279                                                 'class' : 'cke_panel_block',
 280                                                 'role' : 'presentation'
 281                                         },
 282                                         styles :
 283                                         {
 284                                                 display : 'none'
 285                                         }
 286                                 }) );
 287
 288                 // Copy all definition properties to this object.
 289                 if ( blockDefinition )
 290                         CKEDITOR.tools.extend( this, blockDefinition );
 291
 292                 if ( !this.attributes.title )
 293                         this.attributes.title = this.attributes[ 'aria-label' ];
 294
 295                 this.keys = {};
 296
 297                 this._.focusIndex = -1;
 298
 299                 // Disable context menu for panels.
 300                 this.element.disableContextMenu();
 301         },
 302
 303         _ : {
 304
 305                 /**
 306                  * Mark the item specified by the index as current activated.
 307                  */
 308                 markItem: function( index )
 309                 {
 310                         if ( index == -1 )
 311                                 return;
 312                         var links = this.element.getElementsByTag( 'a' );
 313                         var item = links.getItem( this._.focusIndex = index );
 314
 315                         // Safari need focus on the iframe window first(#3389), but we need
 316                         // lock the blur to avoid hiding the panel.
 317                         if ( CKEDITOR.env.webkit || CKEDITOR.env.opera )
 318                                 item.getDocument().getWindow().focus();
 319                         item.focus();
 320
 321                         this.onMark && this.onMark( item );
 322                 }
 323         },
 324
 325         proto :
 326         {
 327                 show : function()
 328                 {
 329                         this.element.setStyle( 'display', '' );
 330                 },
 331
 332                 hide : function()
 333                 {
 334                         if ( !this.onHide || this.onHide.call( this )  !== true )
 335                                 this.element.setStyle( 'display', 'none' );
 336                 },
 337
 338                 onKeyDown : function( keystroke )
 339                 {
 340                         var keyAction = this.keys[ keystroke ];
 341                         switch ( keyAction )
 342                         {
 343                                 // Move forward.
 344                                 case 'next' :
 345                                         var index = this._.focusIndex,
 346                                                 links = this.element.getElementsByTag( 'a' ),
 347                                                 link;
 348
 349                                         while ( ( link = links.getItem( ++index ) ) )
 350                                         {
 351                                                 // Move the focus only if the element is marked with
 352                                                 // the _cke_focus and it it's visible (check if it has
 353                                                 // width).
 354                                                 if ( link.getAttribute( '_cke_focus' ) && link.$.offsetWidth )
 355                                                 {
 356                                                         this._.focusIndex = index;
 357                                                         link.focus();
 358                                                         break;
 359                                                 }
 360                                         }
 361                                         return false;
 362
 363                                 // Move backward.
 364                                 case 'prev' :
 365                                         index = this._.focusIndex;
 366                                         links = this.element.getElementsByTag( 'a' );
 367
 368                                         while ( index > 0 && ( link = links.getItem( --index ) ) )
 369                                         {
 370                                                 // Move the focus only if the element is marked with
 371                                                 // the _cke_focus and it it's visible (check if it has
 372                                                 // width).
 373                                                 if ( link.getAttribute( '_cke_focus' ) && link.$.offsetWidth )
 374                                                 {
 375                                                         this._.focusIndex = index;
 376                                                         link.focus();
 377                                                         break;
 378                                                 }
 379                                         }
 380                                         return false;
 381
 382                                 case 'click' :
 383                                 case 'mouseup' :
 384                                         index = this._.focusIndex;
 385                                         link = index >= 0 && this.element.getElementsByTag( 'a' ).getItem( index );
 386
 387                                         if ( link )
 388                                                 link.$[ keyAction ] ? link.$[ keyAction ]() : link.$[ 'on' + keyAction ]();
 389
 390                                         return false;
 391                         }
 392
 393                         return true;
 394                 }
 395         }
 396 });
 397
 398 /**
 399  * Fired when a panel is added to the document
 400  * @name CKEDITOR#ariaWidget
 401  * @event
 402  * @param {Object} holder The element wrapping the panel
 403  */