1f21c95e8446de8e4bc84e65abf7e7e5a96cc502
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Resources / Public / JavaScript / Wizard / Viewport.js
1 Ext.namespace('TYPO3.Form', 'TYPO3.Form.Wizard');
2
3 /**
4 * The viewport
5 *
6 * @class TYPO3.Form.Wizard.Viewport
7 * @extends Ext.Container
8 */
9 TYPO3.Form.Wizard.Viewport = Ext.extend(Ext.Container, {
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',
24
25 /**
26 * @cfg {Boolean} border
27 * True to display the borders of the panel's body element, false to hide
28 * them (defaults to true). By default, the border is a 2px wide inset
29 * border, but this can be further altered by setting bodyBorder to false.
30 */
31 border: false,
32
33 /**
34 * @cfg {Mixed} renderTo
35 * Specify the id of the element, a DOM element or an existing Element that
36 * this component will be rendered into.
37 */
38 renderTo: 'typo3-inner-docbody',
39
40 /**
41 * @cfg {String} layout
42 * In order for child items to be correctly sized and positioned, typically
43 * a layout manager must be specified through the layout configuration option.
44 *
45 * The sizing and positioning of child items is the responsibility of the
46 * Container's layout manager which creates and manages the type of layout
47 * you have in mind.
48 */
49 layout: 'border',
50
51 /**
52 * Constructor
53 *
54 * Add the left and right part to the viewport
55 * Add the history buttons
56 * TODO Move the buttons to the docheader
57 */
58 initComponent: function() {
59 var config = {
60 items: [
61 {
62 xtype: 'typo3-form-wizard-viewport-left'
63 },{
64 xtype: 'typo3-form-wizard-viewport-right'
65 }
66 ]
67 };
68
69 // Add the buttons to the docheader
70 this.addButtonsToDocHeader();
71
72 // apply config
73 Ext.apply(this, Ext.apply(this.initialConfig, config));
74
75 // call parent
76 TYPO3.Form.Wizard.Viewport.superclass.initComponent.apply(this, arguments);
77 },
78
79 /**
80 * Add the buttons to the docheader
81 *
82 * All buttons except close will be handled by the form wizard javascript
83 * The save and history buttons are put into separate buttongroups, click
84 * event listeners are added.
85 */
86 addButtonsToDocHeader: function() {
87 var docHeaderRow1 = Ext.get('typo3-docheader');
88 var docHeaderButtonsBar = docHeaderRow1.first('.typo3-docheader-buttons');
89 var docHeaderRow1ButtonsLeft = docHeaderButtonsBar.first('.left');
90
91 var saveButtonGroup = Ext.DomHelper.append(docHeaderRow1ButtonsLeft, {
92 tag: 'div',
93 cls: 'buttongroup'
94 });
95
96 var save = new Ext.Element(
97 Ext.DomHelper.append(saveButtonGroup, {
98 tag: 'span',
99 cls: 't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-save',
100 id: 'formwizard-save',
101 title: TYPO3.l10n.localize('save')
102 })
103 );
104
105 var saveAndClose = new Ext.Element(
106 Ext.DomHelper.append(saveButtonGroup, {
107 tag: 'span',
108 cls: 't3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-save-close',
109 id: 'formwizard-saveandclose',
110 title: TYPO3.l10n.localize('saveAndClose')
111 })
112 );
113
114 save.on('click', this.save, this);
115 saveAndClose.on('click', this.saveAndClose, this);
116
117 var historyButtonGroup = Ext.DomHelper.append(docHeaderRow1ButtonsLeft, {
118 tag: 'div',
119 cls: 'buttongroup'
120 });
121
122 var undo = new Ext.Element(
123 Ext.DomHelper.append(historyButtonGroup, {
124 tag: 'span',
125 cls: 't3-icon t3-icon-actions t3-icon-actions-document t3-icon-view-go-back',
126 id: 'formwizard-history-undo',
127 title: TYPO3.l10n.localize('history_undo')
128 })
129 );
130
131 var redo = new Ext.Element(
132 Ext.DomHelper.append(historyButtonGroup, {
133 tag: 'span',
134 cls: 't3-icon t3-icon-actions t3-icon-actions-document t3-icon-view-go-forward',
135 id: 'formwizard-history-redo',
136 title: TYPO3.l10n.localize('history_redo')
137 })
138 );
139
140 undo.hide();
141 undo.on('click', this.undo, this);
142
143 redo.hide();
144 redo.on('click', this.redo, this);
145 },
146
147 /**
148 * Save the form
149 *
150 * @param event
151 * @param element
152 * @param object
153 */
154 save: function(event, element, object) {
155 var configuration = Ext.getCmp('formwizard-right').getConfiguration();
156
157 Ext.Ajax.request({
158 url: document.location.href,
159 method: 'POST',
160 params: {
161 action: 'save',
162 configuration: Ext.encode(configuration)
163 },
164 success: function(response, opts) {
165 var responseObject = Ext.decode(response.responseText);
166 Ext.MessageBox.alert(
167 TYPO3.l10n.localize('action_save'),
168 responseObject.message
169 );
170 },
171 failure: function(response, opts) {
172 var responseObject = Ext.decode(response.responseText);
173 Ext.MessageBox.alert(
174 TYPO3.l10n.localize('action_save'),
175 TYPO3.l10n.localize('action_save_error') + ' ' + response.status
176 );
177 },
178 scope: this
179 });
180 },
181
182 /**
183 * Save the form and close the wizard
184 *
185 * @param event
186 * @param element
187 * @param object
188 */
189 saveAndClose: function(event, element, object) {
190 var configuration = Ext.getCmp('formwizard-right').getConfiguration();
191
192 Ext.Ajax.request({
193 url: document.location.href,
194 method: 'POST',
195 params: {
196 action: 'save',
197 configuration: Ext.encode(configuration)
198 },
199 success: function(response, opts) {
200 var urlParameters = Ext.urlDecode(document.location.search.substring(1));
201 document.location = urlParameters['P[returnUrl]'];
202 },
203 failure: function(response, opts) {
204 var responseObject = Ext.decode(response.responseText);
205 Ext.MessageBox.alert(
206 TYPO3.l10n.localize('action_save'),
207 TYPO3.l10n.localize('action_save_error') + ' ' + response.status
208 );
209 },
210 scope: this
211 });
212 },
213
214 /**
215 * Get the previous snapshot from the history if available
216 *
217 * @param event
218 * @param element
219 * @param object
220 */
221 undo: function(event, element, object) {
222 TYPO3.Form.Wizard.Helpers.History.undo();
223 },
224
225 /**
226 * Get the next snapshot from the history if available
227 *
228 * @param event
229 * @param element
230 * @param object
231 */
232 redo: function(event, element, object) {
233 TYPO3.Form.Wizard.Helpers.History.redo();
234 }
235 });