[TASK] RTE: Migrate toolbar text item to plain JavaScript 26/35526/2
authorStanislas Rolland <typo3@sjbr.ca>
Tue, 16 Dec 2014 21:16:55 +0000 (16:16 -0500)
committerStanislas Rolland <typo3@sjbr.ca>
Tue, 16 Dec 2014 21:22:56 +0000 (22:22 +0100)
Releases: master
Resolves: #63941
Change-Id: I84e1c3ffd6448d1e69e46d1aac22d88f95a29d82
Reviewed-on: http://review.typo3.org/35526
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/DOM/DOM.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Editor/Toolbar.js
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Extjs/ux/ToolbarText.js [deleted file]
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/ToolbarText.js [new file with mode: 0644]
typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/Plugins/TextIndicator.js

index ce042c8..e03317e 100644 (file)
@@ -823,7 +823,7 @@ class RteHtmlAreaBase extends \TYPO3\CMS\Backend\Rte\AbstractRte {
                        'DOM/Walker',
                        'Configuration/Config',
                        'Extjs/ux/Button',
-                       'Extjs/ux/ToolbarText',
+                       'Toolbar/ToolbarText',
                        'Extjs/ux/Combo',
                        'Extjs/ColorPalette',
                        'Extjs/ux/ColorMenu',
index 0163a3f..a4fb671 100644 (file)
@@ -539,6 +539,21 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/DOM/DOM',
                        if (typeof size.height !== 'undefined') {
                                node.style.height = size.height + 'px';
                        }
+               },
+
+               /**
+                * Set the style of a node
+                *
+                * @param object node
+                * @param object style
+                * @return void
+                */
+               setStyle: function (node, style) {
+                       for (var property in style) {
+                               if (typeof style[property] !== 'undefined') {
+                                       node.style[property] = style[property];
+                               }
+                       }
                }
        };
 
index c7d51d4..f6e1af9 100644 (file)
@@ -20,7 +20,7 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/Event/Event',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/Combo',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/Button',
-       'TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/ToolbarText'],
+       'TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/ToolbarText'],
        function (Util, Dom, Event, Combo, Button, ToolbarText) {
 
        /**
@@ -141,37 +141,40 @@ define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Editor/Toolbar',
                 * @return void
                 */
                add: function (item) {
-                       if (item.xtype === 'htmlareacombo') {
-                               var wrapDiv = document.createElement('div');
-                               Dom.addClass(wrapDiv, 'x-form-item');
-                               wrapDiv = this.el.appendChild(wrapDiv);
-                               item.render(wrapDiv);
-                               if (item.helpTitle) {
-                                       item.getEl().dom.setAttribute('title', item.helpTitle);
-                               }
-                               wrapDiv.appendChild(item.getEl().dom);
-                               if (item.fieldLabel) {
-                                       var textDiv = document.createElement('div');
-                                       Dom.addClass(textDiv, 'x-form-item');
-                                       Dom.addClass(textDiv, 'toolbar-text');
-                                       var text = document.createElement('label');
-                                       text.innerHTML = item.fieldLabel;
-                                       Dom.addClass(text, 'x-form-item-label');
-                                       text.setAttribute('for', item.getEl().dom.id);
-                                       textDiv.appendChild(text);
-                                       this.el.insertBefore(textDiv, wrapDiv);
-                               }
-                       } else {
-                               item.render(this.el);
-                               var itemDiv = this.el.appendChild(item.getEl().dom);
-                               Dom.addClass(item.getEl().dom, 'x-form-item');
-                       }
-                       if (item.xtype === 'htmlareatoolbartext') {
-                               Dom.addClass(item.getEl().dom, 'x-form-item-label');
-                       }
                        if (item.itemId) {
                                this.items[item.itemId] = item;
                        }
+                       switch (item.xtype) {
+                               case 'htmlareacombo':
+                                       var wrapDiv = document.createElement('div');
+                                       Dom.addClass(wrapDiv, 'x-form-item');
+                                       wrapDiv = this.el.appendChild(wrapDiv);
+                                       item.render(wrapDiv);
+                                       if (item.helpTitle) {
+                                               item.getEl().dom.setAttribute('title', item.helpTitle);
+                                       }
+                                       wrapDiv.appendChild(item.getEl().dom);
+                                       if (item.fieldLabel) {
+                                               var textDiv = document.createElement('div');
+                                               Dom.addClass(textDiv, 'x-form-item');
+                                               Dom.addClass(textDiv, 'toolbar-text');
+                                               var text = document.createElement('label');
+                                               text.innerHTML = item.fieldLabel;
+                                               Dom.addClass(text, 'x-form-item-label');
+                                               text.setAttribute('for', item.getEl().dom.id);
+                                               textDiv.appendChild(text);
+                                               this.el.insertBefore(textDiv, wrapDiv);
+                                       }
+                                       break;
+                               case 'htmlareabutton':
+                                       item.render(this.el);
+                                       var itemDiv = this.el.appendChild(item.getEl().dom);
+                                       Dom.addClass(item.getEl().dom, 'x-form-item');
+                                       break;
+                               case 'htmlareatoolbartext':
+                                       item.render(this.el);
+                                       break;
+                       }
                },
 
                /**
diff --git a/typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Extjs/ux/ToolbarText.js b/typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Extjs/ux/ToolbarText.js
deleted file mode 100644 (file)
index 0fe4321..0000000
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * 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!
- */
-
-/**
- * Ext.ux.Toolbar.HTMLAreaToolbarText extends Ext.Toolbar.TextItem
- */
-define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Extjs/ux/ToolbarText',
-       ['TYPO3/CMS/Rtehtmlarea/HTMLArea/Event/Event'],
-       function (Event) {
-
-       var ToolbarText = Ext.extend(Ext.Toolbar.TextItem, {
-
-               /**
-                * Constructor
-                */
-               initComponent: function () {
-                       ToolbarText.superclass.initComponent.call(this);
-                       this.addListener({
-                               afterrender: {
-                                       fn: this.initEventListeners,
-                                       single: true
-                               }
-                       });
-               },
-
-               /**
-                * Initialize listeners
-                */
-               initEventListeners: function () {
-                       // Monitor toolbar updates in order to refresh the state of the button
-                       var self = this;
-                       Event.on(this.getToolbar(), 'HTMLAreaEventToolbarUpdate', function (event, mode, selectionEmpty, ancestors, endPointsInSameBlock) { Event.stopEvent(event); self.onUpdateToolbar(mode, selectionEmpty, ancestors, endPointsInSameBlock); return false; });
-               },
-
-               /**
-                * Get a reference to the editor
-                */
-               getEditor: function() {
-                       return RTEarea[this.toolbar.editorId].editor;
-               },
-
-               /**
-                * Get a reference to the toolbar
-                */
-               getToolbar: function() {
-                       return this.toolbar;
-               },
-
-               /**
-                * Handler invoked when the toolbar is updated
-                */
-               onUpdateToolbar: function (mode, selectionEmpty, ancestors, endPointsInSameBlock) {
-                       this.setDisabled(mode === 'textmode' && !this.textMode);
-                       if (!this.disabled) {
-                               this.plugins['onUpdateToolbar'](this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
-                       }
-               }
-       });
-
-       return ToolbarText;
-
-});
diff --git a/typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/ToolbarText.js b/typo3/sysext/rtehtmlarea/Resources/Public/JavaScript/HTMLArea/Toolbar/ToolbarText.js
new file mode 100644 (file)
index 0000000..dad39e4
--- /dev/null
@@ -0,0 +1,112 @@
+/*
+ * 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!
+ */
+
+/**
+ * A text item in the toolbar
+ */
+define('TYPO3/CMS/Rtehtmlarea/HTMLArea/Toolbar/ToolbarText',
+       ['TYPO3/CMS/Rtehtmlarea/HTMLArea/DOM/DOM',
+       'TYPO3/CMS/Rtehtmlarea/HTMLArea/Util/Util',
+       'TYPO3/CMS/Rtehtmlarea/HTMLArea/Event/Event'],
+       function (Dom, Util, Event) {
+
+       /**
+        * Toolbar text item constructor
+        */
+       var ToolbarText = function (config) {
+               Util.apply(this, config);
+       };
+
+       ToolbarText.prototype = {
+
+               /**
+                * Render the text item (called by the toolbar)
+                */
+               render: function () {
+                       this.el = document.createElement('div');
+                       Dom.addClass(this.el, 'x-form-item');
+                       Dom.addClass(this.el, 'x-form-item-label');
+                       if (this.id) {
+                               this.el.setAttribute('id', this.id);
+                       }
+                       if (typeof this.cls === 'string') {
+                               Dom.addClass(this.el, this.cls);
+                       }
+                       if (typeof this.text === 'string') {
+                               this.el.innerHTML = this.text;
+                       }
+                       if (typeof this.tooltip === 'string') {
+                               this.el.setAttribute('title', this.tooltip);
+                       }
+                       this.getToolbar().getEl().appendChild(this.el);
+                       this.initEventListeners();
+               },
+
+               /**
+                * Get the element to which the item is rendered
+                */
+               getEl: function () {
+                       return this.el;
+               },
+
+               /**
+                * Initialize listeners
+                */
+               initEventListeners: function () {
+                       // Monitor toolbar updates in order to refresh the state of the text item
+                       var self = this;
+                       Event.on(this.getToolbar(), 'HTMLAreaEventToolbarUpdate', function (event, mode, selectionEmpty, ancestors, endPointsInSameBlock) { Event.stopEvent(event); self.onUpdateToolbar(mode, selectionEmpty, ancestors, endPointsInSameBlock); return false; });
+               },
+
+               /**
+                * Get a reference to the editor
+                */
+               getEditor: function() {
+                       return RTEarea[this.toolbar.editorId].editor;
+               },
+
+               /**
+                * Get a reference to the toolbar
+                */
+               getToolbar: function() {
+                       return this.toolbar;
+               },
+
+               /**
+                * Handler invoked when the toolbar is updated
+                */
+               onUpdateToolbar: function (mode, selectionEmpty, ancestors, endPointsInSameBlock) {
+                       this.setDisabled(mode === 'textmode' && !this.textMode);
+                       if (!this.disabled) {
+                               this.plugins['onUpdateToolbar'](this, mode, selectionEmpty, ancestors, endPointsInSameBlock);
+                       }
+               },
+
+               /**
+                * Setting disabled/enabled by boolean.
+                * @param boolean disabled
+                * @return void
+                */
+               setDisabled: function(disabled){
+                       this.el.disabled = disabled;
+                       if (disabled) {
+                               Dom.addClass(this.el, this.disabledClass);
+                       } else {
+                               Dom.removeClass(this.el, this.disabledClass);
+                       }
+               }
+       };
+
+       return ToolbarText;
+
+});
index b23d425..87d200c 100644 (file)
 define('TYPO3/CMS/Rtehtmlarea/Plugins/TextIndicator',
        ['TYPO3/CMS/Rtehtmlarea/HTMLArea/Plugin/Plugin',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/UserAgent/UserAgent',
+       'TYPO3/CMS/Rtehtmlarea/HTMLArea/DOM/DOM',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/Event/Event',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/Util/Color',
        'TYPO3/CMS/Rtehtmlarea/HTMLArea/Util/Util'],
-       function (Plugin, UserAgent, Event, Color, Util) {
+       function (Plugin, UserAgent, Dom, Event, Color, Util) {
 
        var TextIndicator = function (editor, pluginName) {
                this.constructor.super.call(this, editor, pluginName);
@@ -129,8 +130,7 @@ define('TYPO3/CMS/Rtehtmlarea/Plugins/TextIndicator',
                                } catch(e) {
                                        style.fontStyle = 'normal';
                                }
-                               button.getEl().setStyle(style);
-                               button.getEl().dom.setAttribute('title', button.tooltip);
+                               Dom.setStyle(button.getEl(), style);
                        }
                }
        });