[BUGFIX] RTE.default.buttons.blockstyle not configurable 13/33913/3
authorStanislas Rolland <typo3@sjbr.ca>
Sun, 9 Nov 2014 00:32:58 +0000 (19:32 -0500)
committerStanislas Rolland <typo3@sjbr.ca>
Sun, 9 Nov 2014 00:43:55 +0000 (01:43 +0100)
Problem: Data from the TextStyle combobox,derived form the textstyle
configuration, appears in the BlockStyle combobox.
Solution:
1. Load the global classes configuration from PageTSconfig only once.
2. Force the initialization of the parsed classes object in the
HTMLArea.CSS.Parser class constructor. (ExtJS bug?)

Releases: master, 6.2
Resolves: #58034
Change-Id: Iaf2f8b7ee8cca347f5cd08619677965fdd1a0168
Reviewed-on: http://review.typo3.org/33913
Reviewed-by: Stanislas Rolland <typo3@sjbr.ca>
Tested-by: Stanislas Rolland <typo3@sjbr.ca>
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/CSS/HTMLArea.CSS.Parser.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/HTMLArea.Editor.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/block-style.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/text-style.js

index da3ee27..0a38a8f 100644 (file)
@@ -2,7 +2,8 @@
  *  HTMLArea.CSS.Parser: CSS Parser
  ***************************************************/
 HTMLArea.CSS.Parser = Ext.extend(Ext.util.Observable, {
-       /*
+
+       /**
         * HTMLArea.CSS.Parser constructor
         */
        constructor: function (config) {
@@ -26,15 +27,20 @@ HTMLArea.CSS.Parser = Ext.extend(Ext.util.Observable, {
                         */
                        'HTMLAreaEventCssParsingComplete'
                );
+               this.parsedClasses = {};
+               this.ready = false;
        },
-       /*
+
+       /**
         * The parsed classes
         */
        parsedClasses: {},
-       /*
+
+       /**
         * Boolean indicating whether are not parsing is complete
         */
-       isReady: false,
+       ready: false,
+
        /*
         * Boolean indicating whether or not the stylesheets were accessible
         */
@@ -51,7 +57,8 @@ HTMLArea.CSS.Parser = Ext.extend(Ext.util.Observable, {
         * The error that occurred on the last attempt at parsing the stylesheets
         */
        error: null,
-       /*
+
+       /**
         * This function gets the parsed css classes
         *
         * @return      object  this.parsedClasses
@@ -59,30 +66,17 @@ HTMLArea.CSS.Parser = Ext.extend(Ext.util.Observable, {
        getClasses: function() {
                return this.parsedClasses;
        },
-       /*
-        * This function initiates parsing of the stylesheets
+
+       /**
+        * This function gets the ready state
         *
-        * @return      void
+        * @return bool this.ready
         */
-       initiateParsing: function () {
-               if (this.editor.config.classesUrl && typeof HTMLArea.classesLabels === 'undefined') {
-                       this.editor.ajax.getJavascriptFile(this.editor.config.classesUrl, function (options, success, response) {
-                               if (success) {
-                                       try {
-                                               if (typeof HTMLArea.classesLabels === 'undefined') {
-                                                       eval(response.responseText);
-                                               }
-                                       } catch(e) {
-                                               this.editor.appendToLog('HTMLArea.CSS.Parser', 'initiateParsing', 'Error evaluating contents of Javascript file: ' + this.editor.config.classesUrl, 'error');
-                                       }
-                               }
-                               this.parse();
-                       }, this);
-               } else {
-                       this.parse();
-               }
+       isReady: function() {
+               return this.ready;
        },
-       /*
+
+       /**
         * This function parses the stylesheets of the iframe set in config
         *
         * @return      void    parsed css classes are accumulated in this.parsedClasses
@@ -103,7 +97,7 @@ HTMLArea.CSS.Parser = Ext.extend(Ext.util.Observable, {
                                }
                        } else {
                                this.attemptTimeout = null;
-                               this.isReady = true;
+                               this.ready = true;
                                this.filterAllowedClasses();
                                this.sort();
                                this.fireEvent('HTMLAreaEventCssParsingComplete');
@@ -330,11 +324,11 @@ HTMLArea.CSS.Parser = Ext.extend(Ext.util.Observable, {
         * @return      void
         */
        sort: function() {
-               var nodeName, cssClass, i, n;
+               var nodeName, cssClass, i, n, x, y;
                for (nodeName in this.parsedClasses) {
                        var value = this.parsedClasses[nodeName];
                        var classes = [];
-                       var sortedClasses= {};
+                       var sortedClasses = {};
                        // Collect keys
                        for (cssClass in value) {
                                classes.push(cssClass);
index 2258366..1820c0f 100644 (file)
@@ -206,20 +206,55 @@ HTMLArea.Editor = Ext.extend(Ext.util.Observable, {
                this.relayEvents(this.htmlArea, ['HTMLAreaEventFrameworkReady']);
                this.on('HTMLAreaEventFrameworkReady', this.onFrameworkReady, this, {single: true});
        },
-       /*
+       /**
         * Initialize the editor
         */
        onFrameworkReady: function () {
-                       // Initialize editor mode
+               // Initialize editor mode
                this.setMode('wysiwyg');
-                       // Create the selection object
+               // Create the selection object
                this.getSelection();
-                       // Create the bookmark object
+               // Create the bookmark object
                this.getBookMark();
-                       // Create the DOM node object
+               // Create the DOM node object
                this.getDomNode();
-                       // Initiate events listening
+               // Initiate events listening
                this.initEventsListening();
+               // Load the classes configuration
+               this.getClassesConfiguration();
+       },
+       
+       /**
+        * Get the classes configuration
+        * This is required before plugins are generated
+        *
+        * @return      void
+        */
+       getClassesConfiguration: function () {
+               if (this.config.classesUrl && typeof HTMLArea.classesLabels === 'undefined') {
+                       this.ajax.getJavascriptFile(this.config.classesUrl, function (options, success, response) {
+                               if (success) {
+                                       try {
+                                               if (typeof HTMLArea.classesLabels === 'undefined') {
+                                                       eval(response.responseText);
+                                               }
+                                       } catch(e) {
+                                               this.appendToLog('HTMLArea.Editor', 'getClassesConfiguration', 'Error evaluating contents of Javascript file: ' + this.config.classesUrl, 'error');
+                                       }
+                               }
+                               this.initializeEditor();
+                       }, this);
+               } else {
+                       this.initializeEditor();
+               }
+       },
+
+       /**
+        * Complete editor initialization
+        *
+        * @return      void
+        */
+       initializeEditor: function () {
                        // Generate plugins
                this.generatePlugins();
                        // Make the editor visible
@@ -242,6 +277,7 @@ HTMLArea.Editor = Ext.extend(Ext.util.Observable, {
                this.fireEvent('HTMLAreaEventEditorReady');
                this.appendToLog('HTMLArea.Editor', 'onFrameworkReady', 'Editor ready.', 'info');
        },
+
        /*
         * Set editor mode
         *
index 5ae0c87..9ed4734 100644 (file)
@@ -137,13 +137,13 @@ HTMLArea.BlockStyle = Ext.extend(HTMLArea.Plugin, {
                        }
                }
        },
-       /*
+       /**
         * This handler gets called when the editor is generated
         */
        onGenerate: function () {
-                       // Monitor editor changing mode
+               // Monitor editor changing mode
                this.editor.iframe.mon(this.editor, 'HTMLAreaEventModeChange', this.onModeChange, this);
-                       // Create CSS Parser object
+               // Create CSS Parser object
                this.blockStyles = new HTMLArea.CSS.Parser({
                        prefixLabelWithClassName: this.prefixLabelWithClassName,
                        postfixLabelWithClassName: this.postfixLabelWithClassName,
@@ -151,20 +151,20 @@ HTMLArea.BlockStyle = Ext.extend(HTMLArea.Plugin, {
                        tags: this.tags,
                        editor: this.editor
                });
-                       // Disable the combo while initialization completes
+               // Disable the combo while initialization completes
                var dropDown = this.getButton('BlockStyle');
                if (dropDown) {
                        dropDown.setDisabled(true);
                }
-                       // Monitor css parsing being completed
+               // Monitor css parsing being completed
                this.editor.iframe.mon(this.blockStyles, 'HTMLAreaEventCssParsingComplete', this.onCssParsingComplete, this);
-               this.blockStyles.initiateParsing();
+               this.blockStyles.parse();
        },
        /*
         * This handler gets called when parsing of css classes is completed
         */
        onCssParsingComplete: function () {
-               if (this.blockStyles.isReady) {
+               if (this.blockStyles.isReady()) {
                        this.cssArray = this.blockStyles.getClasses();
                        if (this.getEditorMode() === 'wysiwyg' && this.editor.isEditable()) {
                                this.updateValue('BlockStyle');
@@ -175,7 +175,7 @@ HTMLArea.BlockStyle = Ext.extend(HTMLArea.Plugin, {
         * This handler gets called when the toolbar is being updated
         */
        onUpdateToolbar: function (button, mode, selectionEmpty, ancestors) {
-               if (mode === 'wysiwyg' && this.editor.isEditable() && this.blockStyles.isReady) {
+               if (mode === 'wysiwyg' && this.editor.isEditable() && this.blockStyles.isReady()) {
                        this.updateValue(button.itemId);
                }
        },
@@ -194,18 +194,18 @@ HTMLArea.BlockStyle = Ext.extend(HTMLArea.Plugin, {
                var dropDown = this.getButton(dropDownId);
                if (dropDown) {
                        var classNames = new Array();
-                       var tagName = null;
+                       var nodeName = '';
                        var statusBarSelection = this.editor.statusBar ? this.editor.statusBar.getSelection() : null;
                        var parent = statusBarSelection ? statusBarSelection : this.editor.getSelection().getParentElement();
                        while (parent && !HTMLArea.DOM.isBlockElement(parent) && !/^(img)$/i.test(parent.nodeName)) {
                                parent = parent.parentNode;
                        }
                        if (parent) {
-                               tagName = parent.nodeName.toLowerCase();
+                               nodeName = parent.nodeName.toLowerCase();
                                classNames = HTMLArea.DOM.getClassNames(parent);
                        }
-                       if (tagName && tagName !== "body"){
-                               this.buildDropDownOptions(dropDown, tagName);
+                       if (nodeName && nodeName !== 'body'){
+                               this.buildDropDownOptions(dropDown, nodeName);
                                this.setSelectedOption(dropDown, classNames);
                        } else {
                                this.initializeDropDown(dropDown);
@@ -231,7 +231,7 @@ HTMLArea.BlockStyle = Ext.extend(HTMLArea.Plugin, {
        buildDropDownOptions: function (dropDown, nodeName) {
                var store = dropDown.getStore();
                this.initializeDropDown(dropDown);
-               if (this.blockStyles.isReady) {
+               if (this.blockStyles.isReady()) {
                        var allowedClasses = {};
                        if (typeof this.cssArray[nodeName] !== 'undefined') {
                                allowedClasses = this.cssArray[nodeName];
index ee99a77..4e69b12 100644 (file)
@@ -180,14 +180,14 @@ HTMLArea.TextStyle = Ext.extend(HTMLArea.Plugin, {
                        }
                }
        },
-       /*
+       /**
         * This function gets called when the plugin is generated
         * Get the classes configuration and initiate the parsing of the style sheets
         */
        onGenerate: function () {
-                       // Monitor editor changing mode
+               // Monitor editor changing mode
                this.editor.iframe.mon(this.editor, 'HTMLAreaEventModeChange', this.onModeChange, this);
-                       // Create CSS Parser object
+               // Create CSS Parser object
                this.textStyles = new HTMLArea.CSS.Parser({
                        prefixLabelWithClassName: this.prefixLabelWithClassName,
                        postfixLabelWithClassName: this.postfixLabelWithClassName,
@@ -195,20 +195,20 @@ HTMLArea.TextStyle = Ext.extend(HTMLArea.Plugin, {
                        tags: this.tags,
                        editor: this.editor
                });
-                       // Disable the combo while initialization completes
+               // Disable the combo while initialization completes
                var dropDown = this.getButton('TextStyle');
                if (dropDown) {
                        dropDown.setDisabled(true);
                }
-                       // Monitor css parsing being completed
+               // Monitor css parsing being completed
                this.editor.iframe.mon(this.textStyles, 'HTMLAreaEventCssParsingComplete', this.onCssParsingComplete, this);
-               this.textStyles.initiateParsing();
+               this.textStyles.parse();
        },
        /*
         * This handler gets called when parsing of css classes is completed
         */
        onCssParsingComplete: function () {
-               if (this.textStyles.isReady) {
+               if (this.textStyles.isReady()) {
                        this.cssArray = this.textStyles.getClasses();
                        if (this.getEditorMode() === 'wysiwyg' && this.editor.isEditable()) {
                                this.updateToolbar('TextStyle');
@@ -219,7 +219,7 @@ HTMLArea.TextStyle = Ext.extend(HTMLArea.Plugin, {
         * This handler gets called when the toolbar is being updated
         */
        onUpdateToolbar: function (button, mode, selectionEmpty, ancestors) {
-               if (mode === 'wysiwyg' && this.editor.isEditable() && this.textStyles.isReady) {
+               if (mode === 'wysiwyg' && this.editor.isEditable() && this.textStyles.isReady()) {
                        this.updateToolbar(button.itemId);
                }
        },
@@ -303,7 +303,7 @@ HTMLArea.TextStyle = Ext.extend(HTMLArea.Plugin, {
        buildDropDownOptions: function (dropDown, nodeName) {
                var store = dropDown.getStore();
                this.initializeDropDown(dropDown);
-               if (this.textStyles.isReady) {
+               if (this.textStyles.isReady()) {
                        var allowedClasses = {};
                        if (this.REInlineTags.test(nodeName)) {
                                if (typeof this.cssArray[nodeName] !== 'undefined') {