Ticket #3492: 3492.patch

_source/plugins/smiley/dialogs/smiley.js

@@ -9 +9 @@
                 images = config.smiley_images,
                 columns = config.smiley_columns,
                 i;
+        
+        // Simulate "this" of a dialog for non-dialog events.
+        var dialog;
+        var onClick = function( evt )
+        {
+                var target = evt.data.getTarget(),
+                        targetName = target.getName();
+
+                if ( targetName == 'td' )
+                        target = target.getChild( [ 0, 0 ] );
+                else if ( targetName == 'a' )
+                        target = target.getChild( 0 );
+                else if ( targetName != 'img' )
+                        return;
+
+                var src = target.getAttribute( 'cke_src' ),
+                        title = target.getAttribute( 'title' );
+
+                var img = editor.document.createElement( 'img',
+                        {
+                                attributes :
+                                {
+                                        src : src,
+                                        _cke_saved_src : src,
+                                        title : title,
+                                        alt : title
+                                }
+                        });
+
+                editor.insertElement( img );
+
+                dialog.hide();
+        }
+                
+        var onKeydown = CKEDITOR.tools.addFunction( function( ev, element )
+        {
+                ev = new CKEDITOR.dom.event( ev );
+                element = new CKEDITOR.dom.element( element );
+                var relative, nodeToMove;
+
+                var keystroke = ev.getKeystroke();
+                switch ( keystroke )
+                {
+                        case 39 : // RIGHT-ARROW
+                                // relative is TD
+                                if ( ( relative = element.getParent().getNext() ) )
+                                {
+                                        nodeToMove = relative.getChild( 0 );
+                                        nodeToMove.focus();
+                                }
+                                break;
+                        case 37 : // LEFT-ARROW
+                                // relative is TD
+                                if ( ( relative = element.getParent().getPrevious() ) )
+                                {
+                                        nodeToMove = relative.getChild( 0 );
+                                        nodeToMove.focus();
+                                }
+                                break;
+                        case 38 : // UP-ARROW
+                                // relative is TR
+                                if ( ( relative = element.getParent().getParent().getPrevious() ) )
+                                {
+                                        nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
+                                        nodeToMove.focus();
+                                }
+                                break;
+                        case 40 :       // ARROW-DOWN
+                                // relative is TR
+                                if ( ( relative = element.getParent().getParent().getNext() ) )
+                                {
+                                        nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
+                                        if ( nodeToMove )
+                                                nodeToMove.focus();
+                                }
+                                break;
+                        case 13 :       // ENTER
+                        case 32 :       // SPACE
+                                onClick( { data: ev } );
+                                break;
+                        default :
+                                // Do not stop not handled events.
+                                return;
+                }
+
+                // Avoid subsequent focus grab on editor document.
+                ev.preventDefault();
+        });
 
         // Build the HTML for the smiley images table.
         var html =
@@ -25 +113 @@
 
                 html.push(
                         '<td class="dark_background hand centered" style="vertical-align: middle;">' +
-                                '<img border="0" class="hand" title="', config.smiley_descriptions[i], '"' +
-                                        ' cke_src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',
-                                        ' src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',
-                                        // IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct.
-                                        ( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ),
-                                '>' +
+                                '<a class="cke_smile" tabindex="-1"  onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',
+                                        '<img class="hand" title="', config.smiley_descriptions[i], '"' +
+                                                ' cke_src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',
+                                                ' src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',
+                                                // IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct.
+                                                ( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ),
+                                        '>' +
+                                '</a>', 
                         '</td>' );
 
                 if ( i % columns == columns - 1 )
@@ -50 +140 @@
         {
                 type : 'html',
                 html : html.join( '' ),
-                onClick : function( evt )
+                onShow : function( event )
                 {
-                        var target = evt.data.getTarget(),
-                                targetName = target.getName();
-
-                        if ( targetName == 'td' )
-                                target = target.getChild(0);
-                        else if ( targetName != 'img' )
-                                return;
-
-                        var src = target.getAttribute( 'cke_src' ),
-                                title = target.getAttribute( 'title' );
-
-                        var img = editor.document.createElement( 'img',
-                                {
-                                        attributes :
-                                        {
-                                                src : src,
-                                                _cke_saved_src : src,
-                                                title : title,
-                                                alt : title
-                                        }
-                                });
-
-                        editor.insertElement( img );
-
-                        this.getDialog().hide();
+                        // Momorize dialog reference inside scope of this file.
+                        dialog = event.sender;
+                        var firstSmile = event.sender.parts.contents.getChild( [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] );
+                        firstSmile.focus();
+                        event.sender._.hasFocus = true;
                 },
+                onClick : onClick,
                 style : 'width: 100%; height: 100%; border-collapse: separate;'
         };
 

_source/skins/v2/dialog.css

@@ -591 +591 @@
 {
         color: #a0a0a0;
 }
+
+.cke_skin_v2 a.cke_smile img
+{
+        /* IE6 does not support transparent borders */
+        border: 2px solid #eaead1;
+}
+
+.cke_skin_v2 a.cke_smile:focus img,
+.cke_skin_v2 a.cke_smile:active img,
+.cke_skin_v2 a.cke_smile:hover img
+{
+        border-color: #C7C78F;
+}
+ No newline at end of file