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