[TASK] RTE: Migrate editor textarea container to plain JavaScript 33/35333/2
authorStanislas Rolland <typo3@sjbr.ca>
Fri, 12 Dec 2014 04:44:15 +0000 (23:44 -0500)
committerStanislas Rolland <typo3@sjbr.ca>
Fri, 12 Dec 2014 04:52:51 +0000 (05:52 +0100)
Releases: master
Resolves: #63793
Change-Id: I936ac320e375ac7e1a5827221ee528f463785d08
Reviewed-on: http://review.typo3.org/35333
Reviewed-by: Stanislas Rolland <typo3@sjbr.ca>
Tested-by: Stanislas Rolland <typo3@sjbr.ca>
typo3/sysext/rtehtmlarea/Classes/RteHtmlAreaBase.php
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/TextAreaContainer.js [new file with mode: 0644]

index 1069c43..4cf86c1 100644 (file)
@@ -834,6 +834,7 @@ class RteHtmlAreaBase extends \TYPO3\CMS\Backend\Rte\AbstractRte {
                $components2 = array(
                        'Editor/Toolbar',
                        'Editor/Iframe',
+                       'Editor/TextAreaContainer',
                        'Editor/StatusBar',
                        'Editor/Framework',
                        'Editor/Editor',
index 9e5c87c..91d40a9 100644 (file)
@@ -26,8 +26,9 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Iframe',
+       'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/TextAreaContainer',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/StatusBar'],
-       function (UserAgent, Util, Ajax, Dom, Event, Selection, BookMark, Node, Typo3, Framework, Toolbar, Iframe, StatusBar) {
+       function (UserAgent, Util, Ajax, Dom, Event, Selection, BookMark, Node, Typo3, Framework, Toolbar, Iframe, TextAreaContainer, StatusBar) {
 
        /**
         * Editor constructor method
@@ -214,35 +215,12 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
                                        nestedParentElements: this.nestedParentElements,
                                        editorId: this.editorId
                                }),
-                               new Ext.BoxComponent({
-                                       // Box container for the textarea
+                               new TextAreaContainer({
+                                       // The container for the textarea
                                        id: this.editorId + '-textAreaContainer',
                                        itemId: 'textAreaContainer',
                                        width: (this.textAreaInitialSize.width.indexOf('%') === -1) ? parseInt(this.textAreaInitialSize.width) : 300,
-                                       // Let the framework swallow the textarea and throw it back
-                                       listeners: {
-                                               afterrender: {
-                                                       fn: function (textAreaContainer) {
-                                                               this.originalParent = this.textArea.parentNode;
-                                                               textAreaContainer.getEl().appendChild(this.textArea);
-                                                       },
-                                                       single: true,
-                                                       scope: this
-                                               },
-                                               beforedestroy: {
-                                                       fn: function (textAreaContainer) {
-                                                               this.originalParent.appendChild(this.textArea);
-                                                               return true;
-                                                       },
-                                                       single: true,
-                                                       scope: this
-                                               },
-                                               show: {
-                                                       fn: function (textAreaContainer) {
-                                                               Event.trigger(textAreaContainer, 'HTMLAreaEventTextAreaContainerShow');
-                                                       }
-                                               }
-                                       }
+                                       textArea: this.textArea
                                }),
                                new StatusBar({
                                        // The status bar
index 583d29f..9b2d9ac 100644 (file)
@@ -353,8 +353,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Framework',
                 */
                onBeforeDestroy: function () {
                        Event.off(window);
-                       Event.off(this.iframe);
-                       Event.off(this.textAreaContainer);
                        // Cleaning references to DOM in order to avoid IE memory leaks
                        var form = this.textArea.form;
                        if (form) {
index b0b0cc6..bf76285 100644 (file)
@@ -399,7 +399,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Iframe',
                                                        }
                                                        Event.trigger(self, 'HTMLAreaEventIframeShow');
                                                } else {
-                                                       self.framework.textAreaContainer.fireEvent('show');
+                                                       Event.trigger(self.framework.getTextAreaContainer(), 'HTMLAreaEventTextAreaContainerShow');
                                                }
                                                self.getToolbar().update();
                                        }
diff --git a/typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/TextAreaContainer.js b/typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/TextAreaContainer.js
new file mode 100644 (file)
index 0000000..b652c3e
--- /dev/null
@@ -0,0 +1,114 @@
+/**
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+/**
+ * The container of the textarea within the editor framework
+ */
+define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/TextAreaContainer',
+       ['TYPO3/CMS/Rtehtmlarea/HTMLArea/Util/Util',
+       'TYPO3/CMS/Rtehtmlarea/HTMLArea/DOM/DOM',
+       'TYPO3/CMS/Rtehtmlarea/HTMLArea/Event/Event'],
+       function (Util, Dom, Event) {
+
+       /**
+        * Status bar constructor
+        */
+       var TextAreaContainer = function (config) {
+               Util.apply(this, config);
+       };
+
+       TextAreaContainer.prototype = {
+
+               /**
+                * Render the textarea container (called by framework rendering)
+                *
+                * @param object container: the container into which to insert the status bar (that is the framework)
+                * @return void
+                */
+               render: function (container) {
+                       this.el = document.createElement('div');
+                       if (this.id) {
+                               this.el.setAttribute('id', this.id);
+                       }
+                       if (this.cls) {
+                               this.el.setAttribute('class', this.cls);
+                       }
+                       this.el = container.appendChild(this.el);
+                       this.swallow(this.textArea);
+                       this.rendered = true;
+                       this.initEventListeners();
+               },
+
+               /**
+                * Initialize listeners (after rendering)
+                */
+               initEventListeners: function () {
+                       var self = this;
+                       // Monitor editor being unloaded
+                       Event.one(this.framework.iframe.getIframeWindow(), 'unload', function (event) { return self.onBeforeDestroy(); });
+               },
+
+               /**
+                * Get the element to which the textarea container is rendered
+                */
+               getEl: function () {
+                       return this.el;
+               },
+
+               /**
+                * editorId should be set in config
+                */
+               editorId: null,
+
+               /**
+                * Get a reference to the editor
+                */
+               getEditor: function() {
+                       return RTEarea[this.editorId].editor;
+               },
+
+               /**
+                * Let the textarea container swallow the textarea
+                */
+               swallow: function (textarea) {
+                       this.originalParent = textarea.parentNode;
+                       this.getEl().appendChild(textarea);
+               },
+
+               /**
+                * Show the texarea container
+                */
+               show: function () {
+                       this.getEl().style.display = '';
+                       Event.trigger(this, 'HTMLAreaEventTextAreaContainerShow');
+               },
+
+               /**
+                * Hide the texarea container
+                */
+               hide: function () {
+                       this.getEl().style.display = 'none';
+               },
+
+               /**
+                * Throw back the texarea
+                */
+               onBeforeDestroy: function() {
+                       this.originalParent.appendChild(this.textArea);
+                       Event.off(this);
+                       return true;
+               }
+       };
+
+       return TextAreaContainer;
+
+});