2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.html or http://ckeditor.com/license
5 CKEDITOR.dialog.add( 'select', function( editor )
7 // Add a new option to a SELECT object (combo or list).
8 function addOption( combo, optionText, optionValue, documentObject, index )
10 combo = getSelect( combo );
13 oOption = documentObject.createElement( "OPTION" );
15 oOption = document.createElement( "OPTION" );
17 if ( combo && oOption && oOption.getName() == 'option' )
19 if ( CKEDITOR.env.ie ) {
20 if ( !isNaN( parseInt( index, 10) ) )
21 combo.$.options.add( oOption.$, index );
23 combo.$.options.add( oOption.$ );
25 oOption.$.innerHTML = optionText.length > 0 ? optionText : '';
26 oOption.$.value = optionValue;
30 if ( index !== null && index < combo.getChildCount() )
31 combo.getChild( index < 0 ? 0 : index ).insertBeforeMe( oOption );
33 combo.append( oOption );
35 oOption.setText( optionText.length > 0 ? optionText : '' );
36 oOption.setValue( optionValue );
44 // Remove all selected options from a SELECT object.
45 function removeSelectedOptions( combo )
47 combo = getSelect( combo );
49 // Save the selected index
50 var iSelectedIndex = getSelectedIndex( combo );
52 // Remove all selected options.
53 for ( var i = combo.getChildren().count() - 1 ; i >= 0 ; i-- )
55 if ( combo.getChild( i ).$.selected )
56 combo.getChild( i ).remove();
59 // Reset the selection based on the original selected index.
60 setSelectedIndex( combo, iSelectedIndex );
62 //Modify option from a SELECT object.
63 function modifyOption( combo, index, title, value )
65 combo = getSelect( combo );
68 var child = combo.getChild( index );
69 child.setText( title );
70 child.setValue( value );
73 function removeAllOptions( combo )
75 combo = getSelect( combo );
76 while ( combo.getChild( 0 ) && combo.getChild( 0 ).remove() )
79 // Moves the selected option by a number of steps (also negative).
80 function changeOptionPosition( combo, steps, documentObject )
82 combo = getSelect( combo );
83 var iActualIndex = getSelectedIndex( combo );
84 if ( iActualIndex < 0 )
87 var iFinalIndex = iActualIndex + steps;
88 iFinalIndex = ( iFinalIndex < 0 ) ? 0 : iFinalIndex;
89 iFinalIndex = ( iFinalIndex >= combo.getChildCount() ) ? combo.getChildCount() - 1 : iFinalIndex;
91 if ( iActualIndex == iFinalIndex )
94 var oOption = combo.getChild( iActualIndex ),
95 sText = oOption.getText(),
96 sValue = oOption.getValue();
100 oOption = addOption( combo, sText, sValue, ( !documentObject ) ? null : documentObject, iFinalIndex );
101 setSelectedIndex( combo, iFinalIndex );
104 function getSelectedIndex( combo )
106 combo = getSelect( combo );
107 return combo ? combo.$.selectedIndex : -1;
109 function setSelectedIndex( combo, index )
111 combo = getSelect( combo );
114 var count = combo.getChildren().count();
115 combo.$.selectedIndex = ( index >= count ) ? ( count - 1 ) : index;
118 function getOptions( combo )
120 combo = getSelect( combo );
121 return combo ? combo.getChildren() : false;
123 function getSelect( obj )
125 if ( obj && obj.domId && obj.getInputElement().$ ) // Dialog element.
126 return obj.getInputElement();
127 else if ( obj && obj.$ )
133 title : editor.lang.select.title,
134 minWidth : CKEDITOR.env.ie ? 460 : 395,
135 minHeight : CKEDITOR.env.ie ? 320 : 300,
138 delete this.selectBox;
139 this.setupContent( 'clear' );
140 var element = this.getParentEditor().getSelection().getSelectedElement();
141 if ( element && element.getName() == "select" )
143 this.selectBox = element;
144 this.setupContent( element.getName(), element );
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 ) );
154 var editor = this.getParentEditor(),
155 element = this.selectBox,
156 isInsertMode = !element;
159 element = editor.document.createElement( 'select' );
160 this.commitContent( element );
164 editor.insertElement( element );
165 if ( CKEDITOR.env.ie )
167 var sel = editor.getSelection(),
168 bms = sel.createBookmarks();
169 setTimeout(function()
171 sel.selectBookmarks( bms );
179 label : editor.lang.select.selectInfo,
180 title : editor.lang.select.selectInfo,
186 widths : [ '25%','75%' ],
187 labelLayout : 'horizontal',
188 label : editor.lang.common.name,
191 style : 'width:350px',
192 setup : function( name, element )
194 if ( name == 'clear' )
195 this.setValue( this[ 'default' ] || '' );
196 else if ( name == 'select' )
199 element.data( 'cke-saved-name' ) ||
200 element.getAttribute( 'name' ) ||
204 commit : function( element )
206 if ( this.getValue() )
207 element.data( 'cke-saved-name', this.getValue() );
210 element.data( 'cke-saved-name', false );
211 element.removeAttribute( 'name' );
218 widths : [ '25%','75%' ],
219 labelLayout : 'horizontal',
220 label : editor.lang.select.value,
221 style : 'width:350px',
223 className : 'cke_disabled',
226 this.getInputElement().setAttribute( 'readOnly', true );
228 setup : function( name, element )
230 if ( name == 'clear' )
232 else if ( name == 'option' && element.getAttribute( 'selected' ) )
233 this.setValue( element.$.value );
238 widths : [ '175px', '170px' ],
244 labelLayout : 'horizontal',
245 label : editor.lang.select.size,
248 style : 'width:175px',
251 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
252 return ( ( this.getValue() === '' ) || func.apply( this ) );
254 setup : function( name, element )
256 if ( name == 'select' )
257 this.setValue( element.getAttribute( 'size' ) || '' );
258 if ( CKEDITOR.env.webkit )
259 this.getInputElement().setStyle( 'width', '86px' );
261 commit : function( element )
263 if ( this.getValue() )
264 element.setAttribute( 'size', this.getValue() );
266 element.removeAttribute( 'size' );
271 html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.lines ) + '</span>'
277 html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.opAvail ) + '</span>'
281 widths : [ '115px', '115px' ,'100px' ],
291 label : editor.lang.select.opText,
292 style : 'width:115px',
293 setup : function( name, element )
295 if ( name == 'clear' )
305 style : 'width:115px;height:75px',
307 onChange : function()
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 );
315 setSelectedIndex( values, iIndex );
316 optName.setValue( this.getValue() );
317 optValue.setValue( values.getValue() );
319 setup : function( name, element )
321 if ( name == 'clear' )
322 removeAllOptions( this );
323 else if ( name == 'option' )
324 addOption( this, element.getText(), element.getText(),
325 this.getDialog().getParentEditor().document );
327 commit : function( element )
329 var dialog = this.getDialog(),
330 optionsNames = getOptions( this ),
331 optionsValues = getOptions( dialog.getContentElement( 'info', 'cmbValue' ) ),
332 selectValue = dialog.getContentElement( 'info', 'txtValue' ).getValue();
334 removeAllOptions( element );
336 for ( var i = 0 ; i < optionsNames.count() ; i++ )
338 var oOption = addOption( element, optionsNames.getItem( i ).getValue(),
339 optionsValues.getItem( i ).getValue(), dialog.getParentEditor().document );
340 if ( optionsValues.getItem( i ).getValue() == selectValue )
342 oOption.setAttribute( 'selected', 'selected' );
343 oOption.selected = true;
357 label : editor.lang.select.opValue,
358 style : 'width:115px',
359 setup : function( name, element )
361 if ( name == 'clear' )
370 style : 'width:115px;height:75px',
372 onChange : function()
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 );
380 setSelectedIndex( names, iIndex );
381 optName.setValue( names.getValue() );
382 optValue.setValue( this.getValue() );
384 setup : function( name, element )
386 if ( name == 'clear' )
387 removeAllOptions( this );
388 else if ( name == 'option' )
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 );
409 label : editor.lang.select.btnAdd,
410 title : editor.lang.select.btnAdd,
411 style : 'width:100%;',
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' );
422 addOption(names, optName.getValue(), optName.getValue(), dialog.getParentEditor().document );
423 addOption(values, optValue.getValue(), optValue.getValue(), dialog.getParentEditor().document );
425 optName.setValue( "" );
426 optValue.setValue( "" );
432 label : editor.lang.select.btnModify,
433 title : editor.lang.select.btnModify,
434 style : 'width:100%;',
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 );
447 modifyOption( names, iIndex, optName.getValue(), optName.getValue() );
448 modifyOption( values, iIndex, optValue.getValue(), optValue.getValue() );
455 style : 'width:100%;',
456 label : editor.lang.select.btnUp,
457 title : editor.lang.select.btnUp,
461 var dialog = this.getDialog(),
462 names = dialog.getContentElement( 'info', 'cmbName' ),
463 values = dialog.getContentElement( 'info', 'cmbValue' );
465 changeOptionPosition( names, -1, dialog.getParentEditor().document );
466 changeOptionPosition( values, -1, dialog.getParentEditor().document );
472 style : 'width:100%;',
473 label : editor.lang.select.btnDown,
474 title : editor.lang.select.btnDown,
478 var dialog = this.getDialog(),
479 names = dialog.getContentElement( 'info', 'cmbName' ),
480 values = dialog.getContentElement( 'info', 'cmbValue' );
482 changeOptionPosition( names, 1, dialog.getParentEditor().document );
483 changeOptionPosition( values, 1, dialog.getParentEditor().document );
492 widths : [ '40%', '20%', '40%' ],
498 label : editor.lang.select.btnSetValue,
499 title : editor.lang.select.btnSetValue,
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() );
512 label : editor.lang.select.btnDelete,
513 title : editor.lang.select.btnDelete,
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' );
523 removeSelectedOptions( names );
524 removeSelectedOptions( values );
526 optName.setValue( "" );
527 optValue.setValue( "" );
533 label : editor.lang.select.chkMulti,
537 setup : function( name, element )
539 if ( name == 'select' )
540 this.setValue( element.getAttribute( 'multiple' ) );
541 if ( CKEDITOR.env.webkit )
542 this.getElement().getParent().setStyle( 'vertical-align', 'middle' );
544 commit : function( element )
546 if ( this.getValue() )
547 element.setAttribute( 'multiple', this.getValue() );
549 element.removeAttribute( 'multiple' );