2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
6 CKEDITOR.dialog.add( 'specialchar', function( editor )
\r
9 * Simulate "this" of a dialog for non-dialog events.
\r
10 * @type {CKEDITOR.dialog}
\r
13 lang = editor.lang.specialChar;
\r
15 var onChoice = function( evt )
\r
19 target = evt.data.getTarget();
\r
21 target = new CKEDITOR.dom.element( evt );
\r
23 if ( target.getName() == 'a' && ( value = target.getChild( 0 ).getHtml() ) )
\r
25 target.removeClass( "cke_light_background" );
\r
28 // We must use "insertText" here to keep text styled.
\r
29 var span = editor.document.createElement( 'span' );
\r
30 span.setHtml( value );
\r
31 editor.insertText( span.getText() );
\r
35 var onClick = CKEDITOR.tools.addFunction( onChoice );
\r
39 var onFocus = function( evt, target )
\r
42 target = target || evt.data.getTarget();
\r
44 if ( target.getName() == 'span' )
\r
45 target = target.getParent();
\r
47 if ( target.getName() == 'a' && ( value = target.getChild( 0 ).getHtml() ) )
\r
49 // Trigger blur manually if there is focused node.
\r
51 onBlur( null, focusedNode );
\r
53 var htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement();
\r
55 dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( value );
\r
56 htmlPreview.setHtml( CKEDITOR.tools.htmlEncode( value ) );
\r
57 target.getParent().addClass( "cke_light_background" );
\r
59 // Memorize focused node.
\r
60 focusedNode = target;
\r
64 var onBlur = function( evt, target )
\r
66 target = target || evt.data.getTarget();
\r
68 if ( target.getName() == 'span' )
\r
69 target = target.getParent();
\r
71 if ( target.getName() == 'a' )
\r
73 dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( ' ' );
\r
74 dialog.getContentElement( 'info', 'htmlPreview' ).getElement().setHtml( ' ' );
\r
75 target.getParent().removeClass( "cke_light_background" );
\r
77 focusedNode = undefined;
\r
81 var onKeydown = CKEDITOR.tools.addFunction( function( ev )
\r
83 ev = new CKEDITOR.dom.event( ev );
\r
85 // Get an Anchor element.
\r
86 var element = ev.getTarget();
\r
87 var relative, nodeToMove;
\r
88 var keystroke = ev.getKeystroke(),
\r
89 rtl = editor.lang.dir == 'rtl';
\r
91 switch ( keystroke )
\r
96 if ( ( relative = element.getParent().getParent().getPrevious() ) )
\r
98 nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
\r
100 onBlur( null, element );
\r
101 onFocus( null, nodeToMove );
\r
103 ev.preventDefault();
\r
108 if ( ( relative = element.getParent().getParent().getNext() ) )
\r
110 nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
\r
111 if ( nodeToMove && nodeToMove.type == 1 )
\r
113 nodeToMove.focus();
\r
114 onBlur( null, element );
\r
115 onFocus( null, nodeToMove );
\r
118 ev.preventDefault();
\r
121 // ENTER is already handled as onClick
\r
123 onChoice( { data: ev } );
\r
124 ev.preventDefault();
\r
128 case rtl ? 37 : 39 :
\r
132 if ( ( relative = element.getParent().getNext() ) )
\r
134 nodeToMove = relative.getChild( 0 );
\r
135 if ( nodeToMove.type == 1 )
\r
137 nodeToMove.focus();
\r
138 onBlur( null, element );
\r
139 onFocus( null, nodeToMove );
\r
140 ev.preventDefault( true );
\r
143 onBlur( null, element );
\r
146 else if ( ( relative = element.getParent().getParent().getNext() ) )
\r
148 nodeToMove = relative.getChild( [ 0, 0 ] );
\r
149 if ( nodeToMove && nodeToMove.type == 1 )
\r
151 nodeToMove.focus();
\r
152 onBlur( null, element );
\r
153 onFocus( null, nodeToMove );
\r
154 ev.preventDefault( true );
\r
157 onBlur( null, element );
\r
162 case rtl ? 39 : 37 :
\r
164 case CKEDITOR.SHIFT + 9 :
\r
166 if ( ( relative = element.getParent().getPrevious() ) )
\r
168 nodeToMove = relative.getChild( 0 );
\r
169 nodeToMove.focus();
\r
170 onBlur( null, element );
\r
171 onFocus( null, nodeToMove );
\r
172 ev.preventDefault( true );
\r
175 else if ( ( relative = element.getParent().getParent().getPrevious() ) )
\r
177 nodeToMove = relative.getLast().getChild( 0 );
\r
178 nodeToMove.focus();
\r
179 onBlur( null, element );
\r
180 onFocus( null, nodeToMove );
\r
181 ev.preventDefault( true );
\r
184 onBlur( null, element );
\r
187 // Do not stop not handled events.
\r
193 title : lang.title,
\r
196 buttons : [ CKEDITOR.dialog.cancelButton ],
\r
198 onLoad : function()
\r
200 var columns = this.definition.charColumns,
\r
201 extraChars = editor.config.extraSpecialChars,
\r
202 chars = editor.config.specialChars;
\r
204 var charsTableLabel = CKEDITOR.tools.getNextId() + '_specialchar_table_label';
\r
205 var html = [ '<table role="listbox" aria-labelledby="' + charsTableLabel + '"' +
\r
206 ' style="width: 320px; height: 100%; border-collapse: separate;"' +
\r
207 ' align="center" cellspacing="2" cellpadding="2" border="0">' ];
\r
210 size = chars.length,
\r
216 html.push( '<tr>' ) ;
\r
218 for ( var j = 0 ; j < columns ; j++, i++ )
\r
220 if ( ( character = chars[ i ] ) )
\r
224 if ( character instanceof Array )
\r
226 charDesc = character[ 1 ];
\r
227 character = character[ 0 ];
\r
231 var _tmpName = character.toLowerCase().replace( '&', '' ).replace( ';', '' ).replace( '#', '' );
\r
233 // Use character in case description unavailable.
\r
234 charDesc = lang[ _tmpName ] || character;
\r
237 var charLabelId = 'cke_specialchar_label_' + i + '_' + CKEDITOR.tools.getNextNumber();
\r
240 '<td class="cke_dark_background" style="cursor: default" role="presentation">' +
\r
241 '<a href="javascript: void(0);" role="option"' +
\r
242 ' aria-posinset="' + ( i +1 ) + '"',
\r
243 ' aria-setsize="' + size + '"',
\r
244 ' aria-labelledby="' + charLabelId + '"',
\r
245 ' style="cursor: inherit; display: block; height: 1.25em; margin-top: 0.25em; text-align: center;" title="', CKEDITOR.tools.htmlEncode( charDesc ), '"' +
\r
246 ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydown + ', event, this )"' +
\r
247 ' onclick="CKEDITOR.tools.callFunction(' + onClick + ', this); return false;"' +
\r
248 ' tabindex="-1">' +
\r
249 '<span style="margin: 0 auto;cursor: inherit">' +
\r
252 '<span class="cke_voice_label" id="' + charLabelId + '">' +
\r
257 html.push( '<td class="cke_dark_background"> ' );
\r
259 html.push( '</td>' );
\r
261 html.push( '</tr>' );
\r
264 html.push( '</tbody></table>', '<span id="' + charsTableLabel + '" class="cke_voice_label">' + lang.options +'</span>' );
\r
266 this.getContentElement( 'info', 'charContainer' ).getElement().setHtml( html.join( '' ) );
\r
271 label : editor.lang.common.generalTab,
\r
272 title : editor.lang.common.generalTab,
\r
279 widths : [ '320px', '90px' ],
\r
284 id : 'charContainer',
\r
286 onMouseover : onFocus,
\r
287 onMouseout : onBlur,
\r
290 var firstChar = this.getElement().getElementsByTag( 'a' ).getItem( 0 );
\r
291 setTimeout( function()
\r
294 onFocus( null, firstChar );
\r
297 onShow : function()
\r
299 var firstChar = this.getElement().getChild( [ 0, 0, 0, 0, 0 ] );
\r
300 setTimeout( function()
\r
303 onFocus( null, firstChar );
\r
306 onLoad : function( event )
\r
308 dialog = event.sender;
\r
314 widths : [ '100%' ],
\r
324 html : '<div></div>'
\r
328 id : 'charPreview',
\r
329 className : 'cke_dark_background',
\r
330 style : 'border:1px solid #eeeeee;font-size:28px;height:40px;width:70px;padding-top:9px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',
\r
331 html : '<div> </div>'
\r
335 id : 'htmlPreview',
\r
336 className : 'cke_dark_background',
\r
337 style : 'border:1px solid #eeeeee;font-size:14px;height:20px;width:70px;padding-top:2px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',
\r
338 html : '<div> </div>'
\r