JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
2e9cd751e698aa42cfc74839b74099326f52e57b
[ckeditor.git] / _source / plugins / smiley / dialogs / smiley.js
1 /*\r
2 Copyright (c) 2003-2012, 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                                 // relative is TD\r
92                                 if ( ( relative = element.getParent().getNext() ) )\r
93                                 {\r
94                                         nodeToMove = relative.getChild( 0 );\r
95                                         nodeToMove.focus();\r
96                                         ev.preventDefault(true);\r
97                                 }\r
98                                 // relative is TR\r
99                                 else if ( ( relative = element.getParent().getParent().getNext() ) )\r
100                                 {\r
101                                         nodeToMove = relative.getChild( [0, 0] );\r
102                                         if ( nodeToMove )\r
103                                                 nodeToMove.focus();\r
104                                         ev.preventDefault(true);\r
105                                 }\r
106                                 break;\r
107 \r
108                         // LEFT-ARROW\r
109                         case rtl ? 39 : 37 :\r
110                                 // relative is TD\r
111                                 if ( ( relative = element.getParent().getPrevious() ) )\r
112                                 {\r
113                                         nodeToMove = relative.getChild( 0 );\r
114                                         nodeToMove.focus();\r
115                                         ev.preventDefault(true);\r
116                                 }\r
117                                 // relative is TR\r
118                                 else if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
119                                 {\r
120                                         nodeToMove = relative.getLast().getChild( 0 );\r
121                                         nodeToMove.focus();\r
122                                         ev.preventDefault(true);\r
123                                 }\r
124                                 break;\r
125                         default :\r
126                                 // Do not stop not handled events.\r
127                                 return;\r
128                 }\r
129         });\r
130 \r
131         // Build the HTML for the smiley images table.\r
132         var labelId = CKEDITOR.tools.getNextId() + '_smiley_emtions_label';\r
133         var html =\r
134         [\r
135                 '<div>' +\r
136                 '<span id="' + labelId + '" class="cke_voice_label">' + lang.options +'</span>',\r
137                 '<table role="listbox" aria-labelledby="' + labelId + '" style="width:100%;height:100%" cellspacing="2" cellpadding="2"',\r
138                 CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style="position:absolute;"' : '',\r
139                 '><tbody>'\r
140         ];\r
141 \r
142         var size = images.length;\r
143         for ( i = 0 ; i < size ; i++ )\r
144         {\r
145                 if ( i % columns === 0 )\r
146                         html.push( '<tr role="presentation">' );\r
147 \r
148                 var smileyLabelId = 'cke_smile_label_' + i + '_' + CKEDITOR.tools.getNextNumber();\r
149                 html.push(\r
150                         '<td class="cke_dark_background cke_centered" style="vertical-align: middle;" role="presentation">' +\r
151                                 '<a href="javascript:void(0)" role="option"',\r
152                                         ' aria-posinset="' + ( i +1 ) + '"',\r
153                                         ' aria-setsize="' + size + '"',\r
154                                         ' aria-labelledby="' + smileyLabelId + '"',\r
155                                         ' class="cke_smile cke_hand" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',\r
156                                         '<img class="cke_hand" title="', config.smiley_descriptions[i], '"' +\r
157                                                 ' cke_src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '" alt="', config.smiley_descriptions[i], '"',\r
158                                                 ' src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',\r
159                                                 // IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct.\r
160                                                 ( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ),\r
161                                         '>' +\r
162                                         '<span id="' + smileyLabelId + '" class="cke_voice_label">' +config.smiley_descriptions[ i ]  + '</span>' +\r
163                                 '</a>',\r
164                         '</td>' );\r
165 \r
166                 if ( i % columns == columns - 1 )\r
167                         html.push( '</tr>' );\r
168         }\r
169 \r
170         if ( i < columns - 1 )\r
171         {\r
172                 for ( ; i < columns - 1 ; i++ )\r
173                         html.push( '<td></td>' );\r
174                 html.push( '</tr>' );\r
175         }\r
176 \r
177         html.push( '</tbody></table></div>' );\r
178 \r
179         var smileySelector =\r
180         {\r
181                 type : 'html',\r
182                 id : 'smileySelector',\r
183                 html : html.join( '' ),\r
184                 onLoad : function( event )\r
185                 {\r
186                         dialog = event.sender;\r
187                 },\r
188                 focus : function()\r
189                 {\r
190                         var self = this;\r
191                         // IE need a while to move the focus (#6539).\r
192                         setTimeout( function ()\r
193                         {\r
194                                 var firstSmile = self.getElement().getElementsByTag( 'a' ).getItem( 0 );\r
195                                 firstSmile.focus();\r
196                         }, 0 );\r
197                 },\r
198                 onClick : onClick,\r
199                 style : 'width: 100%; border-collapse: separate;'\r
200         };\r
201 \r
202         return {\r
203                 title : editor.lang.smiley.title,\r
204                 minWidth : 270,\r
205                 minHeight : 120,\r
206                 contents : [\r
207                         {\r
208                                 id : 'tab1',\r
209                                 label : '',\r
210                                 title : '',\r
211                                 expand : true,\r
212                                 padding : 0,\r
213                                 elements : [\r
214                                                 smileySelector\r
215                                         ]\r
216                         }\r
217                 ],\r
218                 buttons : [ CKEDITOR.dialog.cancelButton ]\r
219         };\r
220 } );\r