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