160b22b6d1c3e111222870dbdaf6f61916200418
[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 'blur': {
162 scope: this,
163 fn: this.storeValue
164 }
165 }
166 });
167 break;
168 case 'dir':
169 formItems.push({
170 fieldLabel: TYPO3.l10n.localize('attributes_dir'),
171 name: 'dir',
172 xtype: 'combo',
173 mode: 'local',
174 triggerAction: 'all',
175 forceSelection: true,
176 editable: false,
177 hiddenName: 'dir',
178 displayField: 'label',
179 valueField: 'value',
180 store: new Ext.data.JsonStore({
181 fields: ['label', 'value'],
182 data: [
183 {label: TYPO3.l10n.localize('attributes_dir_ltr'), value: 'ltr'},
184 {label: TYPO3.l10n.localize('attributes_dir_rtl'), value: 'rtl'}
185 ]
186 }),
187 listeners: {
188 'select': {
189 scope: this,
190 fn: this.storeValue
191 }
192 }
193 });
194 break;
195 case 'disabled':
196 formItems.push({
197 xtype: 'checkbox',
198 fieldLabel: TYPO3.l10n.localize('attributes_disabled'),
199 name: 'disabled',
200 inputValue: 'disabled',
201 listeners: {
202 'check': {
203 scope: this,
204 fn: this.storeValue
205 }
206 }
207 });
208 break;
209 case 'enctype':
210 formItems.push({
211 fieldLabel: TYPO3.l10n.localize('attributes_enctype'),
212 name: 'enctype',
213 xtype: 'combo',
214 mode: 'local',
215 triggerAction: 'all',
216 forceSelection: true,
217 editable: false,
218 hiddenName: 'enctype',
219 displayField: 'label',
220 valueField: 'value',
221 store: new Ext.data.JsonStore({
222 fields: ['label', 'value'],
223 data: [
224 {label: TYPO3.l10n.localize('attributes_enctype_1'), value: 'application/x-www-form-urlencoded'},
225 {label: TYPO3.l10n.localize('attributes_enctype_2'), value: 'multipart/form-data'},
226 {label: TYPO3.l10n.localize('attributes_enctype_3'), value: 'text/plain'}
227 ]
228 }),
229 listeners: {
230 'select': {
231 scope: this,
232 fn: this.storeValue
233 }
234 }
235 });
236 break;
237 case 'id':
238 formItems.push({
239 fieldLabel: TYPO3.l10n.localize('attributes_id'),
240 name: 'id',
241 listeners: {
242 'triggerclick': {
243 scope: this,
244 fn: this.storeValue
245 }
246 }
247 });
248 break;
249 case 'label':
250 formItems.push({
251 fieldLabel: TYPO3.l10n.localize('attributes_label'),
252 name: 'label',
253 listeners: {
254 'triggerclick': {
255 scope: this,
256 fn: this.storeValue
257 }
258 }
259 });
260 break;
261 case 'lang':
262 formItems.push({
263 fieldLabel: TYPO3.l10n.localize('attributes_lang'),
264 name: 'lang',
265 listeners: {
266 'triggerclick': {
267 scope: this,
268 fn: this.storeValue
269 }
270 }
271 });
272 break;
273 case 'maxlength':
274 formItems.push({
275 fieldLabel: TYPO3.l10n.localize('attributes_maxlength'),
276 name: 'maxlength',
277 xtype: 'spinnerfield',
278 listeners: {
279 'spin': {
280 scope: this,
281 fn: this.storeValue
282 },
283 'blur': {
284 scope: this,
285 fn: this.storeValue
286 }
287 }
288 });
289 break;
290 case 'method':
291 formItems.push({
292 fieldLabel: TYPO3.l10n.localize('attributes_method'),
293 name: 'method',
294 xtype: 'combo',
295 mode: 'local',
296 triggerAction: 'all',
297 forceSelection: true,
298 editable: false,
299 hiddenName: 'method',
300 displayField: 'label',
301 valueField: 'value',
302 store: new Ext.data.JsonStore({
303 fields: ['label', 'value'],
304 data: [
305 {label: TYPO3.l10n.localize('attributes_method_get'), value: 'get'},
306 {label: TYPO3.l10n.localize('attributes_method_post'), value: 'post'}
307 ]
308 }),
309 listeners: {
310 'select': {
311 scope: this,
312 fn: this.storeValue
313 }
314 }
315 });
316 break;
317 case 'multiple':
318 formItems.push({
319 xtype: 'checkbox',
320 fieldLabel: TYPO3.l10n.localize('attributes_multiple'),
321 name: 'multiple',
322 inputValue: 'multiple',
323 listeners: {
324 'check': {
325 scope: this,
326 fn: this.storeValue
327 }
328 }
329 });
330 break;
331 case 'name':
332 formItems.push({
333 fieldLabel: TYPO3.l10n.localize('attributes_name'),
334 name: 'name',
335 allowBlank:false,
336 listeners: {
337 'triggerclick': {
338 scope: this,
339 fn: this.storeValue
340 }
341 }
342 });
343 break;
344 case 'readonly':
345 formItems.push({
346 xtype: 'checkbox',
347 fieldLabel: TYPO3.l10n.localize('attributes_readonly'),
348 name: 'readonly',
349 inputValue: 'readonly',
350 listeners: {
351 'check': {
352 scope: this,
353 fn: this.storeValue
354 }
355 }
356 });
357 break;
358 case 'rows':
359 formItems.push({
360 fieldLabel: TYPO3.l10n.localize('attributes_rows'),
361 name: 'rows',
362 xtype: 'spinnerfield',
363 allowBlank: false,
364 listeners: {
365 'spin': {
366 scope: this,
367 fn: this.storeValue
368 },
369 'blur': {
370 scope: this,
371 fn: this.storeValue
372 }
373 }
374 });
375 break;
376 case 'selected':
377 formItems.push({
378 xtype: 'checkbox',
379 fieldLabel: TYPO3.l10n.localize('attributes_selected'),
380 name: 'selected',
381 inputValue: 'selected',
382 listeners: {
383 'check': {
384 scope: this,
385 fn: this.storeValue
386 }
387 }
388 });
389 break;
390 case 'size':
391 formItems.push({
392 fieldLabel: TYPO3.l10n.localize('attributes_size'),
393 name: 'size',
394 xtype: 'spinnerfield',
395 listeners: {
396 'spin': {
397 scope: this,
398 fn: this.storeValue
399 },
400 'blur': {
401 scope: this,
402 fn: this.storeValue
403 }
404 }
405 });
406 break;
407 case 'src':
408 formItems.push({
409 fieldLabel: TYPO3.l10n.localize('attributes_src'),
410 name: 'src',
411 listeners: {
412 'triggerclick': {
413 scope: this,
414 fn: this.storeValue
415 }
416 }
417 });
418 break;
419 case 'style':
420 formItems.push({
421 fieldLabel: TYPO3.l10n.localize('attributes_style'),
422 name: 'style',
423 listeners: {
424 'triggerclick': {
425 scope: this,
426 fn: this.storeValue
427 }
428 }
429 });
430 break;
431 case 'tabindex':
432 formItems.push({
433 fieldLabel: TYPO3.l10n.localize('attributes_tabindex'),
434 name: 'tabindex',
435 xtype: 'spinnerfield',
436 listeners: {
437 'spin': {
438 scope: this,
439 fn: this.storeValue
440 },
441 'blur': {
442 scope: this,
443 fn: this.storeValue
444 }
445 }
446 });
447 break;
448 case 'title':
449 formItems.push({
450 fieldLabel: TYPO3.l10n.localize('attributes_title'),
451 name: 'title',
452 listeners: {
453 'triggerclick': {
454 scope: this,
455 fn: this.storeValue
456 }
457 }
458 });
459 break;
460 case 'type':
461 formItems.push({
462 fieldLabel: TYPO3.l10n.localize('attributes_type'),
463 name: 'type',
464 xtype: 'combo',
465 mode: 'local',
466 triggerAction: 'all',
467 forceSelection: true,
468 editable: false,
469 hiddenName: 'type',
470 displayField: 'label',
471 valueField: 'value',
472 store: new Ext.data.JsonStore({
473 fields: ['label', 'value'],
474 data: [
475 {label: TYPO3.l10n.localize('attributes_type_button'), value: 'button'},
476 {label: TYPO3.l10n.localize('attributes_type_checkbox'), value: 'checkbox'},
477 {label: TYPO3.l10n.localize('attributes_type_file'), value: 'file'},
478 {label: TYPO3.l10n.localize('attributes_type_hidden'), value: 'hidden'},
479 {label: TYPO3.l10n.localize('attributes_type_image'), value: 'image'},
480 {label: TYPO3.l10n.localize('attributes_type_password'), value: 'password'},
481 {label: TYPO3.l10n.localize('attributes_type_radio'), value: 'radio'},
482 {label: TYPO3.l10n.localize('attributes_type_reset'), value: 'reset'},
483 {label: TYPO3.l10n.localize('attributes_type_submit'), value: 'submit'},
484 {label: TYPO3.l10n.localize('attributes_type_text'), value: 'text'}
485 ]
486 }),
487 listeners: {
488 'select': {
489 scope: this,
490 fn: this.storeValue
491 }
492 }
493 });
494 break;
495 case 'value':
496 formItems.push({
497 fieldLabel: TYPO3.l10n.localize('attributes_value'),
498 name: 'value',
499 listeners: {
500 'triggerclick': {
501 scope: this,
502 fn: this.storeValue
503 }
504 }
505 });
506 break;
507 }
508 }, this);
509
510 var config = {
511 items: [{
512 xtype: 'fieldset',
513 title: '',
514 autoHeight: true,
515 border: false,
516 defaults: {
517 width: 150,
518 msgTarget: 'side'
519 },
520 defaultType: 'textfieldsubmit',
521 items: formItems
522 }]
523 };
524
525 // apply config
526 Ext.apply(this, Ext.apply(this.initialConfig, config));
527
528 // call parent
529 TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes.superclass.initComponent.apply(this, arguments);
530
531 // Initialize clientvalidation event
532 this.on('clientvalidation', this.validation, this);
533
534 // Fill the form with the configuration values
535 this.fillForm();
536 },
537
538 /**
539 * Store a changed value from the form in the element
540 *
541 * @param {Object} field The field which has changed
542 */
543 storeValue: function(field) {
544 if (field.isValid()) {
545 var fieldName = field.getName();
546
547 var formConfiguration = {attributes: {}};
548 formConfiguration.attributes[fieldName] = field.getValue();
549
550 this.element.setConfigurationValue(formConfiguration);
551 }
552 },
553
554 /**
555 * Fill the form with the configuration of the element
556 *
557 * @return void
558 */
559 fillForm: function() {
560 this.getForm().setValues(this.element.configuration.attributes);
561 },
562
563 /**
564 * Get the attributes for the element
565 *
566 * Based on the elements attributes, the TSconfig general allowed attributes
567 * and the TSconfig allowed attributes for this type of element
568 *
569 * @returns object
570 */
571 getAttributesBySettings: function() {
572 var attributes = [];
573 var elementAttributes = this.element.configuration.attributes;
574 var elementType = this.element.xtype.split('-').pop();
575
576 var allowedGeneralAttributes = [];
577 try {
578 allowedGeneralAttributes = TYPO3.Form.Wizard.Settings.defaults.tabs.options.accordions.attributes.showProperties.split(/[, ]+/);
579 } catch (error) {
580 // The object has not been found or constructed wrong
581 allowedGeneralAttributes = [
582 'accept',
583 'acceptcharset',
584 'accesskey',
585 'action',
586 'alt',
587 'checked',
588 'class',
589 'cols',
590 'dir',
591 'disabled',
592 'enctype',
593 'id',
594 'label',
595 'lang',
596 'maxlength',
597 'method',
598 'multiple',
599 'name',
600 'readonly',
601 'rows',
602 'selected',
603 'size',
604 'src',
605 'style',
606 'tabindex',
607 'title',
608 'type',
609 'value'
610 ];
611 }
612
613 var allowedElementAttributes = [];
614 try {
615 allowedElementAttributes = TYPO3.Form.Wizard.Settings.elements[elementType].accordions.attributes.showProperties.split(/[, ]+/);
616 } catch (error) {
617 // The object has not been found
618 allowedElementAttributes = allowedGeneralAttributes;
619 }
620
621 Ext.iterate(allowedElementAttributes, function(item, index, allItems) {
622 if (allowedGeneralAttributes.indexOf(item) > -1 && Ext.isDefined(elementAttributes[item])) {
623 attributes.push(item);
624 }
625 }, this);
626
627 return attributes;
628 },
629
630 /**
631 * Called by the clientvalidation event
632 *
633 * Adds or removes the error class if the form is valid or not
634 *
635 * @param {Object} formPanel This formpanel
636 * @param {Boolean} valid True if the client validation is true
637 */
638 validation: function(formPanel, valid) {
639 if (this.el) {
640 if (valid && this.el.hasClass('validation-error')) {
641 this.removeClass('validation-error');
642 this.fireEvent('validation', 'attributes', valid);
643 } else if (!valid && !this.el.hasClass('validation-error')) {
644 this.addClass('validation-error');
645 this.fireEvent('validation', 'attributes', valid);
646 }
647 }
648 }
649 });
650
651 Ext.reg('typo3-form-wizard-viewport-left-options-forms-attributes', TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes);