[BUGFIX] Cleanup splitview JavaScript
authorTolleiv Nietsch <info@tolleiv.de>
Sat, 20 Aug 2011 13:11:21 +0000 (15:11 +0200)
committerTolleiv Nietsch <info@tolleiv.de>
Tue, 13 Sep 2011 06:16:04 +0000 (08:16 +0200)
Due to bad ExtJS layout the preview doesn't just load
the live and workspace preview once within a iframe,
it actually loads 3 iframes for both. The change avoids it.

Change-Id: Ifa100ce37d6d020d384969ca804b00c9af6eb815
Resolves: #29174
Branches: 4.5, 4.6

typo3/sysext/workspaces/Resources/Private/Layouts/popup.html
typo3/sysext/workspaces/Resources/Private/Templates/Preview/Preview.html
typo3/sysext/workspaces/Resources/Public/JavaScript/preview.js

index 6c70211..f935b70 100644 (file)
@@ -8,12 +8,14 @@
 
        function resize(height) {
                        // poor way to avoid that we require any scrollbars within the frames
-               var currentHeight = isNaN(Ext.getCmp('wsContainer').getHeight()) ? 0 : Ext.getCmp('wsContainer').getHeight();
-               var finalHeight = Math.max(currentHeight, height * 1.1);
-               Ext.getCmp('visualPanel').setHeight(finalHeight);
-               Ext.getCmp('wsContainer').setHeight(finalHeight);
-               Ext.getCmp('wsPanel').setHeight(finalHeight);
-               Ext.getCmp('liveContainer').setHeight(finalHeight * (100 - Ext.getCmp('sizeSlider').getValue()) / 100);
-               Ext.getCmp('livePanel').setHeight(finalHeight);
+               if (Ext.getCmp('wsContainer')) {
+                       var currentHeight = isNaN(Ext.getCmp('wsContainer').getHeight()) ? 0 : Ext.getCmp('wsContainer').getHeight();
+                       var finalHeight = Math.max(currentHeight, height * 1.1);
+                       Ext.getCmp('visualPanel').setHeight(finalHeight);
+                       Ext.getCmp('wsContainer').setHeight(finalHeight);
+                       Ext.getCmp('wsPanel').setHeight(finalHeight);
+                       Ext.getCmp('liveContainer').setHeight(finalHeight * (100 - Ext.getCmp('sizeSlider').getValue()) / 100);
+                       Ext.getCmp('livePanel').setHeight(finalHeight);
+               }
        }
 </script>
index 5bfeb22..eee6054 100644 (file)
@@ -26,7 +26,9 @@
                        parent.resize(docHeight);
                                // remove the ugly red box if we're in the ws-repview frames
                        var element = document.getElementById('typo3-previewInfo');
-                       element.parentNode.removeChild(element);
+                       if (element) {
+                               element.parentNode.removeChild(element);
+                       }
                }
        };
                // trigger this after content is loaded, inspired by jQuery
index 0b1a66a..0b40d09 100644 (file)
@@ -42,7 +42,110 @@ Ext.onReady(function() {
        var iconClsChecked = 't3-icon t3-icon-status t3-icon-status-status t3-icon-status-checked';
        var iconClsEmpty = 't3-icon t3-icon-empty t3-icon-empty-empty t3-icon-empty';
        var viewMode = 0;
+       var changePreviewMode = function(config, mode) {
+               var visual = Ext.getCmp('wsVisualWrap');
+               if ((typeof mode != 'undefined') && (mode != viewMode)) {
+                       viewMode = mode;
+                       visual.remove(0);
+                       visual.add(Ext.apply(config, {}));
+               };
+               visual.doLayout();
+       }
 
+       var sliderSetup = {
+               layout: 'fit',
+               x: 0, y:0,
+               anchor: '100% 100%',
+               autoScroll: true,
+               items: [{
+                       layout: 'absolute',
+                       id: 'visualPanel',
+                       items: [{
+                               x: 0, y:0,
+                               anchor: '100% 100%',
+                               id: 'wsContainer',
+                               layout: 'absolute',
+                               autoScroll: false,
+                               items:[{
+                                       xtype: 'iframePanel',
+                                       x: 0, y:0,
+                                       id: 'wsPanel',
+                                       doMask: false,
+                                       src: wsUrl,
+                                       autoScroll: false
+                               }]
+                       },{
+                               x: 0, y:0,
+                               anchor: '100% 0%',
+                               id: 'liveContainer',
+                               layout: 'absolute',
+                               bodyStyle: 'height:0px;border-bottom: 2px solid red;',
+                               autoScroll: false,
+                               items:[{
+                                       xtype: 'iframePanel',
+                                       x: 0, y:0,
+                                       id: 'livePanel',
+                                       doMask: false,
+                                       src: liveUrl,
+                                       autoScroll: false
+                               }]
+                       }]
+               }]
+       };
+       var hboxSetup = {
+               layout: 'hbox',
+               x: 0, y:0,
+               anchor: '100% 100%',
+               layoutConfig: {
+                       align : 'stretch',
+                       pack  : 'start'
+               },
+               id: 'visualPanel-hbox',
+               items: [{
+                       xtype: 'iframePanel',
+                       x: 0, y:0,
+                       id: 'wsPanel-hbox',
+                       doMask: false,
+                       src: wsUrl,
+                       autoScroll: false,
+                       flex: 1
+               },{
+                       xtype: 'iframePanel',
+                       x: 0, y:0,
+                       id: 'livePanel-hbox',
+                       doMask: false,
+                       src: liveUrl,
+                       autoScroll: false,
+                       flex: 1
+               }]
+       };
+       var vboxSetup = {
+               layout: 'vbox',
+               x: 0, y:0,
+               anchor: '100% 100%',
+               layoutConfig: {
+                       align : 'stretch',
+                       pack  : 'start'
+               },
+               id: 'visualPanel-vbox',
+               items: [{
+                       xtype: 'iframePanel',
+                       x: 0, y:0,
+                       id: 'wsPanel-vbox',
+                       doMask: false,
+                       src: wsUrl,
+                       autoScroll: false,
+                       flex: 1
+               },{
+                       xtype: 'iframePanel',
+                       x: 0, y:0,
+                       id: 'livePanel-vbox',
+                       doMask: false,
+                       src: liveUrl,
+                       autoScroll: false,
+                       flex: 1
+               }]
+       };
 
        var viewport = new Ext.Viewport({
                layout: 'border',
@@ -93,7 +196,6 @@ Ext.onReady(function() {
                                                                                        fn: function resizeFromValue(slider, newValue, thumb) {
                                                                                                var height = Ext.getCmp('wsPanel').getHeight();
                                                                                                Ext.getCmp('liveContainer').setHeight(height * (100 - newValue) / 100);
-                                                                                               //Ext.getCmp('visualPanel').setHeight(height);
                                                                                        }
                                                                                }
                                                                        }
@@ -195,7 +297,6 @@ Ext.onReady(function() {
                                                                        return {viewMode: viewMode};
                                                                },
                                                                applyState: function(state) {
-                                                                       viewMode = state.viewMode;
                                                                        modeChange(null, true, viewMode);
                                                                }
                                                        }
@@ -218,103 +319,11 @@ Ext.onReady(function() {
                                        }
                                },
                                items: [{
+                                       id: 'wsVisualWrap',
                                        layout: 'absolute',
                                        anchor: '100% 100%',
                                        x: 0, y:0,
-                                       items: [{
-                                                       layout: 'fit',
-                                                       x: 0, y:0,
-                                                       anchor: '100% 100%',
-                                                       autoScroll: true,
-                                                       items: [{
-                                                               layout: 'absolute',
-                                                               id: 'visualPanel',
-                                                               items: [{
-                                                                       x: 0, y:0,
-                                                                       anchor: '100% 100%',
-                                                                       id: 'wsContainer',
-                                                                       layout: 'absolute',
-                                                                       autoScroll: false,
-                                                                       items:[{
-                                                                               xtype: 'iframePanel',
-                                                                               x: 0, y:0,
-                                                                               id: 'wsPanel',
-                                                                               doMask: false,
-                                                                               src: wsUrl,
-                                                                               autoScroll: false
-                                                                       }]
-                                                               },{
-                                                                       x: 0, y:0,
-                                                                       anchor: '100% 0%',
-                                                                       id: 'liveContainer',
-                                                                       layout: 'absolute',
-                                                                       bodyStyle: 'height:0px;border-bottom: 2px solid red;',
-                                                                       autoScroll: false,
-                                                                       items:[{
-                                                                               xtype: 'iframePanel',
-                                                                               x: 0, y:0,
-                                                                               id: 'livePanel',
-                                                                               doMask: false,
-                                                                               src: liveUrl,
-                                                                               autoScroll: false
-                                                                       }]
-                                                               }]
-                                                       }]
-                                               },{
-                                                       layout: 'hbox',
-                                                       hidden: true,
-                                                       x: 0, y:0,
-                                                       anchor: '100% 100%',
-                                                       layoutConfig: {
-                                                               align : 'stretch',
-                                                               pack  : 'start'
-                                                       },
-                                                       id: 'visualPanel-hbox',
-                                                       items: [{
-                                                               xtype: 'iframePanel',
-                                                               x: 0, y:0,
-                                                               id: 'wsPanel-hbox',
-                                                               doMask: false,
-                                                               src: wsUrl,
-                                                               autoScroll: false,
-                                                               flex: 1
-                                                       },{
-                                                               xtype: 'iframePanel',
-                                                               x: 0, y:0,
-                                                               id: 'livePanel-hbox',
-                                                               doMask: false,
-                                                               src: liveUrl,
-                                                               autoScroll: false,
-                                                               flex: 1
-                                                       }]
-                                       },{
-                                                       layout: 'vbox',
-                                                       hidden: true,
-                                                       x: 0, y:0,
-                                                       anchor: '100% 100%',
-                                                       layoutConfig: {
-                                                               align : 'stretch',
-                                                               pack  : 'start'
-                                                       },
-                                                       id: 'visualPanel-vbox',
-                                                       items: [{
-                                                               xtype: 'iframePanel',
-                                                               x: 0, y:0,
-                                                               id: 'wsPanel-vbox',
-                                                               doMask: false,
-                                                               src: wsUrl,
-                                                               autoScroll: false,
-                                                               flex: 1
-                                                       },{
-                                                               xtype: 'iframePanel',
-                                                               x: 0, y:0,
-                                                               id: 'livePanel-vbox',
-                                                               doMask: false,
-                                                               src: liveUrl,
-                                                               autoScroll: false,
-                                                               flex: 1
-                                                       }]
-                                       }]
+                                       items: [sliderSetup]
                                }]
                        },{
                                title: TYPO3.l10n.localize('listView'),
@@ -337,17 +346,12 @@ Ext.onReady(function() {
                                }]
                        }]
                }]
-
-
        });
 
        function modeChange(item, checked, mode) {
                if (checked) {
                        var id ,
                                ids = ['visual-mode-selector-slider', 'visual-mode-selector-hbox', 'visual-mode-selector-vbox'],
-                               panelHbox = Ext.getCmp('visualPanel-hbox'),
-                               panelVbox = Ext.getCmp('visualPanel-vbox'),
-                               panelSlider = Ext.getCmp('visualPanel'),
                                slider = Ext.getCmp('slider'),
                                itemSlider = Ext.getCmp('visual-mode-selector-slider'),
                                itemHbox = Ext.getCmp('visual-mode-selector-hbox'),
@@ -375,34 +379,24 @@ Ext.onReady(function() {
                        }
 
                        if (mode === 0) {
-                               panelHbox.hide();
-                               panelVbox.hide();
-                               panelSlider.show();
+                               changePreviewMode(sliderSetup, mode);
                                slider.show();
-                               viewMode = 0;
                                itemSlider.setIconClass(iconClsChecked);
                                itemHbox.setIconClass(iconClsEmpty);
                                itemVbox.setIconClass(iconClsEmpty);
                        } else if (mode === 1) {
-                               panelHbox.show();
-                               panelVbox.hide();
-                               panelSlider.hide();
+                               changePreviewMode(vboxSetup, mode);
                                slider.hide();
-                               viewMode = 1;
                                itemSlider.setIconClass(iconClsEmpty);
                                itemHbox.setIconClass(iconClsChecked);
                                itemVbox.setIconClass(iconClsEmpty);
                        } else if (mode === 2) {
-                               panelHbox.hide();
-                               panelVbox.show();
-                               panelSlider.hide();
+                               changePreviewMode(hboxSetup, mode);
                                slider.hide();
-                               viewMode = 2;
                                itemSlider.setIconClass(iconClsEmpty);
                                itemHbox.setIconClass(iconClsEmpty);
                                itemVbox.setIconClass(iconClsChecked);
                        }
-
                }
        }
 });
\ No newline at end of file