      1 /*
      2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
      3 For licensing, see LICENSE.html or http://ckeditor.com/license
      4 */
      5
      6 CKEDITOR.dialog.add( 'specialchar', function( editor )
      7 {
      8 	/**
      9 	 * Simulate "this" of a dialog for non-dialog events.
     10 	 * @type {CKEDITOR.dialog}
     11 	 */
     12 	var dialog;
     13 	var onChoice = function( evt )
     14 	{
     15 		var target, value;
     16 		if ( evt.data )
     17 			target = evt.data.getTarget();
     18 		else
     19 			target = new CKEDITOR.dom.element( evt );
     20
     21 		if ( target.getName() == 'a' && ( value = target.getChild( 0 ).getHtml() ) )
     22 		{
     23 			target.removeClass( "cke_light_background" );
     24 			dialog.hide();
     25 			editor.insertHtml( value );
     26 		}
     27 	};
     28
     29 	var onClick = CKEDITOR.tools.addFunction( onChoice );
     30
     31 	var focusedNode;
     32
     33 	var onFocus = function( evt, target )
     34 	{
     35 		var value;
     36 		target = target || evt.data.getTarget();
     37
     38 		if ( target.getName() == 'span' )
     39 			target = target.getParent();
     40
     41 		if ( target.getName() == 'a' && ( value = target.getChild( 0 ).getHtml() ) )
     42 		{
     43 			// Trigger blur manually if there is focused node.
     44 			if ( focusedNode )
     45 				onBlur( null, focusedNode );
     46
     47 			var htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement();
     48
     49 			dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( value );
     50 			htmlPreview.setHtml( CKEDITOR.tools.htmlEncode( value ) );
     51 			target.getParent().addClass( "cke_light_background" );
     52
     53 			// Memorize focused node.
     54 			focusedNode = target;
     55 		}
     56 	};
     57
     58 	var onBlur = function( evt, target )
     59 	{
     60 		target = target || evt.data.getTarget();
     61
     62 		if ( target.getName() == 'span' )
     63 			target = target.getParent();
     64
     65 		if ( target.getName() == 'a' )
     66 		{
     67 			dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( ' ' );
     68 			dialog.getContentElement( 'info', 'htmlPreview' ).getElement().setHtml( ' ' );
     69 			target.getParent().removeClass( "cke_light_background" );
     70
     71 			focusedNode = undefined;
     72 		}
     73 	};
     74
     75 	var onKeydown = CKEDITOR.tools.addFunction( function( ev )
     76 	{
     77 		ev = new CKEDITOR.dom.event( ev );
     78
     79 		// Get an Anchor element.
     80 		var element = ev.getTarget();
     81 		var relative, nodeToMove;
     82 		var keystroke = ev.getKeystroke();
     83
     84 		switch ( keystroke )
     85 		{
     86 			// RIGHT-ARROW
     87 			case 39 :
     88 				// relative is TD
     89 				if ( ( relative = element.getParent().getNext() ) )
     90 				{
     91 					nodeToMove = relative.getChild( 0 );
     92 					if ( nodeToMove.type == 1 )
     93 					{
     94 						nodeToMove.focus();
     95 						onBlur( null, element );
     96 						onFocus( null, nodeToMove );
     97 					}
     98 				}
     99 				ev.preventDefault();
    100 				break;
    101 			// LEFT-ARROW
    102 			case 37 :
    103 				// relative is TD
    104 				if ( ( relative = element.getParent().getPrevious() ) )
    105 				{
    106 					nodeToMove = relative.getChild( 0 );
    107 					nodeToMove.focus();
    108 					onBlur( null, element );
    109 					onFocus( null, nodeToMove );
    110 				}
    111 				ev.preventDefault();
    112 				break;
    113 			// UP-ARROW
    114 			case 38 :
    115 				// relative is TR
    116 				if ( ( relative = element.getParent().getParent().getPrevious() ) )
    117 				{
    118 					nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
    119 					nodeToMove.focus();
    120 					onBlur( null, element );
    121 					onFocus( null, nodeToMove );
    122 				}
    123 				ev.preventDefault();
    124 				break;
    125 			// DOWN-ARROW
    126 			case 40 :
    127 				// relative is TR
    128 				if ( ( relative = element.getParent().getParent().getNext() ) )
    129 				{
    130 					nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
    131 					if ( nodeToMove && nodeToMove.type == 1 )
    132 					{
    133 						nodeToMove.focus();
    134 						onBlur( null, element );
    135 						onFocus( null, nodeToMove );
    136 					}
    137 				}
    138 				ev.preventDefault();
    139 				break;
    140 			// SPACE
    141 			// ENTER is already handled as onClick
    142 			case 32 :
    143 				onChoice( { data: ev } );
    144 				ev.preventDefault();
    145 				break;
    146 			// TAB
    147 			case 9 :
    148 				// relative is TD
    149 				if ( ( relative = element.getParent().getNext() ) )
    150 				{
    151 					nodeToMove = relative.getChild( 0 );
    152 					if ( nodeToMove.type == 1 )
    153 					{
    154 						nodeToMove.focus();
    155 						onBlur( null, element );
    156 						onFocus( null, nodeToMove );
    157 						ev.preventDefault( true );
    158 					}
    159 					else
    160 						onBlur( null, element );
    161 				}
    162 				// relative is TR
    163 				else if ( ( relative = element.getParent().getParent().getNext() ) )
    164 				{
    165 					nodeToMove = relative.getChild( [ 0, 0 ] );
    166 					if ( nodeToMove && nodeToMove.type == 1 )
    167 					{
    168 						nodeToMove.focus();
    169 						onBlur( null, element );
    170 						onFocus( null, nodeToMove );
    171 						ev.preventDefault( true );
    172 					}
    173 					else
    174 						onBlur( null, element );
    175 				}
    176 				break;
    177 			// SHIFT + TAB
    178 			case CKEDITOR.SHIFT + 9 :
    179 				// relative is TD
    180 				if ( ( relative = element.getParent().getPrevious() ) )
    181 				{
    182 					nodeToMove = relative.getChild( 0 );
    183 					nodeToMove.focus();
    184 					onBlur( null, element );
    185 					onFocus( null, nodeToMove );
    186 					ev.preventDefault( true );
    187 				}
    188 				// relative is TR
    189 				else if ( ( relative = element.getParent().getParent().getPrevious() ) )
    190 				{
    191 					nodeToMove = relative.getLast().getChild( 0 );
    192 					nodeToMove.focus();
    193 					onBlur( null, element );
    194 					onFocus( null, nodeToMove );
    195 					ev.preventDefault( true );
    196 				}
    197 				else
    198 					onBlur( null, element );
    199 				break;
    200 			default :
    201 				// Do not stop not handled events.
    202 				return;
    203 		}
    204 	});
    205
    206 	return {
    207 		title : editor.lang.specialChar.title,
    208 		minWidth : 430,
    209 		minHeight : 280,
    210 		buttons : [ CKEDITOR.dialog.cancelButton ],
    211 		charColumns : 17,
    212 		chars :
    213 			[
    214 				'!','"','#','$','%','&',"'",'(',')','*','+','-','.','/',
    215 				'0','1','2','3','4','5','6','7','8','9',':',';',
    216 				'<','=','>','?','@',
    217 				'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O',
    218 				'P','Q','R','S','T','U','V','W','X','Y','Z',
    219 				'[',']','^','_','`',
    220 				'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p',
    221 				'q','r','s','t','u','v','w','x','y','z',
    222 				'{','|','}','~','€','‘','’','’','“',
    223 				'”','–','—','¡','¢','£',
    224 				'¤','¥','¦','§','¨','©','ª',
    225 				'«','¬','®','¯','°','±','²',
    226 				'³','´','µ','¶','·','¸',
    227 				'¹','º','»','¼','½','¾',
    228 				'¿','À','Á','Â','Ã','Ä',
    229 				'Å','Æ','Ç','È','É','Ê',
    230 				'Ë','Ì','Í','Î','Ï','Ð',
    231 				'Ñ','Ò','Ó','Ô','Õ','Ö',
    232 				'×','Ø','Ù','Ú','Û','Ü',
    233 				'Ý','Þ','ß','à','á','â',
    234 				'ã','ä','å','æ','ç','è',
    235 				'é','ê','ë','ì','í','î',
    236 				'ï','ð','ñ','ò','ó','ô',
    237 				'õ','ö','÷','ø','ù','ú',
    238 				'û','ü','ü','ý','þ','ÿ',
    239 				'Œ','œ','Ŵ','Ŷ','ŵ','ŷ','‚',
    240 				'‛','„','…','™','►','•',
    241 				'→','⇒','⇔','♦','≈'
    242 			],
    243 		onLoad :  function()
    244 		{
    245 			var columns = this.definition.charColumns,
    246 				chars = this.definition.chars;
    247
    248 			var html = [ '<table style="width: 320px; height: 100%; border-collapse: separate;" align="center" cellspacing="2" cellpadding="2" border="0">' ];
    249
    250 			var i = 0 ;
    251 			while ( i < chars.length )
    252 			{
    253 				html.push( '<tr>' ) ;
    254
    255 				for( var j = 0 ; j < columns ; j++, i++ )
    256 				{
    257 					if ( chars[ i ] )
    258 					{
    259 						html.push(
    260 							'<td class="cke_dark_background">' +
    261 							'<a href="javascript: void(0);" style="display: block; height: 1.25em; margin-top: 0.25em; text-align: center;" title="', chars[i].replace( /&/g, '&' ), '"' +
    262 							' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydown + ', event, this )"' +
    263 							' onclick="CKEDITOR.tools.callFunction(' + onClick + ', this); return false;"' +
    264 							' tabindex="-1">' +
    265 							'<span style="margin: 0 auto;">' +
    266 							chars[i] +
    267 							'</span></a>');
    268 					}
    269 					else
    270 						html.push( '<td class="cke_dark_background"> ' );
    271
    272 					html.push( '</td>' );
    273 				}
    274 				html.push( '</tr>' );
    275 			}
    276
    277 			html.push( '</tbody></table>' );
    278
    279 			this.getContentElement( 'info', 'charContainer' ).getElement().setHtml( html.join( '' ) );
    280 		},
    281 		contents : [
    282 			{
    283 				id : 'info',
    284 				label : editor.lang.common.generalTab,
    285 				title : editor.lang.common.generalTab,
    286 				padding : 0,
    287 				align : 'top',
    288 				elements : [
    289 					{
    290 						type : 'hbox',
    291 						align : 'top',
    292 						widths : [ '320px', '90px' ],
    293 						children :
    294 						[
    295 							{
    296 								type : 'html',
    297 								id : 'charContainer',
    298 								html : '',
    299 								onMouseover : onFocus,
    300 								onMouseout : onBlur,
    301 								focus : function()
    302 								{
    303 									var firstChar = this.getElement().getChild( [0, 0, 0, 0, 0] );
    304 									setTimeout(function()
    305 									{
    306 										firstChar.focus();
    307 										onFocus( null, firstChar );
    308 									});
    309 								},
    310 								// Needed only for webkit.
    311 								onShow : function()
    312 								{
    313 									var firstChar = this.getElement().getChild( [0, 0, 0, 0, 0] );
    314 									setTimeout(function()
    315 									{
    316 										firstChar.focus();
    317 										onFocus( null, firstChar );
    318 									});
    319 								},
    320 								onLoad : function( event )
    321 								{
    322 									dialog = event.sender;
    323 								}
    324 							},
    325 							{
    326 								type : 'hbox',
    327 								align : 'top',
    328 								widths : [ '100%' ],
    329 								children :
    330 								[
    331 									{
    332 										type : 'vbox',
    333 										align : 'top',
    334 										children :
    335 										[
    336 											{
    337 												type : 'html',
    338 												html : '<div></div>'
    339 											},
    340 											{
    341 												type : 'html',
    342 												id : 'charPreview',
    343 												style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:28px;height:40px;width:70px;padding-top:9px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',
    344 												html : '<div> </div>'
    345 											},
    346 											{
    347 												type : 'html',
    348 												id : 'htmlPreview',
    349 												style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:14px;height:20px;width:70px;padding-top:2px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',
    350 												html : '<div> </div>'
    351 											}
    352 										]
    353 									}
    354 								]
    355 							}
    356 						]
    357 					}
    358 				]
    359 			}
    360 		]
    361 	};
    362 } );
    363