JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
d6157deec19f39cc6ff1240b837649c09fe61640
[ckeditor.git] / _source / plugins / smiley / dialogs / smiley.js
1 /*\r
2 Copyright (c) 2003-2011, 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( 'smiley', function( editor )\r
7 {\r
8         var config = editor.config,\r
9                 lang = editor.lang.smiley,\r
10                 images = config.smiley_images,\r
11                 columns = config.smiley_columns || 8,\r
12                 i;\r
13 \r
14         /**\r
15          * Simulate "this" of a dialog for non-dialog events.\r
16          * @type {CKEDITOR.dialog}\r
17          */\r
18         var dialog;\r
19         var onClick = function( evt )\r
20         {\r
21                 var target = evt.data.getTarget(),\r
22                         targetName = target.getName();\r
23 \r
24                 if ( targetName == 'a' )\r
25                         target = target.getChild( 0 );\r
26                 else if ( targetName != 'img' )\r
27                         return;\r
28 \r
29                 var src = target.getAttribute( 'cke_src' ),\r
30                         title = target.getAttribute( 'title' );\r
31 \r
32                 var img = editor.document.createElement( 'img',\r
33                         {\r
34                                 attributes :\r
35                                 {\r
36                                         src : src,\r
37                                         'data-cke-saved-src' : src,\r
38                                         title : title,\r
39                                         alt : title,\r
40                                         width : target.$.width,\r
41                                         height : target.$.height\r
42                                 }\r
43                         });\r
44 \r
45                 editor.insertElement( img );\r
46 \r
47                 dialog.hide();\r
48                 evt.data.preventDefault();\r
49         };\r
50 \r
51         var onKeydown = CKEDITOR.tools.addFunction( function( ev, element )\r
52         {\r
53                 ev = new CKEDITOR.dom.event( ev );\r
54                 element = new CKEDITOR.dom.element( element );\r
55                 var relative, nodeToMove;\r
56 \r
57                 var keystroke = ev.getKeystroke(),\r
58                         rtl = editor.lang.dir == 'rtl';\r
59                 switch ( keystroke )\r
60                 {\r
61                         // UP-ARROW\r
62                         case 38 :\r
63                                 // relative is TR\r
64                                 if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
65                                 {\r
66                                         nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );\r
67                                         nodeToMove.focus();\r
68                                 }\r
69                                 ev.preventDefault();\r
70                                 break;\r
71                         // DOWN-ARROW\r
72                         case 40 :\r
73                                 // relative is TR\r
74                                 if ( ( relative = element.getParent().getParent().getNext() ) )\r
75                                 {\r
76                                         nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );\r
77                                         if ( nodeToMove )\r
78                                                 nodeToMove.focus();\r
79                                 }\r
80                                 ev.preventDefault();\r
81                                 break;\r
82                         // ENTER\r
83                         // SPACE\r
84                         case 32 :\r
85                                 onClick( { data: ev } );\r
86                                 ev.preventDefault();\r
87                                 break;\r
88 \r
89                         // RIGHT-ARROW\r
90                         case rtl ? 37 : 39 :\r
91                         // TAB\r
92                         case 9 :\r
93                                 // relative is TD\r
94                                 if ( ( relative = element.getParent().getNext() ) )\r
95                                 {\r
96                                         nodeToMove = relative.getChild( 0 );\r
97                                         nodeToMove.focus();\r
98                                         ev.preventDefault(true);\r
99                                 }\r
100                                 // relative is TR\r
101                                 else if ( ( relative = element.getParent().getParent().getNext() ) )\r
102                                 {\r
103                                         nodeToMove = relative.getChild( [0, 0] );\r
104                                         if ( nodeToMove )\r
105                                                 nodeToMove.focus();\r
106                                         ev.preventDefault(true);\r
107                                 }\r
108                                 break;\r
109 \r
110                         // LEFT-ARROW\r
111                         case rtl ? 39 : 37 :\r
112                         // SHIFT + TAB\r
113                         case CKEDITOR.SHIFT + 9 :\r
114                                 // relative is TD\r
115                                 if ( ( relative = element.getParent().getPrevious() ) )\r
116                                 {\r
117                                         nodeToMove = relative.getChild( 0 );\r
118                                         nodeToMove.focus();\r
119                                         ev.preventDefault(true);\r
120                                 }\r
121                                 // relative is TR\r
122                                 else if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
123                                 {\r
124                                         nodeToMove = relative.getLast().getChild( 0 );\r
125                                         nodeToMove.focus();\r
126                                         ev.preventDefault(true);\r
127                                 }\r
128                                 break;\r
129                         default :\r
130                                 // Do not stop not handled events.\r
131                                 return;\r
132                 }\r
133         });\r
134 \r
135         // Build the HTML for the smiley images table.\r
136         var labelId = CKEDITOR.tools.getNextId() + '_smiley_emtions_label';\r
137         var html =\r
138         [\r
139                 '<div>' +\r
140                 '<span id="' + labelId + '" class="cke_voice_label">' + lang.options +'</span>',\r
141                 '<table role="listbox" aria-labelledby="' + labelId + '" style="width:100%;height:100%" cellspacing="2" cellpadding="2"',\r
142                 CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style="position:absolute;"' : '',\r
143                 '><tbody>'\r
144         ];\r
145 \r
146         var size = images.length;\r
147         for ( i = 0 ; i < size ; i++ )\r
148         {\r
149                 if ( i % columns === 0 )\r
150                         html.push( '<tr>' );\r
151 \r
152                 var smileyLabelId = 'cke_smile_label_' + i + '_' + CKEDITOR.tools.getNextNumber();\r
153                 html.push(\r
154                         '<td class="cke_dark_background cke_centered" style="vertical-align: middle;">' +\r
155                                 '<a href="javascript:void(0)" role="option"',\r
156                                         ' aria-posinset="' + ( i +1 ) + '"',\r
157                                         ' aria-setsize="' + size + '"',\r
158                                         ' aria-labelledby="' + smileyLabelId + '"',\r
159                                         ' class="cke_smile cke_hand" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',\r
160                                         '<img class="cke_hand" title="', config.smiley_descriptions[i], '"' +\r
161                                                 ' cke_src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '" alt="', config.smiley_descriptions[i], '"',\r
162                                                 ' src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',\r
163                                                 // IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct.\r
164                                                 ( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ),\r
165                                         '>' +\r
166                                         '<span id="' + smileyLabelId + '" class="cke_voice_label">' +config.smiley_descriptions[ i ]  + '</span>' +\r
167                                 '</a>',\r
168                         '</td>' );\r
169 \r
170                 if ( i % columns == columns - 1 )\r
171                         html.push( '</tr>' );\r
172         }\r
173 \r
174         if ( i < columns - 1 )\r
175         {\r
176                 for ( ; i < columns - 1 ; i++ )\r
177                         html.push( '<td></td>' );\r
178                 html.push( '</tr>' );\r
179         }\r
180 \r
181         html.push( '</tbody></table></div>' );\r
182 \r
183         var smileySelector =\r
184         {\r
185                 type : 'html',\r
186                 html : html.join( '' ),\r
187                 onLoad : function( event )\r
188                 {\r
189                         dialog = event.sender;\r
190                 },\r
191                 focus : function()\r
192                 {\r
193                         var self = this;\r
194                         // IE need a while to move the focus (#6539).\r
195                         setTimeout( function ()\r
196                         {\r
197                                 var firstSmile = self.getElement().getElementsByTag( 'a' ).getItem( 0 );\r
198                                 firstSmile.focus();\r
199                         }, 0 );\r
200                 },\r
201                 onClick : onClick,\r
202                 style : 'width: 100%; border-collapse: separate;'\r
203         };\r
204 \r
205         return {\r
206                 title : editor.lang.smiley.title,\r
207                 minWidth : 270,\r
208                 minHeight : 120,\r
209                 contents : [\r
210                         {\r
211                                 id : 'tab1',\r
212                                 label : '',\r
213                                 title : '',\r
214                                 expand : true,\r
215                                 padding : 0,\r
216                                 elements : [\r
217                                                 smileySelector\r
218                                         ]\r
219                         }\r
220                 ],\r
221                 buttons : [ CKEDITOR.dialog.cancelButton ]\r
222         };\r
223 } );\r