Project

General

Profile

Download (10.9 KB)

Feature #10642 » f10642_v4.diff

Diff - Steffen Gebert, 2010-12-20 11:43

View differences:

Resources/Public/JavaScript/Ext.ux.plugins.TabStripContainer.js (Revision 0)
/**
* Ext.ux.plugins.TabStripContainer
*
* @author Steffen Kamper
* @date December 19, 2010
*
* @class Ext.ux.plugins.TabStripContainer
* @extends Object
*/
Ext.ns('Ext.ux.plugins');
Ext.ux.plugins.TabStripContainer = Ext.extend(Object, {
/**
* @hide private
*
* Tab panel we are plugged in.
*/
tabPanel : null,
/**
* @hide private
*
* items for the panel
*/
items: [],
/**
* @hide private
*
* Cached tab panel's strip wrap element container, i.e. panel's header or footer element.
*/
headerFooterEl : null,
/**
* @constructor
*/
constructor : function(config) {
Ext.apply(this, config);
},
/**
* Initializes plugin
*/
init : function(tabPanel) {
this.tabPanel = tabPanel;
tabPanel.on(
'afterrender',
this.onTabPanelAfterRender,
this,
{
delay: 10
}
);
},
/**
* Adds the panel to the tab header/footer
*
* @param tabPanel
*/
onTabPanelAfterRender: function(tabPanel) {
var height, panelDiv, stripTarget, config;
// Getting and caching strip wrap element parent, i.e. tab panel footer or header.
this.headerFooterEl =
this.tabPanel.tabPosition == 'bottom'
? this.tabPanel.footer
: this.tabPanel.header;
height = this.headerFooterEl.getComputedHeight();
stripTarget = tabPanel[tabPanel.stripTarget];
stripTarget.applyStyles('position: relative;');
panelDiv = this.headerFooterEl.createChild({
tag : 'div',
id: this.id || Ext.id(),
style : {
position : 'absolute',
right: 0,
top: 0
}
});
panelDiv.setSize(this.width, height, false);
config = Ext.applyIf({
layout: 'hbox',
layoutConfig: {
align: 'stretchmax'
},
height: height,
width: this.width,
renderTo: panelDiv
}, this.panelConfig);
this.panelContainer = new Ext.Panel(config);
this.panelContainer.add(this.items);
this.panelContainer.doLayout();
}
});
Ext.preg('Ext.ux.plugins.TabStripContainer', Ext.ux.plugins.TabStripContainer);
Resources/Public/JavaScript/preview.js (Arbeitskopie)
region: 'center', // a center region is ALWAYS required for border layout
id: 'preview',
activeTab: 0,
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);
}
}
}
}]
}],
items: [{
title: TYPO3.LLL.Workspaces.visualPreview,
id: 'wsVisual',
......
doMask: false,
src: wsHelpUrl
}]
}],
tbar: [
'->', '-',
{
xtype: 'button',
text: TYPO3.LLL.Workspaces.livePreview,
listeners: {
click: {
fn: function () {
Ext.getCmp('sizeSlider').setValue(0);
}
}
}
},
{
xtype: 'slider',
id: 'sizeSlider',
style: 'margin: 0 5px;',
maxValue: 100,
minValue: 0,
value: 100,
width: 200,
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',
text: TYPO3.LLL.Workspaces.workspacePreview,
listeners: {
click: {
fn: function () {
Ext.getCmp('sizeSlider').setValue(100);
}
}
}
}
]
}]
}]
});
});
Resources/Public/StyleSheet/preview.css (Arbeitskopie)
/**
* Top bar
*/
/**
* Tabs
*/
/* panel containing the tabs */
.x-tab-panel-header {
background-color: #3f3f3f;
background-image: url('../../images/backgrounds/topbar.png');
background-image: -moz-linear-gradient(center top, #494949 0%, #373737 91%, #343434 92%, #2A2A2A 100%);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #494949) color-stop(0.91, #373737), color-stop(0.92, #343434), color-stop(1, #2a2a2a));
background-image: gradient(center top , #494949 0%, #373737 91%, #343434 92%, #2A2A2A 100%);
background-repeat: repeat-x;
border: none;
padding-bottom: 0;
padding-top: 9px;
}
.x-tab-strip-wrap {
background: url('../Images/typo3-logo.png') no-repeat 16px 0;
padding-left: 140px;
}
/* normal tab */
ul.x-tab-strip li {
margin-left: 4px;
}
ul.x-tab-strip-top {
border-bottom: 0;
}
/* reset ExtJS "no skin" nonsense */
.x-tab-strip-top .x-tab-right,
.x-tab-strip-top .x-tab-strip-over .x-tab-right {
background-position: 0 0;
}
/* we don't need the active tab to be 1px below the inactive */
.x-tab-strip-top .x-tab-strip-active .x-tab-right {
margin-bottom: 0;
}
.x-tab-strip span.x-tab-strip-text,
.x-tab-strip-top .x-tab-strip-active .x-tab-right span.x-tab-strip-text {
padding-bottom: 4px;
}
/* normal tab styling */
.x-tab-strip .x-tab-right {
background-color: #707171;
background-image: -moz-linear-gradient(center top, #707171 0%, #474747 85%, #363636 100%);
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
/* container surrounding text */
.x-tab-strip-inner {
padding: 4px;
}
/* hover tab */
.x-tab-strip-over .x-tab-right {
background-color: #707171;
background-image: -moz-linear-gradient(center top, #888888 0%, #474747 85%, #363636 100%);
}
/* active tab */
.x-tab-strip-active .x-tab-right {
background-color: #989898;
background-image: -moz-linear-gradient(center top, #989898 0%, #6c6c6c 85%, #474747 100%);
}
/* tab label */
.x-tab-strip span.x-tab-strip-text {
color: #ffffff;
}
/* text in tabs should not be italic.. why should it be? */
.x-tab-strip em {
font-style: normal;
}
/**
* Slider
*/
#controls {
padding-top: 10px;
}
/* remove default ExtJS border */
.x-panel-body {
border: none;
}
.x-slider-horz .x-slider-thumb {
background-image: url('../Images/slider-thumb.png');
height: 21px;
padding: 0 2px;
top: 0;
width: 7px;
}
.x-slider-horz .x-slider-thumb-over {
background-position: -7px -21px;
}
.x-slider-horz .x-slider-inner {
background-image: url('../Images/slider-bg.png');
}
/* text */
.x-btn.sliderButton .x-btn-text {
color: #a0a0a0;
/*padding: 0 2px 0;*/
}
/* alignment of text in Button "Live" */
#sizeSliderButtonLive .x-btn-mc {
text-align: right;
}
/* alignment of text in Button "Workspace" */
#sizeSliderButtonWorkspace .x-btn-mc {
text-align: left;
}
/**
* Preview panel
*/
.x-panel-body-noheader {
border-top: 0;
}
Classes/Controller/PreviewController.php (Arbeitskopie)
protected function initializeAction() {
parent::initializeAction();
$resourcePath = t3lib_extMgm::extRelPath('workspaces') . 'Resources/Public/';
$GLOBALS['TBE_STYLES']['extJS']['theme'] = $resourcePath . 'StyleSheet/preview.css';
$this->pageRenderer->loadExtJS();
$this->pageRenderer->enableExtJSQuickTips();
$this->pageRenderer->enableExtJsDebug();
......
$this->pageRenderer->addJsFile($this->backPath . '../t3lib/js/extjs/ux/flashmessages.js');
$this->pageRenderer->addJsFile($this->backPath . 'js/extjs/iframepanel.js');
$resourcePath = t3lib_extMgm::extRelPath('workspaces') . 'Resources/Public/';
$this->pageRenderer->addJsFile($resourcePath . 'JavaScript/Ext.ux.plugins.TabStripContainer.js');
$this->pageRenderer->addJsFile($resourcePath . 'JavaScript/preview.js');
$this->pageRenderer->addCssFile($resourcePath . 'StyleSheet/preview.css');
// todo this part should be done with inlineLocallanglabels
$this->pageRenderer->addJsInlineCode('workspace-inline-code', $this->generateJavascript());
(15-15/17)