|
1 /** |
|
2 * Form.js |
|
3 * |
|
4 * Copyright, Moxiecode Systems AB |
|
5 * Released under LGPL License. |
|
6 * |
|
7 * License: http://www.tinymce.com/license |
|
8 * Contributing: http://www.tinymce.com/contributing |
|
9 */ |
|
10 |
|
11 /** |
|
12 * This class creates a form container. A form container has the ability |
|
13 * to automatically wrap items in tinymce.ui.FormItem instances. |
|
14 * |
|
15 * Each FormItem instance is a container for the label and the item. |
|
16 * |
|
17 * @example |
|
18 * tinymce.ui.Factory.create({ |
|
19 * type: 'form', |
|
20 * items: [ |
|
21 * {type: 'textbox', label: 'My text box'} |
|
22 * ] |
|
23 * }).renderTo(document.body); |
|
24 * |
|
25 * @class tinymce.ui.Form |
|
26 * @extends tinymce.ui.Container |
|
27 */ |
|
28 define("tinymce/ui/Form", [ |
|
29 "tinymce/ui/Container", |
|
30 "tinymce/ui/FormItem", |
|
31 "tinymce/util/Tools" |
|
32 ], function(Container, FormItem, Tools) { |
|
33 "use strict"; |
|
34 |
|
35 return Container.extend({ |
|
36 Defaults: { |
|
37 containerCls: 'form', |
|
38 layout: 'flex', |
|
39 direction: 'column', |
|
40 align: 'stretch', |
|
41 flex: 1, |
|
42 padding: 20, |
|
43 labelGap: 30, |
|
44 spacing: 10, |
|
45 callbacks: { |
|
46 submit: function() { |
|
47 this.submit(); |
|
48 } |
|
49 } |
|
50 }, |
|
51 |
|
52 /** |
|
53 * This method gets invoked before the control is rendered. |
|
54 * |
|
55 * @method preRender |
|
56 */ |
|
57 preRender: function() { |
|
58 var self = this, items = self.items(); |
|
59 |
|
60 if (!self.settings.formItemDefaults) { |
|
61 self.settings.formItemDefaults = { |
|
62 layout: 'flex', |
|
63 autoResize: "overflow", |
|
64 defaults: {flex: 1} |
|
65 }; |
|
66 } |
|
67 |
|
68 // Wrap any labeled items in FormItems |
|
69 items.each(function(ctrl) { |
|
70 var formItem, label = ctrl.settings.label; |
|
71 |
|
72 if (label) { |
|
73 formItem = new FormItem(Tools.extend({ |
|
74 items: { |
|
75 type: 'label', |
|
76 id: ctrl._id + '-l', |
|
77 text: label, |
|
78 flex: 0, |
|
79 forId: ctrl._id, |
|
80 disabled: ctrl.disabled() |
|
81 } |
|
82 }, self.settings.formItemDefaults)); |
|
83 |
|
84 formItem.type = 'formitem'; |
|
85 ctrl.aria('labelledby', ctrl._id + '-l'); |
|
86 |
|
87 if (typeof ctrl.settings.flex == "undefined") { |
|
88 ctrl.settings.flex = 1; |
|
89 } |
|
90 |
|
91 self.replace(ctrl, formItem); |
|
92 formItem.add(ctrl); |
|
93 } |
|
94 }); |
|
95 }, |
|
96 |
|
97 /** |
|
98 * Recalcs label widths. |
|
99 * |
|
100 * @private |
|
101 */ |
|
102 recalcLabels: function() { |
|
103 var self = this, maxLabelWidth = 0, labels = [], i, labelGap, items; |
|
104 |
|
105 if (self.settings.labelGapCalc === false) { |
|
106 return; |
|
107 } |
|
108 |
|
109 if (self.settings.labelGapCalc == "children") { |
|
110 items = self.find('formitem'); |
|
111 } else { |
|
112 items = self.items(); |
|
113 } |
|
114 |
|
115 items.filter('formitem').each(function(item) { |
|
116 var labelCtrl = item.items()[0], labelWidth = labelCtrl.getEl().clientWidth; |
|
117 |
|
118 maxLabelWidth = labelWidth > maxLabelWidth ? labelWidth : maxLabelWidth; |
|
119 labels.push(labelCtrl); |
|
120 }); |
|
121 |
|
122 labelGap = self.settings.labelGap || 0; |
|
123 |
|
124 i = labels.length; |
|
125 while (i--) { |
|
126 labels[i].settings.minWidth = maxLabelWidth + labelGap; |
|
127 } |
|
128 }, |
|
129 |
|
130 /** |
|
131 * Getter/setter for the visibility state. |
|
132 * |
|
133 * @method visible |
|
134 * @param {Boolean} [state] True/false state to show/hide. |
|
135 * @return {tinymce.ui.Form|Boolean} True/false state or current control. |
|
136 */ |
|
137 visible: function(state) { |
|
138 var val = this._super(state); |
|
139 |
|
140 if (state === true && this._rendered) { |
|
141 this.recalcLabels(); |
|
142 } |
|
143 |
|
144 return val; |
|
145 }, |
|
146 |
|
147 /** |
|
148 * Fires a submit event with the serialized form. |
|
149 * |
|
150 * @method submit |
|
151 * @return {Object} Event arguments object. |
|
152 */ |
|
153 submit: function() { |
|
154 return this.fire('submit', {data: this.toJSON()}); |
|
155 }, |
|
156 |
|
157 /** |
|
158 * Post render method. Called after the control has been rendered to the target. |
|
159 * |
|
160 * @method postRender |
|
161 * @return {tinymce.ui.ComboBox} Current combobox instance. |
|
162 */ |
|
163 postRender: function() { |
|
164 var self = this; |
|
165 |
|
166 self._super(); |
|
167 self.recalcLabels(); |
|
168 self.fromJSON(self.settings.data); |
|
169 } |
|
170 }); |
|
171 }); |