' + '' + - '' + + ' onload="( window.CKEDITOR || window.parent.CKEDITOR ).tools.callFunction(' + onLoad + ');">' + // It looks strange, but for FF2, the styles must go // after , so it (body) becames immediatelly // available. (#3031) - '' + + CKEDITOR.tools.buildStyleHtml( this.css ) + '<\/html>' ); doc.$.close(); @@ -171,7 +172,8 @@ CKEDITOR.ui.panel.prototype = doc.on( 'keydown', function( evt ) { - var keystroke = evt.data.getKeystroke(); + var keystroke = evt.data.getKeystroke(), + dir = this.document.getById( 'cke_' + this.id ).getAttribute( 'dir' ); // Delegate key processing to block. if ( this._.onKeyDown && this._.onKeyDown( keystroke ) === false ) @@ -180,12 +182,17 @@ CKEDITOR.ui.panel.prototype = return; } - if ( keystroke == 27 ) // ESC - this.onEscape && this.onEscape(); + // ESC/ARROW-LEFT(ltr) OR ARROW-RIGHT(rtl) + if ( keystroke == 27 || keystroke == ( dir == 'rtl' ? 39 : 37 ) ) + { + if ( this.onEscape && this.onEscape( keystroke ) === false ) + evt.data.preventDefault( ); + } }, this ); holder = doc.getBody(); + holder.unselectable(); } else holder = this.document.getById( 'cke_' + this.id ); @@ -198,7 +205,8 @@ CKEDITOR.ui.panel.prototype = addBlock : function( name, block ) { - block = this._.blocks[ name ] = block || new CKEDITOR.ui.panel.block( this.getHolderElement() ); + block = this._.blocks[ name ] = block instanceof CKEDITOR.ui.panel.block ? block + : new CKEDITOR.ui.panel.block( this.getHolderElement(), block ); if ( !this._.currentBlock ) this.showBlock( name ); @@ -215,34 +223,64 @@ CKEDITOR.ui.panel.prototype = { var blocks = this._.blocks, block = blocks[ name ], - current = this._.currentBlock; + current = this._.currentBlock, + holder = this.forceIFrame ? + this.document.getById( 'cke_' + this.id + '_frame' ) + : this._.holder; + + // Disable context menu for block panel. + holder.getParent().getParent().disableContextMenu(); if ( current ) + { + // Clean up the current block's effects on holder. + holder.removeAttributes( current.attributes ); current.hide(); + } this._.currentBlock = block; + holder.setAttributes( block.attributes ); + CKEDITOR.fire( 'ariaWidget', holder ); + // Reset the focus index, so it will always go into the first one. block._.focusIndex = -1; this._.onKeyDown = block.onKeyDown && CKEDITOR.tools.bind( block.onKeyDown, block ); + block.onMark = function( item ) + { + holder.setAttribute( 'aria-activedescendant', item.getId() + '_option' ); + }; + + block.onUnmark = function() + { + holder.removeAttribute( 'aria-activedescendant' ); + }; + block.show(); return block; + }, + + destroy : function() + { + this.element && this.element.remove(); } }; CKEDITOR.ui.panel.block = CKEDITOR.tools.createClass( { - $ : function( blockHolder ) + $ : function( blockHolder, blockDefinition ) { this.element = blockHolder.append( blockHolder.getDocument().createElement( 'div', { attributes : { - 'class' : 'cke_panel_block' + 'tabIndex' : -1, + 'class' : 'cke_panel_block', + 'role' : 'presentation' }, styles : { @@ -250,6 +288,13 @@ CKEDITOR.ui.panel.block = CKEDITOR.tools.createClass( } }) ); + // Copy all definition properties to this object. + if ( blockDefinition ) + CKEDITOR.tools.extend( this, blockDefinition ); + + if ( !this.attributes.title ) + this.attributes.title = this.attributes[ 'aria-label' ]; + this.keys = {}; this._.focusIndex = -1; @@ -258,7 +303,27 @@ CKEDITOR.ui.panel.block = CKEDITOR.tools.createClass( this.element.disableContextMenu(); }, - _ : {}, + _ : { + + /** + * Mark the item specified by the index as current activated. + */ + markItem: function( index ) + { + if ( index == -1 ) + return; + var links = this.element.getElementsByTag( 'a' ); + var item = links.getItem( this._.focusIndex = index ); + + // Safari need focus on the iframe window first(#3389), but we need + // lock the blur to avoid hiding the panel. + if ( CKEDITOR.env.webkit ) + item.getDocument().getWindow().focus(); + item.focus(); + + this.onMark && this.onMark( item ); + } + }, proto : {