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