|
<html>
|
|
<head>
|
|
<title>Workspace Preview</title>
|
|
<link rel="stylesheet" type="text/css" href="typo3/contrib/extjs/resources/css/ext-all-notheme.css" />
|
|
<link rel="stylesheet" type="text/css" href="typo3/sysext/t3skin/extjs/xtheme-t3skin.css" />
|
|
<script type="text/javascript" src="typo3/contrib/extjs/adapter/ext/ext-base.js"></script>
|
|
<script type="text/javascript" src="typo3/contrib/extjs/ext-all.js"></script>
|
|
|
|
<script type="text/javascript" src="typo3/js/extjs/iframepanel.js"></script>
|
|
|
|
|
|
<!-- <script type="text/javascript" src="../plugins/tabclose.js"></script> -->
|
|
|
|
<style type="text/css">
|
|
.x-panel-tbar {margin: 0;}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
TYPO3.previewPanel = Ext.extend(TYPO3.iframePanel, {
|
|
loadHandler: function() {
|
|
console.log(this.body.scrollHeight);
|
|
this.src = this.body.dom.src;
|
|
this.removeMask();
|
|
}
|
|
});
|
|
Ext.reg('previewPanel', TYPO3.previewPanel);
|
|
Ext.onReady(function(){
|
|
var viewport = new Ext.Viewport({
|
|
layout: 'border',
|
|
items: [
|
|
{
|
|
region: 'center', // a center region is ALWAYS required for border layout
|
|
title: 'Workspace "test"',
|
|
layout: 'border',
|
|
id: 'preview',
|
|
tbar: [
|
|
{
|
|
text: 'Live maximum',
|
|
style: 'margin: 0 5px;',
|
|
handler: function() {
|
|
slider.setValue(100);
|
|
}
|
|
}, {
|
|
text: 'Workspace maximum',
|
|
style: 'margin: 0 5px;',
|
|
handler: function() {
|
|
slider.setValue(0);
|
|
}
|
|
}, {
|
|
xtype: 'slider',
|
|
id: 'sizeSlider',
|
|
style: 'margin: 0 5px;',
|
|
maxValue: 100,
|
|
minValue: 0,
|
|
value: 0,
|
|
width: 200,
|
|
listeners: {
|
|
change: {
|
|
fn: resizeFromValue
|
|
}
|
|
}
|
|
}
|
|
],
|
|
items: [
|
|
{
|
|
layout: 'absolute',
|
|
region: 'center',
|
|
items: [{
|
|
x: 0, y:0,
|
|
anchor: '100% 100%',
|
|
title: 'Workspace Preview',
|
|
id: 'workspaceRegion',
|
|
region: 'center',
|
|
layout: 'fit',
|
|
items: [{
|
|
xtype: 'previewPanel',
|
|
id: 'wsPanel'
|
|
}]
|
|
},{
|
|
x: 0, y:0,
|
|
anchor: '100% 100%',
|
|
title: 'Live',
|
|
region: 'north',
|
|
id: 'liveRegion',
|
|
layout: 'fit',
|
|
items: [{
|
|
xtype: 'previewPanel',
|
|
id: 'livePanel'
|
|
}]
|
|
}]
|
|
}
|
|
]
|
|
}]
|
|
});
|
|
|
|
|
|
var slider = Ext.getCmp('sizeSlider');
|
|
var preview = Ext.getCmp('preview');
|
|
var live = Ext.getCmp('liveRegion');
|
|
live.style = {opacity: 0.5};
|
|
var ws = Ext.getCmp('workspaceRegion');
|
|
|
|
var livePanel = Ext.getCmp('livePanel');
|
|
var wsPanel = Ext.getCmp('wsPanel');
|
|
|
|
//und action
|
|
slider.setValue(100);
|
|
livePanel.setUrl('http://typo3.org');
|
|
wsPanel.setUrl('http://typo3.com');
|
|
|
|
|
|
function resizeFromValue(slider, newValue, thumb) {
|
|
live.setHeight(ws.getHeight() * newValue/100);
|
|
//live.style = {opacity: 0.5};
|
|
//ws.setHeight(sumRel * (100-newValue));
|
|
preview.doLayout();
|
|
};
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
</body>
|
|
</html>
|
