Commit 3e21d150 authored by Stanislas Rolland's avatar Stanislas Rolland
Browse files

[TASK] RTE: Simplify editor framework

Simplify RTE framework from Ext.panel to Ext.Container.
Reduce dependency on Ext.ComponentMgr.registerType

Releases: master
Resolves: #63723
Change-Id: I466fa37897e3db97350a7116ce1c3c0be17a6941
Reviewed-on: http://review.typo3.org/35212


Reviewed-by: default avatarStanislas Rolland <typo3@sjbr.ca>
Tested-by: default avatarStanislas Rolland <typo3@sjbr.ca>
parent 0f2f447e
......@@ -23,8 +23,11 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
'TYPO3/CMS/Rtehtmlarea/HTMLArea/DOM/BookMark',
'TYPO3/CMS/Rtehtmlarea/HTMLArea/DOM/Node',
'TYPO3/CMS/Rtehtmlarea/HTMLArea/Util/TYPO3',
'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework'],
function (UserAgent, Util, Ajax, Dom, Event, Selection, BookMark, Node, Typo3, Framework) {
'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Iframe',
'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/StatusBar'],
function (UserAgent, Util, Ajax, Dom, Event, Selection, BookMark, Node, Typo3, Framework, Toolbar, Iframe, StatusBar) {
/**
* Editor constructor method
......@@ -179,7 +182,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
this.htmlArea = new Framework({
id: this.editorId + '-htmlArea',
layout: 'anchor',
baseCls: 'htmlarea',
cls: 'htmlarea',
editorId: this.editorId,
textArea: this.textArea,
textAreaInitialSize: this.textAreaInitialSize,
......@@ -188,18 +191,17 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
maxHeight: this.config.maxHeight,
isNested: this.isNested,
nestedParentElements: this.nestedParentElements,
// The toolbar
tbar: {
xtype: 'htmlareatoolbar',
items: [new Toolbar ({
// The toolbar
id: this.editorId + '-toolbar',
itemId: 'toolbar',
anchor: '100%',
layout: 'form',
cls: 'toolbar',
editorId: this.editorId
},
items: [{
}),
new Iframe({
// The iframe
xtype: 'htmlareaiframe',
itemId: 'iframe',
width: (this.textAreaInitialSize.width.indexOf('%') === -1) ? parseInt(this.textAreaInitialSize.width) : 300,
height: parseInt(this.textAreaInitialSize.height),
......@@ -212,7 +214,8 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
isNested: this.isNested,
nestedParentElements: this.nestedParentElements,
editorId: this.editorId
},{
}),
{
// Box container for the textarea
xtype: 'box',
itemId: 'textAreaContainer',
......@@ -237,19 +240,19 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
scope: this
}
}
}
],
// The status bar
bbar: {
xtype: 'htmlareastatusbar',
anchor: '100%',
cls: 'statusBar',
editorId: this.editorId
}
},
new StatusBar({
// The status bar
anchor: '100%',
cls: 'statusBar',
editorId: this.editorId,
itemId: 'statusBar'
})
]
});
// Set some references
this.toolbar = this.htmlArea.getTopToolbar();
this.statusBar = this.htmlArea.getBottomToolbar();
this.toolbar = this.htmlArea.getComponent('toolbar');
this.statusBar = this.htmlArea.getComponent('statusBar');
this.iframe = this.htmlArea.getComponent('iframe');
this.textAreaContainer = this.htmlArea.getComponent('textAreaContainer');
// Get triggered when the framework becomes ready
......
......@@ -21,7 +21,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/StatusBar'],
function (Typo3, Event, Toolbar, Iframe, Statusbar) {
var Framework = Ext.extend(Ext.Panel, {
var Framework = Ext.extend(Ext.Container, {
/**
* Constructor
......@@ -30,8 +30,8 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
this.superClass = Framework.superclass;
this.superClass.initComponent.call(this);
// Set some references
this.toolbar = this.getTopToolbar();
this.statusBar = this.getBottomToolbar();
this.toolbar = this.getComponent('toolbar');
this.statusBar = this.getComponent('statusBar');
this.iframe = this.getComponent('iframe');
this.textAreaContainer = this.getComponent('textAreaContainer');
this.addListener({
......@@ -227,11 +227,11 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
* Resize the framework to its initial size
*/
resizeFramework: function () {
var frameworkHeight = parseInt(this.textAreaInitialSize.height);
var frameworkHeight = this.fullScreen ? Typo3.getWindowSize().height - 20 : parseInt(this.textAreaInitialSize.height) + this.toolbar.getHeight() - this.statusBar.getHeight();
if (this.textAreaInitialSize.width.indexOf('%') === -1) {
// Width is specified in pixels
// Initial framework sizing
var frameworkWidth = parseInt(this.textAreaInitialSize.width) - this.getFrameWidth();
var frameworkWidth = parseInt(this.textAreaInitialSize.width);
} else {
// Width is specified in %
// Framework sizing on actual window resize
......@@ -279,7 +279,14 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
* Calculate the height available for the editing iframe
*/
getInnerHeight: function () {
return this.getSize().height - this.toolbar.getHeight() - this.statusBar.getHeight();
return this.getSize().height - this.toolbar.getHeight() - this.statusBar.getHeight() - 5;
},
/**
* Calculate the width available for the editing iframe
*/
getInnerWidth: function () {
return this.getSize().width;
},
/**
......
......@@ -109,41 +109,45 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Iframe',
* Get a reference to the toolbar
*/
getToolbar: function () {
return this.ownerCt.getTopToolbar();
return this.ownerCt.toolbar;
},
/*
/**
* Get a reference to the statusBar
*/
getStatusBar: function () {
return this.ownerCt.getBottomToolbar();
return this.ownerCt.statusBar;
},
/*
/**
* Get a reference to a button
*/
getButton: function (buttonId) {
return this.getToolbar().getButton(buttonId);
},
/*
/**
* Flag set to true when the iframe becomes usable for editing
*/
ready: false,
/*
/**
* Create the iframe element at rendering time
*/
onRender: function (ct, position){
// from Ext.Component
// from Ext.Component
if (!this.el && this.autoEl) {
if (typeof this.autoEl === 'string' && this.autoEl.length > 0) {
this.el = document.createElement(this.autoEl);
} else {
// ExtJS Default method will not work with iframe element
// ExtJS Default method will not work with iframe element
this.el = Ext.DomHelper.append(ct, this.autoEl, true);
}
if (!this.el.id) {
this.el.id = this.getId();
}
}
// from Ext.BoxComponent
// from Ext.BoxComponent
if (this.resizeEl){
this.resizeEl = Ext.get(this.resizeEl);
}
......@@ -210,7 +214,8 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Iframe',
}
}
},
/*
/**
* Build the iframe document head
*/
createHead: function () {
......@@ -746,7 +751,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Iframe',
}
});
Ext.reg('htmlareaiframe', Iframe);
return Iframe;
});
......@@ -327,7 +327,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/StatusBar',
}
});
Ext.reg('htmlareastatusbar', StatusBar);
return StatusBar;
});
......@@ -108,7 +108,19 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
var itemConfig = editor.config.buttonsConfig[item];
if (typeof itemConfig === 'object' && itemConfig !== null) {
itemConfig.id = this.editorId + '-' + itemConfig.id;
this.add(itemConfig);
switch (itemConfig.xtype) {
case 'htmlareabutton':
this.add(new Button(itemConfig));
break;
case 'htmlareacombo':
this.add(new Combo(itemConfig));
break;
case 'htmlareatoolbartext':
this.add(new ToolbarText(itemConfig));
break;
default:
this.add(itemConfig);
}
firstInGroup = firstInGroup && itemConfig.hidden;
firstOnRow = firstOnRow && firstInGroup;
}
......@@ -178,7 +190,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
}
});
Ext.reg('htmlareatoolbar', Toolbar);
return Toolbar;
});
......@@ -147,8 +147,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/Button',
}
});
Ext.reg('htmlareabutton', Button);
Ext.ux.HTMLAreaButton = Button;
return Button;
});
......@@ -24,7 +24,8 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/Combo',
* Constructor
*/
initComponent: function () {
Ext.ux.form.HTMLAreaCombo.superclass.initComponent.call(this);
this.superClass = Combo.superclass;
this.superClass.initComponent.call(this);
this.addListener({
afterrender: {
fn: this.initEventListeners,
......@@ -104,7 +105,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/Combo',
* In IE, need to reclaim lost focus for the editor in order to restore the selection
*/
onTriggerClick: function () {
Ext.ux.form.HTMLAreaCombo.superclass.onTriggerClick.call(this);
this.superClass.onTriggerClick.call(this);
// In IE, avoid focus being stolen and selection being lost
if (UserAgent.isIE) {
this.triggered = true;
......@@ -117,7 +118,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/Combo',
*/
onViewClick: function (doFocus) {
// Avoid stealing focus from the editor
Ext.ux.form.HTMLAreaCombo.superclass.onViewClick.call(this, false);
this.superClass.onViewClick.call(this, false);
},
/**
......@@ -202,8 +203,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/Combo',
}
});
Ext.reg('htmlareacombo', Combo);
Ext.ux.form.HTMLAreaCombo = Combo;
return Combo;
});
......@@ -23,7 +23,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/ToolbarText',
* Constructor
*/
initComponent: function () {
Ext.ux.Toolbar.HTMLAreaToolbarText.superclass.initComponent.call(this);
ToolbarText.superclass.initComponent.call(this);
this.addListener({
afterrender: {
fn: this.initEventListeners,
......@@ -66,8 +66,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/ToolbarText',
}
});
Ext.ux.Toolbar.HTMLAreaToolbarText = ToolbarText;
Ext.reg('htmlareatoolbartext', ToolbarText);
return ToolbarText;
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment