[TASK] EXT:form - Set proper default values in form wizard
[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 'accept-charset':
76 formItems.push({
77 fieldLabel: TYPO3.l10n.localize('attributes_acceptcharset'),
78 name: 'accept-charset',
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 'autocomplete':
125 formItems.push({
126 fieldLabel: TYPO3.l10n.localize('attributes_autocomplete'),
127 name: 'autocomplete',
128 xtype: 'combo',
129 mode: 'local',
130 triggerAction: 'all',
131 forceSelection: true,
132 editable: false,
133 hiddenName: 'autocomplete',
134 displayField: 'label',
135 valueField: 'value',
136 store: new Ext.data.JsonStore({
137 fields: ['label', 'value'],
138 data: [
139 {label: TYPO3.l10n.localize('attributes_autocomplete_none'), value: ''},
140 {label: TYPO3.l10n.localize('attributes_autocomplete_off'), value: 'off'},
141 {label: TYPO3.l10n.localize('attributes_autocomplete_on'), value: 'on'}
142 ]
143 }),
144 listeners: {
145 'select': {
146 scope: this,
147 fn: this.storeValue
148 }
149 }
150 });
151 break;
152 case 'autofocus':
153 formItems.push({
154 xtype: 'typo3-form-wizard-valuecheckbox',
155 fieldLabel: TYPO3.l10n.localize('attributes_autofocus'),
156 name: 'autofocus',
157 inputValue: 'autofocus',
158 listeners: {
159 'check': {
160 scope: this,
161 fn: this.storeValue
162 }
163 }
164 });
165 break;
166 case 'checked':
167 formItems.push({
168 xtype: 'typo3-form-wizard-valuecheckbox',
169 fieldLabel: TYPO3.l10n.localize('attributes_checked'),
170 name: 'checked',
171 inputValue: 'checked',
172 listeners: {
173 'check': {
174 scope: this,
175 fn: this.storeValue
176 }
177 }
178 });
179 break;
180 case 'class':
181 formItems.push({
182 fieldLabel: TYPO3.l10n.localize('attributes_class'),
183 name: 'class',
184 listeners: {
185 'triggerclick': {
186 scope: this,
187 fn: this.storeValue
188 }
189 }
190 });
191 break;
192 case 'cols':
193 formItems.push({
194 fieldLabel: TYPO3.l10n.localize('attributes_cols'),
195 name: 'cols',
196 xtype: 'spinnerfield',
197 allowBlank: false,
198 listeners: {
199 'spin': {
200 scope: this,
201 fn: this.storeValue
202 },
203 'blur': {
204 scope: this,
205 fn: this.storeValue
206 }
207 }
208 });
209 break;
210 case 'contenteditable':
211 formItems.push({
212 fieldLabel: TYPO3.l10n.localize('attributes_contenteditable'),
213 name: 'contenteditable',
214 xtype: 'combo',
215 mode: 'local',
216 triggerAction: 'all',
217 forceSelection: true,
218 editable: false,
219 hiddenName: 'contenteditable',
220 displayField: 'label',
221 valueField: 'value',
222 store: new Ext.data.JsonStore({
223 fields: ['label', 'value'],
224 data: [
225 {label: TYPO3.l10n.localize('attributes_contenteditable_none'), value: ''},
226 {label: TYPO3.l10n.localize('attributes_contenteditable_true'), value: 'true'},
227 {label: TYPO3.l10n.localize('attributes_contenteditable_false'), value: 'false'}
228 ]
229 }),
230 listeners: {
231 'select': {
232 scope: this,
233 fn: this.storeValue
234 }
235 }
236 });
237 break;
238 case 'contextmenu':
239 formItems.push({
240 fieldLabel: TYPO3.l10n.localize('attributes_contextmenu'),
241 name: 'contextmenu',
242 listeners: {
243 'triggerclick': {
244 scope: this,
245 fn: this.storeValue
246 }
247 }
248 });
249 break;
250 case 'dir':
251 formItems.push({
252 fieldLabel: TYPO3.l10n.localize('attributes_dir'),
253 name: 'dir',
254 xtype: 'combo',
255 mode: 'local',
256 triggerAction: 'all',
257 forceSelection: true,
258 editable: false,
259 hiddenName: 'dir',
260 displayField: 'label',
261 valueField: 'value',
262 store: new Ext.data.JsonStore({
263 fields: ['label', 'value'],
264 data: [
265 {label: TYPO3.l10n.localize('attributes_dir_ltr'), value: 'ltr'},
266 {label: TYPO3.l10n.localize('attributes_dir_rtl'), value: 'rtl'}
267 ]
268 }),
269 listeners: {
270 'select': {
271 scope: this,
272 fn: this.storeValue
273 }
274 }
275 });
276 break;
277 case 'disabled':
278 formItems.push({
279 xtype: 'typo3-form-wizard-valuecheckbox',
280 fieldLabel: TYPO3.l10n.localize('attributes_disabled'),
281 name: 'disabled',
282 inputValue: 'disabled',
283 listeners: {
284 'check': {
285 scope: this,
286 fn: this.storeValue
287 }
288 }
289 });
290 break;
291 case 'draggable':
292 formItems.push({
293 fieldLabel: TYPO3.l10n.localize('attributes_draggable'),
294 name: 'draggable',
295 xtype: 'combo',
296 mode: 'local',
297 triggerAction: 'all',
298 forceSelection: true,
299 editable: false,
300 hiddenName: 'draggable',
301 displayField: 'label',
302 valueField: 'value',
303 store: new Ext.data.JsonStore({
304 fields: ['label', 'value'],
305 data: [
306 {label: TYPO3.l10n.localize('attributes_draggable_none'), value: ''},
307 {label: TYPO3.l10n.localize('attributes_draggable_false'), value: 'false'},
308 {label: TYPO3.l10n.localize('attributes_draggable_true'), value: 'true'},
309 {label: TYPO3.l10n.localize('attributes_draggable_auto'), value: 'auto'}
310 ]
311 }),
312 listeners: {
313 'select': {
314 scope: this,
315 fn: this.storeValue
316 }
317 }
318 });
319 break;
320 case 'dropzone':
321 formItems.push({
322 fieldLabel: TYPO3.l10n.localize('attributes_dropzone'),
323 name: 'dropzone',
324 listeners: {
325 'triggerclick': {
326 scope: this,
327 fn: this.storeValue
328 }
329 }
330 });
331 break;
332 case 'enctype':
333 formItems.push({
334 fieldLabel: TYPO3.l10n.localize('attributes_enctype'),
335 name: 'enctype',
336 xtype: 'combo',
337 mode: 'local',
338 triggerAction: 'all',
339 forceSelection: true,
340 editable: false,
341 hiddenName: 'enctype',
342 displayField: 'label',
343 valueField: 'value',
344 store: new Ext.data.JsonStore({
345 fields: ['label', 'value'],
346 data: [
347 {label: TYPO3.l10n.localize('attributes_enctype_1'), value: 'application/x-www-form-urlencoded'},
348 {label: TYPO3.l10n.localize('attributes_enctype_2'), value: 'multipart/form-data'},
349 {label: TYPO3.l10n.localize('attributes_enctype_3'), value: 'text/plain'}
350 ]
351 }),
352 listeners: {
353 'select': {
354 scope: this,
355 fn: this.storeValue
356 }
357 }
358 });
359 break;
360 case 'height':
361 formItems.push({
362 fieldLabel: TYPO3.l10n.localize('attributes_height'),
363 name: 'height',
364 xtype: 'spinnerfield',
365 listeners: {
366 'spin': {
367 scope: this,
368 fn: this.storeValue
369 },
370 'blur': {
371 scope: this,
372 fn: this.storeValue
373 }
374 }
375 });
376 break;
377 case 'hidden':
378 formItems.push({
379 xtype: 'typo3-form-wizard-valuecheckbox',
380 fieldLabel: TYPO3.l10n.localize('attributes_hidden'),
381 name: 'hidden',
382 inputValue: 'hidden',
383 listeners: {
384 'check': {
385 scope: this,
386 fn: this.storeValue
387 }
388 }
389 });
390 break;
391 case 'id':
392 formItems.push({
393 fieldLabel: TYPO3.l10n.localize('attributes_id'),
394 name: 'id',
395 listeners: {
396 'triggerclick': {
397 scope: this,
398 fn: this.storeValue
399 }
400 }
401 });
402 break;
403 case 'inputmode':
404 formItems.push({
405 fieldLabel: TYPO3.l10n.localize('attributes_inputmode'),
406 name: 'inputmode',
407 xtype: 'combo',
408 mode: 'local',
409 triggerAction: 'all',
410 forceSelection: true,
411 editable: false,
412 hiddenName: 'inputmode',
413 displayField: 'label',
414 valueField: 'value',
415 store: new Ext.data.JsonStore({
416 fields: ['label', 'value'],
417 data: [
418 {label: TYPO3.l10n.localize('attributes_inputmode_none'), value: ''},
419 {label: TYPO3.l10n.localize('attributes_inputmode_verbatim'), value: 'verbatim'},
420 {label: TYPO3.l10n.localize('attributes_inputmode_latin'), value: 'latin'},
421 {label: TYPO3.l10n.localize('attributes_inputmode_latin-name'), value: 'latin-name'},
422 {label: TYPO3.l10n.localize('attributes_inputmode_latin-prose'), value: 'latin-prose'},
423 {label: TYPO3.l10n.localize('attributes_inputmode_full-width-latin'), value: 'full-width-latin'},
424 {label: TYPO3.l10n.localize('attributes_inputmode_kana'), value: 'kana'},
425 {label: TYPO3.l10n.localize('attributes_inputmode_kana-name'), value: 'kana-name'},
426 {label: TYPO3.l10n.localize('attributes_inputmode_katakana'), value: 'katakana'},
427 {label: TYPO3.l10n.localize('attributes_inputmode_numeric'), value: 'numeric'},
428 {label: TYPO3.l10n.localize('attributes_inputmode_tel'), value: 'tel'},
429 {label: TYPO3.l10n.localize('attributes_inputmode_email'), value: 'email'},
430 {label: TYPO3.l10n.localize('attributes_inputmode_url'), value: 'url'}
431 ]
432 }),
433 listeners: {
434 'select': {
435 scope: this,
436 fn: this.storeValue
437 }
438 }
439 });
440 break;
441 case 'label':
442 formItems.push({
443 fieldLabel: TYPO3.l10n.localize('attributes_label'),
444 name: 'label',
445 listeners: {
446 'triggerclick': {
447 scope: this,
448 fn: this.storeValue
449 }
450 }
451 });
452 break;
453 case 'lang':
454 formItems.push({
455 fieldLabel: TYPO3.l10n.localize('attributes_lang'),
456 name: 'lang',
457 listeners: {
458 'triggerclick': {
459 scope: this,
460 fn: this.storeValue
461 }
462 }
463 });
464 break;
465 case 'list':
466 formItems.push({
467 fieldLabel: TYPO3.l10n.localize('attributes_list'),
468 name: 'list',
469 listeners: {
470 'triggerclick': {
471 scope: this,
472 fn: this.storeValue
473 }
474 }
475 });
476 break;
477 case 'max':
478 formItems.push({
479 fieldLabel: TYPO3.l10n.localize('attributes_max'),
480 name: 'max',
481 listeners: {
482 'triggerclick': {
483 scope: this,
484 fn: this.storeValue
485 }
486 }
487 });
488 break;
489 case 'maxlength':
490 formItems.push({
491 fieldLabel: TYPO3.l10n.localize('attributes_maxlength'),
492 name: 'maxlength',
493 xtype: 'spinnerfield',
494 listeners: {
495 'spin': {
496 scope: this,
497 fn: this.storeValue
498 },
499 'blur': {
500 scope: this,
501 fn: this.storeValue
502 }
503 }
504 });
505 break;
506 case 'method':
507 formItems.push({
508 fieldLabel: TYPO3.l10n.localize('attributes_method'),
509 name: 'method',
510 xtype: 'combo',
511 mode: 'local',
512 triggerAction: 'all',
513 forceSelection: true,
514 editable: false,
515 hiddenName: 'method',
516 displayField: 'label',
517 valueField: 'value',
518 store: new Ext.data.JsonStore({
519 fields: ['label', 'value'],
520 data: [
521 {label: TYPO3.l10n.localize('attributes_method_get'), value: 'get'},
522 {label: TYPO3.l10n.localize('attributes_method_post'), value: 'post'}
523 ]
524 }),
525 listeners: {
526 'select': {
527 scope: this,
528 fn: this.storeValue
529 }
530 }
531 });
532 break;
533 case 'min':
534 formItems.push({
535 fieldLabel: TYPO3.l10n.localize('attributes_min'),
536 name: 'min',
537 listeners: {
538 'triggerclick': {
539 scope: this,
540 fn: this.storeValue
541 }
542 }
543 });
544 break;
545 case 'minlength':
546 formItems.push({
547 fieldLabel: TYPO3.l10n.localize('attributes_minlength'),
548 name: 'minlength',
549 xtype: 'spinnerfield',
550 listeners: {
551 'spin': {
552 scope: this,
553 fn: this.storeValue
554 },
555 'blur': {
556 scope: this,
557 fn: this.storeValue
558 }
559 }
560 });
561 break;
562 case 'multiple':
563 formItems.push({
564 xtype: 'typo3-form-wizard-valuecheckbox',
565 fieldLabel: TYPO3.l10n.localize('attributes_multiple'),
566 name: 'multiple',
567 inputValue: 'multiple',
568 listeners: {
569 'check': {
570 scope: this,
571 fn: this.storeValue
572 }
573 }
574 });
575 break;
576 case 'name':
577 formItems.push({
578 fieldLabel: TYPO3.l10n.localize('attributes_name'),
579 name: 'name',
580 allowBlank:false,
581 listeners: {
582 'triggerclick': {
583 scope: this,
584 fn: this.storeValue
585 }
586 }
587 });
588 break;
589 case 'novalidate':
590 formItems.push({
591 xtype: 'typo3-form-wizard-valuecheckbox',
592 fieldLabel: TYPO3.l10n.localize('attributes_novalidate'),
593 name: 'novalidate',
594 inputValue: 'novalidate',
595 listeners: {
596 'check': {
597 scope: this,
598 fn: this.storeValue
599 }
600 }
601 });
602 break;
603 case 'pattern':
604 formItems.push({
605 fieldLabel: TYPO3.l10n.localize('attributes_pattern'),
606 name: 'pattern',
607 listeners: {
608 'triggerclick': {
609 scope: this,
610 fn: this.storeValue
611 }
612 }
613 });
614 break;
615 case 'placeholder':
616 formItems.push({
617 fieldLabel: TYPO3.l10n.localize('attributes_placeholder'),
618 name: 'placeholder',
619 listeners: {
620 'triggerclick': {
621 scope: this,
622 fn: this.storeValue
623 }
624 }
625 });
626 break;
627 case 'readonly':
628 formItems.push({
629 xtype: 'typo3-form-wizard-valuecheckbox',
630 fieldLabel: TYPO3.l10n.localize('attributes_readonly'),
631 name: 'readonly',
632 inputValue: 'readonly',
633 listeners: {
634 'check': {
635 scope: this,
636 fn: this.storeValue
637 }
638 }
639 });
640 break;
641 case 'required':
642 formItems.push({
643 xtype: 'typo3-form-wizard-valuecheckbox',
644 fieldLabel: TYPO3.l10n.localize('attributes_required'),
645 name: 'required',
646 inputValue: 'required',
647 listeners: {
648 'check': {
649 scope: this,
650 fn: this.storeValue
651 }
652 }
653 });
654 break;
655 case 'rows':
656 formItems.push({
657 fieldLabel: TYPO3.l10n.localize('attributes_rows'),
658 name: 'rows',
659 xtype: 'spinnerfield',
660 allowBlank: false,
661 listeners: {
662 'spin': {
663 scope: this,
664 fn: this.storeValue
665 },
666 'blur': {
667 scope: this,
668 fn: this.storeValue
669 }
670 }
671 });
672 break;
673 case 'selected':
674 formItems.push({
675 xtype: 'typo3-form-wizard-valuecheckbox',
676 fieldLabel: TYPO3.l10n.localize('attributes_selected'),
677 name: 'selected',
678 inputValue: 'selected',
679 listeners: {
680 'check': {
681 scope: this,
682 fn: this.storeValue
683 }
684 }
685 });
686 break;
687 case 'selectionDirection':
688 formItems.push({
689 fieldLabel: TYPO3.l10n.localize('attributes_selectionDirection'),
690 name: 'selectionDirection',
691 xtype: 'combo',
692 mode: 'local',
693 triggerAction: 'all',
694 forceSelection: true,
695 editable: false,
696 hiddenName: 'selectionDirection',
697 displayField: 'label',
698 valueField: 'value',
699 store: new Ext.data.JsonStore({
700 fields: ['label', 'value'],
701 data: [
702 {label: TYPO3.l10n.localize('attributes_selectionDirection_none'), value: ''},
703 {label: TYPO3.l10n.localize('attributes_selectionDirection_forward'), value: 'forward'},
704 {label: TYPO3.l10n.localize('attributes_selectionDirection_backward'), value: 'backward'}
705 ]
706 }),
707 listeners: {
708 'select': {
709 scope: this,
710 fn: this.storeValue
711 }
712 }
713 });
714 break;
715 case 'selectionEnd':
716 formItems.push({
717 fieldLabel: TYPO3.l10n.localize('attributes_selectionEnd'),
718 name: 'selectionEnd',
719 xtype: 'spinnerfield',
720 listeners: {
721 'spin': {
722 scope: this,
723 fn: this.storeValue
724 },
725 'blur': {
726 scope: this,
727 fn: this.storeValue
728 }
729 }
730 });
731 break;
732 case 'selectionStart':
733 formItems.push({
734 fieldLabel: TYPO3.l10n.localize('attributes_selectionStart'),
735 name: 'selectionStart',
736 xtype: 'spinnerfield',
737 listeners: {
738 'spin': {
739 scope: this,
740 fn: this.storeValue
741 },
742 'blur': {
743 scope: this,
744 fn: this.storeValue
745 }
746 }
747 });
748 break;
749 case 'size':
750 formItems.push({
751 fieldLabel: TYPO3.l10n.localize('attributes_size'),
752 name: 'size',
753 xtype: 'spinnerfield',
754 listeners: {
755 'spin': {
756 scope: this,
757 fn: this.storeValue
758 },
759 'blur': {
760 scope: this,
761 fn: this.storeValue
762 }
763 }
764 });
765 break;
766 case 'spellcheck':
767 formItems.push({
768 fieldLabel: TYPO3.l10n.localize('attributes_spellcheck'),
769 name: 'spellcheck',
770 xtype: 'combo',
771 mode: 'local',
772 triggerAction: 'all',
773 forceSelection: true,
774 editable: false,
775 hiddenName: 'spellcheck',
776 displayField: 'label',
777 valueField: 'value',
778 store: new Ext.data.JsonStore({
779 fields: ['label', 'value'],
780 data: [
781 {label: TYPO3.l10n.localize('attributes_spellcheck_none'), value: ''},
782 {label: TYPO3.l10n.localize('attributes_spellcheck_true'), value: 'true'},
783 {label: TYPO3.l10n.localize('attributes_spellcheck_false'), value: 'false'}
784 ]
785 }),
786 listeners: {
787 'select': {
788 scope: this,
789 fn: this.storeValue
790 }
791 }
792 });
793 break;
794 case 'src':
795 formItems.push({
796 fieldLabel: TYPO3.l10n.localize('attributes_src'),
797 name: 'src',
798 listeners: {
799 'triggerclick': {
800 scope: this,
801 fn: this.storeValue
802 }
803 }
804 });
805 break;
806 case 'step':
807 formItems.push({
808 fieldLabel: TYPO3.l10n.localize('attributes_step'),
809 name: 'step',
810 xtype: 'spinnerfield',
811 listeners: {
812 'spin': {
813 scope: this,
814 fn: this.storeValue
815 },
816 'blur': {
817 scope: this,
818 fn: this.storeValue
819 }
820 }
821 });
822 break;
823 case 'style':
824 formItems.push({
825 fieldLabel: TYPO3.l10n.localize('attributes_style'),
826 name: 'style',
827 listeners: {
828 'triggerclick': {
829 scope: this,
830 fn: this.storeValue
831 }
832 }
833 });
834 break;
835 case 'tabindex':
836 formItems.push({
837 fieldLabel: TYPO3.l10n.localize('attributes_tabindex'),
838 name: 'tabindex',
839 xtype: 'spinnerfield',
840 listeners: {
841 'spin': {
842 scope: this,
843 fn: this.storeValue
844 },
845 'blur': {
846 scope: this,
847 fn: this.storeValue
848 }
849 }
850 });
851 break;
852 case 'title':
853 formItems.push({
854 fieldLabel: TYPO3.l10n.localize('attributes_title'),
855 name: 'title',
856 listeners: {
857 'triggerclick': {
858 scope: this,
859 fn: this.storeValue
860 }
861 }
862 });
863 break;
864 case 'translate':
865 formItems.push({
866 fieldLabel: TYPO3.l10n.localize('attributes_translate'),
867 name: 'translate',
868 xtype: 'combo',
869 mode: 'local',
870 triggerAction: 'all',
871 forceSelection: true,
872 editable: false,
873 hiddenName: 'translate',
874 displayField: 'label',
875 valueField: 'value',
876 store: new Ext.data.JsonStore({
877 fields: ['label', 'value'],
878 data: [
879 {label: TYPO3.l10n.localize('attributes_translate_none'), value: ''},
880 {label: TYPO3.l10n.localize('attributes_translate_no'), value: 'no'},
881 {label: TYPO3.l10n.localize('attributes_translate_yes'), value: 'yes'}
882 ]
883 }),
884 listeners: {
885 'select': {
886 scope: this,
887 fn: this.storeValue
888 }
889 }
890 });
891 break;
892 case 'type':
893 formItems.push({
894 fieldLabel: TYPO3.l10n.localize('attributes_type'),
895 name: 'type',
896 xtype: 'combo',
897 mode: 'local',
898 triggerAction: 'all',
899 forceSelection: true,
900 editable: false,
901 hiddenName: 'type',
902 displayField: 'label',
903 valueField: 'value',
904 store: new Ext.data.JsonStore({
905 fields: ['label', 'value'],
906 data: [
907 {label: TYPO3.l10n.localize('attributes_type_color'), value: 'color'},
908 {label: TYPO3.l10n.localize('attributes_type_date'), value: 'date'},
909 {label: TYPO3.l10n.localize('attributes_type_datetime'), value: 'datetime'},
910 {label: TYPO3.l10n.localize('attributes_type_datetime-local'), value: 'datetime-local'},
911 {label: TYPO3.l10n.localize('attributes_type_email'), value: 'email'},
912 {label: TYPO3.l10n.localize('attributes_type_month'), value: 'month'},
913 {label: TYPO3.l10n.localize('attributes_type_number'), value: 'number'},
914 {label: TYPO3.l10n.localize('attributes_type_search'), value: 'search'},
915 {label: TYPO3.l10n.localize('attributes_type_tel'), value: 'tel'},
916 {label: TYPO3.l10n.localize('attributes_type_text'), value: 'text'},
917 {label: TYPO3.l10n.localize('attributes_type_time'), value: 'time'},
918 {label: TYPO3.l10n.localize('attributes_type_url'), value: 'url'},
919 {label: TYPO3.l10n.localize('attributes_type_week'), value: 'week'}
920 ]
921 }),
922 listeners: {
923 'select': {
924 scope: this,
925 fn: this.storeValue
926 }
927 }
928 });
929 break;
930 case 'value':
931 formItems.push({
932 fieldLabel: TYPO3.l10n.localize('attributes_value'),
933 name: 'value',
934 listeners: {
935 'triggerclick': {
936 scope: this,
937 fn: this.storeValue
938 }
939 }
940 });
941 break;
942 case 'width':
943 formItems.push({
944 fieldLabel: TYPO3.l10n.localize('attributes_width'),
945 name: 'width',
946 xtype: 'spinnerfield',
947 listeners: {
948 'spin': {
949 scope: this,
950 fn: this.storeValue
951 },
952 'blur': {
953 scope: this,
954 fn: this.storeValue
955 }
956 }
957 });
958 break;
959 case 'wrap':
960 formItems.push({
961 fieldLabel: TYPO3.l10n.localize('attributes_wrap'),
962 name: 'wrap',
963 xtype: 'combo',
964 mode: 'local',
965 triggerAction: 'all',
966 forceSelection: true,
967 editable: false,
968 hiddenName: 'wrap',
969 displayField: 'label',
970 valueField: 'value',
971 store: new Ext.data.JsonStore({
972 fields: ['label', 'value'],
973 data: [
974 {label: TYPO3.l10n.localize('attributes_wrap_none'), value: ''},
975 {label: TYPO3.l10n.localize('attributes_wrap_soft'), value: 'soft'},
976 {label: TYPO3.l10n.localize('attributes_wrap_hard'), value: 'hard'}
977 ]
978 }),
979 listeners: {
980 'select': {
981 scope: this,
982 fn: this.storeValue
983 }
984 }
985 });
986 break;
987 }
988 }, this);
989
990 var config = {
991 items: [{
992 xtype: 'fieldset',
993 title: '',
994 autoHeight: true,
995 border: false,
996 defaults: {
997 width: 150,
998 msgTarget: 'side'
999 },
1000 defaultType: 'textfieldsubmit',
1001 items: formItems
1002 }]
1003 };
1004
1005 // apply config
1006 Ext.apply(this, Ext.apply(this.initialConfig, config));
1007
1008 // call parent
1009 TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes.superclass.initComponent.apply(this, arguments);
1010
1011 // Initialize clientvalidation event
1012 this.on('clientvalidation', this.validation, this);
1013
1014 // Fill the form with the configuration values
1015 this.fillForm();
1016 },
1017
1018 /**
1019 * Store a changed value from the form in the element
1020 *
1021 * @param {Object} field The field which has changed
1022 */
1023 storeValue: function(field) {
1024 if (field.isValid()) {
1025 var fieldName = field.getName();
1026
1027 var formConfiguration = {attributes: {}};
1028 formConfiguration.attributes[fieldName] = field.getValue();
1029
1030 this.element.setConfigurationValue(formConfiguration);
1031 }
1032 },
1033
1034 /**
1035 * Fill the form with the configuration of the element
1036 *
1037 * @return void
1038 */
1039 fillForm: function() {
1040 this.getForm().setValues(this.element.configuration.attributes);
1041 },
1042
1043 /**
1044 * Get the attributes for the element
1045 *
1046 * Based on the elements attributes, the TSconfig general allowed attributes
1047 * and the TSconfig allowed attributes for this type of element
1048 *
1049 * @returns object
1050 */
1051 getAttributesBySettings: function() {
1052 var attributes = [];
1053 var elementAttributes = this.element.configuration.attributes;
1054 var elementType = this.element.xtype.split('-').pop();
1055
1056 var allowedGeneralAttributes = [];
1057 try {
1058 allowedGeneralAttributes = TYPO3.Form.Wizard.Settings.defaults.tabs.options.accordions.attributes.showProperties.split(/[, ]+/);
1059 } catch (error) {
1060 // The object has not been found or constructed wrong
1061 allowedGeneralAttributes = [
1062 'accept',
1063 'acceptcharset',
1064 'accesskey',
1065 'action',
1066 'alt',
1067 'checked',
1068 'class',
1069 'cols',
1070 'dir',
1071 'disabled',
1072 'enctype',
1073 'id',
1074 'label',
1075 'lang',
1076 'maxlength',
1077 'method',
1078 'multiple',
1079 'name',
1080 'readonly',
1081 'rows',
1082 'selected',
1083 'size',
1084 'src',
1085 'style',
1086 'tabindex',
1087 'title',
1088 'type',
1089 'value'
1090 ];
1091 }
1092
1093 var allowedElementAttributes = [];
1094 try {
1095 allowedElementAttributes = TYPO3.Form.Wizard.Settings.elements[elementType].accordions.attributes.showProperties.split(/[, ]+/);
1096 } catch (error) {
1097 // The object has not been found
1098 allowedElementAttributes = allowedGeneralAttributes;
1099 }
1100
1101 Ext.iterate(allowedElementAttributes, function(item, index, allItems) {
1102 if (allowedGeneralAttributes.indexOf(item) > -1 && Ext.isDefined(elementAttributes[item])) {
1103 attributes.push(item);
1104 }
1105 }, this);
1106
1107 return attributes;
1108 },
1109
1110 /**
1111 * Called by the clientvalidation event
1112 *
1113 * Adds or removes the error class if the form is valid or not
1114 *
1115 * @param {Object} formPanel This formpanel
1116 * @param {Boolean} valid True if the client validation is true
1117 */
1118 validation: function(formPanel, valid) {
1119 if (this.el) {
1120 if (valid && this.el.hasClass('validation-error')) {
1121 this.removeClass('validation-error');
1122 this.fireEvent('validation', 'attributes', valid);
1123 } else if (!valid && !this.el.hasClass('validation-error')) {
1124 this.addClass('validation-error');
1125 this.fireEvent('validation', 'attributes', valid);
1126 }
1127 }
1128 }
1129 });
1130
1131 Ext.reg('typo3-form-wizard-viewport-left-options-forms-attributes', TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Attributes);