      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