sources/plugins/forms/dialogs/textfield.js

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