' + '' + '' + '' + '' + '' + - '' + + ' 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(); + '<\/html>'; + + doc.write( data ); var win = doc.getWindow(); // Register the CKEDITOR global. win.$.CKEDITOR = CKEDITOR; - doc.on( 'keydown', function( evt ) + // Arrow keys for scrolling is only preventable with 'keypress' event in Opera (#4534). + doc.on( 'key' + ( CKEDITOR.env.opera? 'press':'down' ), function( evt ) { - var keystroke = evt.data.getKeystroke(); + var keystroke = evt.data.getKeystroke(), + dir = this.document.getById( this.id ).getAttribute( 'dir' ); // Delegate key processing to block. if ( this._.onKeyDown && this._.onKeyDown( keystroke ) === false ) @@ -180,15 +178,21 @@ 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(); + CKEDITOR.env.air && CKEDITOR.tools.callFunction( onLoad ); } else - holder = this.document.getById( 'cke_' + this.id ); + holder = this.document.getById( this.id ); this._.holder = holder; } @@ -198,7 +202,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,18 +220,41 @@ CKEDITOR.ui.panel.prototype = { var blocks = this._.blocks, block = blocks[ name ], - current = this._.currentBlock; + current = this._.currentBlock, + holder = this.forceIFrame ? + this.document.getById( 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; @@ -240,14 +268,16 @@ CKEDITOR.ui.panel.prototype = 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 : { @@ -255,6 +285,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; @@ -263,7 +300,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 || CKEDITOR.env.opera ) + item.getDocument().getWindow().focus(); + item.focus(); + + this.onMark && this.onMark( item ); + } + }, proto : { @@ -323,11 +380,12 @@ CKEDITOR.ui.panel.block = CKEDITOR.tools.createClass( return false; case 'click' : + case 'mouseup' : index = this._.focusIndex; link = index >= 0 && this.element.getElementsByTag( 'a' ).getItem( index ); if ( link ) - link.$.click ? link.$.click() : link.$.onclick(); + link.$[ keyAction ] ? link.$[ keyAction ]() : link.$[ 'on' + keyAction ](); return false; } @@ -336,3 +394,10 @@ CKEDITOR.ui.panel.block = CKEDITOR.tools.createClass( } } }); + +/** + * Fired when a panel is added to the document + * @name CKEDITOR#ariaWidget + * @event + * @param {Object} holder The element wrapping the panel + */