skins/ckeditor/_source/plugins/forms/dialogs/select.js

   1 /*
   2 Copyright (c) 2003-2011, 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 });