2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
5 CKEDITOR.dialog.add( 'select', function( editor )
\r
7 // Add a new option to a SELECT object (combo or list).
\r
8 function addOption( combo, optionText, optionValue, documentObject, index )
\r
10 combo = getSelect( combo );
\r
12 if ( documentObject )
\r
13 oOption = documentObject.createElement( "OPTION" );
\r
15 oOption = document.createElement( "OPTION" );
\r
17 if ( combo && oOption && oOption.getName() == 'option' )
\r
19 if ( CKEDITOR.env.ie ) {
\r
20 if ( !isNaN( parseInt( index, 10) ) )
\r
21 combo.$.options.add( oOption.$, index );
\r
23 combo.$.options.add( oOption.$ );
\r
25 oOption.$.innerHTML = optionText.length > 0 ? optionText : '';
\r
26 oOption.$.value = optionValue;
\r
30 if ( index !== null && index < combo.getChildCount() )
\r
31 combo.getChild( index < 0 ? 0 : index ).insertBeforeMe( oOption );
\r
33 combo.append( oOption );
\r
35 oOption.setText( optionText.length > 0 ? optionText : '' );
\r
36 oOption.setValue( optionValue );
\r
44 // Remove all selected options from a SELECT object.
\r
45 function removeSelectedOptions( combo )
\r
47 combo = getSelect( combo );
\r
49 // Save the selected index
\r
50 var iSelectedIndex = getSelectedIndex( combo );
\r
52 // Remove all selected options.
\r
53 for ( var i = combo.getChildren().count() - 1 ; i >= 0 ; i-- )
\r
55 if ( combo.getChild( i ).$.selected )
\r
56 combo.getChild( i ).remove();
\r
59 // Reset the selection based on the original selected index.
\r
60 setSelectedIndex( combo, iSelectedIndex );
\r
62 //Modify option from a SELECT object.
\r
63 function modifyOption( combo, index, title, value )
\r
65 combo = getSelect( combo );
\r
68 var child = combo.getChild( index );
\r
69 child.setText( title );
\r
70 child.setValue( value );
\r
73 function removeAllOptions( combo )
\r
75 combo = getSelect( combo );
\r
76 while( combo.getChild( 0 ) && combo.getChild( 0 ).remove() )
\r
79 // Moves the selected option by a number of steps (also negative).
\r
80 function changeOptionPosition( combo, steps, documentObject )
\r
82 combo = getSelect( combo );
\r
83 var iActualIndex = getSelectedIndex( combo );
\r
84 if ( iActualIndex < 0 )
\r
87 var iFinalIndex = iActualIndex + steps;
\r
88 iFinalIndex = ( iFinalIndex < 0 ) ? 0 : iFinalIndex;
\r
89 iFinalIndex = ( iFinalIndex >= combo.getChildCount() ) ? combo.getChildCount() - 1 : iFinalIndex;
\r
91 if ( iActualIndex == iFinalIndex )
\r
94 var oOption = combo.getChild( iActualIndex ),
\r
95 sText = oOption.getText(),
\r
96 sValue = oOption.getValue();
\r
100 oOption = addOption( combo, sText, sValue, ( !documentObject ) ? null : documentObject, iFinalIndex );
\r
101 setSelectedIndex( combo, iFinalIndex );
\r
104 function getSelectedIndex( combo )
\r
106 combo = getSelect( combo );
\r
107 return combo ? combo.$.selectedIndex : -1;
\r
109 function setSelectedIndex( combo, index )
\r
111 combo = getSelect( combo );
\r
114 var count = combo.getChildren().count();
\r
115 combo.$.selectedIndex = ( index >= count ) ? ( count - 1 ) : index;
\r
118 function getOptions( combo )
\r
120 combo = getSelect( combo );
\r
121 return combo ? combo.getChildren() : false;
\r
123 function getSelect( obj )
\r
125 if ( obj && obj.domId && obj.getInputElement().$ ) // Dialog element.
\r
126 return obj.getInputElement();
\r
127 else if ( obj && obj.$ )
\r
133 title : editor.lang.select.title,
\r
134 minWidth : CKEDITOR.env.ie ? 460 : 395,
\r
135 minHeight : CKEDITOR.env.ie ? 320 : 300,
\r
136 onShow : function()
\r
138 delete this.selectBox;
\r
139 this.setupContent( 'clear' );
\r
140 var element = this.getParentEditor().getSelection().getSelectedElement();
\r
141 if ( element && element.getName() == "select" )
\r
143 this.selectBox = element;
\r
144 this.setupContent( element.getName(), element );
\r
146 // Load Options into dialog.
\r
147 var objOptions = getOptions( element );
\r
148 for ( var i = 0 ; i < objOptions.count() ; i++ )
\r
149 this.setupContent( 'option', objOptions.getItem( i ) );
\r
154 var editor = this.getParentEditor(),
\r
155 element = this.selectBox,
\r
156 isInsertMode = !element;
\r
158 if ( isInsertMode )
\r
159 element = editor.document.createElement( 'select' );
\r
160 this.commitContent( element );
\r
162 if ( isInsertMode )
\r
163 editor.insertElement( element );
\r
168 label : editor.lang.select.selectInfo,
\r
169 title : editor.lang.select.selectInfo,
\r
175 widths : [ '25%','75%' ],
\r
176 labelLayout : 'horizontal',
\r
177 label : editor.lang.common.name,
\r
181 style : 'width:350px',
\r
182 setup : function( name, element )
\r
184 if ( name == 'clear' )
\r
185 this.setValue( '' );
\r
186 else if ( name == 'select' )
\r
189 element.getAttribute( '_cke_saved_name' ) ||
\r
190 element.getAttribute( 'name' ) ||
\r
194 commit : function( element )
\r
196 if ( this.getValue() )
\r
197 element.setAttribute( '_cke_saved_name', this.getValue() );
\r
200 element.removeAttribute( '_cke_saved_name' ) ;
\r
201 element.removeAttribute( 'name' );
\r
208 widths : [ '25%','75%' ],
\r
209 labelLayout : 'horizontal',
\r
210 label : editor.lang.select.value,
\r
211 style : 'width:350px',
\r
213 className : 'cke_disabled',
\r
214 onLoad : function()
\r
216 this.getInputElement().setAttribute( 'readOnly', true );
\r
218 setup : function( name, element )
\r
220 if ( name == 'clear' )
\r
221 this.setValue( '' );
\r
222 else if ( name == 'option' && element.getAttribute( 'selected' ) )
\r
223 this.setValue( element.$.value );
\r
228 widths : [ '175px', '170px' ],
\r
236 labelLayout : 'horizontal',
\r
237 label : editor.lang.select.size,
\r
240 style : 'width:175px',
\r
241 validate: function()
\r
243 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
\r
244 return ( ( this.getValue() === '' ) || func.apply( this ) );
\r
246 setup : function( name, element )
\r
248 if ( name == 'select' )
\r
249 this.setValue( element.getAttribute( 'size' ) || '' );
\r
250 if ( CKEDITOR.env.webkit )
\r
251 this.getInputElement().setStyle( 'width', '86px' );
\r
253 commit : function( element )
\r
255 if ( this.getValue() )
\r
256 element.setAttribute( 'size', this.getValue() );
\r
258 element.removeAttribute( 'size' );
\r
263 html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.lines ) + '</span>'
\r
269 html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.opAvail ) + '</span>'
\r
273 widths : [ '115px', '115px' ,'100px' ],
\r
284 label : editor.lang.select.opText,
\r
285 style : 'width:115px',
\r
286 setup : function( name, element )
\r
288 if ( name == 'clear' )
\r
289 this.setValue( "" );
\r
298 style : 'width:115px;height:75px',
\r
300 onChange : function()
\r
302 var dialog = this.getDialog(),
\r
303 values = dialog.getContentElement( 'info', 'cmbValue' ),
\r
304 optName = dialog.getContentElement( 'info', 'txtOptName' ),
\r
305 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
\r
306 iIndex = getSelectedIndex( this );
\r
308 setSelectedIndex( values, iIndex );
\r
309 optName.setValue( this.getValue() );
\r
310 optValue.setValue( values.getValue() );
\r
312 setup : function( name, element )
\r
314 if ( name == 'clear' )
\r
315 removeAllOptions( this );
\r
316 else if ( name == 'option' )
\r
317 addOption( this, element.getText(), element.getText(),
\r
318 this.getDialog().getParentEditor().document );
\r
320 commit : function( element )
\r
322 var dialog = this.getDialog(),
\r
323 optionsNames = getOptions( this ),
\r
324 optionsValues = getOptions( dialog.getContentElement( 'info', 'cmbValue' ) ),
\r
325 selectValue = dialog.getContentElement( 'info', 'txtValue' ).getValue();
\r
327 removeAllOptions( element );
\r
329 for ( var i = 0 ; i < optionsNames.count() ; i++ )
\r
331 var oOption = addOption( element, optionsNames.getItem( i ).getValue(),
\r
332 optionsValues.getItem( i ).getValue(), dialog.getParentEditor().document );
\r
333 if ( optionsValues.getItem( i ).getValue() == selectValue )
\r
335 oOption.setAttribute( 'selected', 'selected' );
\r
336 oOption.selected = true;
\r
348 id : 'txtOptValue',
\r
350 label : editor.lang.select.opValue,
\r
351 style : 'width:115px',
\r
352 setup : function( name, element )
\r
354 if ( name == 'clear' )
\r
355 this.setValue( "" );
\r
363 style : 'width:115px;height:75px',
\r
365 onChange : function()
\r
367 var dialog = this.getDialog(),
\r
368 names = dialog.getContentElement( 'info', 'cmbName' ),
\r
369 optName = dialog.getContentElement( 'info', 'txtOptName' ),
\r
370 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
\r
371 iIndex = getSelectedIndex( this );
\r
373 setSelectedIndex( names, iIndex );
\r
374 optName.setValue( names.getValue() );
\r
375 optValue.setValue( this.getValue() );
\r
377 setup : function( name, element )
\r
379 if ( name == 'clear' )
\r
380 removeAllOptions( this );
\r
381 else if ( name == 'option' )
\r
383 var oValue = element.getValue();
\r
384 addOption( this, oValue, oValue,
\r
385 this.getDialog().getParentEditor().document );
\r
386 if ( element.getAttribute( 'selected' ) == 'selected' )
\r
387 this.getDialog().getContentElement( 'info', 'txtValue' ).setValue( oValue );
\r
401 label : editor.lang.select.btnAdd,
\r
402 title : editor.lang.select.btnAdd,
\r
403 style : 'width:100%;',
\r
404 onClick : function()
\r
407 var dialog = this.getDialog(),
\r
408 parentEditor = dialog.getParentEditor(),
\r
409 optName = dialog.getContentElement( 'info', 'txtOptName' ),
\r
410 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
\r
411 names = dialog.getContentElement( 'info', 'cmbName' ),
\r
412 values = dialog.getContentElement( 'info', 'cmbValue' );
\r
414 addOption(names, optName.getValue(), optName.getValue(), dialog.getParentEditor().document );
\r
415 addOption(values, optValue.getValue(), optValue.getValue(), dialog.getParentEditor().document );
\r
417 optName.setValue( "" );
\r
418 optValue.setValue( "" );
\r
423 label : editor.lang.select.btnModify,
\r
424 title : editor.lang.select.btnModify,
\r
425 style : 'width:100%;',
\r
426 onClick : function()
\r
428 //Modify selected option.
\r
429 var dialog = this.getDialog(),
\r
430 optName = dialog.getContentElement( 'info', 'txtOptName' ),
\r
431 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
\r
432 names = dialog.getContentElement( 'info', 'cmbName' ),
\r
433 values = dialog.getContentElement( 'info', 'cmbValue' ),
\r
434 iIndex = getSelectedIndex( names );
\r
438 modifyOption( names, iIndex, optName.getValue(), optName.getValue() );
\r
439 modifyOption( values, iIndex, optValue.getValue(), optValue.getValue() );
\r
445 style : 'width:100%;',
\r
446 label : editor.lang.select.btnUp,
\r
447 title : editor.lang.select.btnUp,
\r
448 onClick : function()
\r
451 var dialog = this.getDialog(),
\r
452 names = dialog.getContentElement( 'info', 'cmbName' ),
\r
453 values = dialog.getContentElement( 'info', 'cmbValue' );
\r
455 changeOptionPosition( names, -1, dialog.getParentEditor().document );
\r
456 changeOptionPosition( values, -1, dialog.getParentEditor().document );
\r
461 style : 'width:100%;',
\r
462 label : editor.lang.select.btnDown,
\r
463 title : editor.lang.select.btnDown,
\r
464 onClick : function()
\r
467 var dialog = this.getDialog(),
\r
468 names = dialog.getContentElement( 'info', 'cmbName' ),
\r
469 values = dialog.getContentElement( 'info', 'cmbValue' );
\r
471 changeOptionPosition( names, 1, dialog.getParentEditor().document );
\r
472 changeOptionPosition( values, 1, dialog.getParentEditor().document );
\r
481 widths : [ '40%', '20%', '40%' ],
\r
486 label : editor.lang.select.btnSetValue,
\r
487 title : editor.lang.select.btnSetValue,
\r
488 onClick : function()
\r
490 //Set as default value.
\r
491 var dialog = this.getDialog(),
\r
492 values = dialog.getContentElement( 'info', 'cmbValue' ),
\r
493 txtValue = dialog.getContentElement( 'info', 'txtValue' );
\r
494 txtValue.setValue( values.getValue() );
\r
499 label : editor.lang.select.btnDelete,
\r
500 title : editor.lang.select.btnDelete,
\r
501 onClick : function()
\r
504 var dialog = this.getDialog(),
\r
505 names = dialog.getContentElement( 'info', 'cmbName' ),
\r
506 values = dialog.getContentElement( 'info', 'cmbValue' ),
\r
507 optName = dialog.getContentElement( 'info', 'txtOptName' ),
\r
508 optValue = dialog.getContentElement( 'info', 'txtOptValue' );
\r
510 removeSelectedOptions( names );
\r
511 removeSelectedOptions( values );
\r
513 optName.setValue( "" );
\r
514 optValue.setValue( "" );
\r
520 label : editor.lang.select.chkMulti,
\r
524 setup : function( name, element )
\r
526 if ( name == 'select' )
\r
527 this.setValue( element.getAttribute( 'multiple' ) );
\r
528 if ( CKEDITOR.env.webkit )
\r
529 this.getElement().getParent().setStyle( 'vertical-align', 'middle' );
\r
531 commit : function( element )
\r
533 if ( this.getValue() )
\r
534 element.setAttribute( 'multiple', this.getValue() );
\r
536 element.removeAttribute( 'multiple' );
\r