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