bcfe2f7d29dce4db27a92a672e97e7752c617b29
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / htmlarea / plugins / TYPO3Color / typo3color.js
1 /***************************************************************
2 * Copyright notice
3 *
4 * (c) 2004-2008 Stanislas Rolland <stanislas.rolland(arobas)fructifor.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: $
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 : "1.7",
52 developer : "Stanislas Rolland",
53 developerUrl : "http://www.fructifor.ca/",
54 copyrightOwner : "Stanislas Rolland",
55 sponsor : "Fructifor Inc.",
56 sponsorUrl : "http://www.fructifor.ca/",
57 license : "GPL"
58 };
59 this.registerPluginInformation(pluginInformation);
60
61 /*
62 * Registering the buttons
63 */
64 var buttonList = this.buttonList;
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 // this function requires the file PopupWin
114 dialogSelectColor : function (buttonId, element, field, opener) {
115 var editor = this.editor;
116 var windowWidth = 470;
117 var windowHeight = 245;
118
119 // buttonId's "color" and "tag" are not registered but used to interface with the Table Operations and QuickTag plugins
120 switch (buttonId) {
121 case "ForeColor" :
122 case "HiliteColor" :
123 var selectColorInitFunctRef = TYPO3Color.selectColorCOInit(this, buttonId);
124 var setColorFunctRef = TYPO3Color.setColorCO(this);
125 this.dialog = new PopupWin(this.editor, this.localize(buttonId + "_title"), setColorFunctRef, selectColorInitFunctRef, windowWidth, windowHeight, editor._iframe.contentWindow);
126 break;
127 case "color" :
128 var selectColorInitFunctRef = TYPO3Color.selectColorColorInit(this, buttonId, field);
129 var setColorFunctRef = TYPO3Color.setColorColor(this, element, field);
130 this.dialog = new PopupWin(this.editor, this.localize(buttonId + "_title"), setColorFunctRef, selectColorInitFunctRef, windowWidth, windowHeight, opener);
131 break;
132 case "tag" :
133 var selectColorInitFunctRef = TYPO3Color.selectColorTagInit(this, buttonId);
134 var setColorFunctRef = TYPO3Color.setColorTag(this, field);
135 this.dialog = new PopupWin(this.editor, this.localize("color_title"), setColorFunctRef, selectColorInitFunctRef, windowWidth, windowHeight, opener);
136 }
137 },
138
139 // Applies the style found in "params" to the given element.
140 processStyle : function (dialog, params, element, field) {
141 var editor = this.editor;
142 for (var i in params) {
143 var val = params[i];
144 switch (i) {
145 case "ForeColor":
146 if(val) {
147 editor._doc.execCommand("ForeColor", false, val);
148 } else {
149 var parentElement = editor.getParentElement();
150 parentElement.style.color = "";
151 }
152 break;
153 case "HiliteColor":
154 if(val) {
155 if(HTMLArea.is_ie || HTMLArea.is_safari) editor._doc.execCommand("BackColor", false, val);
156 else editor._doc.execCommand("HiliteColor", false, val);
157 } else {
158 var parentElement = editor.getParentElement();
159 parentElement.style.backgroundColor = "";
160 }
161 break;
162 case "color":
163 element.style.backgroundColor = val;
164 field.value = val;
165 break;
166 }
167 }
168 },
169
170 /**
171 * Making color selector table
172 */
173 renderPopupSelectColor : function (sID,dialog,title) {
174 var editor = this.editor;
175 var cfgColors = this.colorsConfiguration;
176 var colorDef;
177 var szID = sID + "Current";
178 var sz;
179 var cPick = new Array("00","33","66","99","CC","FF");
180 var iColors = cPick.length;
181 var szColor = "";
182 var szColorId = "";
183
184 sz = '<div class="title">' + title + '</div>';
185 sz += '<table style="width:100%"><tr><td id="HA-layout"><fieldset>';
186 sz += '<input type="hidden" name="' + sID + '" id="' + sID + '" value="" />';
187 sz += '<table style="width:100%;"><tr><td style="vertical-align: middle;"><span style="margin-left: 5px; height: 1em;" class="dialog buttonColor" ';
188 sz += ' onMouseover="className += \' buttonColor-hilite\';" ';
189 sz += ' onMouseout="className = \'buttonColor\';"> ';
190 sz += ' <span id="' + szID + '" class="chooser"></span> ';
191 sz += ' <span id="colorUnset" class="nocolor" title="' + this.localize("no_color") + '" ';
192 sz += ' onMouseover="className += \' nocolor-hilite\';" ';
193 sz += ' onMouseout="className = \'nocolor\';"';
194 sz += ' >&#x00d7;</span></span></td><td>';
195 sz += '<table ';
196 sz += ' onMouseout="document.getElementById(\'' + szID + '\').style.backgroundColor=\'\';" ';
197 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; }" ';
198 sz += ' class="colorTable" cellspacing="0" cellpadding="0" id="colorTable">';
199 // Making colorPicker
200 if (!this.disableColorPicker) {
201 for ( var r = 0; r < iColors; r++) {
202 sz+='<tr>';
203 for (var g = iColors-1; g >= 0; g--) {
204 for (var b=iColors-1;b>=0;b--) {
205 szColor = cPick[r]+cPick[g]+cPick[b];
206 sz+='<td bgcolor="#'+szColor+'" title="#'+szColor+'">&nbsp;</td>';
207 }
208 }
209 sz+='</tr>';
210 }
211 }
212
213 // Making specific color selector:
214 if (cfgColors) {
215 var iCfgColors = cfgColors.length;
216 if (iCfgColors && !this.disableColorPicker) {
217 sz += '<tr><td colspan="36"></td></tr>';
218 }
219 for (var theColor = 0; theColor < iCfgColors; theColor++) {
220 colorDef = cfgColors[theColor];
221 szColor = colorDef[1];
222 sz += '<tr>';
223 sz += '<td style="width:36px;" colspan="6" bgcolor="'+szColor+'" title="'+szColor+'">&nbsp;</td>';
224 sz += '<td colspan=2></td>';
225 sz += '<td colspan=28><nobr>'+colorDef[0]+'</nobr></td>';
226 sz += '</tr>';
227 }
228 }
229
230 sz += '</table></td></tr></table>';
231 sz += '</fieldset></td></tr><tr><td id="HA-style"></td></tr></table>';
232 return sz;
233 }
234 });
235
236 /*
237 * Initialize the forecolor and the hilitecolor select color dialogs
238 */
239 TYPO3Color.selectColorCOInit = function(instance, buttonId) {
240 return (function(dialog) {
241 var editor = dialog.editor;
242 var doc = editor._doc;
243 dialog.content.innerHTML = instance.renderPopupSelectColor(buttonId, dialog, instance.localize(buttonId + "_title"));
244 var colorTable = dialog.doc.getElementById("colorTable");
245 colorTable.onclick = function(e) {
246 if(!e) var e = dialog.dialogWindow.event;
247 var targ = e.target ? e.target : e.srcElement;
248 if (targ.nodeType == 3) targ = targ.parentNode;
249 dialog.doc.getElementById(buttonId).value = targ.bgColor ? targ.bgColor : "";
250 dialog.callHandler();
251 return false;
252 };
253 var colorUnset = dialog.doc.getElementById("colorUnset");
254 colorUnset.onclick = function(e) {
255 dialog.doc.getElementById(buttonId).value="";
256 dialog.callHandler();
257 return false;
258 };
259 try {
260 with (dialog.doc.getElementById(buttonId+"Current").style) {
261 switch (buttonId) {
262 case "ForeColor":
263 backgroundColor = HTMLArea._makeColor(doc.queryCommandValue("ForeColor"));
264 break;
265 case "HiliteColor":
266 backgroundColor = HTMLArea._makeColor(doc.queryCommandValue(((HTMLArea.is_ie || HTMLArea.is_safari) ? "BackColor" : "HiliteColor")));
267 if (/transparent/i.test(backgroundColor)) {
268 // Mozilla
269 backgroundColor = HTMLArea._makeColor(doc.queryCommandValue("BackColor"));
270 }
271 break;
272 }
273 }
274 } catch (e) { }
275 dialog.showAtElement();
276 });
277 };
278
279 /*
280 * Set the color and close the ForeColor and the HiliteColor select color dialogs
281 */
282 TYPO3Color.setColorCO = function(instance) {
283 return (function(dialog,params) {
284 var editor = dialog.editor;
285 instance.processStyle(dialog, params, "", "");
286 dialog.releaseEvents();
287 editor.focusEditor();
288 editor.updateToolbar();
289 dialog.close();
290 });
291 };
292
293 /*
294 * Initialize the case=color select color dialog
295 * This case is used by the Table Operations plugin
296 */
297 TYPO3Color.selectColorColorInit = function(instance,buttonId,field) {
298 return (function(dialog) {
299 dialog.content.innerHTML = instance.renderPopupSelectColor(buttonId, dialog, instance.localize(buttonId + "_title"));
300 var colorTable = dialog.doc.getElementById("colorTable");
301 colorTable.onclick = function(e) {
302 if(!e) var e = dialog.dialogWindow.event;
303 var targ = e.target ? e.target : e.srcElement;
304 if (targ.nodeType == 3) targ = targ.parentNode;
305 dialog.doc.getElementById(buttonId).value = targ.bgColor;
306 dialog.callHandler();
307 return false;
308 };
309 var colorUnset = dialog.doc.getElementById("colorUnset");
310 colorUnset.onclick = function(e) {
311 dialog.doc.getElementById(buttonId).value = "";
312 dialog.callHandler();
313 return false;
314 };
315 dialog.doc.getElementById(buttonId+"Current").style.backgroundColor = field.value;
316 dialog.showAtElement();
317
318 });
319 };
320
321 /*
322 * Set the color and close the case=color select color dialog
323 */
324 TYPO3Color.setColorColor = function(instance,element,field) {
325 return (function(dialog,params) {
326 instance.processStyle(dialog, params, element, field);
327 dialog.releaseEvents();
328 dialog.close();
329 });
330 };
331
332 /*
333 * Initialize the case=tag select color dialog
334 * This is used by the QuickTag plugin
335 */
336 TYPO3Color.selectColorTagInit = function(instance, buttonId) {
337 return (function(dialog) {
338 instance.dialog = dialog;
339 dialog.content.innerHTML = instance.renderPopupSelectColor(buttonId, dialog, instance.localize("color_title"));
340 var colorTable = dialog.doc.getElementById("colorTable");
341 colorTable.onclick = function(e) {
342 if(!e) var e = dialog.dialogWindow.event;
343 var targ = e.target ? e.target : e.srcElement;
344 if (targ.nodeType == 3) targ = targ.parentNode;
345 dialog.doc.getElementById(buttonId).value = targ.bgColor;
346 dialog.callHandler();
347 return false;
348 };
349 var colorUnset = dialog.doc.getElementById("colorUnset");
350 colorUnset.onclick = function(e) {
351 dialog.doc.getElementById(buttonId).value = "";
352 dialog.callHandler();
353 return false;
354 };
355 dialog.doc.getElementById(buttonId+"Current").style.backgroundColor = "";
356 dialog.showAtElement();
357 });
358 };
359
360 /*
361 * Set the color and close the case=color select color dialog
362 */
363 TYPO3Color.setColorTag = function(instance,field) {
364 return (function(dialog,params) {
365 dialog.releaseEvents();
366 field.insertColor(params["tag"]);
367 dialog.close();
368 });
369 };
370