3a32499135106e6b73996e95bd2a29ecb6b52615
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Resources / Public / JavaScript / Wizard / Viewport / Left / Options / Forms / Attributes.js
1 Ext.namespace('TYPO3.Form.Wizard.Viewport.Left.Options.Forms');
2
3 /**
4 * The attributes properties of the element
5 *
6 * @class TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes
7 * @extends Ext.FormPanel
8 */
9 TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes = Ext.extend(Ext.FormPanel, {
10 /**
11 * @cfg {String} title
12 * The title text to be used as innerHTML (html tags are accepted) to
13 * display in the panel header (defaults to '').
14 */
15 title: TYPO3.l10n.localize('options_attributes'),
16
17 /** @cfg {String} defaultType
18 *
19 * The default xtype of child Components to create in this Container when
20 * a child item is specified as a raw configuration object,
21 * rather than as an instantiated Component.
22 *
23 * Defaults to 'panel', except Ext.menu.Menu which defaults to 'menuitem',
24 * and Ext.Toolbar and Ext.ButtonGroup which default to 'button'.
25 */
26 defaultType: 'textfieldsubmit',
27
28 /**
29 * @cfg {Boolean} monitorValid If true, the form monitors its valid state client-side and
30 * regularly fires the clientvalidation event passing that state.
31 * When monitoring valid state, the FormPanel enables/disables any of its configured
32 * buttons which have been configured with formBind: true depending
33 * on whether the form is valid or not. Defaults to false
34 */
35 monitorValid: true,
36
37 /**
38 * Constructor
39 *
40 * @param config
41 */
42 constructor: function(config){
43 // Adds the specified events to the list of events which this Observable may fire.
44 this.addEvents({
45 'validation': true
46 });
47
48 // Call our superclass constructor to complete construction process.
49 TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes.superclass.constructor.call(this, config);
50 },
51
52 /**
53 * Constructor
54 *
55 * Add the form elements to the accordion
56 */
57 initComponent: function() {
58 var attributes = this.getAttributesBySettings();
59 var formItems = new Array();
60
61 Ext.iterate(attributes, function(item, index, allItems) {
62 switch(item) {
63 case 'accept':
64 formItems.push({
65 fieldLabel: TYPO3.l10n.localize('attributes_accept'),
66 name: 'accept',
67 listeners: {
68 'triggerclick': {
69 scope: this,
70 fn: this.storeValue
71 }
72 }
73 });
74 break;
75 case 'acceptcharset':
76 formItems.push({
77 fieldLabel: TYPO3.l10n.localize('attributes_acceptcharset'),
78 name: 'acceptcharset',
79 listeners: {
80 'triggerclick': {
81 scope: this,
82 fn: this.storeValue
83 }
84 }
85 });
86 break;
87 case 'accesskey':
88 formItems.push({
89 fieldLabel: TYPO3.l10n.localize('attributes_accesskey'),
90 name: 'accesskey',
91 maxlength: 1,
92 listeners: {
93 'triggerclick': {
94 scope: this,
95 fn: this.storeValue
96 }
97 }
98 });
99 break;
100 case 'action':
101 formItems.push({
102 fieldLabel: TYPO3.l10n.localize('attributes_action'),
103 name: 'action',
104 listeners: {
105 'triggerclick': {
106 scope: this,
107 fn: this.storeValue
108 }
109 }
110 });
111 break;
112 case 'alt':
113 formItems.push({
114 fieldLabel: TYPO3.l10n.localize('attributes_alt'),
115 name: 'alt',
116 listeners: {
117 'triggerclick': {
118 scope: this,
119 fn: this.storeValue
120 }
121 }
122 });
123 break;
124 case 'checked':
125 formItems.push({
126 xtype: 'checkbox',
127 fieldLabel: TYPO3.l10n.localize('attributes_checked'),
128 name: 'checked',
129 inputValue: 'checked',
130 listeners: {
131 'check': {
132 scope: this,
133 fn: this.storeValue
134 }
135 }
136 });
137 break;
138 case 'class':
139 formItems.push({
140 fieldLabel: TYPO3.l10n.localize('attributes_class'),
141 name: 'class',
142 listeners: {
143 'triggerclick': {
144 scope: this,
145 fn: this.storeValue
146 }
147 }
148 });
149 break;
150 case 'cols':
151 formItems.push({
152 fieldLabel: TYPO3.l10n.localize('attributes_cols'),
153 name: 'cols',
154 xtype: 'spinnerfield',
155 allowBlank: false,
156 listeners: {
157 'spin': {
158 scope: this,
159 fn: this.storeValue
160 }
161 }
162 });
163 break;
164 case 'dir':
165 formItems.push({
166 fieldLabel: TYPO3.l10n.localize('attributes_dir'),
167 name: 'dir',
168 xtype: 'combo',
169 mode: 'local',
170 triggerAction: 'all',
171 forceSelection: true,
172 editable: false,
173 hiddenName: 'dir',
174 displayField: 'label',
175 valueField: 'value',
176 store: new Ext.data.JsonStore({
177 fields: ['label', 'value'],
178 data: [
179 {label: TYPO3.l10n.localize('attributes_dir_ltr'), value: 'ltr'},
180 {label: TYPO3.l10n.localize('attributes_dir_rtl'), value: 'rtl'}
181 ]
182 }),
183 listeners: {
184 'select': {
185 scope: this,
186 fn: this.storeValue
187 }
188 }
189 });
190 break;
191 case 'disabled':
192 formItems.push({
193 xtype: 'checkbox',
194 fieldLabel: TYPO3.l10n.localize('attributes_disabled'),
195 name: 'disabled',
196 inputValue: 'disabled',
197 listeners: {
198 'check': {
199 scope: this,
200 fn: this.storeValue
201 }
202 }
203 });
204 break;
205 case 'enctype':
206 formItems.push({
207 fieldLabel: TYPO3.l10n.localize('attributes_enctype'),
208 name: 'enctype',
209 xtype: 'combo',
210 mode: 'local',
211 triggerAction: 'all',
212 forceSelection: true,
213 editable: false,
214 hiddenName: 'enctype',
215 displayField: 'label',
216 valueField: 'value',
217 store: new Ext.data.JsonStore({
218 fields: ['label', 'value'],
219 data: [
220 {label: TYPO3.l10n.localize('attributes_enctype_1'), value: 'application/x-www-form-urlencoded'},
221 {label: TYPO3.l10n.localize('attributes_enctype_2'), value: 'multipart/form-data'},
222 {label: TYPO3.l10n.localize('attributes_enctype_3'), value: 'text/plain'}
223 ]
224 }),
225 listeners: {
226 'select': {
227 scope: this,
228 fn: this.storeValue
229 }
230 }
231 });
232 break;
233 case 'id':
234 formItems.push({
235 fieldLabel: TYPO3.l10n.localize('attributes_id'),
236 name: 'id',
237 listeners: {
238 'triggerclick': {
239 scope: this,
240 fn: this.storeValue
241 }
242 }
243 });
244 break;
245 case 'label':
246 formItems.push({
247 fieldLabel: TYPO3.l10n.localize('attributes_label'),
248 name: 'label',
249 listeners: {
250 'triggerclick': {
251 scope: this,
252 fn: this.storeValue
253 }
254 }
255 });
256 break;
257 case 'lang':
258 formItems.push({
259 fieldLabel: TYPO3.l10n.localize('attributes_lang'),
260 name: 'lang',
261 listeners: {
262 'triggerclick': {
263 scope: this,
264 fn: this.storeValue
265 }
266 }
267 });
268 break;
269 case 'maxlength':
270 formItems.push({
271 fieldLabel: TYPO3.l10n.localize('attributes_maxlength'),
272 name: 'maxlength',
273 xtype: 'spinnerfield',
274 listeners: {
275 'spin': {
276 scope: this,
277 fn: this.storeValue
278 }
279 }
280 });
281 break;
282 case 'method':
283 formItems.push({
284 fieldLabel: TYPO3.l10n.localize('attributes_method'),
285 name: 'method',
286 xtype: 'combo',
287 mode: 'local',
288 triggerAction: 'all',
289 forceSelection: true,
290 editable: false,
291 hiddenName: 'method',
292 displayField: 'label',
293 valueField: 'value',
294 store: new Ext.data.JsonStore({
295 fields: ['label', 'value'],
296 data: [
297 {label: TYPO3.l10n.localize('attributes_method_get'), value: 'get'},
298 {label: TYPO3.l10n.localize('attributes_method_post'), value: 'post'}
299 ]
300 }),
301 listeners: {
302 'select': {
303 scope: this,
304 fn: this.storeValue
305 }
306 }
307 });
308 break;
309 case 'multiple':
310 formItems.push({
311 xtype: 'checkbox',
312 fieldLabel: TYPO3.l10n.localize('attributes_multiple'),
313 name: 'multiple',
314 inputValue: 'multiple',
315 listeners: {
316 'check': {
317 scope: this,
318 fn: this.storeValue
319 }
320 }
321 });
322 break;
323 case 'name':
324 formItems.push({
325 fieldLabel: TYPO3.l10n.localize('attributes_name'),
326 name: 'name',
327 allowBlank:false,
328 listeners: {
329 'triggerclick': {
330 scope: this,
331 fn: this.storeValue
332 }
333 }
334 });
335 break;
336 case 'readonly':
337 formItems.push({
338 xtype: 'checkbox',
339 fieldLabel: TYPO3.l10n.localize('attributes_readonly'),
340 name: 'readonly',
341 inputValue: 'readonly',
342 listeners: {
343 'check': {
344 scope: this,
345 fn: this.storeValue
346 }
347 }
348 });
349 break;
350 case 'rows':
351 formItems.push({
352 fieldLabel: TYPO3.l10n.localize('attributes_rows'),
353 name: 'rows',
354 xtype: 'spinnerfield',
355 allowBlank: false,
356 listeners: {
357 'spin': {
358 scope: this,
359 fn: this.storeValue
360 }
361 }
362 });
363 break;
364 case 'selected':
365 formItems.push({
366 xtype: 'checkbox',
367 fieldLabel: TYPO3.l10n.localize('attributes_selected'),
368 name: 'selected',
369 inputValue: 'selected',
370 listeners: {
371 'check': {
372 scope: this,
373 fn: this.storeValue
374 }
375 }
376 });
377 break;
378 case 'size':
379 formItems.push({
380 fieldLabel: TYPO3.l10n.localize('attributes_size'),
381 name: 'size',
382 xtype: 'spinnerfield',
383 listeners: {
384 'spin': {
385 scope: this,
386 fn: this.storeValue
387 }
388 }
389 });
390 break;
391 case 'src':
392 formItems.push({
393 fieldLabel: TYPO3.l10n.localize('attributes_src'),
394 name: 'src',
395 listeners: {
396 'triggerclick': {
397 scope: this,
398 fn: this.storeValue
399 }
400 }
401 });
402 break;
403 case 'style':
404 formItems.push({
405 fieldLabel: TYPO3.l10n.localize('attributes_style'),
406 name: 'style',
407 listeners: {
408 'triggerclick': {
409 scope: this,
410 fn: this.storeValue
411 }
412 }
413 });
414 break;
415 case 'tabindex':
416 formItems.push({
417 fieldLabel: TYPO3.l10n.localize('attributes_tabindex'),
418 name: 'tabindex',
419 xtype: 'spinnerfield',
420 listeners: {
421 'spin': {
422 scope: this,
423 fn: this.storeValue
424 }
425 }
426 });
427 break;
428 case 'title':
429 formItems.push({
430 fieldLabel: TYPO3.l10n.localize('attributes_title'),
431 name: 'title',
432 listeners: {
433 'triggerclick': {
434 scope: this,
435 fn: this.storeValue
436 }
437 }
438 });
439 break;
440 case 'type':
441 formItems.push({
442 fieldLabel: TYPO3.l10n.localize('attributes_type'),
443 name: 'type',
444 xtype: 'combo',
445 mode: 'local',
446 triggerAction: 'all',
447 forceSelection: true,
448 editable: false,
449 hiddenName: 'type',
450 displayField: 'label',
451 valueField: 'value',
452 store: new Ext.data.JsonStore({
453 fields: ['label', 'value'],
454 data: [
455 {label: TYPO3.l10n.localize('attributes_type_button'), value: 'button'},
456 {label: TYPO3.l10n.localize('attributes_type_checkbox'), value: 'checkbox'},
457 {label: TYPO3.l10n.localize('attributes_type_file'), value: 'file'},
458 {label: TYPO3.l10n.localize('attributes_type_hidden'), value: 'hidden'},
459 {label: TYPO3.l10n.localize('attributes_type_image'), value: 'image'},
460 {label: TYPO3.l10n.localize('attributes_type_password'), value: 'password'},
461 {label: TYPO3.l10n.localize('attributes_type_radio'), value: 'radio'},
462 {label: TYPO3.l10n.localize('attributes_type_reset'), value: 'reset'},
463 {label: TYPO3.l10n.localize('attributes_type_submit'), value: 'submit'},
464 {label: TYPO3.l10n.localize('attributes_type_text'), value: 'text'}
465 ]
466 }),
467 listeners: {
468 'select': {
469 scope: this,
470 fn: this.storeValue
471 }
472 }
473 });
474 break;
475 case 'value':
476 formItems.push({
477 fieldLabel: TYPO3.l10n.localize('attributes_value'),
478 name: 'value',
479 listeners: {
480 'triggerclick': {
481 scope: this,
482 fn: this.storeValue
483 }
484 }
485 });
486 break;
487 }
488 }, this);
489
490 var config = {
491 items: [{
492 xtype: 'fieldset',
493 title: '',
494 autoHeight: true,
495 border: false,
496 defaults: {
497 width: 150,
498 msgTarget: 'side'
499 },
500 defaultType: 'textfieldsubmit',
501 items: formItems
502 }]
503 };
504
505 // apply config
506 Ext.apply(this, Ext.apply(this.initialConfig, config));
507
508 // call parent
509 TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes.superclass.initComponent.apply(this, arguments);
510
511 // Initialize clientvalidation event
512 this.on('clientvalidation', this.validation, this);
513
514 // Fill the form with the configuration values
515 this.fillForm();
516 },
517
518 /**
519 * Store a changed value from the form in the element
520 *
521 * @param {Object} field The field which has changed
522 */
523 storeValue: function(field) {
524 if (field.isValid()) {
525 var fieldName = field.getName();
526
527 var formConfiguration = {attributes: {}};
528 formConfiguration.attributes[fieldName] = field.getValue();
529
530 this.element.setConfigurationValue(formConfiguration);
531 }
532 },
533
534 /**
535 * Fill the form with the configuration of the element
536 *
537 * @return void
538 */
539 fillForm: function() {
540 this.getForm().setValues(this.element.configuration.attributes);
541 },
542
543 /**
544 * Get the attributes for the element
545 *
546 * Based on the elements attributes, the TSconfig general allowed attributes
547 * and the TSconfig allowed attributes for this type of element
548 *
549 * @returns object
550 */
551 getAttributesBySettings: function() {
552 var attributes = [];
553 var elementAttributes = this.element.configuration.attributes;
554 var elementType = this.element.xtype.split('-').pop();
555
556 var allowedGeneralAttributes = [];
557 try {
558 allowedGeneralAttributes = TYPO3.Form.Wizard.Settings.defaults.tabs.options.accordions.attributes.showProperties.split(/[, ]+/);
559 } catch (error) {
560 // The object has not been found or constructed wrong
561 allowedGeneralAttributes = [
562 'accept',
563 'acceptcharset',
564 'accesskey',
565 'action',
566 'alt',
567 'checked',
568 'class',
569 'cols',
570 'dir',
571 'disabled',
572 'enctype',
573 'id',
574 'label',
575 'lang',
576 'maxlength',
577 'method',
578 'multiple',
579 'name',
580 'readonly',
581 'rows',
582 'selected',
583 'size',
584 'src',
585 'style',
586 'tabindex',
587 'title',
588 'type',
589 'value'
590 ];
591 }
592
593 var allowedElementAttributes = [];
594 try {
595 allowedElementAttributes = TYPO3.Form.Wizard.Settings.elements[elementType].accordions.attributes.showProperties.split(/[, ]+/);
596 } catch (error) {
597 // The object has not been found
598 allowedElementAttributes = allowedGeneralAttributes;
599 }
600
601 Ext.iterate(allowedElementAttributes, function(item, index, allItems) {
602 if (allowedGeneralAttributes.indexOf(item) > -1 && Ext.isDefined(elementAttributes[item])) {
603 attributes.push(item);
604 }
605 }, this);
606
607 return attributes;
608 },
609
610 /**
611 * Called by the clientvalidation event
612 *
613 * Adds or removes the error class if the form is valid or not
614 *
615 * @param {Object} formPanel This formpanel
616 * @param {Boolean} valid True if the client validation is true
617 */
618 validation: function(formPanel, valid) {
619 if (this.el) {
620 if (valid && this.el.hasClass('validation-error')) {
621 this.removeClass('validation-error');
622 this.fireEvent('validation', 'attributes', valid);
623 } else if (!valid && !this.el.hasClass('validation-error')) {
624 this.addClass('validation-error');
625 this.fireEvent('validation', 'attributes', valid);
626 }
627 }
628 }
629 });
630
631 Ext.reg('typo3-form-wizard-viewport-left-options-forms-attributes', TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes);