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 	return {
  9 		title : editor.lang.specialChar.title,
 10 		minWidth : 450,
 11 		minHeight : 350,
 12 		buttons : [ CKEDITOR.dialog.cancelButton ],
 13 		charColumns : 17,
 14 		chars :
 15 			[
 16 				'!','"','#','$','%','&',"'",'(',')','*','+','-','.','/',
 17 				'0','1','2','3','4','5','6','7','8','9',':',';',
 18 				'<','=','>','?','@',
 19 				'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O',
 20 				'P','Q','R','S','T','U','V','W','X','Y','Z',
 21 				'[',']','^','_','`',
 22 				'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p',
 23 				'q','r','s','t','u','v','w','x','y','z',
 24 				'{','|','}','~','€','‘','’','’','“',
 25 				'”','–','—','¡','¢','£',
 26 				'¤','¥','¦','§','¨','©','ª',
 27 				'«','¬','®','¯','°','±','²',
 28 				'³','´','µ','¶','·','¸',
 29 				'¹','º','»','¼','½','¾',
 30 				'¿','À','Á','Â','Ã','Ä',
 31 				'Å','Æ','Ç','È','É','Ê',
 32 				'Ë','Ì','Í','Î','Ï','Ð',
 33 				'Ñ','Ò','Ó','Ô','Õ','Ö',
 34 				'×','Ø','Ù','Ú','Û','Ü',
 35 				'Ý','Þ','ß','à','á','â',
 36 				'ã','ä','å','æ','ç','è',
 37 				'é','ê','ë','ì','í','î',
 38 				'ï','ð','ñ','ò','ó','ô',
 39 				'õ','ö','÷','ø','ù','ú',
 40 				'û','ü','ü','ý','þ','ÿ',
 41 				'Œ','œ','Ŵ','Ŷ','ŵ','ŷ','‚',
 42 				'‛','„','…','™','►','•',
 43 				'→','⇒','⇔','♦','≈'
 44 			],
 45 		onLoad :  function()
 46 		{
 47 			var columns = this.definition.charColumns,
 48 				chars = this.definition.chars;
 49
 50 			var html = [ '<table style="width: 320px; height: 100%; border-collapse: separate;" align="center" cellspacing="2" cellpadding="2" border="0">' ];
 51
 52 			var i = 0 ;
 53 			while ( i < chars.length )
 54 			{
 55 				html.push( '<tr>' ) ;
 56
 57 				for( var j = 0 ; j < columns ; j++, i++ )
 58 				{
 59 					if ( chars[ i ] )
 60 					{
 61 						html.push(
 62 							'<td width="1%"' +
 63 							' title="', chars[i].replace( /&/g, '&' ), '"' +
 64 							' value="', chars[i].replace( /&/g, "&" ), '"' +
 65 							' class="DarkBackground Hand">');
 66 						html.push( chars[i] );
 67 					}
 68 					else
 69 						html.push( '<td class="DarkBackground"> ' );
 70
 71 					html.push( '</td>' );
 72 				}
 73 				html.push( '</tr>' );
 74 			}
 75
 76 			html.push( '</tbody></table>' );
 77
 78 			this.getContentElement( 'info', 'charContainer' ).getElement().setHtml( html.join( '' ) );
 79 		},
 80 		contents : [
 81 			{
 82 				id : 'info',
 83 				label : editor.lang.common.generalTab,
 84 				title : editor.lang.common.generalTab,
 85 				align : top,
 86 				elements : [
 87 					{
 88 						type : 'hbox',
 89 						align : 'top',
 90 						widths : [ '320px', '90px' ],
 91 						children :
 92 						[
 93 							{
 94 								type : 'html',
 95 								id : 'charContainer',
 96 								html : '',
 97 								onMouseover : function( evt )
 98 								{
 99 									var target = evt.data.getTarget(),
100 										value;
101 									if ( target.getName() == 'td' && ( value = target.getAttribute( 'value' ) ) )
102 									{
103 										var dialog = this.getDialog(),
104 											htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement();
105
106 										dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( value );
107 										htmlPreview.setHtml( CKEDITOR.tools.htmlEncode( value ) );
108 										target.addClass( "LightBackground" );
109 									}
110 								},
111 								onMouseout : function( evt )
112 								{
113 									var target = evt.data.getTarget();
114 									if ( target.getName() == 'td' )
115 									{
116 										var dialog = this.getDialog();
117 										dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( ' ' );
118 										dialog.getContentElement( 'info', 'htmlPreview' ).getElement().setHtml( ' ' );
119 										target.removeClass( "LightBackground" );
120 									}
121 								},
122 								onClick : function( evt )
123 								{
124 									var target = evt.data.getTarget();
125 									if ( target.getName() == 'td' && ( value = target.$.getAttribute( 'value' )) )
126 									{
127 										var dialog = this.getDialog();
128 										target.removeClass( "LightBackground" );
129 										dialog.restoreSelection();
130 										dialog.getParentEditor().insertHtml( value );
131 										dialog.hide();
132 									}
133 								}
134 							},
135 							{
136 								type : 'hbox',
137 								align : 'top',
138 								widths : [ '100%' ],
139 								children :
140 								[
141 									{
142 										type : 'vbox',
143 										align : 'top',
144 										children :
145 										[
146 											{
147 												type : 'html',
148 												html : '<div></div>'
149 											},
150 											{
151 												type : 'html',
152 												id : 'charPreview',
153 												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;',
154 												html : '<div> </div>'
155 											},
156 											{
157 												type : 'html',
158 												id : 'htmlPreview',
159 												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;',
160 												html : '<div> </div>'
161 											}
162 										]
163 									}
164 								]
165 							}
166 						]
167 					}
168 				]
169 			}
170 		]
171 	};
172 } );
173