13a88886b29b22a3ae8dda27c2ceb147cdb483ec
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Resources / Public / JavaScript / Wizard / Viewport / Left / Form.js
1 Ext.namespace('TYPO3.Form.Wizard.Viewport.LeftTYPO3.Form.Wizard.Elements');
2
3 /**
4 * The form tab on the left side
5 *
6 * @class TYPO3.Form.Wizard.Viewport.Left.Form
7 * @extends Ext.Panel
8 */
9 TYPO3.Form.Wizard.Viewport.Left.Form = Ext.extend(Ext.Panel, {
10 /**
11 * @cfg {String} id
12 * The unique id of this component (defaults to an auto-assigned id).
13 * You should assign an id if you need to be able to access the component
14 * later and you do not have an object reference available
15 * (e.g., using Ext.getCmp).
16 *
17 * Note that this id will also be used as the element id for the containing
18 * HTML element that is rendered to the page for this component.
19 * This allows you to write id-based CSS rules to style the specific
20 * instance of this component uniquely, and also to select sub-elements
21 * using this component's id as the parent.
22 */
23 id: 'formwizard-left-form',
24
25 /**
26 * @cfg {String} cls
27 * An optional extra CSS class that will be added to this component's
28 * Element (defaults to ''). This can be useful for adding customized styles
29 * to the component or any of its children using standard CSS rules.
30 */
31 cls: 'x-tab-panel-body-content',
32
33 /**
34 * @cfg {String} title
35 * The title text to be used as innerHTML (html tags are accepted) to
36 * display in the panel header (defaults to '').
37 */
38 title: TYPO3.l10n.localize('left_form'),
39
40 /**
41 * @cfg {Boolean} border
42 * True to display the borders of the panel's body element, false to hide
43 * them (defaults to true). By default, the border is a 2px wide inset
44 * border, but this can be further altered by setting bodyBorder to false.
45 */
46 border: false,
47
48 /**
49 * @cfg {Object|Function} defaults
50 * This option is a means of applying default settings to all added items
51 * whether added through the items config or via the add or insert methods.
52 */
53 defaults: {
54 //autoHeight: true,
55 border: false,
56 padding: 0
57 },
58
59 /**
60 * @cfg {Object} validAccordions
61 * Keeps track which accordions are valid. Accordions contain forms which
62 * do client validation. If there is a validation change in a form in the
63 * accordion, a validation event will be fired, which changes one of these
64 * values
65 */
66 validAccordions: {
67 prefix: true,
68 attributes: true,
69 postProcessor: true
70 },
71
72 /**
73 * Constructor
74 *
75 * Add the form elements to the tab
76 */
77 initComponent: function() {
78 var config = {
79 items: [{
80 xtype: 'panel',
81 layout: 'accordion',
82 ref: 'accordion',
83 defaults: {
84 autoHeight: true,
85 cls: 'x-panel-accordion'
86 }
87 }]
88 };
89
90 // apply config
91 Ext.apply(this, Ext.apply(this.initialConfig, config));
92
93 // call parent
94 TYPO3.Form.Wizard.Viewport.Left.Form.superclass.initComponent.apply(this, arguments);
95 },
96
97 /**
98 * Called whenever a form has been added to the right container
99 *
100 * Sets element to the form component and calls the function to add the
101 * attribute fields
102 *
103 * @param form
104 */
105 setForm: function(form) {
106 var allowedAccordions = TYPO3.Form.Wizard.Settings.defaults.tabs.form.showAccordions.split(/[, ]+/);
107
108 this.accordion.removeAll();
109 if (form) {
110 allowedAccordions.each(function(option, index, length) {
111 switch (option) {
112 case 'prefix':
113 this.accordion.add({
114 xtype: 'typo3-form-wizard-viewport-left-form-prefix',
115 element: form,
116 listeners: {
117 'validation': {
118 fn: this.validation,
119 scope: this
120 }
121 }
122 });
123 break;
124 case 'attributes':
125 this.accordion.add({
126 xtype: 'typo3-form-wizard-viewport-left-form-attributes',
127 element: form,
128 listeners: {
129 'validation': {
130 fn: this.validation,
131 scope: this
132 }
133 }
134 });
135 break;
136 case 'postProcessor':
137 this.accordion.add({
138 xtype: 'typo3-form-wizard-viewport-left-form-postprocessor',
139 element: form,
140 listeners: {
141 'validation': {
142 fn: this.validation,
143 scope: this
144 }
145 }
146 });
147 break;
148 }
149 }, this);
150 }
151 this.doLayout();
152 },
153
154 /**
155 * Called by the validation listeners of the accordions
156 *
157 * Checks if all accordions are valid. If not, adds a class to the tab
158 *
159 * @param {String} accordion The accordion which fires the event
160 * @param {Boolean} isValid Accordion is valid or not
161 */
162 validation: function(accordion, isValid) {
163 this.validAccordions[accordion] = isValid;
164 var tabIsValid = true;
165 Ext.iterate(this.validAccordions, function(key, value) {
166 if (!value) {
167 tabIsValid = false;
168 }
169 }, this);
170 if (this.tabEl) {
171 if (tabIsValid && Ext.get(this.tabEl).hasClass('validation-error')) {
172 this.tabEl.removeClassName('validation-error');
173 } else if (!tabIsValid && !Ext.get(this.tabEl).hasClass('validation-error')) {
174 this.tabEl.addClassName('validation-error');
175 }
176 }
177 }
178 });
179
180 Ext.reg('typo3-form-wizard-viewport-left-form', TYPO3.Form.Wizard.Viewport.Left.Form);