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 				elements : [
 86 					{
 87 						type : 'hbox',
 88 						align : 'top',
 89 						widths : [ '300px', '90px' ],
 90 						children :
 91 						[
 92 							{
 93 								type : 'hbox',
 94 								align : 'top',
 95 								padding : 0,
 96 								widths : [ '350px' ],
 97 								children :
 98 								[
 99 									{
100 										type : 'html',
101 										id : 'charContainer',
102 										html : '',
103 										onMouseover : function( evt )
104 										{
105 											var target = evt.data.getTarget(),
106 												targetName = target.getName(),
107 												value;
108
109 											if ( targetName == 'td' && ( value = target.getAttribute( 'value' ) ) )
110 											{
111 												var dialog = this.getDialog(),
112 													preview = dialog.getContentElement( 'info', 'charPreview' ).getElement(),
113 													htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement();
114
115 												preview.setHtml( value );
116 												htmlPreview.setHtml( CKEDITOR.tools.htmlEncode( value ) );
117 												target.addClass( "LightBackground" );
118 											}
119 										},
120 										onMouseout : function( evt )
121 										{
122 											var dialog = this.getDialog();
123 											var preview = dialog.getContentElement( 'info', 'charPreview' ).getElement();
124 											var htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement();
125 											var target = evt.data.getTarget();
126 											var targetName = target.getName();
127 											preview.setHtml( ' ' );
128 											htmlPreview.setHtml( ' ' );
129
130 											if ( targetName == 'td' )
131 												target.removeClass( "LightBackground" );
132 										},
133 										onClick : function( evt )
134 										{
135 											var target = evt.data.getTarget();
136 											var targetName = target.getName();
137 											var editor = this.getDialog().getParentEditor();
138 											var value;
139
140 											if ( targetName == 'td' )
141 											{
142 												target = target.$;
143 												if ( ( value = target.getAttribute( 'value' ) ) )
144 												{
145 													this.getDialog().restoreSelection();
146 													editor.insertHtml( value );
147 													this.getDialog().hide();
148 												}
149 											}
150 										}
151 									}
152 								]
153 							},
154 							{
155 								type : 'vbox',
156 								align : 'top',
157 								children :
158 								[
159 									{
160 										type : 'html',
161 										html : '<div></div>'
162 									},
163 									{
164 										type : 'html',
165 										id : 'charPreview',
166 										style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:28px;height:40px;padding-top:9px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',
167 										html : '<div> </div>'
168 									},
169 									{
170 										type : 'html',
171 										id : 'htmlPreview',
172 										style : 'border:1px solid #eeeeee;background-color:#EAEAD1;font-size:14px;height:20px;padding-top:2px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',
173 										html : '<div> </div>'
174 									}
175 								]
176 							}
177 						]
178 					}
179 				]
180 			}
181 		]
182 	};
183 } );
184