[TASK] RTE: Optimize editor initialization 51/35151/3
authorStanislas Rolland <typo3@sjbr.ca>
Mon, 8 Dec 2014 05:02:13 +0000 (00:02 -0500)
committerStanislas Rolland <typo3@sjbr.ca>
Mon, 8 Dec 2014 05:10:47 +0000 (06:10 +0100)
Ensure the CSS classes configuration is loaded while the editor is being constructed

Releases: master
Resolves: #63655
Change-Id: Iced9eeae16a0c9f66efb676702a8ec6893c1646c
Reviewed-on: http://review.typo3.org/35151
Reviewed-by: Stanislas Rolland <typo3@sjbr.ca>
Tested-by: Stanislas Rolland <typo3@sjbr.ca>
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/CSS/Parser.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Editor.js

index 36919d6..e75e3dc 100644 (file)
@@ -31,6 +31,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/CSS/Parser',
                        tags: null,
                        editor: null
                };
+               // config.editor MUST be set!
                Util.apply(this, config, configDefaults);
                if (this.editor.config.styleSheetsMaximumAttempts) {
                        this.parseAttemptsMaximumNumber = this.editor.config.styleSheetsMaximumAttempts;
@@ -92,39 +93,47 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/CSS/Parser',
         */
        Parser.prototype.parse = function() {
                if (this.editor.document) {
-                       this.parseStyleSheets();
-                       if (!this.cssLoaded) {
-                               if (/Security/i.test(this.error)) {
-                                       this.editor.appendToLog('HTMLArea.CSS.Parser', 'parse', 'A security error occurred. Make sure all stylesheets are accessed from the same domain/subdomain and using the same protocol as the current script.', 'error');
-                                       /**
-                                        * @event HTMLAreaEventCssParsingComplete
-                                        * Fires when parsing of the stylesheets of the iframe is complete
-                                        */
-                                       Event.trigger(this, 'HTMLAreaEventCssParsingComplete');
-                               } else if (this.parseAttemptsCounter < this.parseAttemptsMaximumNumber) {
-                                       this.parseAttemptsCounter++;
-                                       var self = this;
-                                       this.attemptTimeout = window.setTimeout(function () {
-                                               self.parse();
-                                       }, 200);
+                       var self = this;
+                       if (!this.editor.classesConfigurationIsLoaded()) {
+                               this.attemptTimeout = window.setTimeout(function () {
+                                       self.parse();
+                               }, 100);
+                       } else {
+                               this.parseStyleSheets();
+                               if (!this.cssLoaded) {
+                                       if (/Security/i.test(this.error)) {
+                                               this.editor.appendToLog('HTMLArea.CSS.Parser', 'parse', 'A security error occurred. Make sure all stylesheets are accessed from the same domain/subdomain and using the same protocol as the current script.', 'error');
+                                               /**
+                                                * @event HTMLAreaEventCssParsingComplete
+                                                * Fires when parsing of the stylesheets of the iframe is complete
+                                                */
+                                               Event.trigger(this, 'HTMLAreaEventCssParsingComplete');
+                                       } else if (this.parseAttemptsCounter < this.parseAttemptsMaximumNumber) {
+                                               this.parseAttemptsCounter++;
+                                               this.attemptTimeout = window.setTimeout(function () {
+                                                       self.parse();
+                                               }, 200);
+                                       } else {
+                                               this.editor.appendToLog('HTMLArea.CSS.Parser', 'parse', 'The stylesheets could not be parsed. Reported error: ' + this.error, 'error');
+                                               /**
+                                                * @event HTMLAreaEventCssParsingComplete
+                                                * Fires when parsing of the stylesheets of the iframe is complete
+                                                */
+                                               Event.trigger(this, 'HTMLAreaEventCssParsingComplete');
+                                       }
                                } else {
-                                       this.editor.appendToLog('HTMLArea.CSS.Parser', 'parse', 'The stylesheets could not be parsed. Reported error: ' + this.error, 'error');
+                                       if (this.attemptTimeout) {
+                                               window.clearTimeout(this.attemptTimeout);
+                                       }
+                                       this.ready = true;
+                                       this.filterAllowedClasses();
+                                       this.sort();
                                        /**
                                         * @event HTMLAreaEventCssParsingComplete
                                         * Fires when parsing of the stylesheets of the iframe is complete
                                         */
                                        Event.trigger(this, 'HTMLAreaEventCssParsingComplete');
                                }
-                       } else {
-                               this.attemptTimeout = null;
-                               this.ready = true;
-                               this.filterAllowedClasses();
-                               this.sort();
-                               /**
-                                * @event HTMLAreaEventCssParsingComplete
-                                * Fires when parsing of the stylesheets of the iframe is complete
-                                */
-                               Event.trigger(this, 'HTMLAreaEventCssParsingComplete');
                        }
                }
        };
index 6345a84..fdcfa0d 100644 (file)
@@ -79,6 +79,10 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
                this.ajax = new Ajax({
                        editor: this
                });
+
+               // Initiate loading of the CSS classes configuration
+               this.getClassesConfiguration();
+
                // Initialize keyboard input inhibit flag
                this.inhibitKeyboardInput = false;
 
@@ -267,17 +271,40 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
                this.getDomNode();
                // Initiate events listening
                this.initEventsListening();
-               // Load the classes configuration
-               this.getClassesConfiguration();
+               // Generate plugins
+               this.generatePlugins();
+               // Make the editor visible
+               this.show();
+               // Make the wizards visible again
+               if (this.wizards && this.wizards.nodeType === Dom.ELEMENT_NODE) {
+                       this.wizards.style.display = '';
+               }
+               // Focus on the first editor that is not hidden
+               for (var editorId in RTEarea) {
+                       var RTE = RTEarea[editorId];
+                       if (typeof RTE.editor !== 'object' || RTE.editor === null || (RTE.editor.isNested && !Typo3.allElementsAreDisplayed(RTE.editor.nestedParentElements.sorted))) {
+                               continue;
+                       } else {
+                               RTE.editor.focus();
+                               break;
+                       }
+               }
+               this.ready = true;
+               /**
+                * @event EditorReady
+                * Fires when initialization of the editor is complete
+                */
+               Event.trigger(this, 'HtmlAreaEventEditorReady');
+               this.appendToLog('HTMLArea.Editor', 'onFrameworkReady', 'Editor ready.', 'info');
        };
 
        /**
-        * Get the classes configuration
-        * This is required before plugins are generated
+        * Get the CSS classes configuration
         *
         * @return void
         */
        Editor.prototype.getClassesConfiguration = function () {
+               this.classesConfigurationLoaded = false;
                if (this.config.classesUrl && typeof HTMLArea.classesLabels === 'undefined') {
                        this.ajax.getJavascriptFile(this.config.classesUrl, function (options, success, response) {
                                if (success) {
@@ -288,45 +315,22 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Editor',
                                        } catch(e) {
                                                this.appendToLog('HTMLArea.Editor', 'getClassesConfiguration', 'Error evaluating contents of Javascript file: ' + this.config.classesUrl, 'error');
                                        }
+                                       this.classesConfigurationLoaded = true;
                                }
-                               this.initializeEditor();
                        }, this);
                } else {
-                       this.initializeEditor();
+                       // There is no classes configuration to be loaded
+                       this.classesConfigurationLoaded = true;
                }
        };
 
        /**
-        * Complete editor initialization
+        * Gets the status of the loading process of the CSS classes configuration
         *
-        * @return void
+        * @return boolean true if the classes configuration is loaded
         */
-       Editor.prototype.initializeEditor = function () {
-               // Generate plugins
-               this.generatePlugins();
-               // Make the editor visible
-               this.show();
-               // Make the wizards visible again
-               if (this.wizards && this.wizards.nodeType === Dom.ELEMENT_NODE) {
-                       this.wizards.style.display = '';
-               }
-               // Focus on the first editor that is not hidden
-               for (var editorId in RTEarea) {
-                       var RTE = RTEarea[editorId];
-                       if (typeof RTE.editor !== 'object' || RTE.editor === null || (RTE.editor.isNested && !Typo3.allElementsAreDisplayed(RTE.editor.nestedParentElements.sorted))) {
-                               continue;
-                       } else {
-                               RTE.editor.focus();
-                               break;
-                       }
-               }
-               this.ready = true;
-               /**
-                * @event EditorReady
-                * Fires when initialization of the editor is complete
-                */
-               Event.trigger(this, 'HtmlAreaEventEditorReady');
-               this.appendToLog('HTMLArea.Editor', 'onFrameworkReady', 'Editor ready.', 'info');
+       Editor.prototype.classesConfigurationIsLoaded = function() {
+               return this.classesConfigurationLoaded;
        };
 
        /**