1 /*
  2 Copyright (c) 2003-2012, 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 			{
164 				editor.insertElement( element );
165 				if ( CKEDITOR.env.ie )
166 				{
167 					var sel = editor.getSelection(),
168 						bms = sel.createBookmarks();
169 					setTimeout(function()
170 					{
171 						sel.selectBookmarks( bms );
172 					}, 0 );
173 				}
174 			}
175 		},
176 		contents : [
177 			{
178 				id : 'info',
179 				label : editor.lang.select.selectInfo,
180 				title : editor.lang.select.selectInfo,
181 				accessKey : '',
182 				elements : [
183 					{
184 						id : 'txtName',
185 						type : 'text',
186 						widths : [ '25%','75%' ],
187 						labelLayout : 'horizontal',
188 						label : editor.lang.common.name,
189 						'default' : '',
190 						accessKey : 'N',
191 						style : 'width:350px',
192 						setup : function( name, element )
193 						{
194 							if ( name == 'clear' )
195 								this.setValue( this[ 'default' ] || '' );
196 							else if ( name == 'select' )
197 							{
198 								this.setValue(
199 										element.data( 'cke-saved-name' ) ||
200 										element.getAttribute( 'name' ) ||
201 										'' );
202 							}
203 						},
204 						commit : function( element )
205 						{
206 							if ( this.getValue() )
207 								element.data( 'cke-saved-name', this.getValue() );
208 							else
209 							{
210 								element.data( 'cke-saved-name', false );
211 								element.removeAttribute( 'name' );
212 							}
213 						}
214 					},
215 					{
216 						id : 'txtValue',
217 						type : 'text',
218 						widths : [ '25%','75%' ],
219 						labelLayout : 'horizontal',
220 						label : editor.lang.select.value,
221 						style : 'width:350px',
222 						'default' : '',
223 						className : 'cke_disabled',
224 						onLoad : function()
225 						{
226 							this.getInputElement().setAttribute( 'readOnly', true );
227 						},
228 						setup : function( name, element )
229 						{
230 							if ( name == 'clear' )
231 								this.setValue( '' );
232 							else if ( name == 'option' && element.getAttribute( 'selected' ) )
233 								this.setValue( element.$.value );
234 						}
235 					},
236 					{
237 						type : 'hbox',
238 						widths : [ '175px', '170px' ],
239 						children :
240 						[
241 							{
242 								id : 'txtSize',
243 								type : 'text',
244 								labelLayout : 'horizontal',
245 								label : editor.lang.select.size,
246 								'default' : '',
247 								accessKey : 'S',
248 								style : 'width:175px',
249 								validate: function()
250 								{
251 									var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
252 									return ( ( this.getValue() === '' ) || func.apply( this ) );
253 								},
254 								setup : function( name, element )
255 								{
256 									if ( name == 'select' )
257 										this.setValue( element.getAttribute( 'size' ) || '' );
258 									if ( CKEDITOR.env.webkit )
259 										this.getInputElement().setStyle( 'width', '86px' );
260 								},
261 								commit : function( element )
262 								{
263 									if ( this.getValue() )
264 										element.setAttribute( 'size', this.getValue() );
265 									else
266 										element.removeAttribute( 'size' );
267 								}
268 							},
269 							{
270 								type : 'html',
271 								html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.lines ) + '</span>'
272 							}
273 						]
274 					},
275 					{
276 						type : 'html',
277 						html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.opAvail ) + '</span>'
278 					},
279 					{
280 						type : 'hbox',
281 						widths : [ '115px', '115px' ,'100px' ],
282 						children :
283 						[
284 							{
285 								type : 'vbox',
286 								children :
287 								[
288 									{
289 										id : 'txtOptName',
290 										type : 'text',
291 										label : editor.lang.select.opText,
292 										style : 'width:115px',
293 										setup : function( name, element )
294 										{
295 											if ( name == 'clear' )
296 												this.setValue( "" );
297 										}
298 									},
299 									{
300 										type : 'select',
301 										id : 'cmbName',
302 										label : '',
303 										title : '',
304 										size : 5,
305 										style : 'width:115px;height:75px',
306 										items : [],
307 										onChange : function()
308 										{
309 											var dialog = this.getDialog(),
310 												values = dialog.getContentElement( 'info', 'cmbValue' ),
311 												optName = dialog.getContentElement( 'info', 'txtOptName' ),
312 												optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
313 												iIndex = getSelectedIndex( this );
314 
315 											setSelectedIndex( values, iIndex );
316 											optName.setValue( this.getValue() );
317 											optValue.setValue( values.getValue() );
318 										},
319 										setup : function( name, element )
320 										{
321 											if ( name == 'clear' )
322 												removeAllOptions( this );
323 											else if ( name == 'option' )
324 												addOption( this, element.getText(), element.getText(),
325 													this.getDialog().getParentEditor().document );
326 										},
327 										commit : function( element )
328 										{
329 											var dialog = this.getDialog(),
330 												optionsNames = getOptions( this ),
331 												optionsValues = getOptions( dialog.getContentElement( 'info', 'cmbValue' ) ),
332 												selectValue = dialog.getContentElement( 'info', 'txtValue' ).getValue();
333 
334 											removeAllOptions( element );
335 
336 											for ( var i = 0 ; i < optionsNames.count() ; i++ )
337 											{
338 												var oOption = addOption( element, optionsNames.getItem( i ).getValue(),
339 													optionsValues.getItem( i ).getValue(), dialog.getParentEditor().document );
340 												if ( optionsValues.getItem( i ).getValue() == selectValue )
341 												{
342 													oOption.setAttribute( 'selected', 'selected' );
343 													oOption.selected = true;
344 												}
345 											}
346 										}
347 									}
348 								]
349 							},
350 							{
351 								type : 'vbox',
352 								children :
353 								[
354 									{
355 										id : 'txtOptValue',
356 										type : 'text',
357 										label : editor.lang.select.opValue,
358 										style : 'width:115px',
359 										setup : function( name, element )
360 										{
361 											if ( name == 'clear' )
362 												this.setValue( "" );
363 										}
364 									},
365 									{
366 										type : 'select',
367 										id : 'cmbValue',
368 										label : '',
369 										size : 5,
370 										style : 'width:115px;height:75px',
371 										items : [],
372 										onChange : function()
373 										{
374 											var dialog = this.getDialog(),
375 												names = dialog.getContentElement( 'info', 'cmbName' ),
376 												optName = dialog.getContentElement( 'info', 'txtOptName' ),
377 												optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
378 												iIndex = getSelectedIndex( this );
379 
380 											setSelectedIndex( names, iIndex );
381 											optName.setValue( names.getValue() );
382 											optValue.setValue( this.getValue() );
383 										},
384 										setup : function( name, element )
385 										{
386 											if ( name == 'clear' )
387 												removeAllOptions( this );
388 											else if ( name == 'option' )
389 											{
390 												var oValue	= element.getValue();
391 												addOption( this, oValue, oValue,
392 													this.getDialog().getParentEditor().document );
393 												if ( element.getAttribute( 'selected' ) == 'selected' )
394 													this.getDialog().getContentElement( 'info', 'txtValue' ).setValue( oValue );
395 											}
396 										}
397 									}
398 								]
399 							},
400 							{
401 								type : 'vbox',
402 								padding : 5,
403 								children :
404 								[
405 									{
406 										type : 'button',
407 										id : 'btnAdd',
408 										style : '',
409 										label : editor.lang.select.btnAdd,
410 										title : editor.lang.select.btnAdd,
411 										style : 'width:100%;',
412 										onClick : function()
413 										{
414 											//Add new option.
415 											var dialog = this.getDialog(),
416 												parentEditor = dialog.getParentEditor(),
417 												optName = dialog.getContentElement( 'info', 'txtOptName' ),
418 												optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
419 												names = dialog.getContentElement( 'info', 'cmbName' ),
420 												values = dialog.getContentElement( 'info', 'cmbValue' );
421 
422 											addOption(names, optName.getValue(), optName.getValue(), dialog.getParentEditor().document );
423 											addOption(values, optValue.getValue(), optValue.getValue(), dialog.getParentEditor().document );
424 
425 											optName.setValue( "" );
426 											optValue.setValue( "" );
427 										}
428 									},
429 									{
430 										type : 'button',
431 										id : 'btnModify',
432 										label : editor.lang.select.btnModify,
433 										title : editor.lang.select.btnModify,
434 										style : 'width:100%;',
435 										onClick : function()
436 										{
437 											//Modify selected option.
438 											var dialog = this.getDialog(),
439 												optName = dialog.getContentElement( 'info', 'txtOptName' ),
440 												optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
441 												names = dialog.getContentElement( 'info', 'cmbName' ),
442 												values = dialog.getContentElement( 'info', 'cmbValue' ),
443 												iIndex = getSelectedIndex( names );
444 
445 											if ( iIndex >= 0 )
446 											{
447 												modifyOption( names, iIndex, optName.getValue(), optName.getValue() );
448 												modifyOption( values, iIndex, optValue.getValue(), optValue.getValue() );
449 											}
450 										}
451 									},
452 									{
453 										type : 'button',
454 										id : 'btnUp',
455 										style : 'width:100%;',
456 										label : editor.lang.select.btnUp,
457 										title : editor.lang.select.btnUp,
458 										onClick : function()
459 										{
460 											//Move up.
461 											var dialog = this.getDialog(),
462 												names = dialog.getContentElement( 'info', 'cmbName' ),
463 												values = dialog.getContentElement( 'info', 'cmbValue' );
464 
465 											changeOptionPosition( names, -1, dialog.getParentEditor().document );
466 											changeOptionPosition( values, -1, dialog.getParentEditor().document );
467 										}
468 									},
469 									{
470 										type : 'button',
471 										id : 'btnDown',
472 										style : 'width:100%;',
473 										label : editor.lang.select.btnDown,
474 										title : editor.lang.select.btnDown,
475 										onClick : function()
476 										{
477 											//Move down.
478 											var dialog = this.getDialog(),
479 												names = dialog.getContentElement( 'info', 'cmbName' ),
480 												values = dialog.getContentElement( 'info', 'cmbValue' );
481 
482 											changeOptionPosition( names, 1, dialog.getParentEditor().document );
483 											changeOptionPosition( values, 1, dialog.getParentEditor().document );
484 										}
485 									}
486 								]
487 							}
488 						]
489 					},
490 					{
491 						type : 'hbox',
492 						widths : [ '40%', '20%', '40%' ],
493 						children :
494 						[
495 							{
496 								type : 'button',
497 								id : 'btnSetValue',
498 								label : editor.lang.select.btnSetValue,
499 								title : editor.lang.select.btnSetValue,
500 								onClick : function()
501 								{
502 									//Set as default value.
503 									var dialog = this.getDialog(),
504 										values = dialog.getContentElement( 'info', 'cmbValue' ),
505 										txtValue = dialog.getContentElement( 'info', 'txtValue' );
506 									txtValue.setValue( values.getValue() );
507 								}
508 							},
509 							{
510 								type : 'button',
511 								id : 'btnDelete',
512 								label : editor.lang.select.btnDelete,
513 								title : editor.lang.select.btnDelete,
514 								onClick : function()
515 								{
516 									// Delete option.
517 									var dialog = this.getDialog(),
518 										names = dialog.getContentElement( 'info', 'cmbName' ),
519 										values = dialog.getContentElement( 'info', 'cmbValue' ),
520 										optName = dialog.getContentElement( 'info', 'txtOptName' ),
521 										optValue = dialog.getContentElement( 'info', 'txtOptValue' );
522 
523 									removeSelectedOptions( names );
524 									removeSelectedOptions( values );
525 
526 									optName.setValue( "" );
527 									optValue.setValue( "" );
528 								}
529 							},
530 							{
531 								id : 'chkMulti',
532 								type : 'checkbox',
533 								label : editor.lang.select.chkMulti,
534 								'default' : '',
535 								accessKey : 'M',
536 								value : "checked",
537 								setup : function( name, element )
538 								{
539 									if ( name == 'select' )
540 										this.setValue( element.getAttribute( 'multiple' ) );
541 									if ( CKEDITOR.env.webkit )
542 										this.getElement().getParent().setStyle( 'vertical-align', 'middle' );
543 								},
544 								commit : function( element )
545 								{
546 									if ( this.getValue() )
547 										element.setAttribute( 'multiple', this.getValue() );
548 									else
549 										element.removeAttribute( 'multiple' );
550 								}
551 							}
552 						]
553 					}
554 				]
555 			}
556 		]
557 	};
558 });
559