_source/plugins/forms/dialogs/textfield.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( 'textfield', function( editor )
   6 {
   7         var autoAttributes =
   8         {
   9                 value : 1,
  10                 size : 1,
  11                 maxLength : 1
  12         };
  13
  14         var acceptedTypes =
  15         {
  16                 text : 1,
  17                 password : 1
  18         };
  19
  20         return {
  21                 title : editor.lang.textfield.title,
  22                 minWidth : 350,
  23                 minHeight : 150,
  24                 onShow : function()
  25                 {
  26                         delete this.textField;
  27
  28                         var element = this.getParentEditor().getSelection().getSelectedElement();
  29                         if ( element && element.getName() == "input" &&
  30                                         ( acceptedTypes[ element.getAttribute( 'type' ) ] || !element.getAttribute( 'type' ) ) )
  31                         {
  32                                 this.textField = element;
  33                                 this.setupContent( element );
  34                         }
  35                 },
  36                 onOk : function()
  37                 {
  38                         var editor,
  39                                 element = this.textField,
  40                                 isInsertMode = !element;
  41
  42                         if ( isInsertMode )
  43                         {
  44                                 editor = this.getParentEditor();
  45                                 element = editor.document.createElement( 'input' );
  46                                 element.setAttribute( 'type', 'text' );
  47                         }
  48
  49                         if ( isInsertMode )
  50                                 editor.insertElement( element );
  51                         this.commitContent( { element : element } );
  52                 },
  53                 onLoad : function()
  54                 {
  55                         var autoSetup = function( element )
  56                         {
  57                                 var value = element.hasAttribute( this.id ) && element.getAttribute( this.id );
  58                                 this.setValue( value || '' );
  59                         };
  60
  61                         var autoCommit = function( data )
  62                         {
  63                                 var element = data.element;
  64                                 var value = this.getValue();
  65
  66                                 if ( value )
  67                                         element.setAttribute( this.id, value );
  68                                 else
  69                                         element.removeAttribute( this.id );
  70                         };
  71
  72                         this.foreach( function( contentObj )
  73                                 {
  74                                         if ( autoAttributes[ contentObj.id ] )
  75                                         {
  76                                                 contentObj.setup = autoSetup;
  77                                                 contentObj.commit = autoCommit;
  78                                         }
  79                                 } );
  80                 },
  81                 contents : [
  82                         {
  83                                 id : 'info',
  84                                 label : editor.lang.textfield.title,
  85                                 title : editor.lang.textfield.title,
  86                                 elements : [
  87                                         {
  88                                                 type : 'hbox',
  89                                                 widths : [ '50%', '50%' ],
  90                                                 children :
  91                                                 [
  92                                                         {
  93                                                                 id : '_cke_saved_name',
  94                                                                 type : 'text',
  95                                                                 label : editor.lang.textfield.name,
  96                                                                 'default' : '',
  97                                                                 accessKey : 'N',
  98                                                                 setup : function( element )
  99                                                                 {
 100                                                                         this.setValue(
 101                                                                                         element.data( 'cke-saved-name' ) ||
 102                                                                                         element.getAttribute( 'name' ) ||
 103                                                                                         '' );
 104                                                                 },
 105                                                                 commit : function( data )
 106                                                                 {
 107                                                                         var element = data.element;
 108
 109                                                                         if ( this.getValue() )
 110                                                                                 element.data( 'cke-saved-name', this.getValue() );
 111                                                                         else
 112                                                                         {
 113                                                                                 element.data( 'cke-saved-name', false );
 114                                                                                 element.removeAttribute( 'name' );
 115                                                                         }
 116                                                                 }
 117                                                         },
 118                                                         {
 119                                                                 id : 'value',
 120                                                                 type : 'text',
 121                                                                 label : editor.lang.textfield.value,
 122                                                                 'default' : '',
 123                                                                 accessKey : 'V'
 124                                                         }
 125                                                 ]
 126                                         },
 127                                         {
 128                                                 type : 'hbox',
 129                                                 widths : [ '50%', '50%' ],
 130                                                 children :
 131                                                 [
 132                                                         {
 133                                                                 id : 'size',
 134                                                                 type : 'text',
 135                                                                 label : editor.lang.textfield.charWidth,
 136                                                                 'default' : '',
 137                                                                 accessKey : 'C',
 138                                                                 style : 'width:50px',
 139                                                                 validate : CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed )
 140                                                         },
 141                                                         {
 142                                                                 id : 'maxLength',
 143                                                                 type : 'text',
 144                                                                 label : editor.lang.textfield.maxChars,
 145                                                                 'default' : '',
 146                                                                 accessKey : 'M',
 147                                                                 style : 'width:50px',
 148                                                                 validate : CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed )
 149                                                         }
 150                                                 ],
 151                                                 onLoad : function()
 152                                                 {
 153                                                         // Repaint the style for IE7 (#6068)
 154                                                         if ( CKEDITOR.env.ie7Compat )
 155                                                                 this.getElement().setStyle( 'zoom', '100%' );
 156                                                 }
 157                                         },
 158                                         {
 159                                                 id : 'type',
 160                                                 type : 'select',
 161                                                 label : editor.lang.textfield.type,
 162                                                 'default' : 'text',
 163                                                 accessKey : 'M',
 164                                                 items :
 165                                                 [
 166                                                         [ editor.lang.textfield.typeText, 'text' ],
 167                                                         [ editor.lang.textfield.typePass, 'password' ]
 168                                                 ],
 169                                                 setup : function( element )
 170                                                 {
 171                                                         this.setValue( element.getAttribute( 'type' ) );
 172                                                 },
 173                                                 commit : function( data )
 174                                                 {
 175                                                         var element = data.element;
 176
 177                                                         if ( CKEDITOR.env.ie )
 178                                                         {
 179                                                                 var elementType = element.getAttribute( 'type' );
 180                                                                 var myType = this.getValue();
 181
 182                                                                 if ( elementType != myType )
 183                                                                 {
 184                                                                         var replace = CKEDITOR.dom.element.createFromHtml( '<input type="' + myType + '"></input>', editor.document );
 185                                                                         element.copyAttributes( replace, { type : 1 } );
 186                                                                         replace.replace( element );
 187                                                                         editor.getSelection().selectElement( replace );
 188                                                                         data.element = replace;
 189                                                                 }
 190                                                         }
 191                                                         else
 192                                                                 element.setAttribute( 'type', this.getValue() );
 193                                                 }
 194                                         }
 195                                 ]
 196                         }
 197                 ]
 198         };
 199 });