[TASK] RTE: Simplify editor framework 12/35212/3
authorStanislas Rolland <typo3@sjbr.ca>
Wed, 10 Dec 2014 03:05:22 +0000 (22:05 -0500)
committerStanislas Rolland <typo3@sjbr.ca>
Wed, 10 Dec 2014 03:17:15 +0000 (04:17 +0100)
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: Stanislas Rolland <typo3@sjbr.ca>
Tested-by: Stanislas Rolland <typo3@sjbr.ca>
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Editor.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Framework.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Iframe.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/StatusBar.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Toolbar.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Extjs/ux/Button.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Extjs/ux/Combo.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Extjs/ux/ToolbarText.js

index fdcfa0d..a6126f7 100644 (file)
@@ -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
index 23d91d7..08fc97b 100644 (file)
@@ -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;
                },
 
                /**
index 7119d6c..6dccbb1 100644 (file)
@@ -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;
 
 });
index dfd5f9f..4b96767 100644 (file)
@@ -327,7 +327,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/StatusBar',
                }
        });
 
-       Ext.reg('htmlareastatusbar', StatusBar);
        return StatusBar;
 
 });
index bdccff4..dc45186 100644 (file)
@@ -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;
 
 });
index 4ba0232..81d0ad9 100644 (file)
@@ -147,8 +147,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/Button',
                }
        });
 
-       Ext.reg('htmlareabutton', Button);
-       Ext.ux.HTMLAreaButton = Button;
        return Button;
 
 });
index 2a72cc4..5c4acc9 100644 (file)
@@ -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;
 
 });
index 7c18a42..2f480a3 100644 (file)
@@ -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;
 
 });