' + '' + '' + '' + + CKEDITOR.tools.buildStyleHtml( this.css ) + '' + '' + - '' + - // It looks strange, but for FF2, the styles must go - // after , so it (body) becames immediatelly - // available. (#3031) - '' + - '<\/html>' ); - doc.$.close(); + ' onload="( window.CKEDITOR || window.parent.CKEDITOR ).tools.callFunction(' + onLoad + ');">' + + '<\/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 +182,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 +206,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 ); @@ -217,11 +226,23 @@ CKEDITOR.ui.panel.prototype = block = blocks[ name ], current = this._.currentBlock; + // ARIA role works better in IE on the body element, while on the iframe + // for FF. (#8864) + var holder = !this.forceIFrame || CKEDITOR.env.ie ? + this._.holder : this.document.getById( this.id + '_frame' ); + 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; @@ -230,19 +251,26 @@ CKEDITOR.ui.panel.prototype = 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,12 +278,42 @@ 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; + + // Disable context menu for panels. + 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 : { @@ -315,11 +373,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; } @@ -328,3 +387,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 + */