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