sources/plugins/forms/dialogs/select.js

   1 /**
   2  * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5 CKEDITOR.dialog.add( 'select', function( editor ) {
   6         // Add a new option to a SELECT object (combo or list).
   7         function addOption( combo, optionText, optionValue, documentObject, index ) {
   8                 combo = getSelect( combo );
   9                 var oOption;
  10                 if ( documentObject )
  11                         oOption = documentObject.createElement( 'OPTION' );
  12                 else
  13                         oOption = document.createElement( 'OPTION' );
  14
  15                 if ( combo && oOption && oOption.getName() == 'option' ) {
  16                         if ( CKEDITOR.env.ie ) {
  17                                 if ( !isNaN( parseInt( index, 10 ) ) )
  18                                         combo.$.options.add( oOption.$, index );
  19                                 else
  20                                         combo.$.options.add( oOption.$ );
  21
  22                                 oOption.$.innerHTML = optionText.length > 0 ? optionText : '';
  23                                 oOption.$.value = optionValue;
  24                         } else {
  25                                 if ( index !== null && index < combo.getChildCount() )
  26                                         combo.getChild( index < 0 ? 0 : index ).insertBeforeMe( oOption );
  27                                 else
  28                                         combo.append( oOption );
  29
  30                                 oOption.setText( optionText.length > 0 ? optionText : '' );
  31                                 oOption.setValue( optionValue );
  32                         }
  33                 } else {
  34                         return false;
  35                 }
  36
  37                 return oOption;
  38         }
  39         // Remove all selected options from a SELECT object.
  40         function removeSelectedOptions( combo ) {
  41                 combo = getSelect( combo );
  42
  43                 // Save the selected index
  44                 var iSelectedIndex = getSelectedIndex( combo );
  45
  46                 // Remove all selected options.
  47                 for ( var i = combo.getChildren().count() - 1; i >= 0; i-- ) {
  48                         if ( combo.getChild( i ).$.selected )
  49                                 combo.getChild( i ).remove();
  50                 }
  51
  52                 // Reset the selection based on the original selected index.
  53                 setSelectedIndex( combo, iSelectedIndex );
  54         }
  55         //Modify option  from a SELECT object.
  56         function modifyOption( combo, index, title, value ) {
  57                 combo = getSelect( combo );
  58                 if ( index < 0 )
  59                         return false;
  60                 var child = combo.getChild( index );
  61                 child.setText( title );
  62                 child.setValue( value );
  63                 return child;
  64         }
  65
  66         function removeAllOptions( combo ) {
  67                 combo = getSelect( combo );
  68                 while ( combo.getChild( 0 ) && combo.getChild( 0 ).remove() ) {
  69
  70                 }
  71         }
  72         // Moves the selected option by a number of steps (also negative).
  73         function changeOptionPosition( combo, steps, documentObject ) {
  74                 combo = getSelect( combo );
  75                 var iActualIndex = getSelectedIndex( combo );
  76                 if ( iActualIndex < 0 )
  77                         return false;
  78
  79                 var iFinalIndex = iActualIndex + steps;
  80                 iFinalIndex = ( iFinalIndex < 0 ) ? 0 : iFinalIndex;
  81                 iFinalIndex = ( iFinalIndex >= combo.getChildCount() ) ? combo.getChildCount() - 1 : iFinalIndex;
  82
  83                 if ( iActualIndex == iFinalIndex )
  84                         return false;
  85
  86                 var oOption = combo.getChild( iActualIndex ),
  87                         sText = oOption.getText(),
  88                         sValue = oOption.getValue();
  89
  90                 oOption.remove();
  91
  92                 oOption = addOption( combo, sText, sValue, ( !documentObject ) ? null : documentObject, iFinalIndex );
  93                 setSelectedIndex( combo, iFinalIndex );
  94                 return oOption;
  95         }
  96
  97         function getSelectedIndex( combo ) {
  98                 combo = getSelect( combo );
  99                 return combo ? combo.$.selectedIndex : -1;
 100         }
 101
 102         function setSelectedIndex( combo, index ) {
 103                 combo = getSelect( combo );
 104                 if ( index < 0 )
 105                         return null;
 106                 var count = combo.getChildren().count();
 107                 combo.$.selectedIndex = ( index >= count ) ? ( count - 1 ) : index;
 108                 return combo;
 109         }
 110
 111         function getOptions( combo ) {
 112                 combo = getSelect( combo );
 113                 return combo ? combo.getChildren() : false;
 114         }
 115
 116         function getSelect( obj ) {
 117                 if ( obj && obj.domId && obj.getInputElement().$ ) // Dialog element.
 118                 return obj.getInputElement();
 119                 else if ( obj && obj.$ )
 120                         return obj;
 121                 return false;
 122         }
 123
 124         return {
 125                 title: editor.lang.forms.select.title,
 126                 minWidth: CKEDITOR.env.ie ? 460 : 395,
 127                 minHeight: CKEDITOR.env.ie ? 320 : 300,
 128                 onShow: function() {
 129                         delete this.selectBox;
 130                         this.setupContent( 'clear' );
 131                         var element = this.getParentEditor().getSelection().getSelectedElement();
 132                         if ( element && element.getName() == 'select' ) {
 133                                 this.selectBox = element;
 134                                 this.setupContent( element.getName(), element );
 135
 136                                 // Load Options into dialog.
 137                                 var objOptions = getOptions( element );
 138                                 for ( var i = 0; i < objOptions.count(); i++ )
 139                                         this.setupContent( 'option', objOptions.getItem( i ) );
 140                         }
 141                 },
 142                 onOk: function() {
 143                         var editor = this.getParentEditor(),
 144                                 element = this.selectBox,
 145                                 isInsertMode = !element;
 146
 147                         if ( isInsertMode )
 148                                 element = editor.document.createElement( 'select' );
 149                         this.commitContent( element );
 150
 151                         if ( isInsertMode ) {
 152                                 editor.insertElement( element );
 153                                 if ( CKEDITOR.env.ie ) {
 154                                         var sel = editor.getSelection(),
 155                                                 bms = sel.createBookmarks();
 156                                         setTimeout( function() {
 157                                                 sel.selectBookmarks( bms );
 158                                         }, 0 );
 159                                 }
 160                         }
 161                 },
 162                 contents: [ {
 163                         id: 'info',
 164                         label: editor.lang.forms.select.selectInfo,
 165                         title: editor.lang.forms.select.selectInfo,
 166                         accessKey: '',
 167                         elements: [ {
 168                                 id: 'txtName',
 169                                 type: 'text',
 170                                 widths: [ '25%', '75%' ],
 171                                 labelLayout: 'horizontal',
 172                                 label: editor.lang.common.name,
 173                                 'default': '',
 174                                 accessKey: 'N',
 175                                 style: 'width:350px',
 176                                 setup: function( name, element ) {
 177                                         if ( name == 'clear' )
 178                                                 this.setValue( this[ 'default' ] || '' );
 179                                         else if ( name == 'select' )
 180                                                 this.setValue( element.data( 'cke-saved-name' ) || element.getAttribute( 'name' ) || '' );
 181
 182                                 },
 183                                 commit: function( element ) {
 184                                         if ( this.getValue() )
 185                                                 element.data( 'cke-saved-name', this.getValue() );
 186                                         else {
 187                                                 element.data( 'cke-saved-name', false );
 188                                                 element.removeAttribute( 'name' );
 189                                         }
 190                                 }
 191                         },
 192                         {
 193                                 id: 'txtValue',
 194                                 type: 'text',
 195                                 widths: [ '25%', '75%' ],
 196                                 labelLayout: 'horizontal',
 197                                 label: editor.lang.forms.select.value,
 198                                 style: 'width:350px',
 199                                 'default': '',
 200                                 className: 'cke_disabled',
 201                                 onLoad: function() {
 202                                         this.getInputElement().setAttribute( 'readOnly', true );
 203                                 },
 204                                 setup: function( name, element ) {
 205                                         if ( name == 'clear' )
 206                                                 this.setValue( '' );
 207                                         else if ( name == 'option' && element.getAttribute( 'selected' ) )
 208                                                 this.setValue( element.$.value );
 209                                 }
 210                         },
 211                         {
 212                                 type: 'hbox',
 213                                 widths: [ '175px', '170px' ],
 214                                 children: [ {
 215                                         id: 'txtSize',
 216                                         type: 'text',
 217                                         labelLayout: 'horizontal',
 218                                         label: editor.lang.forms.select.size,
 219                                         'default': '',
 220                                         accessKey: 'S',
 221                                         style: 'width:175px',
 222                                         validate: function() {
 223                                                 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
 224                                                 return ( ( this.getValue() === '' ) || func.apply( this ) );
 225                                         },
 226                                         setup: function( name, element ) {
 227                                                 if ( name == 'select' )
 228                                                         this.setValue( element.getAttribute( 'size' ) || '' );
 229                                                 if ( CKEDITOR.env.webkit )
 230                                                         this.getInputElement().setStyle( 'width', '86px' );
 231                                         },
 232                                         commit: function( element ) {
 233                                                 if ( this.getValue() )
 234                                                         element.setAttribute( 'size', this.getValue() );
 235                                                 else
 236                                                         element.removeAttribute( 'size' );
 237                                         }
 238                                 },
 239                                 {
 240                                         type: 'html',
 241                                         html: '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.forms.select.lines ) + '</span>'
 242                                 } ]
 243                         },
 244                         {
 245                                 type: 'html',
 246                                 html: '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.forms.select.opAvail ) + '</span>'
 247                         },
 248                         {
 249                                 type: 'hbox',
 250                                 widths: [ '115px', '115px', '100px' ],
 251                                 children: [ {
 252                                         type: 'vbox',
 253                                         children: [ {
 254                                                 id: 'txtOptName',
 255                                                 type: 'text',
 256                                                 label: editor.lang.forms.select.opText,
 257                                                 style: 'width:115px',
 258                                                 setup: function( name ) {
 259                                                         if ( name == 'clear' )
 260                                                                 this.setValue( '' );
 261                                                 }
 262                                         },
 263                                         {
 264                                                 type: 'select',
 265                                                 id: 'cmbName',
 266                                                 label: '',
 267                                                 title: '',
 268                                                 size: 5,
 269                                                 style: 'width:115px;height:75px',
 270                                                 items: [],
 271                                                 onChange: function() {
 272                                                         var dialog = this.getDialog(),
 273                                                                 values = dialog.getContentElement( 'info', 'cmbValue' ),
 274                                                                 optName = dialog.getContentElement( 'info', 'txtOptName' ),
 275                                                                 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
 276                                                                 iIndex = getSelectedIndex( this );
 277
 278                                                         setSelectedIndex( values, iIndex );
 279                                                         optName.setValue( this.getValue() );
 280                                                         optValue.setValue( values.getValue() );
 281                                                 },
 282                                                 setup: function( name, element ) {
 283                                                         if ( name == 'clear' )
 284                                                                 removeAllOptions( this );
 285                                                         else if ( name == 'option' )
 286                                                                 addOption( this, element.getText(), element.getText(), this.getDialog().getParentEditor().document );
 287                                                 },
 288                                                 commit: function( element ) {
 289                                                         var dialog = this.getDialog(),
 290                                                                 optionsNames = getOptions( this ),
 291                                                                 optionsValues = getOptions( dialog.getContentElement( 'info', 'cmbValue' ) ),
 292                                                                 selectValue = dialog.getContentElement( 'info', 'txtValue' ).getValue();
 293
 294                                                         removeAllOptions( element );
 295
 296                                                         for ( var i = 0; i < optionsNames.count(); i++ ) {
 297                                                                 var oOption = addOption( element, optionsNames.getItem( i ).getValue(), optionsValues.getItem( i ).getValue(), dialog.getParentEditor().document );
 298                                                                 if ( optionsValues.getItem( i ).getValue() == selectValue ) {
 299                                                                         oOption.setAttribute( 'selected', 'selected' );
 300                                                                         oOption.selected = true;
 301                                                                 }
 302                                                         }
 303                                                 }
 304                                         } ]
 305                                 },
 306                                 {
 307                                         type: 'vbox',
 308                                         children: [ {
 309                                                 id: 'txtOptValue',
 310                                                 type: 'text',
 311                                                 label: editor.lang.forms.select.opValue,
 312                                                 style: 'width:115px',
 313                                                 setup: function( name ) {
 314                                                         if ( name == 'clear' )
 315                                                                 this.setValue( '' );
 316                                                 }
 317                                         },
 318                                         {
 319                                                 type: 'select',
 320                                                 id: 'cmbValue',
 321                                                 label: '',
 322                                                 size: 5,
 323                                                 style: 'width:115px;height:75px',
 324                                                 items: [],
 325                                                 onChange: function() {
 326                                                         var dialog = this.getDialog(),
 327                                                                 names = dialog.getContentElement( 'info', 'cmbName' ),
 328                                                                 optName = dialog.getContentElement( 'info', 'txtOptName' ),
 329                                                                 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
 330                                                                 iIndex = getSelectedIndex( this );
 331
 332                                                         setSelectedIndex( names, iIndex );
 333                                                         optName.setValue( names.getValue() );
 334                                                         optValue.setValue( this.getValue() );
 335                                                 },
 336                                                 setup: function( name, element ) {
 337                                                         if ( name == 'clear' )
 338                                                                 removeAllOptions( this );
 339                                                         else if ( name == 'option' ) {
 340                                                                 var oValue = element.getValue();
 341                                                                 addOption( this, oValue, oValue, this.getDialog().getParentEditor().document );
 342                                                                 if ( element.getAttribute( 'selected' ) == 'selected' )
 343                                                                         this.getDialog().getContentElement( 'info', 'txtValue' ).setValue( oValue );
 344                                                         }
 345                                                 }
 346                                         } ]
 347                                 },
 348                                 {
 349                                         type: 'vbox',
 350                                         padding: 5,
 351                                         children: [ {
 352                                                 type: 'button',
 353                                                 id: 'btnAdd',
 354                                                 label: editor.lang.forms.select.btnAdd,
 355                                                 title: editor.lang.forms.select.btnAdd,
 356                                                 style: 'width:100%;',
 357                                                 onClick: function() {
 358                                                         //Add new option.
 359                                                         var dialog = this.getDialog(),
 360                                                                 optName = dialog.getContentElement( 'info', 'txtOptName' ),
 361                                                                 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
 362                                                                 names = dialog.getContentElement( 'info', 'cmbName' ),
 363                                                                 values = dialog.getContentElement( 'info', 'cmbValue' );
 364
 365                                                         addOption( names, optName.getValue(), optName.getValue(), dialog.getParentEditor().document );
 366                                                         addOption( values, optValue.getValue(), optValue.getValue(), dialog.getParentEditor().document );
 367
 368                                                         optName.setValue( '' );
 369                                                         optValue.setValue( '' );
 370                                                 }
 371                                         },
 372                                         {
 373                                                 type: 'button',
 374                                                 id: 'btnModify',
 375                                                 label: editor.lang.forms.select.btnModify,
 376                                                 title: editor.lang.forms.select.btnModify,
 377                                                 style: 'width:100%;',
 378                                                 onClick: function() {
 379                                                         //Modify selected option.
 380                                                         var dialog = this.getDialog(),
 381                                                                 optName = dialog.getContentElement( 'info', 'txtOptName' ),
 382                                                                 optValue = dialog.getContentElement( 'info', 'txtOptValue' ),
 383                                                                 names = dialog.getContentElement( 'info', 'cmbName' ),
 384                                                                 values = dialog.getContentElement( 'info', 'cmbValue' ),
 385                                                                 iIndex = getSelectedIndex( names );
 386
 387                                                         if ( iIndex >= 0 ) {
 388                                                                 modifyOption( names, iIndex, optName.getValue(), optName.getValue() );
 389                                                                 modifyOption( values, iIndex, optValue.getValue(), optValue.getValue() );
 390                                                         }
 391                                                 }
 392                                         },
 393                                         {
 394                                                 type: 'button',
 395                                                 id: 'btnUp',
 396                                                 style: 'width:100%;',
 397                                                 label: editor.lang.forms.select.btnUp,
 398                                                 title: editor.lang.forms.select.btnUp,
 399                                                 onClick: function() {
 400                                                         //Move up.
 401                                                         var dialog = this.getDialog(),
 402                                                                 names = dialog.getContentElement( 'info', 'cmbName' ),
 403                                                                 values = dialog.getContentElement( 'info', 'cmbValue' );
 404
 405                                                         changeOptionPosition( names, -1, dialog.getParentEditor().document );
 406                                                         changeOptionPosition( values, -1, dialog.getParentEditor().document );
 407                                                 }
 408                                         },
 409                                         {
 410                                                 type: 'button',
 411                                                 id: 'btnDown',
 412                                                 style: 'width:100%;',
 413                                                 label: editor.lang.forms.select.btnDown,
 414                                                 title: editor.lang.forms.select.btnDown,
 415                                                 onClick: function() {
 416                                                         //Move down.
 417                                                         var dialog = this.getDialog(),
 418                                                                 names = dialog.getContentElement( 'info', 'cmbName' ),
 419                                                                 values = dialog.getContentElement( 'info', 'cmbValue' );
 420
 421                                                         changeOptionPosition( names, 1, dialog.getParentEditor().document );
 422                                                         changeOptionPosition( values, 1, dialog.getParentEditor().document );
 423                                                 }
 424                                         } ]
 425                                 } ]
 426                         },
 427                         {
 428                                 type: 'hbox',
 429                                 widths: [ '40%', '20%', '40%' ],
 430                                 children: [ {
 431                                         type: 'button',
 432                                         id: 'btnSetValue',
 433                                         label: editor.lang.forms.select.btnSetValue,
 434                                         title: editor.lang.forms.select.btnSetValue,
 435                                         onClick: function() {
 436                                                 //Set as default value.
 437                                                 var dialog = this.getDialog(),
 438                                                         values = dialog.getContentElement( 'info', 'cmbValue' ),
 439                                                         txtValue = dialog.getContentElement( 'info', 'txtValue' );
 440                                                 txtValue.setValue( values.getValue() );
 441                                         }
 442                                 },
 443                                 {
 444                                         type: 'button',
 445                                         id: 'btnDelete',
 446                                         label: editor.lang.forms.select.btnDelete,
 447                                         title: editor.lang.forms.select.btnDelete,
 448                                         onClick: function() {
 449                                                 // Delete option.
 450                                                 var dialog = this.getDialog(),
 451                                                         names = dialog.getContentElement( 'info', 'cmbName' ),
 452                                                         values = dialog.getContentElement( 'info', 'cmbValue' ),
 453                                                         optName = dialog.getContentElement( 'info', 'txtOptName' ),
 454                                                         optValue = dialog.getContentElement( 'info', 'txtOptValue' );
 455
 456                                                 removeSelectedOptions( names );
 457                                                 removeSelectedOptions( values );
 458
 459                                                 optName.setValue( '' );
 460                                                 optValue.setValue( '' );
 461                                         }
 462                                 },
 463                                 {
 464                                         type: 'vbox',
 465                                         children: [ {
 466                                                 id: 'chkMulti',
 467                                                 type: 'checkbox',
 468                                                 label: editor.lang.forms.select.chkMulti,
 469                                                 'default': '',
 470                                                 accessKey: 'M',
 471                                                 value: 'checked',
 472                                                 setup: function( name, element ) {
 473                                                         if ( name == 'select' )
 474                                                                 this.setValue( element.getAttribute( 'multiple' ) );
 475                                                 },
 476                                                 commit: function( element ) {
 477                                                         if ( this.getValue() )
 478                                                                 element.setAttribute( 'multiple', this.getValue() );
 479                                                         else
 480                                                                 element.removeAttribute( 'multiple' );
 481                                                 }
 482                                         },
 483                                         {
 484                                                 id: 'required',
 485                                                 type: 'checkbox',
 486                                                 label: editor.lang.forms.select.required,
 487                                                 'default': '',
 488                                                 accessKey: 'Q',
 489                                                 value: 'checked',
 490                                                 setup: function( name, element ) {
 491                                                         if ( name == 'select' )
 492                                                                 this.setValue( element.getAttribute( 'required' ) );
 493                                                 },
 494                                                 commit: function( element ) {
 495                                                         if ( this.getValue() )
 496                                                                 element.setAttribute( 'required', 'required' );
 497                                                         else
 498                                                                 element.removeAttribute( 'required' );
 499                                                 }
 500                                         } ]
 501                                 } ]
 502                         } ]
 503                 } ]
 504         };
 505 } );