Bug #11539 » 11539v4.patch
| Resources/Private/Layouts/popup.html (revision 3898) | ||
|---|---|---|
|
// poor way to avoid that we require any scrollbars within the frames
|
||
|
var finalHeight = height * 1.1;
|
||
|
Ext.getCmp('visualPanel').setHeight(finalHeight);
|
||
|
Ext.getCmp('liveContainer').setHeight((100-Ext.getCmp('sizeSlider').getValue()/100) * finalHeight);
|
||
|
Ext.getCmp('wsContainer').setHeight(finalHeight);
|
||
|
Ext.getCmp('wsPanel').setHeight(finalHeight);
|
||
|
Ext.getCmp('livePanel').setHeight(finalHeight);
|
||
|
}
|
||
| Resources/Private/Templates/Preview/Preview.html (revision 3898) | ||
|---|---|---|
|
<script type="text/javascript">
|
||
|
document.domain = '{backendDomain}';
|
||
|
|
||
|
// @todo redirect to split module if this is opened standalone
|
||
|
|
||
|
// make sure we're in the workspace preview module
|
||
|
if (typeof parent.resize == 'function') {
|
||
|
parent.resize(
|
||
|
Math.max(
|
||
|
Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
|
||
|
Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
|
||
|
Math.max(document.body.clientHeight, document.documentElement.clientHeight)
|
||
|
)
|
||
|
);
|
||
|
// having this is very important, otherwise the parent.resize call will fail
|
||
|
document.domain = '{backendDomain}';
|
||
|
|
||
|
var element = document.getElementById('typo3-previewInfo');
|
||
|
element.parentNode.removeChild(element);
|
||
|
var asNumber = function(val) {
|
||
|
return isNaN(val) ? 0 : parseInt(val, 10);
|
||
|
};
|
||
|
var TYPO3 = {};
|
||
|
TYPO3.ready = function () {
|
||
|
// make sure we're in the workspace preview module
|
||
|
if (typeof parent.resize == 'function') {
|
||
|
// try to find the height of the document
|
||
|
var docHeight = Math.max(
|
||
|
asNumber(window.innerHeight),
|
||
|
asNumber(document.height),
|
||
|
asNumber(document.body.scrollHeight),
|
||
|
asNumber(document.body.offsetHeight),
|
||
|
asNumber(document.body.clientHeight),
|
||
|
asNumber(document.documentElement.scrollHeight),
|
||
|
asNumber(document.documentElement.offsetHeight),
|
||
|
asNumber(document.documentElement.clientHeight)
|
||
|
);
|
||
|
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);
|
||
|
}
|
||
|
};
|
||
|
// trigger this after content is loaded, inspired by jQuery
|
||
|
if (document.addEventListener && !/opera/.test(navigator.userAgent.toLowerCase())) {
|
||
|
document.addEventListener("DOMContentLoaded", TYPO3.ready, false);
|
||
|
} else {
|
||
|
(function() {
|
||
|
if (document.readyState != "loaded" && document.readyState != "complete") {
|
||
|
setTimeout(arguments.callee, 10);
|
||
|
} else {
|
||
|
TYPO3.ready();
|
||
|
}
|
||
|
})();
|
||
|
}
|
||
|
|
||
|
</script>
|
||
| Resources/Public/JavaScript/preview.js (revision 3898) | ||
|---|---|---|
|
***************************************************************/
|
||
|
|
||
|
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 viewport = new Ext.Viewport({
|
||
|
layout: 'border',
|
||
|
items: [{
|
||
| ... | ... | |
|
plugins : [{
|
||
|
ptype : 'Ext.ux.plugins.TabStripContainer',
|
||
|
id: 'controls',
|
||
|
width: 400,
|
||
|
items: [{
|
||
|
xtype: 'button',
|
||
|
id: 'sizeSliderButtonLive',
|
||
|
cls: 'sliderButton',
|
||
|
text: TYPO3.LLL.Workspaces.livePreview,
|
||
|
width: 100,
|
||
|
listeners: {
|
||
|
click: {
|
||
|
fn: function () {
|
||
|
Ext.getCmp('sizeSlider').setValue(0);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
xtype: 'slider',
|
||
|
id: 'sizeSlider',
|
||
|
margins: '0 10 0 10',
|
||
|
maxValue: 100,
|
||
|
minValue: 0,
|
||
|
value: 100,
|
||
|
flex: 1,
|
||
|
listeners: {
|
||
|
change: {
|
||
|
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);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
xtype: 'button',
|
||
|
id: 'sizeSliderButtonWorkspace',
|
||
|
cls: 'sliderButton',
|
||
|
text: TYPO3.LLL.Workspaces.workspacePreview,
|
||
|
width: 100,
|
||
|
listeners: {
|
||
|
click: {
|
||
|
fn: function () {
|
||
|
Ext.getCmp('sizeSlider').setValue(100);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}]
|
||
|
width: 600,
|
||
|
items: [
|
||
|
{
|
||
|
xtype: 'panel',
|
||
|
id: 'slider',
|
||
|
width: 460,
|
||
|
layout: 'hbox',
|
||
|
items: [
|
||
|
{
|
||
|
xtype: 'button',
|
||
|
id: 'sizeSliderButtonLive',
|
||
|
cls: 'sliderButton',
|
||
|
text: TYPO3.LLL.Workspaces.livePreview,
|
||
|
tooltip: TYPO3.LLL.Workspaces.livePreviewDetail,
|
||
|
width: 100,
|
||
|
listeners: {
|
||
|
click: {
|
||
|
fn: function () {
|
||
|
Ext.getCmp('sizeSlider').setValue(0);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
xtype: 'slider',
|
||
|
id: 'sizeSlider',
|
||
|
margins: '0 10 0 10',
|
||
|
maxValue: 100,
|
||
|
minValue: 0,
|
||
|
value: 100,
|
||
|
width: 200,
|
||
|
flex: 1,
|
||
|
listeners: {
|
||
|
change: {
|
||
|
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);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
{
|
||
|
xtype: 'button',
|
||
|
id: 'sizeSliderButtonWorkspace',
|
||
|
cls: 'sliderButton',
|
||
|
text: TYPO3.LLL.Workspaces.workspacePreview,
|
||
|
tooltip: TYPO3.LLL.Workspaces.workspacePreviewDetail,
|
||
|
width: 100,
|
||
|
listeners: {
|
||
|
click: {
|
||
|
fn: function () {
|
||
|
Ext.getCmp('sizeSlider').setValue(100);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
]
|
||
|
},
|
||
|
{
|
||
|
xtype: 'toolbar',
|
||
|
id: 'visual-mode-toolbar',
|
||
|
items: [{
|
||
|
iconCls: 'x-btn-icon t3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-options-view',
|
||
|
id: 'visual-mode-options',
|
||
|
menu: {
|
||
|
id: 'visual-mode-selector',
|
||
|
items: [{
|
||
|
text: TYPO3.LLL.Workspaces.modeSlider,
|
||
|
id: 'visual-mode-selector-slider',
|
||
|
iconCls: iconClsChecked,
|
||
|
handler: function(){
|
||
|
Ext.getCmp('visualPanel-hbox').hide();
|
||
|
Ext.getCmp('visualPanel-vbox').hide();
|
||
|
Ext.getCmp('visualPanel').show();
|
||
|
Ext.getCmp('slider').show();
|
||
|
Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" "))
|
||
|
Ext.getCmp('visual-mode-selector-slider').setIconClass(iconClsChecked);
|
||
|
Ext.getCmp('visual-mode-selector-hbox').setIconClass(iconClsEmpty);
|
||
|
Ext.getCmp('visual-mode-selector-vbox').setIconClass(iconClsEmpty);
|
||
|
}
|
||
|
},{
|
||
|
text: TYPO3.LLL.Workspaces.modeVbox,
|
||
|
id: 'visual-mode-selector-vbox',
|
||
|
iconCls: iconClsEmpty,
|
||
|
handler: function() {
|
||
|
Ext.getCmp('visualPanel-hbox').hide();
|
||
|
Ext.getCmp('visualPanel-vbox').show();
|
||
|
Ext.getCmp('visualPanel').hide();
|
||
|
Ext.getCmp('slider').hide();
|
||
|
Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" "))
|
||
|
Ext.getCmp('visual-mode-selector-slider').setIconClass(iconClsEmpty);
|
||
|
Ext.getCmp('visual-mode-selector-vbox').setIconClass(iconClsChecked)
|
||
|
Ext.getCmp('visual-mode-selector-hbox').setIconClass(iconClsEmpty);
|
||
|
}
|
||
|
},{
|
||
|
text: TYPO3.LLL.Workspaces.modeHbox,
|
||
|
id: 'visual-mode-selector-hbox',
|
||
|
iconCls: iconClsEmpty,
|
||
|
handler: function(){
|
||
|
Ext.getCmp('visualPanel-hbox').show();
|
||
|
Ext.getCmp('visualPanel-vbox').hide();
|
||
|
Ext.getCmp('visualPanel').hide();
|
||
|
Ext.getCmp('slider').hide();
|
||
|
Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" "))
|
||
|
Ext.getCmp('visual-mode-selector-slider').setIconClass(iconClsEmpty);
|
||
|
Ext.getCmp('visual-mode-selector-vbox').setIconClass(iconClsEmpty);
|
||
|
Ext.getCmp('visual-mode-selector-hbox').setIconClass(iconClsChecked);
|
||
|
}
|
||
|
}]
|
||
|
}
|
||
|
}]
|
||
|
}]
|
||
|
}],
|
||
|
items: [{
|
||
|
title: TYPO3.LLL.Workspaces.visualPreview,
|
||
|
id: 'wsVisual',
|
||
|
layout: 'fit',
|
||
|
anchor: '100% 100%',
|
||
|
items: [{
|
||
|
layout: 'fit',
|
||
|
layout: 'absolute',
|
||
|
anchor: '100% 100%',
|
||
|
x: 0, y:0,
|
||
|
anchor: '100% 100%',
|
||
|
autoScroll: true,
|
||
|
items: [{
|
||
|
layout: 'absolute',
|
||
|
id: 'visualPanel',
|
||
|
items: [{
|
||
|
layout: 'fit',
|
||
|
x: 0, y:0,
|
||
|
anchor: '100% 100%',
|
||
|
id: 'wsContainer',
|
||
|
layout: 'absolute',
|
||
|
autoScroll: false,
|
||
|
items:[{
|
||
|
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',
|
||
|
id: 'wsPanel-hbox',
|
||
|
doMask: false,
|
||
|
src: wsUrl,
|
||
|
autoScroll: false
|
||
|
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% 0%',
|
||
|
id: 'liveContainer',
|
||
|
layout: 'absolute',
|
||
|
bodyStyle: 'height:0px;border-bottom: 2px solid red;',
|
||
|
autoScroll: false,
|
||
|
items:[{
|
||
|
anchor: '100% 100%',
|
||
|
layoutConfig: {
|
||
|
align : 'stretch',
|
||
|
pack : 'start'
|
||
|
},
|
||
|
id: 'visualPanel-vbox',
|
||
|
items: [{
|
||
|
xtype: 'iframePanel',
|
||
|
x: 0, y:0,
|
||
|
id: 'livePanel',
|
||
|
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
|
||
|
autoScroll: false,
|
||
|
flex: 1
|
||
|
}]
|
||
|
}]
|
||
|
}]
|
||
|
}]
|
||
|
},{
|
||
| Resources/Public/StyleSheet/preview.css (revision 3898) | ||
|---|---|---|
|
* Slider
|
||
|
*/
|
||
|
#controls {
|
||
|
padding-top: 10px;
|
||
|
padding-top: 5px;
|
||
|
}
|
||
|
#slider {
|
||
|
padding-top: 5px;
|
||
|
}
|
||
|
|
||
|
/* remove default ExtJS border */
|
||
|
.x-panel-body {
|
||
| ... | ... | |
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
#visual-mode-selector {
|
||
|
list-style: none;
|
||
|
background-color: #f9f9f9;
|
||
|
border: 1px solid #abb2bc;
|
||
|
border-top: none;
|
||
|
}
|
||
|
|
||
|
#visual-mode-selector td {
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
#visual-mode-selector td button {
|
||
|
font-size: 11px;
|
||
|
line-height: 12px;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
#visual-mode-options {
|
||
|
display: block;
|
||
|
height: 20px;
|
||
|
margin: 5px 0 0 0;
|
||
|
}
|
||
|
#visual-mode-options.x-btn-menu-active {
|
||
|
background-color: #f9f9f9;
|
||
|
border: 1px solid #abb2bc;
|
||
|
border-bottom: none;
|
||
|
}
|
||
|
#visual-mode-options .x-btn-arrow {
|
||
|
padding-right: 2px;
|
||
|
}
|
||
|
|
||
|
#visual-mode-options .x-btn-text {
|
||
|
font-size: 11px;
|
||
|
}
|
||
|
#visual-mode-options.x-btn-menu-active .x-btn-text {
|
||
|
color: black;
|
||
|
}
|
||
|
|
||
|
#visual-mode-toolbar {
|
||
|
border:none;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Preview panel
|
||
|
*/
|
||
| ext_emconf.php (revision 3898) | ||
|---|---|---|
|
'uploadfolder' => 0,
|
||
|
'createDirs' => '',
|
||
|
'modify_tables' => '',
|
||
|
'clearCacheOnLoad' => 0,
|
||
|
'clearCacheOnLoad' => 1,
|
||
|
'lockType' => '',
|
||
|
'author_company' => '',
|
||
|
'version' => '4.5.0beta4',
|
||
