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