aboutsummaryrefslogtreecommitdiff
path: root/sources/plugins/forms/dialogs
diff options
context:
space:
mode:
Diffstat (limited to 'sources/plugins/forms/dialogs')
-rw-r--r--sources/plugins/forms/dialogs/button.js100
-rw-r--r--sources/plugins/forms/dialogs/checkbox.js146
-rw-r--r--sources/plugins/forms/dialogs/form.js145
-rw-r--r--sources/plugins/forms/dialogs/hiddenfield.js83
-rw-r--r--sources/plugins/forms/dialogs/radio.js129
-rw-r--r--sources/plugins/forms/dialogs/select.js505
-rw-r--r--sources/plugins/forms/dialogs/textarea.js128
-rw-r--r--sources/plugins/forms/dialogs/textfield.js193
8 files changed, 1429 insertions, 0 deletions
diff --git a/sources/plugins/forms/dialogs/button.js b/sources/plugins/forms/dialogs/button.js
new file mode 100644
index 00000000..b0dd161c
--- /dev/null
+++ b/sources/plugins/forms/dialogs/button.js
@@ -0,0 +1,100 @@
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
6CKEDITOR.dialog.add( 'button', function( editor ) {
7 function commitAttributes( element ) {
8 var val = this.getValue();
9 if ( val ) {
10 element.attributes[ this.id ] = val;
11 if ( this.id == 'name' )
12 element.attributes[ 'data-cke-saved-name' ] = val;
13 } else {
14 delete element.attributes[ this.id ];
15 if ( this.id == 'name' )
16 delete element.attributes[ 'data-cke-saved-name' ];
17 }
18 }
19
20 return {
21 title: editor.lang.forms.button.title,
22 minWidth: 350,
23 minHeight: 150,
24 onShow: function() {
25 delete this.button;
26 var element = this.getParentEditor().getSelection().getSelectedElement();
27 if ( element && element.is( 'input' ) ) {
28 var type = element.getAttribute( 'type' );
29 if ( type in { button: 1, reset: 1, submit: 1 } ) {
30 this.button = element;
31 this.setupContent( element );
32 }
33 }
34 },
35 onOk: function() {
36 var editor = this.getParentEditor(),
37 element = this.button,
38 isInsertMode = !element;
39
40 var fake = element ? CKEDITOR.htmlParser.fragment.fromHtml( element.getOuterHtml() ).children[ 0 ] : new CKEDITOR.htmlParser.element( 'input' );
41 this.commitContent( fake );
42
43 var writer = new CKEDITOR.htmlParser.basicWriter();
44 fake.writeHtml( writer );
45 var newElement = CKEDITOR.dom.element.createFromHtml( writer.getHtml(), editor.document );
46
47 if ( isInsertMode )
48 editor.insertElement( newElement );
49 else {
50 newElement.replace( element );
51 editor.getSelection().selectElement( newElement );
52 }
53 },
54 contents: [ {
55 id: 'info',
56 label: editor.lang.forms.button.title,
57 title: editor.lang.forms.button.title,
58 elements: [
59 {
60 id: 'name',
61 type: 'text',
62 bidi: true,
63 label: editor.lang.common.name,
64 'default': '',
65 setup: function( element ) {
66 this.setValue( element.data( 'cke-saved-name' ) || element.getAttribute( 'name' ) || '' );
67 },
68 commit: commitAttributes
69 },
70 {
71 id: 'value',
72 type: 'text',
73 label: editor.lang.forms.button.text,
74 accessKey: 'V',
75 'default': '',
76 setup: function( element ) {
77 this.setValue( element.getAttribute( 'value' ) || '' );
78 },
79 commit: commitAttributes
80 },
81 {
82 id: 'type',
83 type: 'select',
84 label: editor.lang.forms.button.type,
85 'default': 'button',
86 accessKey: 'T',
87 items: [
88 [ editor.lang.forms.button.typeBtn, 'button' ],
89 [ editor.lang.forms.button.typeSbm, 'submit' ],
90 [ editor.lang.forms.button.typeRst, 'reset' ]
91 ],
92 setup: function( element ) {
93 this.setValue( element.getAttribute( 'type' ) || '' );
94 },
95 commit: commitAttributes
96 }
97 ]
98 } ]
99 };
100} );
diff --git a/sources/plugins/forms/dialogs/checkbox.js b/sources/plugins/forms/dialogs/checkbox.js
new file mode 100644
index 00000000..0bfda9ba
--- /dev/null
+++ b/sources/plugins/forms/dialogs/checkbox.js
@@ -0,0 +1,146 @@
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
6CKEDITOR.dialog.add( 'checkbox', function( editor ) {
7 return {
8 title: editor.lang.forms.checkboxAndRadio.checkboxTitle,
9 minWidth: 350,
10 minHeight: 140,
11 onShow: function() {
12 delete this.checkbox;
13
14 var element = this.getParentEditor().getSelection().getSelectedElement();
15
16 if ( element && element.getAttribute( 'type' ) == 'checkbox' ) {
17 this.checkbox = element;
18 this.setupContent( element );
19 }
20 },
21 onOk: function() {
22 var editor,
23 element = this.checkbox,
24 isInsertMode = !element;
25
26 if ( isInsertMode ) {
27 editor = this.getParentEditor();
28 element = editor.document.createElement( 'input' );
29 element.setAttribute( 'type', 'checkbox' );
30 editor.insertElement( element );
31 }
32 this.commitContent( { element: element } );
33 },
34 contents: [ {
35 id: 'info',
36 label: editor.lang.forms.checkboxAndRadio.checkboxTitle,
37 title: editor.lang.forms.checkboxAndRadio.checkboxTitle,
38 startupFocus: 'txtName',
39 elements: [ {
40 id: 'txtName',
41 type: 'text',
42 label: editor.lang.common.name,
43 'default': '',
44 accessKey: 'N',
45 setup: function( element ) {
46 this.setValue( element.data( 'cke-saved-name' ) || element.getAttribute( 'name' ) || '' );
47 },
48 commit: function( data ) {
49 var element = data.element;
50
51 // IE failed to update 'name' property on input elements, protect it now.
52 if ( this.getValue() )
53 element.data( 'cke-saved-name', this.getValue() );
54 else {
55 element.data( 'cke-saved-name', false );
56 element.removeAttribute( 'name' );
57 }
58 }
59 },
60 {
61 id: 'txtValue',
62 type: 'text',
63 label: editor.lang.forms.checkboxAndRadio.value,
64 'default': '',
65 accessKey: 'V',
66 setup: function( element ) {
67 var value = element.getAttribute( 'value' );
68 // IE Return 'on' as default attr value.
69 this.setValue( CKEDITOR.env.ie && value == 'on' ? '' : value );
70 },
71 commit: function( data ) {
72 var element = data.element,
73 value = this.getValue();
74
75 if ( value && !( CKEDITOR.env.ie && value == 'on' ) )
76 element.setAttribute( 'value', value );
77 else {
78 if ( CKEDITOR.env.ie ) {
79 // Remove attribute 'value' of checkbox (#4721).
80 var checkbox = new CKEDITOR.dom.element( 'input', element.getDocument() );
81 element.copyAttributes( checkbox, { value: 1 } );
82 checkbox.replace( element );
83 editor.getSelection().selectElement( checkbox );
84 data.element = checkbox;
85 } else {
86 element.removeAttribute( 'value' );
87 }
88 }
89 }
90 },
91 {
92 id: 'cmbSelected',
93 type: 'checkbox',
94 label: editor.lang.forms.checkboxAndRadio.selected,
95 'default': '',
96 accessKey: 'S',
97 value: 'checked',
98 setup: function( element ) {
99 this.setValue( element.getAttribute( 'checked' ) );
100 },
101 commit: function( data ) {
102 var element = data.element;
103
104 if ( CKEDITOR.env.ie ) {
105 var isElementChecked = !!element.getAttribute( 'checked' ),
106 isChecked = !!this.getValue();
107
108 if ( isElementChecked != isChecked ) {
109 var replace = CKEDITOR.dom.element.createFromHtml( '<input type="checkbox"' + ( isChecked ? ' checked="checked"' : '' ) +
110 '/>', editor.document );
111
112 element.copyAttributes( replace, { type: 1, checked: 1 } );
113 replace.replace( element );
114 editor.getSelection().selectElement( replace );
115 data.element = replace;
116 }
117 } else {
118 var value = this.getValue();
119 if ( value )
120 element.setAttribute( 'checked', 'checked' );
121 else
122 element.removeAttribute( 'checked' );
123 }
124 }
125 },
126 {
127 id: 'required',
128 type: 'checkbox',
129 label: editor.lang.forms.checkboxAndRadio.required,
130 'default': '',
131 accessKey: 'Q',
132 value: 'required',
133 setup: function( element ) {
134 this.setValue( element.getAttribute( 'required' ) );
135 },
136 commit: function( data ) {
137 var element = data.element;
138 if ( this.getValue() )
139 element.setAttribute( 'required', 'required' );
140 else
141 element.removeAttribute( 'required' );
142 }
143 } ]
144 } ]
145 };
146} );
diff --git a/sources/plugins/forms/dialogs/form.js b/sources/plugins/forms/dialogs/form.js
new file mode 100644
index 00000000..256b0544
--- /dev/null
+++ b/sources/plugins/forms/dialogs/form.js
@@ -0,0 +1,145 @@
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
6CKEDITOR.dialog.add( 'form', function( editor ) {
7 var autoAttributes = { action: 1, id: 1, method: 1, enctype: 1, target: 1 };
8
9 return {
10 title: editor.lang.forms.form.title,
11 minWidth: 350,
12 minHeight: 200,
13 onShow: function() {
14 delete this.form;
15
16 var path = this.getParentEditor().elementPath(),
17 form = path.contains( 'form', 1 );
18
19 if ( form ) {
20 this.form = form;
21 this.setupContent( form );
22 }
23 },
24 onOk: function() {
25 var editor,
26 element = this.form,
27 isInsertMode = !element;
28
29 if ( isInsertMode ) {
30 editor = this.getParentEditor();
31 element = editor.document.createElement( 'form' );
32 element.appendBogus();
33 }
34
35 if ( isInsertMode )
36 editor.insertElement( element );
37 this.commitContent( element );
38 },
39 onLoad: function() {
40 function autoSetup( element ) {
41 this.setValue( element.getAttribute( this.id ) || '' );
42 }
43
44 function autoCommit( element ) {
45 if ( this.getValue() )
46 element.setAttribute( this.id, this.getValue() );
47 else
48 element.removeAttribute( this.id );
49 }
50
51 this.foreach( function( contentObj ) {
52 if ( autoAttributes[ contentObj.id ] ) {
53 contentObj.setup = autoSetup;
54 contentObj.commit = autoCommit;
55 }
56 } );
57 },
58 contents: [ {
59 id: 'info',
60 label: editor.lang.forms.form.title,
61 title: editor.lang.forms.form.title,
62 elements: [ {
63 id: 'txtName',
64 bidi: true,
65 type: 'text',
66 label: editor.lang.common.name,
67 'default': '',
68 accessKey: 'N',
69 setup: function( element ) {
70 this.setValue( element.data( 'cke-saved-name' ) || element.getAttribute( 'name' ) || '' );
71 },
72 commit: function( element ) {
73 if ( this.getValue() )
74 element.data( 'cke-saved-name', this.getValue() );
75 else {
76 element.data( 'cke-saved-name', false );
77 element.removeAttribute( 'name' );
78 }
79 }
80 },
81 {
82 id: 'action',
83 type: 'text',
84 label: editor.lang.forms.form.action,
85 'default': '',
86 accessKey: 'T'
87 },
88 {
89 type: 'hbox',
90 widths: [ '45%', '55%' ],
91 children: [ {
92 id: 'id',
93 type: 'text',
94 label: editor.lang.common.id,
95 'default': '',
96 accessKey: 'I'
97 },
98 {
99 id: 'enctype',
100 type: 'select',
101 label: editor.lang.forms.form.encoding,
102 style: 'width:100%',
103 accessKey: 'E',
104 'default': '',
105 items: [
106 [ '' ],
107 [ 'text/plain' ],
108 [ 'multipart/form-data' ],
109 [ 'application/x-www-form-urlencoded' ]
110 ]
111 } ]
112 },
113 {
114 type: 'hbox',
115 widths: [ '45%', '55%' ],
116 children: [ {
117 id: 'target',
118 type: 'select',
119 label: editor.lang.common.target,
120 style: 'width:100%',
121 accessKey: 'M',
122 'default': '',
123 items: [
124 [ editor.lang.common.notSet, '' ],
125 [ editor.lang.common.targetNew, '_blank' ],
126 [ editor.lang.common.targetTop, '_top' ],
127 [ editor.lang.common.targetSelf, '_self' ],
128 [ editor.lang.common.targetParent, '_parent' ]
129 ]
130 },
131 {
132 id: 'method',
133 type: 'select',
134 label: editor.lang.forms.form.method,
135 accessKey: 'M',
136 'default': 'GET',
137 items: [
138 [ 'GET', 'get' ],
139 [ 'POST', 'post' ]
140 ]
141 } ]
142 } ]
143 } ]
144 };
145} );
diff --git a/sources/plugins/forms/dialogs/hiddenfield.js b/sources/plugins/forms/dialogs/hiddenfield.js
new file mode 100644
index 00000000..b4e0fe3b
--- /dev/null
+++ b/sources/plugins/forms/dialogs/hiddenfield.js
@@ -0,0 +1,83 @@
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
6CKEDITOR.dialog.add( 'hiddenfield', function( editor ) {
7 return {
8 title: editor.lang.forms.hidden.title,
9 hiddenField: null,
10 minWidth: 350,
11 minHeight: 110,
12 onShow: function() {
13 delete this.hiddenField;
14
15 var editor = this.getParentEditor(),
16 selection = editor.getSelection(),
17 element = selection.getSelectedElement();
18
19 if ( element && element.data( 'cke-real-element-type' ) && element.data( 'cke-real-element-type' ) == 'hiddenfield' ) {
20 this.hiddenField = element;
21 element = editor.restoreRealElement( this.hiddenField );
22 this.setupContent( element );
23 selection.selectElement( this.hiddenField );
24 }
25 },
26 onOk: function() {
27 var name = this.getValueOf( 'info', '_cke_saved_name' ),
28 editor = this.getParentEditor(),
29 element = CKEDITOR.env.ie && CKEDITOR.document.$.documentMode < 8 ?
30 editor.document.createElement( '<input name="' + CKEDITOR.tools.htmlEncode( name ) + '">' ) :
31 editor.document.createElement( 'input' );
32
33 element.setAttribute( 'type', 'hidden' );
34 this.commitContent( element );
35 var fakeElement = editor.createFakeElement( element, 'cke_hidden', 'hiddenfield' );
36 if ( !this.hiddenField )
37 editor.insertElement( fakeElement );
38 else {
39 fakeElement.replace( this.hiddenField );
40 editor.getSelection().selectElement( fakeElement );
41 }
42 return true;
43 },
44 contents: [ {
45 id: 'info',
46 label: editor.lang.forms.hidden.title,
47 title: editor.lang.forms.hidden.title,
48 elements: [ {
49 id: '_cke_saved_name',
50 type: 'text',
51 label: editor.lang.forms.hidden.name,
52 'default': '',
53 accessKey: 'N',
54 setup: function( element ) {
55 this.setValue( element.data( 'cke-saved-name' ) || element.getAttribute( 'name' ) || '' );
56 },
57 commit: function( element ) {
58 if ( this.getValue() )
59 element.setAttribute( 'name', this.getValue() );
60 else
61 element.removeAttribute( 'name' );
62
63 }
64 },
65 {
66 id: 'value',
67 type: 'text',
68 label: editor.lang.forms.hidden.value,
69 'default': '',
70 accessKey: 'V',
71 setup: function( element ) {
72 this.setValue( element.getAttribute( 'value' ) || '' );
73 },
74 commit: function( element ) {
75 if ( this.getValue() )
76 element.setAttribute( 'value', this.getValue() );
77 else
78 element.removeAttribute( 'value' );
79 }
80 } ]
81 } ]
82 };
83} );
diff --git a/sources/plugins/forms/dialogs/radio.js b/sources/plugins/forms/dialogs/radio.js
new file mode 100644
index 00000000..a9214e41
--- /dev/null
+++ b/sources/plugins/forms/dialogs/radio.js
@@ -0,0 +1,129 @@
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 */
5CKEDITOR.dialog.add( 'radio', function( editor ) {
6 return {
7 title: editor.lang.forms.checkboxAndRadio.radioTitle,
8 minWidth: 350,
9 minHeight: 140,
10 onShow: function() {
11 delete this.radioButton;
12
13 var element = this.getParentEditor().getSelection().getSelectedElement();
14 if ( element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'radio' ) {
15 this.radioButton = element;
16 this.setupContent( element );
17 }
18 },
19 onOk: function() {
20 var editor,
21 element = this.radioButton,
22 isInsertMode = !element;
23
24 if ( isInsertMode ) {
25 editor = this.getParentEditor();
26 element = editor.document.createElement( 'input' );
27 element.setAttribute( 'type', 'radio' );
28 }
29
30 if ( isInsertMode )
31 editor.insertElement( element );
32 this.commitContent( { element: element } );
33 },
34 contents: [ {
35 id: 'info',
36 label: editor.lang.forms.checkboxAndRadio.radioTitle,
37 title: editor.lang.forms.checkboxAndRadio.radioTitle,
38 elements: [ {
39 id: 'name',
40 type: 'text',
41 label: editor.lang.common.name,
42 'default': '',
43 accessKey: 'N',
44 setup: function( element ) {
45 this.setValue( element.data( 'cke-saved-name' ) || element.getAttribute( 'name' ) || '' );
46 },
47 commit: function( data ) {
48 var element = data.element;
49
50 if ( this.getValue() )
51 element.data( 'cke-saved-name', this.getValue() );
52 else {
53 element.data( 'cke-saved-name', false );
54 element.removeAttribute( 'name' );
55 }
56 }
57 },
58 {
59 id: 'value',
60 type: 'text',
61 label: editor.lang.forms.checkboxAndRadio.value,
62 'default': '',
63 accessKey: 'V',
64 setup: function( element ) {
65 this.setValue( element.getAttribute( 'value' ) || '' );
66 },
67 commit: function( data ) {
68 var element = data.element;
69
70 if ( this.getValue() )
71 element.setAttribute( 'value', this.getValue() );
72 else
73 element.removeAttribute( 'value' );
74 }
75 },
76 {
77 id: 'checked',
78 type: 'checkbox',
79 label: editor.lang.forms.checkboxAndRadio.selected,
80 'default': '',
81 accessKey: 'S',
82 value: 'checked',
83 setup: function( element ) {
84 this.setValue( element.getAttribute( 'checked' ) );
85 },
86 commit: function( data ) {
87 var element = data.element;
88
89 if ( !CKEDITOR.env.ie ) {
90 if ( this.getValue() )
91 element.setAttribute( 'checked', 'checked' );
92 else
93 element.removeAttribute( 'checked' );
94 } else {
95 var isElementChecked = element.getAttribute( 'checked' );
96 var isChecked = !!this.getValue();
97
98 if ( isElementChecked != isChecked ) {
99 var replace = CKEDITOR.dom.element.createFromHtml( '<input type="radio"' + ( isChecked ? ' checked="checked"' : '' ) +
100 '></input>', editor.document );
101 element.copyAttributes( replace, { type: 1, checked: 1 } );
102 replace.replace( element );
103 editor.getSelection().selectElement( replace );
104 data.element = replace;
105 }
106 }
107 }
108 },
109 {
110 id: 'required',
111 type: 'checkbox',
112 label: editor.lang.forms.checkboxAndRadio.required,
113 'default': '',
114 accessKey: 'Q',
115 value: 'required',
116 setup: function( element ) {
117 this.setValue( element.getAttribute( 'required' ) );
118 },
119 commit: function( data ) {
120 var element = data.element;
121 if ( this.getValue() )
122 element.setAttribute( 'required', 'required' );
123 else
124 element.removeAttribute( 'required' );
125 }
126 } ]
127 } ]
128 };
129} );
diff --git a/sources/plugins/forms/dialogs/select.js b/sources/plugins/forms/dialogs/select.js
new file mode 100644
index 00000000..38842c20
--- /dev/null
+++ b/sources/plugins/forms/dialogs/select.js
@@ -0,0 +1,505 @@
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 */
5CKEDITOR.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} );
diff --git a/sources/plugins/forms/dialogs/textarea.js b/sources/plugins/forms/dialogs/textarea.js
new file mode 100644
index 00000000..4370955e
--- /dev/null
+++ b/sources/plugins/forms/dialogs/textarea.js
@@ -0,0 +1,128 @@
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 */
5CKEDITOR.dialog.add( 'textarea', function( editor ) {
6 return {
7 title: editor.lang.forms.textarea.title,
8 minWidth: 350,
9 minHeight: 220,
10 onShow: function() {
11 delete this.textarea;
12
13 var element = this.getParentEditor().getSelection().getSelectedElement();
14 if ( element && element.getName() == 'textarea' ) {
15 this.textarea = element;
16 this.setupContent( element );
17 }
18 },
19 onOk: function() {
20 var editor,
21 element = this.textarea,
22 isInsertMode = !element;
23
24 if ( isInsertMode ) {
25 editor = this.getParentEditor();
26 element = editor.document.createElement( 'textarea' );
27 }
28 this.commitContent( element );
29
30 if ( isInsertMode )
31 editor.insertElement( element );
32 },
33 contents: [ {
34 id: 'info',
35 label: editor.lang.forms.textarea.title,
36 title: editor.lang.forms.textarea.title,
37 elements: [ {
38 id: '_cke_saved_name',
39 type: 'text',
40 label: editor.lang.common.name,
41 'default': '',
42 accessKey: 'N',
43 setup: function( element ) {
44 this.setValue( element.data( 'cke-saved-name' ) || element.getAttribute( 'name' ) || '' );
45 },
46 commit: function( element ) {
47 if ( this.getValue() )
48 element.data( 'cke-saved-name', this.getValue() );
49 else {
50 element.data( 'cke-saved-name', false );
51 element.removeAttribute( 'name' );
52 }
53 }
54 },
55 {
56 type: 'hbox',
57 widths: [ '50%', '50%' ],
58 children: [ {
59 id: 'cols',
60 type: 'text',
61 label: editor.lang.forms.textarea.cols,
62 'default': '',
63 accessKey: 'C',
64 style: 'width:50px',
65 validate: CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ),
66 setup: function( element ) {
67 var value = element.hasAttribute( 'cols' ) && element.getAttribute( 'cols' );
68 this.setValue( value || '' );
69 },
70 commit: function( element ) {
71 if ( this.getValue() )
72 element.setAttribute( 'cols', this.getValue() );
73 else
74 element.removeAttribute( 'cols' );
75 }
76 },
77 {
78 id: 'rows',
79 type: 'text',
80 label: editor.lang.forms.textarea.rows,
81 'default': '',
82 accessKey: 'R',
83 style: 'width:50px',
84 validate: CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ),
85 setup: function( element ) {
86 var value = element.hasAttribute( 'rows' ) && element.getAttribute( 'rows' );
87 this.setValue( value || '' );
88 },
89 commit: function( element ) {
90 if ( this.getValue() )
91 element.setAttribute( 'rows', this.getValue() );
92 else
93 element.removeAttribute( 'rows' );
94 }
95 } ]
96 },
97 {
98 id: 'value',
99 type: 'textarea',
100 label: editor.lang.forms.textfield.value,
101 'default': '',
102 setup: function( element ) {
103 this.setValue( element.$.defaultValue );
104 },
105 commit: function( element ) {
106 element.$.value = element.$.defaultValue = this.getValue();
107 }
108 },
109 {
110 id: 'required',
111 type: 'checkbox',
112 label: editor.lang.forms.textfield.required,
113 'default': '',
114 accessKey: 'Q',
115 value: 'required',
116 setup: function( element ) {
117 this.setValue( element.getAttribute( 'required' ) );
118 },
119 commit: function( element ) {
120 if ( this.getValue() )
121 element.setAttribute( 'required', 'required' );
122 else
123 element.removeAttribute( 'required' );
124 }
125 } ]
126 } ]
127 };
128} );
diff --git a/sources/plugins/forms/dialogs/textfield.js b/sources/plugins/forms/dialogs/textfield.js
new file mode 100644
index 00000000..5b601b31
--- /dev/null
+++ b/sources/plugins/forms/dialogs/textfield.js
@@ -0,0 +1,193 @@
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 */
5CKEDITOR.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} );