_source/plugins/forms/dialogs/select.js

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