faa097cdbd7d80dc8d7ad3499ed77f2497cb65de
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / htmlarea / plugins / TYPO3Color / typo3color.js
1 /***************************************************************
2 * Copyright notice
3 *
4 * (c) 2004-2008 Stanislas Rolland <typo3(arobas)sjbr.ca>
5 * All rights reserved
6 *
7 * This script is part of the TYPO3 project. The TYPO3 project is
8 * free software; you can redistribute it and/or modify
9 * it under the terms of the GNU General Public License as published by
10 * the Free Software Foundation; either version 2 of the License, or
11 * (at your option) any later version.
12 *
13 * The GNU General Public License can be found at
14 * http://www.gnu.org/copyleft/gpl.html.
15 * A copy is found in the textfile GPL.txt and important notices to the license
16 * from the author is found in LICENSE.txt distributed with these scripts.
17 *
18 *
19 * This script is distributed in the hope that it will be useful,
20 * but WITHOUT ANY WARRANTY; without even the implied warranty of
21 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
22 * GNU General Public License for more details.
23 *
24 *
25 * This copyright notice MUST APPEAR in all copies of the script!
26 ***************************************************************/
27 /*
28 * TYPO3 Color Plugin for TYPO3 htmlArea RTE
29 *
30 * TYPO3 SVN ID: $Id: typo3color.js $
31 */
32 TYPO3Color = HTMLArea.Plugin.extend({
33
34 constructor : function(editor, pluginName) {
35 this.base(editor, pluginName);
36 },
37
38 /*
39 * This function gets called by the class constructor
40 */
41 configurePlugin : function(editor) {
42
43 this.buttonsConfiguration = this.editorConfiguration.buttons;
44 this.colorsConfiguration = this.editorConfiguration.colors;
45 this.disableColorPicker = this.editorConfiguration.disableColorPicker;
46
47 /*
48 * Registering plugin "About" information
49 */
50 var pluginInformation = {
51 version : "2.1",
52 developer : "Stanislas Rolland",
53 developerUrl : "http://www.sjbr.ca/",
54 copyrightOwner : "Stanislas Rolland",
55 sponsor : "SJBR",
56 sponsorUrl : "http://www.sjbr.ca/",
57 license : "GPL"
58 };
59 this.registerPluginInformation(pluginInformation);
60
61 /*
62 * Registering the buttons
63 */
64 var buttonList = this.buttonList, buttonId;
65 for (var i = 0; i < buttonList.length; ++i) {
66 var button = buttonList[i];
67 buttonId = button[0];
68 var buttonConfiguration = {
69 id : buttonId,
70 tooltip : this.localize(buttonId),
71 action : "onButtonPress",
72 hotKey : (this.buttonsConfiguration[button[1]] ? this.buttonsConfiguration[button[1]].hotKey : null),
73 dialog : true
74 };
75 this.registerButton(buttonConfiguration);
76 }
77
78 return true;
79 },
80
81 /*
82 * The list of buttons added by this plugin
83 */
84 buttonList : [
85 ["ForeColor", "textcolor"],
86 ["HiliteColor", "bgcolor"]
87 ],
88
89 /*
90 * This function gets called when the button was pressed.
91 *
92 * @param object editor: the editor instance
93 * @param string id: the button id or the key
94 * @param object target: the target element of the contextmenu event, when invoked from the context menu
95 *
96 * @return boolean false if action is completed
97 */
98 onButtonPress : function(editor, id, target) {
99 // Could be a button or its hotkey
100 var buttonId = this.translateHotKey(id);
101 buttonId = buttonId ? buttonId : id;
102
103 switch (buttonId) {
104 case "ForeColor" :
105 case "HiliteColor" :
106 this.dialogSelectColor(buttonId,"","");
107 break;
108 default:
109 break;
110 }
111 },
112
113 dialogSelectColor : function (buttonId, element, field, dialogOpener) {
114 var dimensions = {
115 width : 500,
116 height : 245
117 };
118 var arguments = {
119 title : buttonId + "_title",
120 buttonId : buttonId,
121 element : element,
122 field : field
123 };
124 // buttonId's "color" and "tag" are not registered but used to interface with the Table Operations and QuickTag plugins
125 switch (buttonId) {
126 case "ForeColor" :
127 case "HiliteColor" :
128 var selectColorWithButtonInitFunctRef = this.makeFunctionReference("selectColorWithButtonInit");
129 arguments.initialize = selectColorWithButtonInitFunctRef;
130 this.dialog = this.openDialog(buttonId, "", "setColor", arguments, dimensions, "yes");
131 break;
132 case "color" :
133 var selectColorCodeInitFunctRef = this.makeFunctionReference("selectColorCodeInit");
134 arguments.initialize = selectColorCodeInitFunctRef;
135 this.dialog = this.openDialog(buttonId, "", "setColor", arguments, dimensions, "yes", dialogOpener);
136 break;
137 case "tag" :
138 var selectColorCodeInitFunctRef = this.makeFunctionReference("selectColorCodeInit");
139 arguments.initialize = selectColorCodeInitFunctRef;
140 arguments.title = "color_title";
141 this.dialog = this.openDialog(buttonId, "", "setColorInTag", arguments, dimensions, "yes", dialogOpener);
142 }
143 },
144
145 /*
146 * Initialize the forecolor and the hilitecolor select color dialogues
147 */
148 selectColorWithButtonInit : function(dialog) {
149 var editor = dialog.editor;
150 var doc = editor._doc;
151 var buttonId = dialog.arguments.buttonId;
152 var initialValue;
153 switch (buttonId) {
154 case "ForeColor" :
155 initialValue = HTMLArea._colorToRgb(doc.queryCommandValue("ForeColor"));
156 break;
157 case "HiliteColor" :
158 initialValue = doc.queryCommandValue(((HTMLArea.is_ie || HTMLArea.is_safari) ? "BackColor" : "HiliteColor"));
159 if (/transparent/i.test(initialValue)) {
160 // Mozilla
161 initialValue = doc.queryCommandValue("BackColor");
162 }
163 initialValue = HTMLArea._colorToRgb(initialValue);
164 break;
165 }
166 dialog.content.innerHTML = this.renderPopupSelectColor(buttonId, dialog, dialog.arguments.title, initialValue);
167 var colorTable = dialog.document.getElementById("colorTable");
168 colorTable.onclick = function(e) {
169 dialog.callFormInputHandler();
170 return false;
171 };
172 var colorForm = dialog.document.getElementById("HA-color-select-form");
173 colorForm.onsubmit = function (e) {
174 dialog.callFormInputHandler();
175 return false;
176 };
177 var colorUnset = dialog.document.getElementById("colorUnset");
178 colorUnset.onclick = function(e) {
179 dialog.document.getElementById(buttonId).value="";
180 dialog.callFormInputHandler();
181 return false;
182 };
183 try {
184 with (dialog.document.getElementById(buttonId+"Current").style) {
185 switch (buttonId) {
186 case "ForeColor":
187 backgroundColor = HTMLArea._makeColor(doc.queryCommandValue("ForeColor"));
188 break;
189 case "HiliteColor":
190 backgroundColor = HTMLArea._makeColor(doc.queryCommandValue(((HTMLArea.is_ie || HTMLArea.is_safari) ? "BackColor" : "HiliteColor")));
191 if (/transparent/i.test(backgroundColor)) {
192 // Mozilla
193 backgroundColor = HTMLArea._makeColor(doc.queryCommandValue("BackColor"));
194 }
195 break;
196 }
197 }
198 } catch (e) { }
199 },
200
201 /*
202 * Set the color and close the ForeColor and the HiliteColor select color dialogues
203 */
204 setColor : function(dialog, params) {
205 this.processStyle(dialog, params, dialog.arguments.element, dialog.arguments.field);
206 dialog.close();
207 },
208
209 /*
210 * Initialize the case=color select color dialogue
211 * This case is used by the Table Operations and QuickTag plugins
212 */
213 selectColorCodeInit : function(dialog) {
214 var buttonId = dialog.arguments.buttonId;
215 var field = dialog.arguments.field;
216 dialog.content.innerHTML = this.renderPopupSelectColor(buttonId, dialog, this.localize(dialog.arguments.title), field.value);
217 var colorTable = dialog.document.getElementById("colorTable");
218 colorTable.onclick = function(e) {
219 if(!e) var e = dialog.dialogWindow.event;
220 var target = e.target ? e.target : e.srcElement;
221 if (target.nodeType == 3) target = target.parentNode;
222 dialog.document.getElementById(buttonId).value = target.bgColor;
223 dialog.callFormInputHandler();
224 return false;
225 };
226 var colorUnset = dialog.document.getElementById("colorUnset");
227 colorUnset.onclick = function(e) {
228 dialog.document.getElementById(buttonId).value = "";
229 dialog.callFormInputHandler();
230 return false;
231 };
232 var colorForm = dialog.document.getElementById("HA-color-select-form");
233 colorForm.onsubmit = function(e) {
234 dialog.callFormInputHandler();
235 return false;
236 };
237 if (buttonId === "color") {
238 dialog.document.getElementById(buttonId+"Current").style.backgroundColor = field.value;
239 } else if (buttonId === "tag"){
240 dialog.document.getElementById(buttonId+"Current").style.backgroundColor = "";
241 }
242 },
243
244 /*
245 * Sets the color
246 */
247 setColorInTag : function(dialog, params) {
248 dialog.arguments.field.insertColor(params.tag);
249 dialog.close();
250 },
251
252 /*
253 * Applies the style found in "params" to the given element
254 */
255 processStyle : function (dialog, params, element, field) {
256 var editor = this.editor;
257 for (var i in params) {
258 var val = params[i];
259 switch (i) {
260 case "ForeColor":
261 if(val) {
262 editor._doc.execCommand("ForeColor", false, val);
263 } else {
264 var parentElement = editor.getParentElement();
265 parentElement.style.color = "";
266 }
267 break;
268 case "HiliteColor":
269 if(val) {
270 if(HTMLArea.is_ie || HTMLArea.is_safari) editor._doc.execCommand("BackColor", false, val);
271 else editor._doc.execCommand("HiliteColor", false, val);
272 } else {
273 var parentElement = editor.getParentElement();
274 parentElement.style.backgroundColor = "";
275 }
276 break;
277 case "color":
278 element.style.backgroundColor = val;
279 field.value = val;
280 break;
281 }
282 }
283 },
284
285 /**
286 * Making color selector table
287 */
288 renderPopupSelectColor : function (sID,dialog,title,initialValue) {
289 var editor = this.editor;
290 var cfgColors = this.colorsConfiguration;
291 var colorDef;
292 var szID = sID + "Current";
293 var sz;
294 var cPick = new Array("00","33","66","99","CC","FF");
295 var iColors = cPick.length;
296 var szColor = "";
297 var szColorId = "";
298
299 sz = '<div class="title">' + title + '</div>';
300 sz += '<form id="HA-color-select-form"><fieldset>';
301 sz += '<input type="hidden" name="' + sID + '" id="' + sID + '" value="' + initialValue + '" />';
302 sz += '<div class="buttonColor" ';
303 sz += ' onMouseover="className += \' buttonColor-hilite\';" ';
304 sz += ' onMouseout="className = \'buttonColor\';">';
305 sz += ' <span id="' + szID + '" class="chooser">&nbsp;</span>';
306 sz += ' <span id="colorUnset" class="nocolor" title="' + "no_color" + '" ';
307 sz += ' onMouseover="className += \' nocolor-hilite\';" ';
308 sz += ' onMouseout="className = \'nocolor\';"';
309 sz += ' >&#x00d7;</span></div>';
310 sz += '<div class="colorTableWrapper"><table class="colorTable" cellspacing="0" cellpadding="0" id="colorTable">';
311 var onMouseOut = ' onMouseout="document.getElementById(\'' + szID + '\').style.backgroundColor=\'\'; document.getElementById(\'' + sID + '\').value=\'\';"';
312 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;} };" ';
313 // Making colorPicker
314 if (!this.disableColorPicker) {
315 for ( var r = 0; r < iColors; r++) {
316 sz+='<tr>';
317 for (var g = iColors-1; g >= 0; g--) {
318 for (var b=iColors-1;b>=0;b--) {
319 szColor = cPick[r]+cPick[g]+cPick[b];
320 sz+='<td bgcolor="#'+szColor+'" title="#'+szColor+'"' + onMouseOut + onMouseOver +'>&nbsp;</td>';
321 }
322 }
323 sz+='</tr>';
324 }
325 }
326
327 // Making specific color selector:
328 if (cfgColors) {
329 var iCfgColors = cfgColors.length;
330 if (iCfgColors && !this.disableColorPicker) {
331 sz += '<tr><td colspan="36"></td></tr>';
332 }
333 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;} };" ';
334 for (var theColor = 0; theColor < iCfgColors; theColor++) {
335 colorDef = cfgColors[theColor];
336 szColor = colorDef[1];
337 sz += '<tr' + onMouseOut + '>';
338 sz += '<td id="colorDef' + theColor + 'Value"' + onMouseOver + ' style="width:36px;" colspan="6" bgcolor="'+szColor+'" title="'+szColor+'">&nbsp;</td>';
339 sz += '<td class="colorTitle" id="colorDef' + theColor + '"title="' + szColor + '"' + onMouseOverTitle + 'colspan="30">'+colorDef[0]+'</td>';
340 sz += '</tr>';
341 }
342 }
343
344 sz += '</table></div>';
345 sz += '</fieldset></form>';
346 return sz;
347 }
348 });
349