1 | var newMessageTab = { |
---|
2 | 'imapUid' : [], // Stores the imap email number of current tab |
---|
3 | 'countFile' : [0,0,0,0,0,0,0,0,0,0], // Stores the number of files attached in current tab |
---|
4 | 'imapBox' : [], // Stores the folder name |
---|
5 | 'toPreserve' : [] // Check if the message should be removed from draft after send |
---|
6 | }; |
---|
7 | |
---|
8 | var defaultDraftFolder = ''; |
---|
9 | |
---|
10 | function cRichTextEditor(){ |
---|
11 | this.emwindow = new Array; |
---|
12 | this.editor; |
---|
13 | this.table; |
---|
14 | this.id; |
---|
15 | this.buildEditor(); |
---|
16 | this.saveFlag = 0; |
---|
17 | } |
---|
18 | |
---|
19 | cRichTextEditor.prototype.loadEditor = function(ID) { |
---|
20 | this.id = ID; |
---|
21 | parentDiv = document.getElementById("body_position_"+this.id); |
---|
22 | this.editor = "body_"+this.id; |
---|
23 | |
---|
24 | if(this.table.parentNode) |
---|
25 | this.table.parentNode.removeChild(this.table); |
---|
26 | |
---|
27 | if(parentDiv.firstChild){ |
---|
28 | parentDiv.insertBefore(this.table,parentDiv.firstChild); |
---|
29 | } |
---|
30 | else |
---|
31 | parentDiv.appendChild(this.table); |
---|
32 | |
---|
33 | if(!Element(this.editor)){ |
---|
34 | iframe = document.createElement("IFRAME"); |
---|
35 | iframe.id = this.editor; |
---|
36 | iframe.name = this.editor; |
---|
37 | iframe.width = "99%"; |
---|
38 | iframe.height = 300; |
---|
39 | iframe.setAttribute("unselectable","on"); |
---|
40 | iframe.setAttribute("tabIndex","1"); |
---|
41 | var checkbox = document.createElement("INPUT"); |
---|
42 | checkbox.id = 'viewsource_rt_checkbox'; |
---|
43 | checkbox.type = "checkbox"; |
---|
44 | checkbox.setAttribute("tabIndex","-1"); |
---|
45 | checkbox.onclick = function () {RichTextEditor.viewsource(this.checked)}; |
---|
46 | var text = document.createTextNode(get_lang('View HTML source') + '.'); |
---|
47 | parentDiv.appendChild(iframe); |
---|
48 | parentDiv.appendChild(checkbox); |
---|
49 | parentDiv.appendChild(text); |
---|
50 | } |
---|
51 | else{ |
---|
52 | Element("viewsource_rt_checkbox").checked=false; |
---|
53 | } |
---|
54 | |
---|
55 | document.getElementById('fontname').selectedIndex = 1; |
---|
56 | document.getElementById('fontsize').selectedIndex = 1; |
---|
57 | } |
---|
58 | |
---|
59 | cRichTextEditor.prototype.viewsource = function(source) { |
---|
60 | var html; |
---|
61 | var mainField = document.getElementById(this.editor).contentWindow; |
---|
62 | if (source) { |
---|
63 | if (is_ie){ |
---|
64 | connector.loadScript('html2xhtml'); |
---|
65 | html = frames[this.editor].document.body; |
---|
66 | var xhtml = get_xhtml(html, 'en', 'iso-8859-1'); |
---|
67 | frames[this.editor].document.body.innerText = xhtml; |
---|
68 | document.getElementById("table_richtext_toolbar").style.visibility="hidden"; |
---|
69 | } |
---|
70 | else{ |
---|
71 | html = document.createTextNode(document.getElementById(this.editor).contentWindow.document.body.innerHTML); |
---|
72 | document.getElementById(this.editor).contentWindow.document.body.innerHTML = ""; |
---|
73 | html = document.getElementById(this.editor).contentWindow.document.importNode(html,false); |
---|
74 | document.getElementById(this.editor).contentWindow.document.body.appendChild(html); |
---|
75 | document.getElementById("table_richtext_toolbar").style.visibility="hidden"; |
---|
76 | } |
---|
77 | } else { |
---|
78 | if (is_ie){ |
---|
79 | var output = escape(frames[this.editor].document.body.innerText); |
---|
80 | output = output.replace("%3CP%3E%0D%0A%3CHR%3E", "%3CHR%3E"); |
---|
81 | output = output.replace("%3CHR%3E%0D%0A%3C/P%3E", "%3CHR%3E"); |
---|
82 | frames[this.editor].document.body.innerHTML = unescape(output); |
---|
83 | document.getElementById("table_richtext_toolbar").style.visibility="visible"; |
---|
84 | } |
---|
85 | else{ |
---|
86 | html = document.getElementById(this.editor).contentWindow.document.body.ownerDocument.createRange(); |
---|
87 | html.selectNodeContents(document.getElementById(this.editor).contentWindow.document.body); |
---|
88 | document.getElementById(this.editor).contentWindow.document.body.innerHTML = html.toString(); |
---|
89 | document.getElementById("table_richtext_toolbar").style.visibility="visible"; |
---|
90 | } |
---|
91 | } |
---|
92 | } |
---|
93 | |
---|
94 | cRichTextEditor.prototype.buildEditor = function() { |
---|
95 | this.table = document.createElement("TABLE"); |
---|
96 | this.table.id = "table_richtext_toolbar"; |
---|
97 | this.table.className = "richtext_toolbar"; |
---|
98 | this.table.width = "100%"; |
---|
99 | var tbody = document.createElement("TBODY"); |
---|
100 | var tr = document.createElement("TR"); |
---|
101 | var td = document.createElement("TD"); |
---|
102 | var div_button_rt = document.createElement("DIV"); |
---|
103 | |
---|
104 | selectBox=document.createElement("SELECT"); |
---|
105 | selectBox.id="fontname"; |
---|
106 | selectBox.setAttribute("tabIndex","-1"); |
---|
107 | selectBox.onchange = function () {RichTextEditor.Select("fontname");}; |
---|
108 | selectBox.className = 'select_richtext'; |
---|
109 | var option1 = new Option(get_lang('Font'), 'Font'); |
---|
110 | var option2 = new Option('Arial', 'Arial'); |
---|
111 | var option3 = new Option('Courier', 'Courier'); |
---|
112 | var option4 = new Option('Times New Roman', 'Times'); |
---|
113 | if (is_ie){ |
---|
114 | selectBox.add(option1); |
---|
115 | selectBox.add(option2); |
---|
116 | selectBox.add(option3); |
---|
117 | selectBox.add(option4); |
---|
118 | } |
---|
119 | else{ |
---|
120 | selectBox.add(option1, null); |
---|
121 | selectBox.add(option2, null); |
---|
122 | selectBox.add(option3, null); |
---|
123 | selectBox.add(option4, null); |
---|
124 | } |
---|
125 | div_button_rt.appendChild(selectBox); |
---|
126 | |
---|
127 | selectBox=document.createElement("SELECT"); |
---|
128 | selectBox.id="fontsize"; |
---|
129 | selectBox.setAttribute("tabIndex","-1"); |
---|
130 | selectBox.setAttribute("unselectable","on"); |
---|
131 | selectBox.className = 'select_richtext'; |
---|
132 | selectBox.onchange = function () {RichTextEditor.Select("fontsize");}; |
---|
133 | var option1 = new Option(get_lang('Size'), 'Size'); |
---|
134 | var option2 = new Option('1 (8 pt)','1' ); |
---|
135 | var option3 = new Option('2 (10 pt)','2'); |
---|
136 | var option4 = new Option('3 (12 pt)','3'); |
---|
137 | var option5 = new Option('4 (14 pt)','4'); |
---|
138 | var option6 = new Option('5 (18 pt)','5'); |
---|
139 | var option7 = new Option('6 (24 pt)','6'); |
---|
140 | var option8 = new Option('7 (36 pt)','7'); |
---|
141 | if (is_ie){ |
---|
142 | selectBox.add(option1); |
---|
143 | selectBox.add(option2); |
---|
144 | selectBox.add(option3); |
---|
145 | selectBox.add(option4); |
---|
146 | selectBox.add(option5); |
---|
147 | selectBox.add(option6); |
---|
148 | selectBox.add(option7); |
---|
149 | selectBox.add(option8); |
---|
150 | } |
---|
151 | else{ |
---|
152 | selectBox.add(option1, null); |
---|
153 | selectBox.add(option2, null); |
---|
154 | selectBox.add(option3, null); |
---|
155 | selectBox.add(option4, null); |
---|
156 | selectBox.add(option5, null); |
---|
157 | selectBox.add(option6, null); |
---|
158 | selectBox.add(option7, null); |
---|
159 | selectBox.add(option8, null); |
---|
160 | } |
---|
161 | div_button_rt.appendChild(selectBox); |
---|
162 | |
---|
163 | var buttons = ['bold', 'italic', 'underline', 'forecolor', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', |
---|
164 | 'undo', 'redo', 'insertorderedlist', 'insertunorderedlist', 'outdent', 'indent', 'link', 'signature', 'image', 'table']; |
---|
165 | |
---|
166 | for (var i=0; i<buttons.length; i++){ |
---|
167 | var img = document.createElement("IMG"); |
---|
168 | img.id = buttons[i]; |
---|
169 | img.className = 'imagebutton'; |
---|
170 | img.align = 'center'; |
---|
171 | img.src = './templates/default/images/'+buttons[i]+'.gif'; |
---|
172 | img.title = get_lang(buttons[i]); |
---|
173 | img.style.cursor = 'pointer'; |
---|
174 | |
---|
175 | if (buttons[i] == 'forecolor') |
---|
176 | img.onclick = function () {RichTextEditor.show_pc('forecolor')}; |
---|
177 | else if (buttons[i] == 'link') |
---|
178 | img.onclick = function () {RichTextEditor.createLink();}; |
---|
179 | else if (buttons[i] == 'image') |
---|
180 | img.onclick = function () {RichTextEditor.createImage();}; |
---|
181 | else if (buttons[i] == 'table') |
---|
182 | img.onclick = function () {RichTextEditor.createTable();}; |
---|
183 | else |
---|
184 | img.onclick = function () {RichTextEditor.editorCommand(this.id,'');}; |
---|
185 | |
---|
186 | img.onmouseover = function () {this.style.border="outset 2px";}; |
---|
187 | img.onmouseout = function () {this.style.border="solid 2px #C0C0C0";}; |
---|
188 | div_button_rt.appendChild(img); |
---|
189 | } |
---|
190 | |
---|
191 | td.appendChild(div_button_rt); |
---|
192 | tr.appendChild(td); |
---|
193 | tbody.appendChild(tr); |
---|
194 | this.table.appendChild(tbody); |
---|
195 | } |
---|
196 | |
---|
197 | cRichTextEditor.prototype.editorCommand = function(command, option) { |
---|
198 | try { |
---|
199 | var mainField = document.getElementById(this.editor).contentWindow; |
---|
200 | mainField.focus(); |
---|
201 | if (command == 'signature'){ |
---|
202 | if (is_ie){ |
---|
203 | var sel = document.selection; |
---|
204 | if (sel!=null) |
---|
205 | { |
---|
206 | var rng = sel.createRange(); |
---|
207 | if (rng!=null) |
---|
208 | rng.pasteHTML(preferences.signature.replace(/\n/g, "<br>")); |
---|
209 | } |
---|
210 | } |
---|
211 | else{ |
---|
212 | mainField.document.execCommand('inserthtml', false, preferences.signature.replace(/\n/g, "<br>")); |
---|
213 | } |
---|
214 | } |
---|
215 | else if (command == 'CreateLink') |
---|
216 | mainField.document.execCommand('CreateLink', false, option); |
---|
217 | else if (command == 'Table'){ |
---|
218 | if (is_ie){ |
---|
219 | var sel = document.selection; |
---|
220 | if (sel!=null) |
---|
221 | { |
---|
222 | var rng = sel.createRange(); |
---|
223 | if (rng!=null) |
---|
224 | rng.pasteHTML(option); |
---|
225 | } |
---|
226 | } |
---|
227 | else |
---|
228 | mainField.document.execCommand('inserthtml', false, option); |
---|
229 | } |
---|
230 | else // command == Image |
---|
231 | mainField.document.execCommand('InsertImage', false, option); |
---|
232 | //mainField.focus(); |
---|
233 | } catch (e) { alert(e.description); } |
---|
234 | } |
---|
235 | |
---|
236 | cRichTextEditor.prototype.createLink = function(){ |
---|
237 | var mainField = document.getElementById(this.editor).contentWindow; |
---|
238 | if (is_ie){ |
---|
239 | if ((mainField.document.selection.createRange().text) == ''){ |
---|
240 | alert(get_lang('Chose the text you want transform in link before.')); |
---|
241 | return; |
---|
242 | } |
---|
243 | } |
---|
244 | else{ |
---|
245 | if (mainField.window.getSelection() == ''){ |
---|
246 | alert(get_lang('Chose the text you want transform in link before.')); |
---|
247 | return; |
---|
248 | } |
---|
249 | } |
---|
250 | var szURL = prompt(get_lang('Enter with link URL:'), 'http://'); |
---|
251 | if ((szURL != null) && (szURL != "")){ |
---|
252 | this.editorCommand("CreateLink", szURL); |
---|
253 | } |
---|
254 | } |
---|
255 | |
---|
256 | // It include the image file in emails body |
---|
257 | // It saves and attach in drafts folder and open it |
---|
258 | cRichTextEditor.prototype.addInputFile = function() |
---|
259 | { |
---|
260 | var id = this.editor.substr(5); // border_id |
---|
261 | divFiles = document.getElementById("divFiles_"+id); |
---|
262 | var countDivFiles = divFiles.childNodes.length + 1; |
---|
263 | |
---|
264 | var inputFile = document.getElementById('inputFile_img'); |
---|
265 | var divFiles = document.getElementById('divFiles_'+id); |
---|
266 | inputFile.id = 'inputFile_'+id +"_"+countDivFiles; |
---|
267 | inputFile.name = 'file_'+countDivFiles; |
---|
268 | divFile = document.createElement('DIV'); |
---|
269 | divFile.appendChild(inputFile); |
---|
270 | divFiles.appendChild(divFile); |
---|
271 | |
---|
272 | var form_upload = document.getElementById('form_upload'); |
---|
273 | form_upload.parentNode.removeChild(form_upload); |
---|
274 | win.close(); |
---|
275 | |
---|
276 | if (! validateFileExtension(inputFile.value, inputFile.id , id)) |
---|
277 | return false; |
---|
278 | |
---|
279 | RichTextEditor.saveFlag = 0; // See if save function finished |
---|
280 | save_msg(id); |
---|
281 | setTimeout("RichTextEditor.insertImgHtml("+id+")",1000); |
---|
282 | } |
---|
283 | |
---|
284 | cRichTextEditor.prototype.insertImgHtml = function (id){ |
---|
285 | if (RichTextEditor.saveFlag == 0) |
---|
286 | setTimeout("RichTextEditor.insertImgHtml("+id+")",500); |
---|
287 | else |
---|
288 | this.editorCommand('Image', './inc/show_embedded_attach.php?msg_folder=INBOX/'+draftsfolder+'&msg_num='+newMessageTab.imapUid[id]+'&msg_part='+(newMessageTab.countFile[id]+1)); |
---|
289 | // this.editorCommand('Image', '.inc/gotodownload.php?msg_folder="+msg_folder+"&msg_number="+msg_number+"&idx_file="+idx_file+"&msg_part="+msg_part+params')); |
---|
290 | } |
---|
291 | |
---|
292 | cRichTextEditor.prototype.insertTableHtml = function (){ |
---|
293 | var id = this.editor.substr(5); // border_id |
---|
294 | var rows = document.getElementById('rows').selectedIndex; |
---|
295 | var cols = document.getElementById('cols').selectedIndex; |
---|
296 | var insertTable = '<table border="1px"><tbody>'; |
---|
297 | for (var i = 0; i <= rows; i++){ |
---|
298 | insertTable += "<tr>"; |
---|
299 | for (var j = 0; j <= cols; j++) |
---|
300 | insertTable += "<td> </td>"; |
---|
301 | insertTable += "</tr>"; |
---|
302 | } |
---|
303 | insertTable += "</tbody></table>"; |
---|
304 | this.editorCommand('Table', insertTable); |
---|
305 | } |
---|
306 | |
---|
307 | cRichTextEditor.prototype.createTable = function(){ |
---|
308 | var form = document.getElementById("table_window"); |
---|
309 | if (form == null){ |
---|
310 | form = document.createElement("DIV"); |
---|
311 | form.id = "table_window"; |
---|
312 | form.style.visibility = "hidden"; |
---|
313 | form.style.position = "absolute"; |
---|
314 | form.style.background = "#eeeeee"; |
---|
315 | form.style.left = "0px"; |
---|
316 | form.style.top = "0px"; |
---|
317 | form.style.width = "0px"; |
---|
318 | form.style.height = "0px"; |
---|
319 | document.body.appendChild(form); |
---|
320 | } |
---|
321 | |
---|
322 | var form_table = document.createElement("DIV"); |
---|
323 | form_table.id = "form_table"; |
---|
324 | form_table.style.position = "absolute"; |
---|
325 | form_table.style.top = "5px"; |
---|
326 | form_table.style.left = "5px"; |
---|
327 | form_table.style.width = "170px"; |
---|
328 | form_table.style.height = "120px"; |
---|
329 | form_table.name = get_lang("Insert Table"); |
---|
330 | form_table.innerHTML = get_lang('Select the table size')+':<br><br>'+ |
---|
331 | get_lang('Rows')+': '+ get_lang('Cols')+':<br>'+ |
---|
332 | '<select name="rows" id="rows"><option value="1">1</option>'+ |
---|
333 | '<option value="2">2</option>'+ |
---|
334 | '<option value="3">3</option>'+ |
---|
335 | '<option value="4">4</option>'+ |
---|
336 | '<option value="5">5</option>'+ |
---|
337 | '<option value="6">6</option>'+ |
---|
338 | '<option value="7">7</option>'+ |
---|
339 | '<option value="8">8</option>'+ |
---|
340 | '<option value="9">9</option></select> '+ |
---|
341 | '<select name="cols" id="cols"><option value="1">1</option>'+ |
---|
342 | '<option value="2">2</option>'+ |
---|
343 | '<option value="3">3</option>'+ |
---|
344 | '<option value="4">4</option>'+ |
---|
345 | '<option value="5">5</option>'+ |
---|
346 | '<option value="6">6</option>'+ |
---|
347 | '<option value="7">7</option>'+ |
---|
348 | '<option value="8">8</option>'+ |
---|
349 | '<option value="9">9</option></select><br><br>'+ |
---|
350 | '<input title="Close" value="' + get_lang('Close') + '" type="button" onclick="win.close()"> '+ |
---|
351 | '<input title="Include" value="' + get_lang('Include') + '" type="button" onclick="RichTextEditor.insertTableHtml();win.close();">'; |
---|
352 | form.appendChild(form_table); |
---|
353 | |
---|
354 | this.showWindow(form); |
---|
355 | } |
---|
356 | |
---|
357 | cRichTextEditor.prototype.createImage = function(){ |
---|
358 | var form = document.getElementById("attachment_window"); |
---|
359 | if (form == null){ |
---|
360 | form = document.createElement("DIV"); |
---|
361 | form.id = "attachment_window"; |
---|
362 | form.style.visibility = "hidden"; |
---|
363 | form.style.position = "absolute"; |
---|
364 | form.style.background = "#eeeeee"; |
---|
365 | form.style.left = "0px"; |
---|
366 | form.style.top = "0px"; |
---|
367 | form.style.width = "0px"; |
---|
368 | form.style.height = "0px"; |
---|
369 | document.body.appendChild(form); |
---|
370 | } |
---|
371 | |
---|
372 | var form_upload = document.createElement("DIV"); |
---|
373 | form_upload.id = "form_upload"; |
---|
374 | form_upload.style.position = "absolute"; |
---|
375 | form_upload.style.top = "5px"; |
---|
376 | form_upload.style.left = "5px"; |
---|
377 | form_upload.name = get_lang("Upload File"); |
---|
378 | form_upload.style.width = "450px"; |
---|
379 | form_upload.style.height = "75px"; |
---|
380 | form_upload.innerHTML = get_lang('Select the desired image file')+':<br>'+ |
---|
381 | '<input name="image_at" maxlength="255" size="50" id="inputFile_img" type="file"><br>' + |
---|
382 | '<input title="Include" value="' + get_lang('Include') + '"' + 'type="button" onclick="RichTextEditor.addInputFile();"> ' + |
---|
383 | '<input title="Close" value="' + get_lang('Close') + '"' + |
---|
384 | ' type="button" onclick="win.close()">'; |
---|
385 | form.appendChild(form_upload); |
---|
386 | |
---|
387 | this.showWindow(form); |
---|
388 | } |
---|
389 | cRichTextEditor.prototype.showWindow = function (div){ |
---|
390 | |
---|
391 | if(! div) { |
---|
392 | return; |
---|
393 | } |
---|
394 | |
---|
395 | if(! this.emwindow[div.id]) { |
---|
396 | div.style.width = div.firstChild.style.width; |
---|
397 | div.style.height = div.firstChild.style.height; |
---|
398 | div.style.zIndex = "10000"; |
---|
399 | var title = div.firstChild.name; |
---|
400 | var wHeight = div.offsetHeight + "px"; |
---|
401 | var wWidth = div.offsetWidth + "px"; |
---|
402 | div.style.width = div.offsetWidth - 5; |
---|
403 | |
---|
404 | win = new dJSWin({ |
---|
405 | id: 'win_'+div.id, |
---|
406 | content_id: div.id, |
---|
407 | width: wWidth, |
---|
408 | height: wHeight, |
---|
409 | title_color: '#3978d6', |
---|
410 | bg_color: '#eee', |
---|
411 | title: title, |
---|
412 | title_text_color: 'white', |
---|
413 | button_x_img: '../phpgwapi/images/winclose.gif', |
---|
414 | border: true }); |
---|
415 | |
---|
416 | this.emwindow[div.id] = win; |
---|
417 | win.draw(); |
---|
418 | } |
---|
419 | else |
---|
420 | win = this.emwindow[div.id]; |
---|
421 | win.open(); |
---|
422 | } |
---|
423 | |
---|
424 | cRichTextEditor.prototype.Select = function(selectname) |
---|
425 | { |
---|
426 | var mainField = Element(this.editor).contentWindow; |
---|
427 | var cursel = document.getElementById(selectname).selectedIndex; |
---|
428 | |
---|
429 | if (cursel != 0) { |
---|
430 | var selected = document.getElementById(selectname).options[cursel].value; |
---|
431 | mainField.document.execCommand(selectname, false, selected); |
---|
432 | document.getElementById(selectname).selectedIndex = cursel; |
---|
433 | } |
---|
434 | mainField.focus(); |
---|
435 | } |
---|
436 | |
---|
437 | cRichTextEditor.prototype.show_pc = function(command) |
---|
438 | { |
---|
439 | connector.loadScript("color_palette"); |
---|
440 | ColorPalette.loadPalette(this.id); |
---|
441 | if (ColorPalette.div.style.visibility != "visible") |
---|
442 | ColorPalette.div.style.visibility="visible"; |
---|
443 | else |
---|
444 | this.hide_pc(); |
---|
445 | } |
---|
446 | |
---|
447 | cRichTextEditor.prototype.hide_pc = function() |
---|
448 | { |
---|
449 | document.getElementById("palettecolor").style.visibility="hidden"; |
---|
450 | } |
---|
451 | |
---|
452 | cRichTextEditor.prototype.getOffsetTop = function(elm) { |
---|
453 | var mOffsetTop = elm.offsetTop;1 |
---|
454 | var mOffsetParent = elm.offsetParent; |
---|
455 | while(mOffsetParent){ |
---|
456 | mOffsetTop += mOffsetParent.offsetTop; |
---|
457 | mOffsetParent = mOffsetParent.offsetParent; |
---|
458 | } |
---|
459 | return mOffsetTop; |
---|
460 | } |
---|
461 | |
---|
462 | cRichTextEditor.prototype.getOffsetLeft = function(elm) { |
---|
463 | var mOffsetLeft = elm.offsetLeft; |
---|
464 | var mOffsetParent = elm.offsetParent; |
---|
465 | while(mOffsetParent){ |
---|
466 | mOffsetLeft += mOffsetParent.offsetLeft; |
---|
467 | mOffsetParent = mOffsetParent.offsetParent; |
---|
468 | } |
---|
469 | return mOffsetLeft; |
---|
470 | } |
---|
471 | |
---|
472 | //Build the Object |
---|
473 | RichTextEditor = new cRichTextEditor(); |
---|