0b40d09c50f3fd032f0c6c517962f6aed01c8111
[Packages/TYPO3.CMS.git] / typo3 / sysext / workspaces / Resources / Public / JavaScript / preview.js
1 /***************************************************************
2 * Copyright notice
3 *
4 * (c) 2010 Workspaces Team (http://forge.typo3.org/projects/show/typo3v4-workspaces)
5 * All rights reserved
6 *
7 * This script is part of the TYPO3 project. The TYPO3 project is
8 * free software; you can redistribute it and/or modify
9 * it under the terms of the GNU General Public License as published by
10 * the Free Software Foundation; either version 2 of the License, or
11 * (at your option) any later version.
12 *
13 * The GNU General Public License can be found at
14 * http://www.gnu.org/copyleft/gpl.html.
15 * A copy is found in the textfile GPL.txt and important notices to the license
16 * from the author is found in LICENSE.txt distributed with these scripts.
17 *
18 *
19 * This script is distributed in the hope that it will be useful,
20 * but WITHOUT ANY WARRANTY; without even the implied warranty of
21 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
22 * GNU General Public License for more details.
23 *
24 * This copyright notice MUST APPEAR in all copies of the script!
25 ***************************************************************/
26
27 Ext.onReady(function() {
28
29 Ext.state.Manager.setProvider(new TYPO3.state.ExtDirectProvider({
30 key: 'moduleData.Workspaces.States',
31 autoRead: false
32 }));
33
34 if (Ext.isObject(TYPO3.settings.Workspaces.States)) {
35 Ext.state.Manager.getProvider().initState(TYPO3.settings.Workspaces.States);
36 }
37 // late binding of ExtDirect
38 TYPO3.Workspaces.MainStore.proxy = new Ext.data.DirectProxy({
39 directFn : TYPO3.Workspaces.ExtDirect.getWorkspaceInfos
40 });
41
42 var iconClsChecked = 't3-icon t3-icon-status t3-icon-status-status t3-icon-status-checked';
43 var iconClsEmpty = 't3-icon t3-icon-empty t3-icon-empty-empty t3-icon-empty';
44 var viewMode = 0;
45 var changePreviewMode = function(config, mode) {
46 var visual = Ext.getCmp('wsVisualWrap');
47 if ((typeof mode != 'undefined') && (mode != viewMode)) {
48 viewMode = mode;
49 visual.remove(0);
50 visual.add(Ext.apply(config, {}));
51 };
52 visual.doLayout();
53 }
54
55 var sliderSetup = {
56 layout: 'fit',
57 x: 0, y:0,
58 anchor: '100% 100%',
59 autoScroll: true,
60 items: [{
61 layout: 'absolute',
62 id: 'visualPanel',
63 items: [{
64 x: 0, y:0,
65 anchor: '100% 100%',
66 id: 'wsContainer',
67 layout: 'absolute',
68 autoScroll: false,
69 items:[{
70 xtype: 'iframePanel',
71 x: 0, y:0,
72 id: 'wsPanel',
73 doMask: false,
74 src: wsUrl,
75 autoScroll: false
76 }]
77 },{
78 x: 0, y:0,
79 anchor: '100% 0%',
80 id: 'liveContainer',
81 layout: 'absolute',
82 bodyStyle: 'height:0px;border-bottom: 2px solid red;',
83 autoScroll: false,
84 items:[{
85 xtype: 'iframePanel',
86 x: 0, y:0,
87 id: 'livePanel',
88 doMask: false,
89 src: liveUrl,
90 autoScroll: false
91 }]
92 }]
93 }]
94 };
95 var hboxSetup = {
96 layout: 'hbox',
97 x: 0, y:0,
98 anchor: '100% 100%',
99 layoutConfig: {
100 align : 'stretch',
101 pack : 'start'
102 },
103 id: 'visualPanel-hbox',
104 items: [{
105 xtype: 'iframePanel',
106 x: 0, y:0,
107 id: 'wsPanel-hbox',
108 doMask: false,
109 src: wsUrl,
110 autoScroll: false,
111 flex: 1
112 },{
113 xtype: 'iframePanel',
114 x: 0, y:0,
115 id: 'livePanel-hbox',
116 doMask: false,
117 src: liveUrl,
118 autoScroll: false,
119 flex: 1
120 }]
121 };
122 var vboxSetup = {
123 layout: 'vbox',
124 x: 0, y:0,
125 anchor: '100% 100%',
126 layoutConfig: {
127 align : 'stretch',
128 pack : 'start'
129 },
130 id: 'visualPanel-vbox',
131 items: [{
132 xtype: 'iframePanel',
133 x: 0, y:0,
134 id: 'wsPanel-vbox',
135 doMask: false,
136 src: wsUrl,
137 autoScroll: false,
138 flex: 1
139 },{
140 xtype: 'iframePanel',
141 x: 0, y:0,
142 id: 'livePanel-vbox',
143 doMask: false,
144 src: liveUrl,
145 autoScroll: false,
146 flex: 1
147 }]
148 };
149
150 var viewport = new Ext.Viewport({
151 layout: 'border',
152 items: [{
153 xtype: 'tabpanel',
154 region: 'center', // a center region is ALWAYS required for border layout
155 id: 'preview',
156 activeTab: 0,
157 plugins : [{
158 ptype : 'Ext.ux.plugins.TabStripContainer',
159 id: 'controls',
160 width: 1000,
161 items: [
162 {
163 xtype: 'panel',
164 width: 460,
165 items: [{
166 xtype: 'panel',
167 id: 'slider',
168 layout: 'hbox',
169 items: [
170 {
171 xtype: 'button',
172 id: 'sizeSliderButtonLive',
173 cls: 'sliderButton',
174 text: TYPO3.l10n.localize('livePreview'),
175 tooltip: TYPO3.l10n.localize('livePreviewDetail'),
176 width: 100,
177 listeners: {
178 click: {
179 fn: function () {
180 Ext.getCmp('sizeSlider').setValue(0);
181 }
182 }
183 }
184 },
185 {
186 xtype: 'slider',
187 id: 'sizeSlider',
188 margins: '0 10 0 10',
189 maxValue: 100,
190 minValue: 0,
191 value: 100,
192 width: 200,
193 flex: 1,
194 listeners: {
195 change: {
196 fn: function resizeFromValue(slider, newValue, thumb) {
197 var height = Ext.getCmp('wsPanel').getHeight();
198 Ext.getCmp('liveContainer').setHeight(height * (100 - newValue) / 100);
199 }
200 }
201 }
202 },
203 {
204 xtype: 'button',
205 id: 'sizeSliderButtonWorkspace',
206 cls: 'sliderButton',
207 text: TYPO3.l10n.localize('workspacePreview'),
208 tooltip: TYPO3.l10n.localize('workspacePreviewDetail'),
209 width: 100,
210 listeners: {
211 click: {
212 fn: function () {
213 Ext.getCmp('sizeSlider').setValue(100);
214 }
215 }
216 }
217 }
218 ]
219 }]
220 }, {
221 xtype: 'buttongroup',
222 id: 'stageButtonGroup',
223 columns: 4,
224 width: 400,
225 items: [{
226 text: TYPO3.l10n.localize('nextStage'),
227 xtype: 'button',
228 iconCls: 'x-btn-text',
229 id: 'feToolbarButtonNextStage',
230 hidden: TYPO3.settings.Workspaces.disableNextStageButton,
231 listeners: {
232 click: {
233 fn: function () {
234 TYPO3.Workspaces.Actions.sendPageToNextStage();
235 }
236 }
237 }
238 }, {
239 text: TYPO3.l10n.localize('previousStage'),
240 xtype: 'button',
241 iconCls: 'x-btn-text',
242 id: 'feToolbarButtonPreviousStage',
243 hidden: TYPO3.settings.Workspaces.disablePreviousStageButton,
244 listeners: {
245 click: {
246 fn: function () {
247 TYPO3.Workspaces.Actions.sendPageToPrevStage();
248 }
249 }
250 }
251 }, {
252 text: TYPO3.l10n.localize('discard'),
253 iconCls: 'x-btn-text',
254 xtype: 'button',
255 id: 'feToolbarButtonDiscardStage',
256 hidden: TYPO3.settings.Workspaces.disableDiscardStageButton,
257 listeners: {
258 click: {
259 fn: function () {
260 TYPO3.Workspaces.Actions.discardPage();
261 }
262 }
263 }
264 }, {
265 xtype: 'button',
266 iconCls: 'x-btn-icon t3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-options-view',
267 id: 'visual-mode-options',
268 menu: {
269 id: 'visual-mode-selector',
270 stateful: true,
271 stateId: 'WorkspacePreviewModeSelect',
272 stateEvents: ['itemclick'],
273 items: [{
274 text: TYPO3.l10n.localize('modeSlider'),
275 id: 'visual-mode-selector-slider',
276 checked: false,
277 group: 'mode',
278 hidden: TYPO3.settings.Workspaces.SplitPreviewModes.indexOf('slider') == -1,
279 checkHandler: modeChange
280 },{
281 text: TYPO3.l10n.localize('modeVbox'),
282 id: 'visual-mode-selector-vbox',
283 checked: false,
284 group: 'mode',
285 hidden: TYPO3.settings.Workspaces.SplitPreviewModes.indexOf('vbox') == -1,
286 checkHandler: modeChange
287
288 },{
289 text: TYPO3.l10n.localize('modeHbox'),
290 id: 'visual-mode-selector-hbox',
291 checked: false,
292 group: 'mode',
293 hidden: TYPO3.settings.Workspaces.SplitPreviewModes.indexOf('hbox') == -1,
294 checkHandler: modeChange
295 }],
296 getState:function() {
297 return {viewMode: viewMode};
298 },
299 applyState: function(state) {
300 modeChange(null, true, viewMode);
301 }
302 }
303 }]
304 }
305 ]
306 }],
307 items: [{
308 title: TYPO3.l10n.localize('visualPreview'),
309 id: 'wsVisual',
310 layout: 'fit',
311 anchor: '100% 100%',
312 listeners: {
313 activate: function () {
314 if (Ext.isObject(top.Ext.getCmp('slider'))) {
315 top.Ext.getCmp('slider').show();
316 top.Ext.getCmp('visual-mode-options').show();
317 TYPO3.Workspaces.ExtDirectActions.updateStageChangeButtons(TYPO3.settings.Workspaces.id, TYPO3.Workspaces.Actions.updateStageChangeButtons);
318 }
319 }
320 },
321 items: [{
322 id: 'wsVisualWrap',
323 layout: 'absolute',
324 anchor: '100% 100%',
325 x: 0, y:0,
326 items: [sliderSetup]
327 }]
328 },{
329 title: TYPO3.l10n.localize('listView'),
330 id: 'wsSettings',
331 layout: 'fit',
332 listeners: {
333 activate: function () {
334 top.Ext.getCmp('slider').hide();
335 top.Ext.getCmp('visual-mode-options').hide();
336 top.Ext.getCmp('feToolbarButtonNextStage').hide();
337 top.Ext.getCmp('feToolbarButtonPreviousStage').hide();
338 top.Ext.getCmp('feToolbarButtonDiscardStage').hide();
339 }
340 },
341 items: [{
342 xtype: 'iframePanel',
343 id: 'settingsPanel',
344 doMask: false,
345 src: wsSettingsUrl
346 }]
347 }]
348 }]
349 });
350
351 function modeChange(item, checked, mode) {
352 if (checked) {
353 var id ,
354 ids = ['visual-mode-selector-slider', 'visual-mode-selector-hbox', 'visual-mode-selector-vbox'],
355 slider = Ext.getCmp('slider'),
356 itemSlider = Ext.getCmp('visual-mode-selector-slider'),
357 itemHbox = Ext.getCmp('visual-mode-selector-hbox'),
358 itemVbox = Ext.getCmp('visual-mode-selector-vbox');
359
360 if (item) {
361 mode = ids.indexOf(item.id);
362 }
363
364 Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" "));
365
366 var splitPreviewModes = TYPO3.settings.Workspaces.SplitPreviewModes;
367 if (splitPreviewModes.length == 1) {
368 Ext.getCmp('visual-mode-options').hide();
369 }
370
371 if (splitPreviewModes.indexOf('vbox') == -1 && mode === 2) {
372 mode = 0
373 }
374 if (splitPreviewModes.indexOf('slider') == -1 && mode === 0) {
375 mode = 1
376 }
377 if (splitPreviewModes.indexOf('hbox') == -1 && mode === 1) {
378 mode = 2
379 }
380
381 if (mode === 0) {
382 changePreviewMode(sliderSetup, mode);
383 slider.show();
384 itemSlider.setIconClass(iconClsChecked);
385 itemHbox.setIconClass(iconClsEmpty);
386 itemVbox.setIconClass(iconClsEmpty);
387 } else if (mode === 1) {
388 changePreviewMode(vboxSetup, mode);
389 slider.hide();
390 itemSlider.setIconClass(iconClsEmpty);
391 itemHbox.setIconClass(iconClsChecked);
392 itemVbox.setIconClass(iconClsEmpty);
393 } else if (mode === 2) {
394 changePreviewMode(hboxSetup, mode);
395 slider.hide();
396 itemSlider.setIconClass(iconClsEmpty);
397 itemHbox.setIconClass(iconClsEmpty);
398 itemVbox.setIconClass(iconClsChecked);
399 }
400 }
401 }
402 });