Fixed bug #9308: htmlArea RTE: link on colour name doesn't set colour

git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@4114 709f56b5-9817-0410-a4d7-c38de5d9e867

diff --git a/ChangeLog b/ChangeLog
index fa0a7b4..6068336 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,7 @@
+2008-09-14  Stanislas Rolland  <typo3@sjbr.ca>
+
+       * Fixed bug #9308: htmlArea RTE: link on colour name doesn't set colour
+
 2008-09-14  Jeff Segars  <jeff@webempoweredchurch.org>
 
        * Added feature #3687: Disable "versioning" and "moreoptions"-menuitem via contextMenu.[key].disableItems in User TSconfig (thanks to Susanne Moog)

diff --git a/typo3/sysext/rtehtmlarea/ChangeLog b/typo3/sysext/rtehtmlarea/ChangeLog
index d56e614..ac3c034 100644 (file)
--- a/typo3/sysext/rtehtmlarea/ChangeLog
+++ b/typo3/sysext/rtehtmlarea/ChangeLog
@@ -1,3 +1,7 @@
+2008-09-14  Stanislas Rolland  <typo3@sjbr.ca>
+
+       * Fixed bug #9308: htmlArea RTE: link on colour name doesn't set colour
+
 2008-09-13  Stanislas Rolland  <typo3@sjbr.ca>
 
        * Fixed bug #9277: Incorrect size of htmlArea RTE dialogue windows in Google Chrome browser

diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Color/typo3color.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Color/typo3color.js
index 77aa2ab..0d1c35e 100644 (file)
--- a/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Color/typo3color.js
+++ b/typo3/sysext/rtehtmlarea/htmlarea/plugins/TYPO3Color/typo3color.js
@@ -149,13 +149,28 @@ TYPO3Color = HTMLArea.Plugin.extend({
                var editor = dialog.editor;
                var doc = editor._doc;
                var buttonId = dialog.arguments.buttonId;
-               dialog.content.innerHTML = this.renderPopupSelectColor(buttonId, dialog, dialog.arguments.title);
+               var initialValue;
+               switch (buttonId) {
+                       case "ForeColor"        :
+                               initialValue = HTMLArea._colorToRgb(doc.queryCommandValue("ForeColor"));
+                               break;
+                       case "HiliteColor"      :
+                               initialValue = doc.queryCommandValue(((HTMLArea.is_ie || HTMLArea.is_safari) ? "BackColor" : "HiliteColor"));
+                               if (/transparent/i.test(initialValue)) {
+                                       // Mozilla
+                                       initialValue = doc.queryCommandValue("BackColor");
+                               }
+                               initialValue = HTMLArea._colorToRgb(initialValue);
+                               break;
+               }
+               dialog.content.innerHTML = this.renderPopupSelectColor(buttonId, dialog, dialog.arguments.title, initialValue);
                var colorTable = dialog.document.getElementById("colorTable");
                colorTable.onclick = function(e) {
-                       if(!e) var e = dialog.dialogWindow.event;
-                       var target = e.target ? e.target : e.srcElement;
-                       if (target.nodeType == 3) target = target.parentNode;
-                       dialog.document.getElementById(buttonId).value = target.bgColor ? target.bgColor : "";
+                       dialog.callFormInputHandler();
+                       return false;
+               };
+               var colorForm = dialog.document.getElementById("HA-color-select-form");
+               colorForm.onsubmit = function (e) {
                        dialog.callFormInputHandler();
                        return false;
                };
@@ -198,7 +213,7 @@ TYPO3Color = HTMLArea.Plugin.extend({
        selectColorCodeInit : function(dialog) {
                var buttonId = dialog.arguments.buttonId;
                var field = dialog.arguments.field;
-               dialog.content.innerHTML = this.renderPopupSelectColor(buttonId, dialog, this.localize(dialog.arguments.title));
+               dialog.content.innerHTML = this.renderPopupSelectColor(buttonId, dialog, this.localize(dialog.arguments.title), field.value);
                var colorTable = dialog.document.getElementById("colorTable");
                colorTable.onclick = function(e) {
                        if(!e) var e = dialog.dialogWindow.event;
@@ -214,6 +229,11 @@ TYPO3Color = HTMLArea.Plugin.extend({
                        dialog.callFormInputHandler();
                        return false;
                };
+               var colorForm = dialog.document.getElementById("HA-color-select-form");
+               colorForm.onsubmit = function(e) {
+                       dialog.callFormInputHandler();
+                       return false;
+               };
                if (buttonId === "color") {
                        dialog.document.getElementById(buttonId+"Current").style.backgroundColor = field.value;
                } else if (buttonId === "tag"){
@@ -265,7 +285,7 @@ TYPO3Color = HTMLArea.Plugin.extend({
        /**
         * Making color selector table
         */
-       renderPopupSelectColor : function (sID,dialog,title) {
+       renderPopupSelectColor : function (sID,dialog,title,initialValue) {
                var editor = this.editor;
                var cfgColors = this.colorsConfiguration;
                var colorDef;
@@ -277,8 +297,8 @@ TYPO3Color = HTMLArea.Plugin.extend({
                var szColorId = "";
                
                sz = '<div class="title">' + title + '</div>';
-               sz += '<table style="width:100%"><tr><td id="HA-layout"><fieldset>';
-               sz += '<input type="hidden" name="' + sID + '" id="' + sID + '" value="" />';
+               sz += '<form id="HA-color-select-form"><table style="width:100%"><tr><td id="HA-layout"><fieldset>';
+               sz += '<input type="hidden" name="' + sID + '" id="' + sID + '" value="' + initialValue + '" />';
                sz += '<table style="width:100%;"><tr><td style="vertical-align: middle;"><span style="margin-left: 5px; height: 1em;" class="dialog buttonColor" ';
                sz += '         onMouseover="className += \' buttonColor-hilite\';" ';
                sz += '         onMouseout="className = \'buttonColor\';">';
@@ -287,10 +307,9 @@ TYPO3Color = HTMLArea.Plugin.extend({
                sz += '         onMouseover="className += \' nocolor-hilite\';" ';
                sz += '         onMouseout="className = \'nocolor\';"';
                sz += ' >&#x00d7;</span></span></td><td>';
-               sz += '<table ';
-               sz += ' onMouseout="document.getElementById(\'' + szID + '\').style.backgroundColor=\'\';" ';
-               sz += ' onMouseover="if(' + HTMLArea.is_ie + '){ if(event.srcElement.bgColor) document.getElementById(\'' + szID + '\').style.backgroundColor=event.srcElement.bgColor; } else { if (event.target.bgColor) document.getElementById(\'' + szID + '\').style.backgroundColor=event.target.bgColor; }" ';
-               sz += ' class="colorTable" cellspacing="0" cellpadding="0" id="colorTable">';
+               sz += '<table class="colorTable" cellspacing="0" cellpadding="0" id="colorTable">';
+               var onMouseOut = ' onMouseout="document.getElementById(\'' + szID + '\').style.backgroundColor=\'\'; document.getElementById(\'' + sID + '\').value=\'\';"';
+               var onMouseOver = ' onMouseover="if(' + HTMLArea.is_ie + '){ if (event.srcElement.bgColor) { document.getElementById(\'' + szID + '\').style.backgroundColor = event.srcElement.bgColor; document.getElementById(\'' + sID + '\').value = event.srcElement.bgColor;} } else { if (event.target.bgColor) { document.getElementById(\'' + szID + '\').style.backgroundColor=event.target.bgColor; document.getElementById(\'' + sID + '\').value=event.target.bgColor;} };" ';
                        // Making colorPicker
                if (!this.disableColorPicker) {
                        for ( var r = 0; r < iColors; r++) {
@@ -298,7 +317,7 @@ TYPO3Color = HTMLArea.Plugin.extend({
                                for (var g = iColors-1; g >= 0; g--) {
                                        for (var b=iColors-1;b>=0;b--) {
                                                szColor = cPick[r]+cPick[g]+cPick[b];
-                                               sz+='<td bgcolor="#'+szColor+'" title="#'+szColor+'">&nbsp;</td>';
+                                               sz+='<td bgcolor="#'+szColor+'" title="#'+szColor+'"' + onMouseOut + onMouseOver +'>&nbsp;</td>';
                                        }
                                }
                                sz+='</tr>';
@@ -311,19 +330,19 @@ TYPO3Color = HTMLArea.Plugin.extend({
                        if (iCfgColors && !this.disableColorPicker) {
                                sz += '<tr><td colspan="36"></td></tr>';
                        }
+                       onMouseOverTitle = ' onMouseover="if(' + HTMLArea.is_ie + '){ if (document.getElementById(event.srcElement.id+\'Value\')) { document.getElementById(\'' + szID + '\').style.backgroundColor = document.getElementById(event.srcElement.id+\'Value\').bgColor; document.getElementById(\'' + sID + '\').value = document.getElementById(event.srcElement.id+\'Value\').bgColor;} } else { if (document.getElementById(event.target.id+\'Value\')) { document.getElementById(\'' + szID + '\').style.backgroundColor=document.getElementById(event.target.id+\'Value\').bgColor; document.getElementById(\'' + sID + '\').value=document.getElementById(event.target.id+\'Value\').bgColor;} };" ';
                        for (var theColor = 0; theColor < iCfgColors; theColor++) {
                                colorDef = cfgColors[theColor];
                                szColor = colorDef[1];
-                               sz += '<tr>';
-                               sz += '<td style="width:36px;" colspan="6" bgcolor="'+szColor+'" title="'+szColor+'">&nbsp;</td>';
-                               sz += '<td colspan=2></td>';
-                               sz += '<td colspan=28><nobr>'+colorDef[0]+'</nobr></td>';
+                               sz += '<tr' + onMouseOut + '>';
+                               sz += '<td id="colorDef' + theColor + 'Value"' + onMouseOver + ' style="width:36px;" colspan="6" bgcolor="'+szColor+'" title="'+szColor+'">&nbsp;</td>';
+                               sz += '<td class="colorTitle" id="colorDef' + theColor + '"title="' + szColor + '"' + onMouseOverTitle + 'colspan="30">'+colorDef[0]+'</td>';
                                sz += '</tr>';
                        }
                }
                
                sz += '</table></td></tr></table>';
-               sz += '</fieldset></td></tr><tr><td id="HA-style"></td></tr></table>';
+               sz += '</fieldset></td></tr><tr><td id="HA-style"></td></tr></table></form>';
                return sz;
        }
 });

diff --git a/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css b/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
index ea8cc5b..12d5bad 100644 (file)
--- a/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
+++ b/typo3/sysext/rtehtmlarea/htmlarea/skins/default/htmlarea.css
@@ -418,6 +418,10 @@
        width:6px;
        cursor:pointer;
 }
+.colorTable td.colorTitle {
+       width:auto;
+       padding-left:10px;
+}
 /* Selectors for the InsertImage popup */
 .popupwin div.imagepreview {
        text-align:center;

diff --git a/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css b/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css
index 0b48e89..13d0e3b 100644 (file)
--- a/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css
+++ b/typo3/sysext/t3skin/rtehtmlarea/htmlarea.css
@@ -428,6 +428,10 @@
        width:6px;
        cursor:pointer;
 }
+.colorTable td.colorTitle {
+       width:auto;
+       padding-left:10px;
+}
 /* Selectors for the InsertImage popup */
 .popupwin div.imagepreview {
        text-align:center;