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 });