8c84457024b64da4a7b75c7f16929e57be50bc1e
[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
38
39 var iconClsChecked = 't3-icon t3-icon-status t3-icon-status-status t3-icon-status-checked';
40 var iconClsEmpty = 't3-icon t3-icon-empty t3-icon-empty-empty t3-icon-empty';
41 var viewMode = 0;
42
43
44 var viewport = new Ext.Viewport({
45 layout: 'border',
46 items: [{
47 xtype: 'tabpanel',
48 region: 'center', // a center region is ALWAYS required for border layout
49 id: 'preview',
50 activeTab: 0,
51 plugins : [{
52 ptype : 'Ext.ux.plugins.TabStripContainer',
53 id: 'controls',
54 width: 600,
55 items: [
56 {
57 xtype: 'panel',
58 width: 460,
59 items: [{
60 xtype: 'panel',
61 id: 'slider',
62 layout: 'hbox',
63 items: [
64 {
65 xtype: 'button',
66 id: 'sizeSliderButtonLive',
67 cls: 'sliderButton',
68 text: TYPO3.LLL.Workspaces.livePreview,
69 tooltip: TYPO3.LLL.Workspaces.livePreviewDetail,
70 width: 100,
71 listeners: {
72 click: {
73 fn: function () {
74 Ext.getCmp('sizeSlider').setValue(0);
75 }
76 }
77 }
78 },
79 {
80 xtype: 'slider',
81 id: 'sizeSlider',
82 margins: '0 10 0 10',
83 maxValue: 100,
84 minValue: 0,
85 value: 100,
86 width: 200,
87 flex: 1,
88 listeners: {
89 change: {
90 fn: function resizeFromValue(slider, newValue, thumb) {
91 var height = Ext.getCmp('wsPanel').getHeight();
92 Ext.getCmp('liveContainer').setHeight(height * (100 - newValue) / 100);
93 //Ext.getCmp('visualPanel').setHeight(height);
94 }
95 }
96 }
97 },
98 {
99 xtype: 'button',
100 id: 'sizeSliderButtonWorkspace',
101 cls: 'sliderButton',
102 text: TYPO3.LLL.Workspaces.workspacePreview,
103 tooltip: TYPO3.LLL.Workspaces.workspacePreviewDetail,
104 width: 100,
105 listeners: {
106 click: {
107 fn: function () {
108 Ext.getCmp('sizeSlider').setValue(100);
109 }
110 }
111 }
112 }
113 ]
114 }]
115 },
116 {
117 id: 'visual-mode-toolbar',
118 items: [{
119 xtype: 'button',
120 iconCls: 'x-btn-icon t3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-options-view',
121 id: 'visual-mode-options',
122 menu: {
123 id: 'visual-mode-selector',
124 stateful: true,
125 stateId: 'WorkspacePreviewModeSelect',
126 stateEvents: ['itemclick'],
127 items: [{
128 text: TYPO3.LLL.Workspaces.modeSlider,
129 id: 'visual-mode-selector-slider',
130 checked: false,
131 group: 'mode',
132 checkHandler: modeChange
133 },{
134 text: TYPO3.LLL.Workspaces.modeVbox,
135 id: 'visual-mode-selector-vbox',
136 checked: false,
137 group: 'mode',
138 checkHandler: modeChange
139
140 },{
141 text: TYPO3.LLL.Workspaces.modeHbox,
142 id: 'visual-mode-selector-hbox',
143 checked: false,
144 group: 'mode',
145 checkHandler: modeChange
146 }],
147 getState:function() {
148 return {viewMode: viewMode};
149 },
150 applyState: function(state) {
151 viewMode = state.viewMode;
152 modeChange(null, true, viewMode);
153 }
154 }
155 }]
156 }
157 ]
158 }],
159 items: [{
160 title: TYPO3.LLL.Workspaces.visualPreview,
161 id: 'wsVisual',
162 layout: 'fit',
163 anchor: '100% 100%',
164 items: [{
165 layout: 'absolute',
166 anchor: '100% 100%',
167 x: 0, y:0,
168 items: [{
169 layout: 'fit',
170 x: 0, y:0,
171 anchor: '100% 100%',
172 autoScroll: true,
173 items: [{
174 layout: 'absolute',
175 id: 'visualPanel',
176 items: [{
177 x: 0, y:0,
178 anchor: '100% 100%',
179 id: 'wsContainer',
180 layout: 'absolute',
181 autoScroll: false,
182 items:[{
183 xtype: 'iframePanel',
184 x: 0, y:0,
185 id: 'wsPanel',
186 doMask: false,
187 src: wsUrl,
188 autoScroll: false
189 }]
190 },{
191 x: 0, y:0,
192 anchor: '100% 0%',
193 id: 'liveContainer',
194 layout: 'absolute',
195 bodyStyle: 'height:0px;border-bottom: 2px solid red;',
196 autoScroll: false,
197 items:[{
198 xtype: 'iframePanel',
199 x: 0, y:0,
200 id: 'livePanel',
201 doMask: false,
202 src: liveUrl,
203 autoScroll: false
204 }]
205 }]
206 }]
207 },{
208 layout: 'hbox',
209 hidden: true,
210 x: 0, y:0,
211 anchor: '100% 100%',
212 layoutConfig: {
213 align : 'stretch',
214 pack : 'start'
215 },
216 id: 'visualPanel-hbox',
217 items: [{
218 xtype: 'iframePanel',
219 x: 0, y:0,
220 id: 'wsPanel-hbox',
221 doMask: false,
222 src: wsUrl,
223 autoScroll: false,
224 flex: 1
225 },{
226 xtype: 'iframePanel',
227 x: 0, y:0,
228 id: 'livePanel-hbox',
229 doMask: false,
230 src: liveUrl,
231 autoScroll: false,
232 flex: 1
233 }]
234 },{
235 layout: 'vbox',
236 hidden: true,
237 x: 0, y:0,
238 anchor: '100% 100%',
239 layoutConfig: {
240 align : 'stretch',
241 pack : 'start'
242 },
243 id: 'visualPanel-vbox',
244 items: [{
245 xtype: 'iframePanel',
246 x: 0, y:0,
247 id: 'wsPanel-vbox',
248 doMask: false,
249 src: wsUrl,
250 autoScroll: false,
251 flex: 1
252 },{
253 xtype: 'iframePanel',
254 x: 0, y:0,
255 id: 'livePanel-vbox',
256 doMask: false,
257 src: liveUrl,
258 autoScroll: false,
259 flex: 1
260 }]
261 }]
262 }]
263 },{
264 title: TYPO3.LLL.Workspaces.listView,
265 id: 'wsSettings',
266 layout: 'fit',
267 items: [{
268 xtype: 'iframePanel',
269 id: 'settingsPanel',
270 doMask: false,
271 src: wsSettingsUrl
272 }]
273 }]
274 }]
275
276
277 });
278
279 function modeChange(item, checked, mode) {
280 if (checked) {
281 var id ,
282 ids = ['visual-mode-selector-slider', 'visual-mode-selector-hbox', 'visual-mode-selector-vbox'],
283 panelHbox = Ext.getCmp('visualPanel-hbox'),
284 panelVbox = Ext.getCmp('visualPanel-vbox'),
285 panelSlider = Ext.getCmp('visualPanel'),
286 slider = Ext.getCmp('slider'),
287 itemSlider = Ext.getCmp('visual-mode-selector-slider'),
288 itemHbox = Ext.getCmp('visual-mode-selector-hbox'),
289 itemVbox = Ext.getCmp('visual-mode-selector-vbox');
290
291 if (item) {
292 mode = ids.indexOf(item.id);
293 }
294
295 Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" "));
296
297 if (mode === 0) {
298 panelHbox.hide();
299 panelVbox.hide();
300 panelSlider.show();
301 slider.show();
302 viewMode = 0;
303 itemSlider.setIconClass(iconClsChecked);
304 itemHbox.setIconClass(iconClsEmpty);
305 itemVbox.setIconClass(iconClsEmpty);
306 } else if (mode === 1) {
307 panelHbox.show();
308 panelVbox.hide();
309 panelSlider.hide();
310 slider.hide();
311 viewMode = 1;
312 itemSlider.setIconClass(iconClsEmpty);
313 itemHbox.setIconClass(iconClsChecked);
314 itemVbox.setIconClass(iconClsEmpty);
315 } else if (mode === 2) {
316 panelHbox.hide();
317 panelVbox.show();
318 panelSlider.hide();
319 slider.hide();
320 viewMode = 2;
321 itemSlider.setIconClass(iconClsEmpty);
322 itemHbox.setIconClass(iconClsEmpty);
323 itemVbox.setIconClass(iconClsChecked);
324 }
325
326 }
327 }
328 });