[TASK] RTE: Cleanup toolbar items API 62/36162/2
authorStanislas Rolland <typo3@sjbr.ca>
Wed, 21 Jan 2015 15:41:15 +0000 (10:41 -0500)
committerStanislas Rolland <typo3@sjbr.ca>
Wed, 21 Jan 2015 15:48:22 +0000 (16:48 +0100)
This is a follow-up to the migration of toolbar ExtJS items to
plain JavaScript.

Releases: master
Resolves: #64407
Change-Id: I3784f397015241020e9fdb4f0740b707decc0666
Reviewed-on: http://review.typo3.org/36162
Reviewed-by: Stanislas Rolland <typo3@sjbr.ca>
Tested-by: Stanislas Rolland <typo3@sjbr.ca>
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Toolbar.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/Button.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/Select.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/ToolbarText.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/BlockElements.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/BlockStyle.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/InlineElements.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/Language.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/SelectFont.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/TextStyle.js

index c3ad98c..45fa1b9 100644 (file)
@@ -144,7 +144,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
                        if (item.itemId) {
                                this.items[item.itemId] = item;
                        }
-                       item.render(this.el);
+                       item.render(this);
                },
 
                /**
index fcfc1a7..c696368 100644 (file)
@@ -30,7 +30,13 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',
 
        Button.prototype = {
 
-               render: function () {
+               /**
+                * Render the button item (called by the toolbar)
+                *
+                * @param object container: the container of the button (the toolbar object)
+                * @return void
+                */
+               render: function (container) {
                        this.el = document.createElement('div');
                        Dom.addClass(this.el, 'x-form-item');
                        Dom.addClass(this.el, 'button');
@@ -59,7 +65,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',
                        }
                        this.buttonElement.innerHTML = '&nbsp;';
                        this.el.appendChild(this.buttonElement);
-                       this.getToolbar().getEl().appendChild(this.el);
+                       container.getEl().appendChild(this.el);
                        this.initEventListeners();
                },
 
@@ -88,7 +94,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',
                 * Get a reference to the editor
                 */
                getEditor: function() {
-                       return RTEarea[this.toolbar.editorId].editor;
+                       return this.getToolbar().getEditor();
                },
 
                /**
@@ -217,14 +223,17 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Button',
                },
 
                /**
+                * Css class applied when the item is disabled
+                */
+               disabledClass: 'buttonDisabled',
+
+               /**
                 * Setting disabled/enabled by boolean.
                 * @param boolean disabled
                 * @return void
                 */
-               disabledClass: 'buttonDisabled',
                setDisabled: function(disabled){
                        this.disabled = disabled;
-                       this.buttonElement.disabled = disabled;
                        if (disabled) {
                                Dom.addClass(this.el, this.disabledClass);
                        } else {
index 8e6a222..5982024 100644 (file)
@@ -31,7 +31,13 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Select',
 
        Select.prototype = {
 
-               render: function () {
+               /**
+                * Render the select item (called by the toolbar)
+                *
+                * @param object container: the container of the select (the toolbar object)
+                * @return void
+                */
+               render: function (container) {
                        this.el = document.createElement('div');
                        Dom.addClass(this.el, 'x-form-item');
                        this.selectElement = document.createElement('select');
@@ -58,7 +64,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Select',
                                }
                        }
                        this.selectElement = this.el.appendChild(this.selectElement);
-                       this.el = this.getToolbar().getEl().appendChild(this.el);
+                       this.el = container.getEl().appendChild(this.el);
                        if (this.fieldLabel) {
                                var textDiv = document.createElement('div');
                                Dom.addClass(textDiv, 'x-form-item');
@@ -179,6 +185,18 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Select',
                },
 
                /**
+                * Set the current value based on index
+                *
+                * @param int index: the index of the value to be selected
+                * @return void
+                */
+               setValueByIndex: function (index) {
+                       this.selectElement.selectedIndex = index >= 0 ? index : 0;
+                       this.collapsed = true;
+                       this.setSelectedOptionText();
+               },
+
+               /**
                 * Find the index of the value
                 *
                 * @param string value: the value to be looked up
@@ -197,6 +215,21 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/Select',
                },
 
                /**
+                * Get the value of the option specified by the index
+                *
+                * @param int index: the index of the option
+                * @return string the value of the option
+                */
+               getOptionValue: function (index) {
+                       var value = '';
+                       var option = this.selectElement.options[index];
+                       if (option) {
+                               value = option.value;
+                       }
+                       return value;
+               },
+
+               /**
                 * Set the text of the selected option
                 *
                 * @return void
index b84dc28..c34b73c 100644 (file)
@@ -31,8 +31,11 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/ToolbarText',
 
                /**
                 * Render the text item (called by the toolbar)
+                *
+                * @param object container: the container of the toolbarText (the toolbar object)
+                * @return void
                 */
-               render: function () {
+               render: function (container) {
                        this.el = document.createElement('div');
                        Dom.addClass(this.el, 'x-form-item');
                        Dom.addClass(this.el, 'x-form-item-label');
@@ -48,7 +51,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/ToolbarText',
                        if (typeof this.tooltip === 'string') {
                                this.el.setAttribute('title', this.tooltip);
                        }
-                       this.getToolbar().getEl().appendChild(this.el);
+                       container.getEl().appendChild(this.el);
                        this.initEventListeners();
                },
 
@@ -69,13 +72,6 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/ToolbarText',
                },
 
                /**
-                * Get a reference to the editor
-                */
-               getEditor: function() {
-                       return RTEarea[this.toolbar.editorId].editor;
-               },
-
-               /**
                 * Get a reference to the toolbar
                 */
                getToolbar: function() {
@@ -93,12 +89,17 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/ToolbarText',
                },
 
                /**
+                * Css class applied when the item is disabled
+                */
+               disabledClass: 'buttonDisabled',
+
+               /**
                 * Setting disabled/enabled by boolean.
                 * @param boolean disabled
                 * @return void
                 */
                setDisabled: function(disabled){
-                       this.el.disabled = disabled;
+                       this.disabled = disabled;
                        if (disabled) {
                                Dom.addClass(this.el, this.disabledClass);
                        } else {
index d39fa3a..be5d40b 100644 (file)
@@ -1179,12 +1179,13 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/BlockElements',
                 */
                updateDropDown: function(select, deepestBlockAncestor, startAncestor) {
                        var index = -1;
+                       var value, item, text;
                        if (deepestBlockAncestor) {
                                var nodeName = deepestBlockAncestor.nodeName.toLowerCase();
                                // Could be a custom item ...
-                               var options = select.getOptions();
-                               for (var i = 0, n = options.length; i < n; i++) {
-                                       var item = this.formatBlockItems[options[i].value];
+                               for (var i = 0, n = select.getCount(); i < n; i++) {
+                                       value = select.getOptionValue(i);
+                                       item = this.formatBlockItems[value];
                                        if (item && item.tagName === nodeName && item.addClass && Dom.hasClass(deepestBlockAncestor, item.addClass)) {
                                                index = i;
                                                break;
@@ -1196,15 +1197,12 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/BlockElements',
                                }
                        }
                        if (index === -1) {
-                               var text = this.localize('No block');
-                               select.setFirstOption(text, 'none', text);
-                               select.setValue('none');
+                               text = this.localize('No block');
                        } else {
-                               var text = this.localize('Remove block');
-                               select.setFirstOption(text, 'none', text);
-                               var options = select.getOptions();
-                               select.setValue(options[index].value);
+                               text = this.localize('Remove block');
                        }
+                       select.setFirstOption(text, 'none', text);
+                       select.setValueByIndex(index);
                },
 
                /**
index 41a6940..852ee2a 100644 (file)
@@ -239,7 +239,7 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/BlockStyle',
                                case 'htmlareaselect':
                                        dropDown.removeAll();
                                        dropDown.setFirstOption(this.localize('No style'), 'none', this.localize('No style'));
-                                       dropDown.setValue('none');
+                                       dropDown.setValueByIndex(0);
                                        break;
                                case 'combo':
                                        var store = dropDown.getStore();
@@ -346,12 +346,10 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/BlockStyle',
                                                }
                                                // Remove already assigned classes from the dropDown box
                                                var selectedValue = dropDown.getValue();
-                                               var options;
                                                for (var i = 0, n = classNames.length; i < n; i++) {
                                                        index = dropDown.findValue(classNames[i]);
                                                        if (index !== -1) {
-                                                               options = dropDown.getOptions();
-                                                               if (options[index].value !== selectedValue) {
+                                                               if (dropDown.getOptionValue(index) !== selectedValue) {
                                                                        dropDown.removeAt(index);
                                                                }
                                                        }
index 0b2c8ba..caa5fff 100644 (file)
@@ -408,7 +408,7 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/InlineElements',
                        } else {
                                var text = this.localize('No markup');
                                select.setFirstOption(text, 'none', text);
-                               select.setValue('none');
+                               select.setValueByIndex(0);
                        }
                        select.setDisabled(!(select.getCount() > 1) || disabled);
                }
index 08d0c2f..9618e29 100644 (file)
@@ -165,12 +165,11 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/Language',
                        var select = this.getButton('Language');
                        if (select) {
                                var styleSheet = this.editor.document.styleSheets[0];
-                               var options = select.getOptions();
-                               var selector, style, rule;
-                               for (var i = 0, n = options.length; i < n; i++) {
-                                       var option = options[i];
-                                       selector = 'body.htmlarea-show-language-marks *[' + 'lang="' + option.value + '"]:before';
-                                       style = 'content: "' + option.value + ': ";';
+                               var value, selector, style, rule;
+                               for (var i = 0, n = select.getCount(); i < n; i++) {
+                                       value = select.getOptionValue(i);
+                                       selector = 'body.htmlarea-show-language-marks *[' + 'lang="' + value + '"]:before';
+                                       style = 'content: "' + value + ': ";';
                                        rule = selector + ' { ' + style + ' }';
                                        if (!UserAgent.isIEBeforeIE9) {
                                                try {
@@ -462,16 +461,17 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/Language',
                 * This function updates the language drop-down list
                 */
                updateValue: function (select, language, selectionEmpty, fullNodeSelected, endPointsInSameBlock) {
-                       if (language !== 'none' && (select.findValue(language) !== -1) && (selectionEmpty || fullNodeSelected || !endPointsInSameBlock)) {
+                       var index = select.findValue(language);
+                       if (index > 0 && (selectionEmpty || fullNodeSelected || !endPointsInSameBlock)) {
                                var text = this.localize('Remove language mark');
                                select.setFirstOption(text, 'none', text);
                                select.setValue(language);
                        } else {
                                var text = this.localize('No language mark');
                                select.setFirstOption(text, 'none', text);
-                               select.setValue('none');
+                               select.setValueByIndex(0);
                        }
-                       select.setDisabled(!(select.getCount()>1) || (selectionEmpty && /^body$/i.test(this.editor.getSelection().getParentElement().nodeName)));
+                       select.setDisabled(!(select.getCount() > 1) || (selectionEmpty && /^body$/i.test(this.editor.getSelection().getParentElement().nodeName)));
                }
        });
 
index bc8ad98..292578a 100644 (file)
@@ -252,17 +252,16 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/SelectFont',
                                        }
                                }
                                var index = -1;
-                               var options = select.getOptions();
                                if (value) {
-                                       for (var i = 0, n = options.length; i < n; i++) {
-                                               if (options[i].value.replace(/[\"\']/g, '') === value.replace(/, /g, ',').replace(/[\"\']/g, '')) {
+                                       for (var i = 0, n = select.getCount(); i < n; i++) {
+                                               if (select.getOptionValue(i).replace(/[\"\']/g, '') === value.replace(/, /g, ',').replace(/[\"\']/g, '')) {
                                                        index = i;
                                                        break;
                                                }
                                        }
                                }
                                if (index !== -1) {
-                                       select.setValue(options[index].value);
+                                       select.setValueByIndex(index);
                                } else if (select.getCount()) {
                                        select.setValue('none');
                                }
index 492e70b..6197e36 100644 (file)
@@ -388,7 +388,7 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/TextStyle',
                                        if (classNames.length) {
                                                var index = dropDown.findValue(classNames[classNames.length-1]);
                                                if (index !== -1) {
-                                                       dropDown.setValue(classNames[classNames.length-1]);
+                                                       dropDown.setValueByIndex(index);
                                                        if (!defaultClass) {
                                                                var text = this.localize('Remove style');
                                                                dropDown.setFirstOption(text, 'none', text);
@@ -413,8 +413,7 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/TextStyle',
                                                for (var i = 0, n = classNames.length; i < n; i++) {
                                                        index = dropDown.findValue(classNames[i]);
                                                        if (index !== -1) {
-                                                               options = dropDown.getOptions();
-                                                               if (options[index].value !== selectedValue) {
+                                                               if (dropDown.getOptionValue(index) !== selectedValue) {
                                                                        dropDown.removeAt(index);
                                                                }
                                                        }