1 /*
  2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
  3 For licensing, see LICENSE.html or http://ckeditor.com/license
  4 */
  5 CKEDITOR.dialog.add( 'select', function( editor )
  6 {
  7 	// Add a new option to a SELECT object (combo or list).
  8 	function addOption( combo, optionText, optionValue, documentObject, index )
  9 	{
 10 		combo = getSelect( combo );
 11 		var oOption;
 12 		if ( documentObject )
 13 			oOption = documentObject.createElement( "OPTION" );
 14 		else
 15 			oOption = document.createElement( "OPTION" );
 16
 17 		if ( combo && oOption && oOption.getName() == 'option' )
 18 		{
 19 			if ( CKEDITOR.env.ie ) {
 20 				if ( !isNaN( parseInt( index, 10) ) )
 21 					combo.$.options.add( oOption.$, index );
 22 				else
 23 					combo.$.options.add( oOption.$ );
 24
 25 				oOption.$.innerHTML = optionText.length > 0 ? optionText : '';
 26 				oOption.$.value     = optionValue;
 27 			}
 28 			else
 29 			{
 30 				if ( index !== null && index < combo.getChildCount() )
 31 					combo.getChild( index < 0 ? 0 : index ).insertBeforeMe( oOption );
 32 				else
 33 					combo.append( oOption );
 34
 35 				oOption.setText( optionText.length > 0 ? optionText : '' );
 36 				oOption.setValue( optionValue );
 37 			}
 38 		}
 39 		else
 40 			return false;
 41
 42 		return oOption;
 43 	}
 44 	// Remove all selected options from a SELECT object.
 45 	function removeSelectedOptions( combo )
 46 	{
 47 		combo = getSelect( combo );
 48
 49 		// Save the selected index
 50 		var iSelectedIndex = getSelectedIndex( combo );
 51
 52 		// Remove all selected options.
 53 		for ( var i = combo.getChildren().count() - 1 ; i >= 0 ; i-- )
 54 		{
 55 			if ( combo.getChild( i ).$.selected )
 56 				combo.getChild( i ).remove();
 57 		}
 58
 59 		// Reset the selection based on the original selected index.
 60 		setSelectedIndex( combo, iSelectedIndex );
 61 	}
 62 	//Modify option  from a SELECT object.
 63 	function modifyOption( combo, index, title, value )
 64 	{
 65 		combo = getSelect( combo );
 66 		if ( index < 0 )
 67 			return false;
 68 		var child = combo.getChild( index );
 69 		child.setText( title );
 70 		child.setValue( value );
 71 		return child;
 72 	}
 73 	function removeAllOptions( combo )
 74 	{
 75 		combo = getSelect( combo );
 76 		while( combo.getChild( 0 ) && combo.getChild( 0 ).remove() )
 77 		{ /*jsl:pass*/ }
 78 	}
 79 	// Moves the selected option by a number of steps (also negative).
 80 	function changeOptionPosition( combo, steps, documentObject )
 81 	{
 82 		combo = getSelect( combo );
 83 		var iActualIndex = getSelectedIndex( combo );
 84 		if ( iActualIndex < 0 )
 85 			return false;
 86
 87 		var iFinalIndex = iActualIndex + steps;
 88 		iFinalIndex = ( iFinalIndex < 0 ) ? 0 : iFinalIndex;
 89 		iFinalIndex = ( iFinalIndex >= combo.getChildCount() ) ? combo.getChildCount() - 1 : iFinalIndex;
 90
 91 		if ( iActualIndex == iFinalIndex )
 92 			return false;
 93
 94 		var oOption = combo.getChild( iActualIndex ),
 95 			sText	= oOption.getText(),
 96 			sValue	= oOption.getValue();
 97
 98 		oOption.remove();
 99
100 		oOption = addOption( combo, sText, sValue, ( !documentObject ) ? null : documentObject, iFinalIndex );
101 		setSelectedIndex( combo, iFinalIndex );
102 		return oOption;
103 	}
104 	function getSelectedIndex( combo )
105 	{
106 		combo = getSelect( combo );
107 		return combo ? combo.$.selectedIndex : -1;
108 	}
109 	function setSelectedIndex( combo, index )
110 	{
111 		combo = getSelect( combo );
112 		if ( index < 0 )
113 			return null;
114 		var count = combo.getChildren().count();
115 		combo.$.selectedIndex = ( index >= count ) ? ( count - 1 ) : index;
116 		return combo;
117 	}
118 	function getOptions( combo )
119 	{
120 		combo = getSelect( combo );
121 		return combo ? combo.getChildren() : false;
122 	}
123 	function getSelect( obj )
124 	{
125 		if ( obj && obj.domId && obj.getInputElement().$ )				// Dialog element.
126 			return  obj.getInputElement();
127 		else if ( obj && obj.$ )
128 			return obj;
129 		return false;
130 	}
131
132 	return {
133 		title : editor.lang.select.title,
134 		minWidth : CKEDITOR.env.ie ? 460 : 395,
135 		minHeight : CKEDITOR.env.ie ? 320 : 300,
136 		onShow : function()
137 		{
138 			delete this.selectBox;
139 			this.setupContent( 'clear' );
140 			var element = this.getParentEditor().getSelection().getSelectedElement();
141 			if ( element && element.getName() == "select" )
142 			{
143 				this.selectBox = element;
144 				this.setupContent( element.getName(), element );
145
146 				// Load Options into dialog.
147 				var objOptions = getOptions( element );
148 				for ( var i = 0 ; i < objOptions.count() ; i++ )
149 					this.setupContent( 'option', objOptions.getItem( i ) );
150 			}
151 		},
152 		onOk : function()
153 		{
154 			var editor = this.getParentEditor(),
155 				element = this.selectBox,
156 				isInsertMode = !element;
157
158 			if ( isInsertMode )
159 				element = editor.document.createElement( 'select' );
160 			this.commitContent( element );
161
162 			if ( isInsertMode )
163 				editor.insertElement( element );
164 		},
165 		contents : [
166 			{
167 				id : 'info',
168 				label : editor.lang.select.selectInfo,
169 				title : editor.lang.select.selectInfo,
170 				accessKey : '',
171 				elements : [
172 					{
173 						id : 'txtName',
174 						type : 'text',
175 						widths : [ '25%','75%' ],
176 						labelLayout : 'horizontal',
177 						label : editor.lang.common.name,
178 						'default' : '',
179 						accessKey : 'N',
180 						align : 'center',
181 						style : 'width:350px',
182 						setup : function( name, element )
183 						{
184 							if ( name == 'clear' )
185 								this.setValue( '' );
186 							else if ( name == 'select' )
187 							{
188 								this.setValue(
189 										element.getAttribute( '_cke_saved_name' ) ||
190 										element.getAttribute( 'name' ) ||
191 										'' );
192 							}
193 						},
194 						commit : function( element )
195 						{
196 							if ( this.getValue() )
197 								element.setAttribute( '_cke_saved_name', this.getValue() );
198 							else
199 							{
200 								element.removeAttribute( '_cke_saved_name' ) ;
201 								element.removeAttribute( 'name' );
202 							}
203 						}
204 					},
205 					{
206 						id : 'txtValue',
207 						type : 'text',
208 						widths : [ '25%','75%' ],
209 						labelLayout : 'horizontal',
210 						label : editor.lang.select.value,
211 						style : 'width:350px',
212 						'default' : '',
213 						className : 'cke_disabled',
214 						onLoad : function()
215 						{
216 							this.getInputElement().setAttribute( 'readOnly', true );
217 						},
218 						setup : function( name, element )
219 						{
220 							if ( name == 'clear' )
221 								this.setValue( '' );
222 							else if ( name == 'option' && element.getAttribute( 'selected' ) )
223 								this.setValue( element.$.value );
224 						}
225 					},
226 					{
227 						type : 'hbox',
228 						widths : [ '175px', '170px' ],
229 						align : 'center',
230 						children :
231 						[
232 							{
233 								id : 'txtSize',
234 								type : 'text',
235 								align : 'center',
236 								labelLayout : 'horizontal',
237 								label : editor.lang.select.size,
238 								'default' : '',
239 								accessKey : 'S',
240 								style : 'width:175px',
241 								validate: function()
242 								{
243 									var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
244 									return ( ( this.getValue() === '' ) || func.apply( this ) );
245 								},
246 								setup : function( name, element )
247 								{
248 									if ( name == 'select' )
249 										this.setValue( element.getAttribute( 'size' ) || '' );
250 								},
251 								commit : function( element )
252 								{
253 									if ( this.getValue() )
254 										element.setAttribute( 'size', this.getValue() );
255 									else
256 										element.removeAttribute( 'size' );
257 								}
258 							},
259 							{
260 								type : 'html',
261 								html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.lines ) + '</span>'
262 							}
263 						]
264 					},
265 					{
266 						type : 'html',
267 						html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.opAvail ) + '</span>'
268 					},
269 					{
270 						type : 'hbox',
271 						widths : [ '115px', '115px' ,'100px' ],
272 						align : 'top',
273 						children :
274 						[
275 							{
276 								type : 'vbox',
277 								children :
278 								[
279 									{
280 										id : 'txtOptName',
281 										type : 'text',
282 										label : editor.lang.select.opText,
283 										style : 'width:115px',
284 										setup : function( name, element )
285 										{
286 											if ( name == 'clear' )
287 												this.setValue( "" );
288 										}
289 									},
290 									{
291 										type : 'select',
292 										id : 'cmbName',
293 										label : '',
294 										title : '',
295 										size : 5,
296 										style : 'width:115px;height:75px',
297 										items : [],
298 										onChange : function()
299 										{
300 											var dialog = this.getDialog(),
301 												values = dialog.getContentElement( 'info', 'cmbValue' ),
302 												optName = dialog.getContentElement( 'info', 'txtOptName' ),
303 												optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
304 												iIndex = getSelectedIndex( this );
305
306 											setSelectedIndex( values, iIndex );
307 											optName.setValue( this.getValue() );
308 											optValue.setValue( values.getValue() );
309 										},
310 										setup : function( name, element )
311 										{
312 											if ( name == 'clear' )
313 												removeAllOptions( this );
314 											else if ( name == 'option' )
315 												addOption( this, element.getText(), element.getText(),
316 													this.getDialog().getParentEditor().document );
317 										},
318 										commit : function( element )
319 										{
320 											var dialog = this.getDialog(),
321 												optionsNames = getOptions( this ),
322 												optionsValues = getOptions( dialog.getContentElement( 'info', 'cmbValue' ) ),
323 												selectValue = dialog.getContentElement( 'info', 'txtValue' ).getValue();
324
325 											removeAllOptions( element );
326
327 											for ( var i = 0 ; i < optionsNames.count() ; i++ )
328 											{
329 												var oOption = addOption( element, optionsNames.getItem( i ).getValue(),
330 													optionsValues.getItem( i ).getValue(), dialog.getParentEditor().document );
331 												if ( optionsValues.getItem( i ).getValue() == selectValue )
332 												{
333 													oOption.setAttribute( 'selected', 'selected' );
334 													oOption.selected = true;
335 												}
336 											}
337 										}
338 									}
339 								]
340 							},
341 							{
342 								type : 'vbox',
343 								children :
344 								[
345 									{
346 										id : 'txtOptValue',
347 										type : 'text',
348 										label : editor.lang.select.opValue,
349 										style : 'width:115px',
350 										setup : function( name, element )
351 										{
352 											if ( name == 'clear' )
353 												this.setValue( "" );
354 										}
355 									},
356 									{
357 										type : 'select',
358 										id : 'cmbValue',
359 										label : '',
360 										size : 5,
361 										style : 'width:115px;height:75px',
362 										items : [],
363 										onChange : function()
364 										{
365 											var dialog = this.getDialog(),
366 												names = dialog.getContentElement( 'info', 'cmbName' ),
367 												optName = dialog.getContentElement( 'info', 'txtOptName' ),
368 												optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
369 												iIndex = getSelectedIndex( this );
370
371 											setSelectedIndex( names, iIndex );
372 											optName.setValue( names.getValue() );
373 											optValue.setValue( this.getValue() );
374 										},
375 										setup : function( name, element )
376 										{
377 											if ( name == 'clear' )
378 												removeAllOptions( this );
379 											else if ( name == 'option' )
380 											{
381 												var oValue	= element.getValue();
382 												addOption( this, oValue, oValue,
383 													this.getDialog().getParentEditor().document );
384 												if ( element.getAttribute( 'selected' ) == 'selected' )
385 													this.getDialog().getContentElement( 'info', 'txtValue' ).setValue( oValue );
386 											}
387 										}
388 									}
389 								]
390 							},
391 							{
392 								type : 'vbox',
393 								padding : 5,
394 								children :
395 								[
396 									{
397 										type : 'button',
398 										style : '',
399 										label : editor.lang.select.btnAdd,
400 										title : editor.lang.select.btnAdd,
401 										style : 'width:100%;',
402 										onClick : function()
403 										{
404 											//Add new option.
405 											var dialog = this.getDialog(),
406 												parentEditor = dialog.getParentEditor(),
407 												optName = dialog.getContentElement( 'info', 'txtOptName' ),
408 												optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
409 												names = dialog.getContentElement( 'info', 'cmbName' ),
410 												values = dialog.getContentElement( 'info', 'cmbValue' );
411
412 											addOption(names, optName.getValue(), optName.getValue(), dialog.getParentEditor().document );
413 											addOption(values, optValue.getValue(), optValue.getValue(), dialog.getParentEditor().document );
414
415 											optName.setValue( "" );
416 											optValue.setValue( "" );
417 										}
418 									},
419 									{
420 										type : 'button',
421 										label : editor.lang.select.btnModify,
422 										title : editor.lang.select.btnModify,
423 										style : 'width:100%;',
424 										onClick : function()
425 										{
426 											//Modify selected option.
427 											var dialog = this.getDialog(),
428 												optName = dialog.getContentElement( 'info', 'txtOptName' ),
429 												optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
430 												names = dialog.getContentElement( 'info', 'cmbName' ),
431 												values = dialog.getContentElement( 'info', 'cmbValue' ),
432 												iIndex = getSelectedIndex( names );
433
434 											if ( iIndex >= 0 )
435 											{
436 												modifyOption( names, iIndex, optName.getValue(), optName.getValue() );
437 												modifyOption( values, iIndex, optValue.getValue(), optValue.getValue() );
438 											}
439 										}
440 									},
441 									{
442 										type : 'button',
443 										style : 'width:100%;',
444 										label : editor.lang.select.btnUp,
445 										title : editor.lang.select.btnUp,
446 										onClick : function()
447 										{
448 											//Move up.
449 											var dialog = this.getDialog(),
450 												names = dialog.getContentElement( 'info', 'cmbName' ),
451 												values = dialog.getContentElement( 'info', 'cmbValue' );
452
453 											changeOptionPosition( names, -1, dialog.getParentEditor().document );
454 											changeOptionPosition( values, -1, dialog.getParentEditor().document );
455 										}
456 									},
457 									{
458 										type : 'button',
459 										style : 'width:100%;',
460 										label : editor.lang.select.btnDown,
461 										title : editor.lang.select.btnDown,
462 										onClick : function()
463 										{
464 											//Move down.
465 											var dialog = this.getDialog(),
466 												names = dialog.getContentElement( 'info', 'cmbName' ),
467 												values = dialog.getContentElement( 'info', 'cmbValue' );
468
469 											changeOptionPosition( names, 1, dialog.getParentEditor().document );
470 											changeOptionPosition( values, 1, dialog.getParentEditor().document );
471 										}
472 									}
473 								]
474 							}
475 						]
476 					},
477 					{
478 						type : 'hbox',
479 						widths : [ '40%', '20%', '40%' ],
480 						children :
481 						[
482 							{
483 								type : 'button',
484 								label : editor.lang.select.btnSetValue,
485 								title : editor.lang.select.btnSetValue,
486 								onClick : function()
487 								{
488 									//Set as default value.
489 									var dialog = this.getDialog(),
490 										values = dialog.getContentElement( 'info', 'cmbValue' ),
491 										txtValue = dialog.getContentElement( 'info', 'txtValue' );
492 									txtValue.setValue( values.getValue() );
493 								}
494 							},
495 							{
496 								type : 'button',
497 								label : editor.lang.select.btnDelete,
498 								title : editor.lang.select.btnDelete,
499 								onClick : function()
500 								{
501 									// Delete option.
502 									var dialog = this.getDialog(),
503 										names = dialog.getContentElement( 'info', 'cmbName' ),
504 										values = dialog.getContentElement( 'info', 'cmbValue' ),
505 										optName = dialog.getContentElement( 'info', 'txtOptName' ),
506 										optValue = dialog.getContentElement( 'info', 'txtOptValue' );
507
508 									removeSelectedOptions( names );
509 									removeSelectedOptions( values );
510
511 									optName.setValue( "" );
512 									optValue.setValue( "" );
513 								}
514 							},
515 							{
516 								id : 'chkMulti',
517 								type : 'checkbox',
518 								label : editor.lang.select.chkMulti,
519 								'default' : '',
520 								accessKey : 'M',
521 								value : "checked",
522 								setup : function( name, element )
523 								{
524 									if ( name == 'select' )
525 										this.setValue( element.getAttribute( 'multiple' ) );
526 								},
527 								commit : function( element )
528 								{
529 									if ( this.getValue() )
530 										element.setAttribute( 'multiple', this.getValue() );
531 									else
532 										element.removeAttribute( 'multiple' );
533 								}
534 							}
535 						]
536 					}
537 				]
538 			}
539 		]
540 	};
541 });
542