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