library/custom_template/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                                                 align : 'center',
 192                                                 style : 'width:350px',
 193                                                 setup : function( name, element )
 194                                                 {
 195                                                         if ( name == 'clear' )
 196                                                                 this.setValue( this[ 'default' ] || '' );
 197                                                         else if ( name == 'select' )
 198                                                         {
 199                                                                 this.setValue(
 200                                                                                 element.data( 'cke-saved-name' ) ||
 201                                                                                 element.getAttribute( 'name' ) ||
 202                                                                                 '' );
 203                                                         }
 204                                                 },
 205                                                 commit : function( element )
 206                                                 {
 207                                                         if ( this.getValue() )
 208                                                                 element.data( 'cke-saved-name', this.getValue() );
 209                                                         else
 210                                                         {
 211                                                                 element.data( 'cke-saved-name', false );
 212                                                                 element.removeAttribute( 'name' );
 213                                                         }
 214                                                 }
 215                                         },
 216                                         {
 217                                                 id : 'txtValue',
 218                                                 type : 'text',
 219                                                 widths : [ '25%','75%' ],
 220                                                 labelLayout : 'horizontal',
 221                                                 label : editor.lang.select.value,
 222                                                 style : 'width:350px',
 223                                                 'default' : '',
 224                                                 className : 'cke_disabled',
 225                                                 onLoad : function()
 226                                                 {
 227                                                         this.getInputElement().setAttribute( 'readOnly', true );
 228                                                 },
 229                                                 setup : function( name, element )
 230                                                 {
 231                                                         if ( name == 'clear' )
 232                                                                 this.setValue( '' );
 233                                                         else if ( name == 'option' && element.getAttribute( 'selected' ) )
 234                                                                 this.setValue( element.$.value );
 235                                                 }
 236                                         },
 237                                         {
 238                                                 type : 'hbox',
 239                                                 widths : [ '175px', '170px' ],
 240                                                 align : 'center',
 241                                                 children :
 242                                                 [
 243                                                         {
 244                                                                 id : 'txtSize',
 245                                                                 type : 'text',
 246                                                                 align : 'center',
 247                                                                 labelLayout : 'horizontal',
 248                                                                 label : editor.lang.select.size,
 249                                                                 'default' : '',
 250                                                                 accessKey : 'S',
 251                                                                 style : 'width:175px',
 252                                                                 validate: function()
 253                                                                 {
 254                                                                         var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
 255                                                                         return ( ( this.getValue() === '' ) || func.apply( this ) );
 256                                                                 },
 257                                                                 setup : function( name, element )
 258                                                                 {
 259                                                                         if ( name == 'select' )
 260                                                                                 this.setValue( element.getAttribute( 'size' ) || '' );
 261                                                                         if ( CKEDITOR.env.webkit )
 262                                                                                 this.getInputElement().setStyle( 'width', '86px' );
 263                                                                 },
 264                                                                 commit : function( element )
 265                                                                 {
 266                                                                         if ( this.getValue() )
 267                                                                                 element.setAttribute( 'size', this.getValue() );
 268                                                                         else
 269                                                                                 element.removeAttribute( 'size' );
 270                                                                 }
 271                                                         },
 272                                                         {
 273                                                                 type : 'html',
 274                                                                 html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.lines ) + '</span>'
 275                                                         }
 276                                                 ]
 277                                         },
 278                                         {
 279                                                 type : 'html',
 280                                                 html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.opAvail ) + '</span>'
 281                                         },
 282                                         {
 283                                                 type : 'hbox',
 284                                                 widths : [ '115px', '115px' ,'100px' ],
 285                                                 align : 'top',
 286                                                 children :
 287                                                 [
 288                                                         {
 289                                                                 type : 'vbox',
 290                                                                 children :
 291                                                                 [
 292                                                                         {
 293                                                                                 id : 'txtOptName',
 294                                                                                 type : 'text',
 295                                                                                 label : editor.lang.select.opText,
 296                                                                                 style : 'width:115px',
 297                                                                                 setup : function( name, element )
 298                                                                                 {
 299                                                                                         if ( name == 'clear' )
 300                                                                                                 this.setValue( "" );
 301                                                                                 }
 302                                                                         },
 303                                                                         {
 304                                                                                 type : 'select',
 305                                                                                 id : 'cmbName',
 306                                                                                 label : '',
 307                                                                                 title : '',
 308                                                                                 size : 5,
 309                                                                                 style : 'width:115px;height:75px',
 310                                                                                 items : [],
 311                                                                                 onChange : function()
 312                                                                                 {
 313                                                                                         var dialog = this.getDialog(),
 314                                                                                                 values = dialog.getContentElement( 'info', 'cmbValue' ),
 315                                                                                                 optName = dialog.getContentElement( 'info', 'txtOptName' ),
 316                                                                                                 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
 317                                                                                                 iIndex = getSelectedIndex( this );
 318
 319                                                                                         setSelectedIndex( values, iIndex );
 320                                                                                         optName.setValue( this.getValue() );
 321                                                                                         optValue.setValue( values.getValue() );
 322                                                                                 },
 323                                                                                 setup : function( name, element )
 324                                                                                 {
 325                                                                                         if ( name == 'clear' )
 326                                                                                                 removeAllOptions( this );
 327                                                                                         else if ( name == 'option' )
 328                                                                                                 addOption( this, element.getText(), element.getText(),
 329                                                                                                         this.getDialog().getParentEditor().document );
 330                                                                                 },
 331                                                                                 commit : function( element )
 332                                                                                 {
 333                                                                                         var dialog = this.getDialog(),
 334                                                                                                 optionsNames = getOptions( this ),
 335                                                                                                 optionsValues = getOptions( dialog.getContentElement( 'info', 'cmbValue' ) ),
 336                                                                                                 selectValue = dialog.getContentElement( 'info', 'txtValue' ).getValue();
 337
 338                                                                                         removeAllOptions( element );
 339
 340                                                                                         for ( var i = 0 ; i < optionsNames.count() ; i++ )
 341                                                                                         {
 342                                                                                                 var oOption = addOption( element, optionsNames.getItem( i ).getValue(),
 343                                                                                                         optionsValues.getItem( i ).getValue(), dialog.getParentEditor().document );
 344                                                                                                 if ( optionsValues.getItem( i ).getValue() == selectValue )
 345                                                                                                 {
 346                                                                                                         oOption.setAttribute( 'selected', 'selected' );
 347                                                                                                         oOption.selected = true;
 348                                                                                                 }
 349                                                                                         }
 350                                                                                 }
 351                                                                         }
 352                                                                 ]
 353                                                         },
 354                                                         {
 355                                                                 type : 'vbox',
 356                                                                 children :
 357                                                                 [
 358                                                                         {
 359                                                                                 id : 'txtOptValue',
 360                                                                                 type : 'text',
 361                                                                                 label : editor.lang.select.opValue,
 362                                                                                 style : 'width:115px',
 363                                                                                 setup : function( name, element )
 364                                                                                 {
 365                                                                                         if ( name == 'clear' )
 366                                                                                                 this.setValue( "" );
 367                                                                                 }
 368                                                                         },
 369                                                                         {
 370                                                                                 type : 'select',
 371                                                                                 id : 'cmbValue',
 372                                                                                 label : '',
 373                                                                                 size : 5,
 374                                                                                 style : 'width:115px;height:75px',
 375                                                                                 items : [],
 376                                                                                 onChange : function()
 377                                                                                 {
 378                                                                                         var dialog = this.getDialog(),
 379                                                                                                 names = dialog.getContentElement( 'info', 'cmbName' ),
 380                                                                                                 optName = dialog.getContentElement( 'info', 'txtOptName' ),
 381                                                                                                 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
 382                                                                                                 iIndex = getSelectedIndex( this );
 383
 384                                                                                         setSelectedIndex( names, iIndex );
 385                                                                                         optName.setValue( names.getValue() );
 386                                                                                         optValue.setValue( this.getValue() );
 387                                                                                 },
 388                                                                                 setup : function( name, element )
 389                                                                                 {
 390                                                                                         if ( name == 'clear' )
 391                                                                                                 removeAllOptions( this );
 392                                                                                         else if ( name == 'option' )
 393                                                                                         {
 394                                                                                                 var oValue      = element.getValue();
 395                                                                                                 addOption( this, oValue, oValue,
 396                                                                                                         this.getDialog().getParentEditor().document );
 397                                                                                                 if ( element.getAttribute( 'selected' ) == 'selected' )
 398                                                                                                         this.getDialog().getContentElement( 'info', 'txtValue' ).setValue( oValue );
 399                                                                                         }
 400                                                                                 }
 401                                                                         }
 402                                                                 ]
 403                                                         },
 404                                                         {
 405                                                                 type : 'vbox',
 406                                                                 padding : 5,
 407                                                                 children :
 408                                                                 [
 409                                                                         {
 410                                                                                 type : 'button',
 411                                                                                 style : '',
 412                                                                                 label : editor.lang.select.btnAdd,
 413                                                                                 title : editor.lang.select.btnAdd,
 414                                                                                 style : 'width:100%;',
 415                                                                                 onClick : function()
 416                                                                                 {
 417                                                                                         //Add new option.
 418                                                                                         var dialog = this.getDialog(),
 419                                                                                                 parentEditor = dialog.getParentEditor(),
 420                                                                                                 optName = dialog.getContentElement( 'info', 'txtOptName' ),
 421                                                                                                 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
 422                                                                                                 names = dialog.getContentElement( 'info', 'cmbName' ),
 423                                                                                                 values = dialog.getContentElement( 'info', 'cmbValue' );
 424
 425                                                                                         addOption(names, optName.getValue(), optName.getValue(), dialog.getParentEditor().document );
 426                                                                                         addOption(values, optValue.getValue(), optValue.getValue(), dialog.getParentEditor().document );
 427
 428                                                                                         optName.setValue( "" );
 429                                                                                         optValue.setValue( "" );
 430                                                                                 }
 431                                                                         },
 432                                                                         {
 433                                                                                 type : 'button',
 434                                                                                 label : editor.lang.select.btnModify,
 435                                                                                 title : editor.lang.select.btnModify,
 436                                                                                 style : 'width:100%;',
 437                                                                                 onClick : function()
 438                                                                                 {
 439                                                                                         //Modify selected option.
 440                                                                                         var dialog = this.getDialog(),
 441                                                                                                 optName = dialog.getContentElement( 'info', 'txtOptName' ),
 442                                                                                                 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
 443                                                                                                 names = dialog.getContentElement( 'info', 'cmbName' ),
 444                                                                                                 values = dialog.getContentElement( 'info', 'cmbValue' ),
 445                                                                                                 iIndex = getSelectedIndex( names );
 446
 447                                                                                         if ( iIndex >= 0 )
 448                                                                                         {
 449                                                                                                 modifyOption( names, iIndex, optName.getValue(), optName.getValue() );
 450                                                                                                 modifyOption( values, iIndex, optValue.getValue(), optValue.getValue() );
 451                                                                                         }
 452                                                                                 }
 453                                                                         },
 454                                                                         {
 455                                                                                 type : 'button',
 456                                                                                 style : 'width:100%;',
 457                                                                                 label : editor.lang.select.btnUp,
 458                                                                                 title : editor.lang.select.btnUp,
 459                                                                                 onClick : function()
 460                                                                                 {
 461                                                                                         //Move up.
 462                                                                                         var dialog = this.getDialog(),
 463                                                                                                 names = dialog.getContentElement( 'info', 'cmbName' ),
 464                                                                                                 values = dialog.getContentElement( 'info', 'cmbValue' );
 465
 466                                                                                         changeOptionPosition( names, -1, dialog.getParentEditor().document );
 467                                                                                         changeOptionPosition( values, -1, dialog.getParentEditor().document );
 468                                                                                 }
 469                                                                         },
 470                                                                         {
 471                                                                                 type : 'button',
 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                                                                 label : editor.lang.select.btnSetValue,
 498                                                                 title : editor.lang.select.btnSetValue,
 499                                                                 onClick : function()
 500                                                                 {
 501                                                                         //Set as default value.
 502                                                                         var dialog = this.getDialog(),
 503                                                                                 values = dialog.getContentElement( 'info', 'cmbValue' ),
 504                                                                                 txtValue = dialog.getContentElement( 'info', 'txtValue' );
 505                                                                         txtValue.setValue( values.getValue() );
 506                                                                 }
 507                                                         },
 508                                                         {
 509                                                                 type : 'button',
 510                                                                 label : editor.lang.select.btnDelete,
 511                                                                 title : editor.lang.select.btnDelete,
 512                                                                 onClick : function()
 513                                                                 {
 514                                                                         // Delete option.
 515                                                                         var dialog = this.getDialog(),
 516                                                                                 names = dialog.getContentElement( 'info', 'cmbName' ),
 517                                                                                 values = dialog.getContentElement( 'info', 'cmbValue' ),
 518                                                                                 optName = dialog.getContentElement( 'info', 'txtOptName' ),
 519                                                                                 optValue = dialog.getContentElement( 'info', 'txtOptValue' );
 520
 521                                                                         removeSelectedOptions( names );
 522                                                                         removeSelectedOptions( values );
 523
 524                                                                         optName.setValue( "" );
 525                                                                         optValue.setValue( "" );
 526                                                                 }
 527                                                         },
 528                                                         {
 529                                                                 id : 'chkMulti',
 530                                                                 type : 'checkbox',
 531                                                                 label : editor.lang.select.chkMulti,
 532                                                                 'default' : '',
 533                                                                 accessKey : 'M',
 534                                                                 value : "checked",
 535                                                                 setup : function( name, element )
 536                                                                 {
 537                                                                         if ( name == 'select' )
 538                                                                                 this.setValue( element.getAttribute( 'multiple' ) );
 539                                                                         if ( CKEDITOR.env.webkit )
 540                                                                                 this.getElement().getParent().setStyle( 'vertical-align', 'middle' );
 541                                                                 },
 542                                                                 commit : function( element )
 543                                                                 {
 544                                                                         if ( this.getValue() )
 545                                                                                 element.setAttribute( 'multiple', this.getValue() );
 546                                                                         else
 547                                                                                 element.removeAttribute( 'multiple' );
 548                                                                 }
 549                                                         }
 550                                                 ]
 551                                         }
 552                                 ]
 553                         }
 554                 ]
 555         };
 556 });