/*\r
-Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.\r
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
For licensing, see LICENSE.html or http://ckeditor.com/license\r
*/\r
\r
CKEDITOR.dialog.add( 'smiley', function( editor )\r
{\r
var config = editor.config,\r
+ lang = editor.lang.smiley,\r
images = config.smiley_images,\r
- columns = 8,\r
+ columns = config.smiley_columns || 8,\r
i;\r
\r
/**\r
var target = evt.data.getTarget(),\r
targetName = target.getName();\r
\r
- if ( targetName == 'td' )\r
- target = target.getChild( [ 0, 0 ] );\r
- else if ( targetName == 'a' )\r
+ if ( targetName == 'a' )\r
target = target.getChild( 0 );\r
else if ( targetName != 'img' )\r
return;\r
attributes :\r
{\r
src : src,\r
- _cke_saved_src : src,\r
+ 'data-cke-saved-src' : src,\r
title : title,\r
- alt : title\r
+ alt : title,\r
+ width : target.$.width,\r
+ height : target.$.height\r
}\r
});\r
\r
editor.insertElement( img );\r
\r
dialog.hide();\r
+ evt.data.preventDefault();\r
};\r
\r
var onKeydown = CKEDITOR.tools.addFunction( function( ev, element )\r
element = new CKEDITOR.dom.element( element );\r
var relative, nodeToMove;\r
\r
- var keystroke = ev.getKeystroke();\r
+ var keystroke = ev.getKeystroke(),\r
+ rtl = editor.lang.dir == 'rtl';\r
switch ( keystroke )\r
{\r
- // RIGHT-ARROW\r
- case 39 :\r
- // relative is TD\r
- if ( ( relative = element.getParent().getNext() ) )\r
- {\r
- nodeToMove = relative.getChild( 0 );\r
- nodeToMove.focus();\r
- }\r
- ev.preventDefault();\r
- break;\r
- // LEFT-ARROW\r
- case 37 :\r
- // relative is TD\r
- if ( ( relative = element.getParent().getPrevious() ) )\r
- {\r
- nodeToMove = relative.getChild( 0 );\r
- nodeToMove.focus();\r
- }\r
- ev.preventDefault();\r
- break;\r
// UP-ARROW\r
case 38 :\r
// relative is TR\r
onClick( { data: ev } );\r
ev.preventDefault();\r
break;\r
+\r
+ // RIGHT-ARROW\r
+ case rtl ? 37 : 39 :\r
// TAB\r
case 9 :\r
// relative is TD\r
ev.preventDefault(true);\r
}\r
break;\r
+\r
+ // LEFT-ARROW\r
+ case rtl ? 39 : 37 :\r
// SHIFT + TAB\r
case CKEDITOR.SHIFT + 9 :\r
// relative is TD\r
});\r
\r
// Build the HTML for the smiley images table.\r
+ var labelId = CKEDITOR.tools.getNextId() + '_smiley_emtions_label';\r
var html =\r
[\r
- '<table cellspacing="2" cellpadding="2"',\r
+ '<div>' +\r
+ '<span id="' + labelId + '" class="cke_voice_label">' + lang.options +'</span>',\r
+ '<table role="listbox" aria-labelledby="' + labelId + '" style="width:100%;height:100%" cellspacing="2" cellpadding="2"',\r
CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style="position:absolute;"' : '',\r
'><tbody>'\r
];\r
\r
- for ( i = 0 ; i < images.length ; i++ )\r
+ var size = images.length;\r
+ for ( i = 0 ; i < size ; i++ )\r
{\r
if ( i % columns === 0 )\r
html.push( '<tr>' );\r
\r
+ var smileyLabelId = 'cke_smile_label_' + i + '_' + CKEDITOR.tools.getNextNumber();\r
html.push(\r
- '<td class="cke_dark_background cke_hand cke_centered" style="vertical-align: middle;">' +\r
- '<a href="javascript:void(0)" class="cke_smile" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',\r
- '<img class="hand" title="', config.smiley_descriptions[i], '"' +\r
+ '<td class="cke_dark_background cke_centered" style="vertical-align: middle;">' +\r
+ '<a href="javascript:void(0)" role="option"',\r
+ ' aria-posinset="' + ( i +1 ) + '"',\r
+ ' aria-setsize="' + size + '"',\r
+ ' aria-labelledby="' + smileyLabelId + '"',\r
+ ' class="cke_smile cke_hand" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',\r
+ '<img class="cke_hand" title="', config.smiley_descriptions[i], '"' +\r
' cke_src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '" alt="', config.smiley_descriptions[i], '"',\r
' src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',\r
// IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct.\r
( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ),\r
'>' +\r
+ '<span id="' + smileyLabelId + '" class="cke_voice_label">' +config.smiley_descriptions[ i ] + '</span>' +\r
'</a>',\r
'</td>' );\r
\r
html.push( '</tr>' );\r
}\r
\r
- html.push( '</tbody></table>' );\r
+ html.push( '</tbody></table></div>' );\r
\r
var smileySelector =\r
{\r
dialog = event.sender;\r
},\r
focus : function()\r
- {\r
- var firstSmile = this.getElement().getChild( [0, 0, 0, 0] );\r
- firstSmile.focus();\r
- },\r
+ {\r
+ var self = this;\r
+ // IE need a while to move the focus (#6539).\r
+ setTimeout( function ()\r
+ {\r
+ var firstSmile = self.getElement().getElementsByTag( 'a' ).getItem( 0 );\r
+ firstSmile.focus();\r
+ }, 0 );\r
+ },\r
onClick : onClick,\r
- style : 'width: 100%; height: 100%; border-collapse: separate;'\r
+ style : 'width: 100%; border-collapse: separate;'\r
};\r
\r
return {\r