d58f2cbaafa1f97cd815533efb88f2b547f472aa
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Resources / Public / JavaScript / Wizard / Viewport / Left / Form / PostProcessors / PostProcessor.js
1 Ext.namespace('TYPO3.Form.Wizard.Viewport.Left.Form.PostProcessors');
2
3 /**
4 * The post processor abstract
5 *
6 * @class TYPO3.Form.Wizard.Viewport.Left.Form.PostProcessors.PostProcessor
7 * @extends Ext.FormPanel
8 */
9 TYPO3.Form.Wizard.Viewport.Left.Form.PostProcessors.PostProcessor = Ext.extend(Ext.FormPanel, {
10 /**
11 * @cfg {Boolean} border
12 * True to display the borders of the panel's body element, false to hide
13 * them (defaults to true). By default, the border is a 2px wide inset
14 * border, but this can be further altered by setting bodyBorder to false.
15 */
16 border: false,
17
18 /**
19 * @cfg {Number/String} padding
20 * A shortcut for setting a padding style on the body element. The value can
21 * either be a number to be applied to all sides, or a normal css string
22 * describing padding.
23 */
24 padding: 0,
25
26 /**
27 * @cfg {String} defaultType
28 *
29 * The default xtype of child Components to create in this Container when
30 * a child item is specified as a raw configuration object,
31 * rather than as an instantiated Component.
32 *
33 * Defaults to 'panel', except Ext.menu.Menu which defaults to 'menuitem',
34 * and Ext.Toolbar and Ext.ButtonGroup which default to 'button'.
35 */
36 defaultType: 'textfield',
37
38 /**
39 * @cfg {String} processor
40 *
41 * The name of this processor
42 */
43 processor: '',
44
45 /**
46 * @cfg {Boolean} monitorValid If true, the form monitors its valid state client-side and
47 * regularly fires the clientvalidation event passing that state.
48 * When monitoring valid state, the FormPanel enables/disables any of its configured
49 * buttons which have been configured with formBind: true depending
50 * on whether the form is valid or not. Defaults to false
51 */
52 monitorValid: true,
53
54 /**
55 * Constructor
56 */
57 initComponent: function() {
58 var fields = this.getFieldsBySettings();
59 var formItems = new Array();
60
61 // Adds the specified events to the list of events which this Observable may fire.
62 this.addEvents({
63 'validation': true
64 });
65
66 Ext.iterate(fields, function(item, index, allItems) {
67 switch(item) {
68 case 'recipientEmail':
69 formItems.push({
70 fieldLabel: TYPO3.l10n.localize('postprocessor_properties_recipientemail'),
71 name: 'recipientEmail',
72 allowBlank: false,
73 listeners: {
74 'triggerclick': {
75 scope: this,
76 fn: this.storeValue
77 }
78 }
79 });
80 break;
81 case 'senderEmail':
82 formItems.push({
83 fieldLabel: TYPO3.l10n.localize('postprocessor_properties_senderemail'),
84 name: 'senderEmail',
85 allowBlank: false,
86 listeners: {
87 'triggerclick': {
88 scope: this,
89 fn: this.storeValue
90 }
91 }
92 });
93 break;
94 }
95 }, this);
96
97 // TODO: Add the remove button when more post processors are available
98 /*formItems.push({
99 xtype: 'button',
100 text: TYPO3.l10n.localize('button_remove'),
101 handler: this.removePostProcessor,
102 scope: this
103 });*/
104
105 var config = {
106 items: [
107 {
108 xtype: 'fieldset',
109 title: TYPO3.l10n.localize('postprocessor_' + this.processor),
110 autoHeight: true,
111 defaults: {
112 width: 128,
113 msgTarget: 'side'
114 },
115 defaultType: 'textfieldsubmit',
116 items: formItems
117 }
118 ]
119 };
120
121 // apply config
122 Ext.apply(this, Ext.apply(this.initialConfig, config));
123
124 // call parent
125 TYPO3.Form.Wizard.Viewport.Left.Form.PostProcessors.PostProcessor.superclass.initComponent.apply(this, arguments);
126
127 // Initialize clientvalidation event
128 this.on('clientvalidation', this.validation, this);
129
130 // Strange, but we need to call doLayout() after render
131 this.on('afterrender', this.newOrExistingPostProcessor, this);
132 },
133
134 /**
135 * Decide whether this is a new or an existing one
136 *
137 * If new, the default configuration has to be added to the processors
138 * of the form, otherwise we can fill the form with the existing configuration
139 */
140 newOrExistingPostProcessor: function() {
141 this.doLayout();
142 // Existing processor
143 if (this.element.configuration.postProcessor[this.processor]) {
144 this.fillForm();
145 // New processor
146 } else {
147 this.addProcessorToElement();
148 }
149 },
150
151 /**
152 * Fill the form with the configuration of the element
153 *
154 * When filling, the events of all form elements should be suspended,
155 * otherwise the values are written back to the element, for instance on a
156 * check event on a checkbox.
157 */
158 fillForm: function() {
159 this.suspendEventsBeforeFilling();
160 this.getForm().setValues(this.element.configuration.postProcessor[this.processor]);
161 this.resumeEventsAfterFilling();
162 },
163
164 /**
165 * Suspend the events on all items within this component
166 */
167 suspendEventsBeforeFilling: function() {
168 this.cascade(function(item) {
169 item.suspendEvents();
170 });
171 },
172
173 /**
174 * Resume the events on all items within this component
175 */
176 resumeEventsAfterFilling: function() {
177 this.cascade(function(item) {
178 item.resumeEvents();
179 });
180 },
181
182 /**
183 * Add this processor to the element
184 */
185 addProcessorToElement: function() {
186 var formConfiguration = {postProcessor: {}};
187 formConfiguration.postProcessor[this.processor] = this.configuration;
188
189 this.element.setConfigurationValue(formConfiguration);
190
191 this.fillForm();
192 },
193
194 /**
195 * Store a changed value from the form in the element
196 *
197 * @param {Object} field The field which has changed
198 */
199 storeValue: function(field) {
200 if (field.isValid()) {
201 var fieldName = field.getName();
202
203 var formConfiguration = {postProcessor: {}};
204 formConfiguration.postProcessor[this.processor] = {};
205 formConfiguration.postProcessor[this.processor][fieldName] = field.getValue();
206
207 this.element.setConfigurationValue(formConfiguration);
208 }
209 },
210
211 /**
212 * Remove the processor
213 *
214 * Called when the remove button of this processor has been clicked
215 */
216 removePostProcessor: function() {
217 this.ownerCt.removePostProcessor(this);
218 this.element.removePostProcessor(this.processor);
219 },
220
221 /**
222 * Get the fields for the element
223 *
224 * Based on the TSconfig general allowed fields
225 * and the TSconfig allowed fields for this type of element
226 *
227 * @returns object
228 */
229 getFieldsBySettings: function() {
230 var fields = [];
231 var processorFields = this.configuration;
232
233 var allowedFields = [];
234 try {
235 allowedFields = TYPO3.Form.Wizard.Settings.defaults.tabs.form.accordions.postProcessor.postProcessors[this.processor].showProperties.split(/[, ]+/);
236 } catch (error) {
237 // The object has not been found or constructed wrong
238 allowedFields = [
239 'recipientEmail',
240 'senderEmail'
241 ];
242 }
243
244 Ext.iterate(allowedFields, function(item, index, allItems) {
245 fields.push(item);
246 }, this);
247
248 return fields;
249 },
250
251 /**
252 * Called by the clientvalidation event
253 *
254 * Adds or removes the error class if the form is valid or not
255 *
256 * @param {Object} formPanel This formpanel
257 * @param {Boolean} valid True if the client validation is true
258 */
259 validation: function(formPanel, valid) {
260 if (this.el) {
261 if (valid && this.el.hasClass('validation-error')) {
262 this.removeClass('validation-error');
263 this.fireEvent('validation', this.processor, valid);
264 } else if (!valid && !this.el.hasClass('validation-error')) {
265 this.addClass('validation-error');
266 this.fireEvent('validation', this.processor, valid);
267 }
268 }
269 }
270 });
271
272 Ext.reg('typo3-form-wizard-viewport-left-form-postprocessors-postprocessor', TYPO3.Form.Wizard.Viewport.Left.Form.PostProcessors.PostProcessor);