1 | // Table Operations Plugin for HTMLArea-3.0 |
---|
2 | // Implementation by Mihai Bazon. Sponsored by http://www.bloki.com |
---|
3 | // |
---|
4 | // htmlArea v3.0 - Copyright (c) 2002 interactivetools.com, inc. |
---|
5 | // This notice MUST stay intact for use (see license.txt). |
---|
6 | // |
---|
7 | // A free WYSIWYG editor replacement for <textarea> fields. |
---|
8 | // For full source code and docs, visit http://www.interactivetools.com/ |
---|
9 | // |
---|
10 | // Version 3.0 developed by Mihai Bazon for InteractiveTools. |
---|
11 | // http://dynarch.com/mishoo |
---|
12 | // |
---|
13 | |
---|
14 | // Object that will encapsulate all the table operations provided by |
---|
15 | // HTMLArea-3.0 (except "insert table" which is included in the main file) |
---|
16 | function TableOperations(editor) { |
---|
17 | this.editor = editor; |
---|
18 | |
---|
19 | var cfg = editor.config; |
---|
20 | var tt = TableOperations.I18N; |
---|
21 | var bl = TableOperations.btnList; |
---|
22 | var self = this; |
---|
23 | |
---|
24 | // register the toolbar buttons provided by this plugin |
---|
25 | var toolbar = ["linebreak"]; |
---|
26 | for (var i in bl) { |
---|
27 | var btn = bl[i]; |
---|
28 | if (!btn) { |
---|
29 | toolbar.push("separator"); |
---|
30 | } else { |
---|
31 | var id = "TO-" + btn[0]; |
---|
32 | cfg.registerButton(id, tt[id], editor.imgURL(btn[0] + ".gif", "TableOperations"), false, |
---|
33 | function(editor, id) { |
---|
34 | // dispatch button press event |
---|
35 | self.buttonPress(editor, id); |
---|
36 | }, btn[1]); |
---|
37 | toolbar.push(id); |
---|
38 | } |
---|
39 | } |
---|
40 | |
---|
41 | // add a new line in the toolbar |
---|
42 | cfg.toolbar.push(toolbar); |
---|
43 | }; |
---|
44 | |
---|
45 | TableOperations._pluginInfo = { |
---|
46 | name : "TableOperations", |
---|
47 | version : "1.0", |
---|
48 | developer : "Mihai Bazon", |
---|
49 | developer_url : "http://dynarch.com/mishoo/", |
---|
50 | c_owner : "Mihai Bazon", |
---|
51 | sponsor : "Zapatec Inc.", |
---|
52 | sponsor_url : "http://www.bloki.com", |
---|
53 | license : "htmlArea" |
---|
54 | }; |
---|
55 | |
---|
56 | /************************ |
---|
57 | * UTILITIES |
---|
58 | ************************/ |
---|
59 | |
---|
60 | // retrieves the closest element having the specified tagName in the list of |
---|
61 | // ancestors of the current selection/caret. |
---|
62 | TableOperations.prototype.getClosest = function(tagName) { |
---|
63 | var editor = this.editor; |
---|
64 | var ancestors = editor.getAllAncestors(); |
---|
65 | var ret = null; |
---|
66 | tagName = ("" + tagName).toLowerCase(); |
---|
67 | for (var i in ancestors) { |
---|
68 | var el = ancestors[i]; |
---|
69 | if (el.tagName.toLowerCase() == tagName) { |
---|
70 | ret = el; |
---|
71 | break; |
---|
72 | } |
---|
73 | } |
---|
74 | return ret; |
---|
75 | }; |
---|
76 | |
---|
77 | // this function requires the file PopupDiv/PopupWin to be loaded from browser |
---|
78 | TableOperations.prototype.dialogTableProperties = function() { |
---|
79 | var i18n = TableOperations.I18N; |
---|
80 | // retrieve existing values |
---|
81 | var table = this.getClosest("table"); |
---|
82 | // this.editor.selectNodeContents(table); |
---|
83 | // this.editor.updateToolbar(); |
---|
84 | |
---|
85 | var dialog = new PopupWin(this.editor, i18n["Table Properties"], function(dialog, params) { |
---|
86 | TableOperations.processStyle(params, table); |
---|
87 | for (var i in params) { |
---|
88 | var val = params[i]; |
---|
89 | switch (i) { |
---|
90 | case "f_caption": |
---|
91 | if (/\S/.test(val)) { |
---|
92 | // contains non white-space characters |
---|
93 | var caption = table.getElementsByTagName("caption")[0]; |
---|
94 | if (!caption) { |
---|
95 | caption = dialog.editor._doc.createElement("caption"); |
---|
96 | table.insertBefore(caption, table.firstChild); |
---|
97 | } |
---|
98 | caption.innerHTML = val; |
---|
99 | } else { |
---|
100 | // search for caption and delete it if found |
---|
101 | var caption = table.getElementsByTagName("caption")[0]; |
---|
102 | if (caption) { |
---|
103 | caption.parentNode.removeChild(caption); |
---|
104 | } |
---|
105 | } |
---|
106 | break; |
---|
107 | case "f_summary": |
---|
108 | table.summary = val; |
---|
109 | break; |
---|
110 | case "f_width": |
---|
111 | table.style.width = ("" + val) + params.f_unit; |
---|
112 | break; |
---|
113 | case "f_align": |
---|
114 | table.align = val; |
---|
115 | break; |
---|
116 | case "f_spacing": |
---|
117 | table.cellSpacing = val; |
---|
118 | break; |
---|
119 | case "f_padding": |
---|
120 | table.cellPadding = val; |
---|
121 | break; |
---|
122 | case "f_borders": |
---|
123 | table.border = val; |
---|
124 | break; |
---|
125 | case "f_frames": |
---|
126 | table.frame = val; |
---|
127 | break; |
---|
128 | case "f_rules": |
---|
129 | table.rules = val; |
---|
130 | break; |
---|
131 | } |
---|
132 | } |
---|
133 | // various workarounds to refresh the table display (Gecko, |
---|
134 | // what's going on?! do not disappoint me!) |
---|
135 | dialog.editor.forceRedraw(); |
---|
136 | dialog.editor.focusEditor(); |
---|
137 | dialog.editor.updateToolbar(); |
---|
138 | var save_collapse = table.style.borderCollapse; |
---|
139 | table.style.borderCollapse = "collapse"; |
---|
140 | table.style.borderCollapse = "separate"; |
---|
141 | table.style.borderCollapse = save_collapse; |
---|
142 | }, |
---|
143 | |
---|
144 | // this function gets called when the dialog needs to be initialized |
---|
145 | function (dialog) { |
---|
146 | |
---|
147 | var f_caption = ""; |
---|
148 | var capel = table.getElementsByTagName("caption")[0]; |
---|
149 | if (capel) { |
---|
150 | f_caption = capel.innerHTML; |
---|
151 | } |
---|
152 | var f_summary = table.summary; |
---|
153 | var f_width = parseInt(table.style.width); |
---|
154 | isNaN(f_width) && (f_width = ""); |
---|
155 | var f_unit = /%/.test(table.style.width) ? 'percent' : 'pixels'; |
---|
156 | var f_align = table.align; |
---|
157 | var f_spacing = table.cellSpacing; |
---|
158 | var f_padding = table.cellPadding; |
---|
159 | var f_borders = table.border; |
---|
160 | var f_frames = table.frame; |
---|
161 | var f_rules = table.rules; |
---|
162 | |
---|
163 | function selected(val) { |
---|
164 | return val ? " selected" : ""; |
---|
165 | }; |
---|
166 | |
---|
167 | // dialog contents |
---|
168 | dialog.content.style.width = "400px"; |
---|
169 | dialog.content.innerHTML = " \ |
---|
170 | <div class='title'\ |
---|
171 | style='background: url(" + dialog.baseURL + dialog.editor.imgURL("table-prop.gif", "TableOperations") + ") #fff 98% 50% no-repeat'>" + i18n["Table Properties"] + "\ |
---|
172 | </div> \ |
---|
173 | <table style='width:100%'> \ |
---|
174 | <tr> \ |
---|
175 | <td> \ |
---|
176 | <fieldset><legend>" + i18n["Description"] + "</legend> \ |
---|
177 | <table style='width:100%'> \ |
---|
178 | <tr> \ |
---|
179 | <td class='label'>" + i18n["Caption"] + ":</td> \ |
---|
180 | <td class='value'><input type='text' name='f_caption' value='" + f_caption + "'/></td> \ |
---|
181 | </tr><tr> \ |
---|
182 | <td class='label'>" + i18n["Summary"] + ":</td> \ |
---|
183 | <td class='value'><input type='text' name='f_summary' value='" + f_summary + "'/></td> \ |
---|
184 | </tr> \ |
---|
185 | </table> \ |
---|
186 | </fieldset> \ |
---|
187 | </td> \ |
---|
188 | </tr> \ |
---|
189 | <tr><td id='--HA-layout'></td></tr> \ |
---|
190 | <tr> \ |
---|
191 | <td> \ |
---|
192 | <fieldset><legend>" + i18n["Spacing and padding"] + "</legend> \ |
---|
193 | <table style='width:100%'> \ |
---|
194 | "+// <tr> \ |
---|
195 | // <td class='label'>" + i18n["Width"] + ":</td> \ |
---|
196 | // <td><input type='text' name='f_width' value='" + f_width + "' size='5' /> \ |
---|
197 | // <select name='f_unit'> \ |
---|
198 | // <option value='%'" + selected(f_unit == "percent") + ">" + i18n["percent"] + "</option> \ |
---|
199 | // <option value='px'" + selected(f_unit == "pixels") + ">" + i18n["pixels"] + "</option> \ |
---|
200 | // </select> " + i18n["Align"] + ": \ |
---|
201 | // <select name='f_align'> \ |
---|
202 | // <option value='left'" + selected(f_align == "left") + ">" + i18n["Left"] + "</option> \ |
---|
203 | // <option value='center'" + selected(f_align == "center") + ">" + i18n["Center"] + "</option> \ |
---|
204 | // <option value='right'" + selected(f_align == "right") + ">" + i18n["Right"] + "</option> \ |
---|
205 | // </select> \ |
---|
206 | // </td> \ |
---|
207 | // </tr> \ |
---|
208 | " <tr> \ |
---|
209 | <td class='label'>" + i18n["Spacing"] + ":</td> \ |
---|
210 | <td><input type='text' name='f_spacing' size='5' value='" + f_spacing + "' /> " + i18n["Padding"] + ":\ |
---|
211 | <input type='text' name='f_padding' size='5' value='" + f_padding + "' /> " + i18n["pixels"] + "\ |
---|
212 | </td> \ |
---|
213 | </tr> \ |
---|
214 | </table> \ |
---|
215 | </fieldset> \ |
---|
216 | </td> \ |
---|
217 | </tr> \ |
---|
218 | <tr> \ |
---|
219 | <td> \ |
---|
220 | <fieldset><legend>Frame and borders</legend> \ |
---|
221 | <table width='100%'> \ |
---|
222 | <tr> \ |
---|
223 | <td class='label'>" + i18n["Borders"] + ":</td> \ |
---|
224 | <td><input name='f_borders' type='text' size='5' value='" + f_borders + "' /> " + i18n["pixels"] + "</td> \ |
---|
225 | </tr> \ |
---|
226 | <tr> \ |
---|
227 | <td class='label'>" + i18n["Frames"] + ":</td> \ |
---|
228 | <td> \ |
---|
229 | <select name='f_frames'> \ |
---|
230 | <option value='void'" + selected(f_frames == "void") + ">" + i18n["No sides"] + "</option> \ |
---|
231 | <option value='above'" + selected(f_frames == "above") + ">" + i18n["The top side only"] + "</option> \ |
---|
232 | <option value='below'" + selected(f_frames == "below") + ">" + i18n["The bottom side only"] + "</option> \ |
---|
233 | <option value='hsides'" + selected(f_frames == "hsides") + ">" + i18n["The top and bottom sides only"] + "</option> \ |
---|
234 | <option value='vsides'" + selected(f_frames == "vsides") + ">" + i18n["The right and left sides only"] + "</option> \ |
---|
235 | <option value='lhs'" + selected(f_frames == "lhs") + ">" + i18n["The left-hand side only"] + "</option> \ |
---|
236 | <option value='rhs'" + selected(f_frames == "rhs") + ">" + i18n["The right-hand side only"] + "</option> \ |
---|
237 | <option value='box'" + selected(f_frames == "box") + ">" + i18n["All four sides"] + "</option> \ |
---|
238 | </select> \ |
---|
239 | </td> \ |
---|
240 | </tr> \ |
---|
241 | <tr> \ |
---|
242 | <td class='label'>" + i18n["Rules"] + ":</td> \ |
---|
243 | <td> \ |
---|
244 | <select name='f_rules'> \ |
---|
245 | <option value='none'" + selected(f_rules == "none") + ">" + i18n["No rules"] + "</option> \ |
---|
246 | <option value='rows'" + selected(f_rules == "rows") + ">" + i18n["Rules will appear between rows only"] + "</option> \ |
---|
247 | <option value='cols'" + selected(f_rules == "cols") + ">" + i18n["Rules will appear between columns only"] + "</option> \ |
---|
248 | <option value='all'" + selected(f_rules == "all") + ">" + i18n["Rules will appear between all rows and columns"] + "</option> \ |
---|
249 | </select> \ |
---|
250 | </td> \ |
---|
251 | </tr> \ |
---|
252 | </table> \ |
---|
253 | </fieldset> \ |
---|
254 | </td> \ |
---|
255 | </tr> \ |
---|
256 | <tr> \ |
---|
257 | <td id='--HA-style'></td> \ |
---|
258 | </tr> \ |
---|
259 | </table> \ |
---|
260 | "; |
---|
261 | var st_prop = TableOperations.createStyleFieldset(dialog.doc, dialog.editor, table); |
---|
262 | var p = dialog.doc.getElementById("--HA-style"); |
---|
263 | p.appendChild(st_prop); |
---|
264 | var st_layout = TableOperations.createStyleLayoutFieldset(dialog.doc, dialog.editor, table); |
---|
265 | p = dialog.doc.getElementById("--HA-layout"); |
---|
266 | p.appendChild(st_layout); |
---|
267 | dialog.modal = true; |
---|
268 | dialog.addButtons("ok", "cancel"); |
---|
269 | dialog.showAtElement(dialog.editor._iframe, "c"); |
---|
270 | }); |
---|
271 | }; |
---|
272 | |
---|
273 | // this function requires the file PopupDiv/PopupWin to be loaded from browser |
---|
274 | TableOperations.prototype.dialogRowCellProperties = function(cell) { |
---|
275 | var i18n = TableOperations.I18N; |
---|
276 | // retrieve existing values |
---|
277 | var element = this.getClosest(cell ? "td" : "tr"); |
---|
278 | var table = this.getClosest("table"); |
---|
279 | // this.editor.selectNodeContents(element); |
---|
280 | // this.editor.updateToolbar(); |
---|
281 | |
---|
282 | var dialog = new PopupWin(this.editor, i18n[cell ? "Cell Properties" : "Row Properties"], function(dialog, params) { |
---|
283 | TableOperations.processStyle(params, element); |
---|
284 | for (var i in params) { |
---|
285 | var val = params[i]; |
---|
286 | switch (i) { |
---|
287 | case "f_align": |
---|
288 | element.align = val; |
---|
289 | break; |
---|
290 | case "f_char": |
---|
291 | element.ch = val; |
---|
292 | break; |
---|
293 | case "f_valign": |
---|
294 | element.vAlign = val; |
---|
295 | break; |
---|
296 | } |
---|
297 | } |
---|
298 | // various workarounds to refresh the table display (Gecko, |
---|
299 | // what's going on?! do not disappoint me!) |
---|
300 | dialog.editor.forceRedraw(); |
---|
301 | dialog.editor.focusEditor(); |
---|
302 | dialog.editor.updateToolbar(); |
---|
303 | var save_collapse = table.style.borderCollapse; |
---|
304 | table.style.borderCollapse = "collapse"; |
---|
305 | table.style.borderCollapse = "separate"; |
---|
306 | table.style.borderCollapse = save_collapse; |
---|
307 | }, |
---|
308 | |
---|
309 | // this function gets called when the dialog needs to be initialized |
---|
310 | function (dialog) { |
---|
311 | |
---|
312 | var f_align = element.align; |
---|
313 | var f_valign = element.vAlign; |
---|
314 | var f_char = element.ch; |
---|
315 | |
---|
316 | function selected(val) { |
---|
317 | return val ? " selected" : ""; |
---|
318 | }; |
---|
319 | |
---|
320 | // dialog contents |
---|
321 | dialog.content.style.width = "400px"; |
---|
322 | dialog.content.innerHTML = " \ |
---|
323 | <div class='title'\ |
---|
324 | style='background: url(" + dialog.baseURL + dialog.editor.imgURL(cell ? "cell-prop.gif" : "row-prop.gif", "TableOperations") + ") #fff 98% 50% no-repeat'>" + i18n[cell ? "Cell Properties" : "Row Properties"] + "</div> \ |
---|
325 | <table style='width:100%'> \ |
---|
326 | <tr> \ |
---|
327 | <td id='--HA-layout'> \ |
---|
328 | "+// <fieldset><legend>" + i18n["Layout"] + "</legend> \ |
---|
329 | // <table style='width:100%'> \ |
---|
330 | // <tr> \ |
---|
331 | // <td class='label'>" + i18n["Align"] + ":</td> \ |
---|
332 | // <td> \ |
---|
333 | // <select name='f_align'> \ |
---|
334 | // <option value='left'" + selected(f_align == "left") + ">" + i18n["Left"] + "</option> \ |
---|
335 | // <option value='center'" + selected(f_align == "center") + ">" + i18n["Center"] + "</option> \ |
---|
336 | // <option value='right'" + selected(f_align == "right") + ">" + i18n["Right"] + "</option> \ |
---|
337 | // <option value='char'" + selected(f_align == "char") + ">" + i18n["Char"] + "</option> \ |
---|
338 | // </select> \ |
---|
339 | // " + i18n["Char"] + ": \ |
---|
340 | // <input type='text' style='font-family: monospace; text-align: center' name='f_char' size='1' value='" + f_char + "' /> \ |
---|
341 | // </td> \ |
---|
342 | // </tr><tr> \ |
---|
343 | // <td class='label'>" + i18n["Vertical align"] + ":</td> \ |
---|
344 | // <td> \ |
---|
345 | // <select name='f_valign'> \ |
---|
346 | // <option value='top'" + selected(f_valign == "top") + ">" + i18n["Top"] + "</option> \ |
---|
347 | // <option value='middle'" + selected(f_valign == "middle") + ">" + i18n["Middle"] + "</option> \ |
---|
348 | // <option value='bottom'" + selected(f_valign == "bottom") + ">" + i18n["Bottom"] + "</option> \ |
---|
349 | // <option value='baseline'" + selected(f_valign == "baseline") + ">" + i18n["Baseline"] + "</option> \ |
---|
350 | // </select> \ |
---|
351 | // </td> \ |
---|
352 | // </tr> \ |
---|
353 | // </table> \ |
---|
354 | // </fieldset> \ |
---|
355 | " </td> \ |
---|
356 | </tr> \ |
---|
357 | <tr> \ |
---|
358 | <td id='--HA-style'></td> \ |
---|
359 | </tr> \ |
---|
360 | </table> \ |
---|
361 | "; |
---|
362 | var st_prop = TableOperations.createStyleFieldset(dialog.doc, dialog.editor, element); |
---|
363 | var p = dialog.doc.getElementById("--HA-style"); |
---|
364 | p.appendChild(st_prop); |
---|
365 | var st_layout = TableOperations.createStyleLayoutFieldset(dialog.doc, dialog.editor, element); |
---|
366 | p = dialog.doc.getElementById("--HA-layout"); |
---|
367 | p.appendChild(st_layout); |
---|
368 | dialog.modal = true; |
---|
369 | dialog.addButtons("ok", "cancel"); |
---|
370 | dialog.showAtElement(dialog.editor._iframe, "c"); |
---|
371 | }); |
---|
372 | }; |
---|
373 | |
---|
374 | // this function gets called when some button from the TableOperations toolbar |
---|
375 | // was pressed. |
---|
376 | TableOperations.prototype.buttonPress = function(editor, button_id) { |
---|
377 | this.editor = editor; |
---|
378 | var mozbr = HTMLArea.is_gecko ? "<br />" : ""; |
---|
379 | var i18n = TableOperations.I18N; |
---|
380 | |
---|
381 | // helper function that clears the content in a table row |
---|
382 | function clearRow(tr) { |
---|
383 | var tds = tr.getElementsByTagName("td"); |
---|
384 | for (var i = tds.length; --i >= 0;) { |
---|
385 | var td = tds[i]; |
---|
386 | td.rowSpan = 1; |
---|
387 | td.innerHTML = mozbr; |
---|
388 | } |
---|
389 | }; |
---|
390 | |
---|
391 | function splitRow(td) { |
---|
392 | var n = parseInt("" + td.rowSpan); |
---|
393 | var nc = parseInt("" + td.colSpan); |
---|
394 | td.rowSpan = 1; |
---|
395 | tr = td.parentNode; |
---|
396 | var itr = tr.rowIndex; |
---|
397 | var trs = tr.parentNode.rows; |
---|
398 | var index = td.cellIndex; |
---|
399 | while (--n > 0) { |
---|
400 | tr = trs[++itr]; |
---|
401 | var otd = editor._doc.createElement("td"); |
---|
402 | otd.colSpan = td.colSpan; |
---|
403 | otd.innerHTML = mozbr; |
---|
404 | tr.insertBefore(otd, tr.cells[index]); |
---|
405 | } |
---|
406 | editor.forceRedraw(); |
---|
407 | editor.updateToolbar(); |
---|
408 | }; |
---|
409 | |
---|
410 | function splitCol(td) { |
---|
411 | var nc = parseInt("" + td.colSpan); |
---|
412 | td.colSpan = 1; |
---|
413 | tr = td.parentNode; |
---|
414 | var ref = td.nextSibling; |
---|
415 | while (--nc > 0) { |
---|
416 | var otd = editor._doc.createElement("td"); |
---|
417 | otd.rowSpan = td.rowSpan; |
---|
418 | otd.innerHTML = mozbr; |
---|
419 | tr.insertBefore(otd, ref); |
---|
420 | } |
---|
421 | editor.forceRedraw(); |
---|
422 | editor.updateToolbar(); |
---|
423 | }; |
---|
424 | |
---|
425 | function splitCell(td) { |
---|
426 | var nc = parseInt("" + td.colSpan); |
---|
427 | splitCol(td); |
---|
428 | var items = td.parentNode.cells; |
---|
429 | var index = td.cellIndex; |
---|
430 | while (nc-- > 0) { |
---|
431 | splitRow(items[index++]); |
---|
432 | } |
---|
433 | }; |
---|
434 | |
---|
435 | function selectNextNode(el) { |
---|
436 | var node = el.nextSibling; |
---|
437 | while (node && node.nodeType != 1) { |
---|
438 | node = node.nextSibling; |
---|
439 | } |
---|
440 | if (!node) { |
---|
441 | node = el.previousSibling; |
---|
442 | while (node && node.nodeType != 1) { |
---|
443 | node = node.previousSibling; |
---|
444 | } |
---|
445 | } |
---|
446 | if (!node) { |
---|
447 | node = el.parentNode; |
---|
448 | } |
---|
449 | editor.selectNodeContents(node); |
---|
450 | }; |
---|
451 | |
---|
452 | switch (button_id) { |
---|
453 | // ROWS |
---|
454 | |
---|
455 | case "TO-row-insert-above": |
---|
456 | case "TO-row-insert-under": |
---|
457 | var tr = this.getClosest("tr"); |
---|
458 | if (!tr) { |
---|
459 | break; |
---|
460 | } |
---|
461 | var otr = tr.cloneNode(true); |
---|
462 | clearRow(otr); |
---|
463 | tr.parentNode.insertBefore(otr, /under/.test(button_id) ? tr.nextSibling : tr); |
---|
464 | editor.forceRedraw(); |
---|
465 | editor.focusEditor(); |
---|
466 | break; |
---|
467 | case "TO-row-delete": |
---|
468 | var tr = this.getClosest("tr"); |
---|
469 | if (!tr) { |
---|
470 | break; |
---|
471 | } |
---|
472 | var par = tr.parentNode; |
---|
473 | if (par.rows.length == 1) { |
---|
474 | alert(i18n["not-del-last-row"]); |
---|
475 | break; |
---|
476 | } |
---|
477 | // set the caret first to a position that doesn't |
---|
478 | // disappear. |
---|
479 | selectNextNode(tr); |
---|
480 | par.removeChild(tr); |
---|
481 | editor.forceRedraw(); |
---|
482 | editor.focusEditor(); |
---|
483 | editor.updateToolbar(); |
---|
484 | break; |
---|
485 | case "TO-row-split": |
---|
486 | var td = this.getClosest("td"); |
---|
487 | if (!td) { |
---|
488 | break; |
---|
489 | } |
---|
490 | splitRow(td); |
---|
491 | break; |
---|
492 | |
---|
493 | // COLUMNS |
---|
494 | |
---|
495 | case "TO-col-insert-before": |
---|
496 | case "TO-col-insert-after": |
---|
497 | var td = this.getClosest("td"); |
---|
498 | if (!td) { |
---|
499 | break; |
---|
500 | } |
---|
501 | var rows = td.parentNode.parentNode.rows; |
---|
502 | var index = td.cellIndex; |
---|
503 | for (var i = rows.length; --i >= 0;) { |
---|
504 | var tr = rows[i]; |
---|
505 | var ref = tr.cells[index + (/after/.test(button_id) ? 1 : 0)]; |
---|
506 | var otd = editor._doc.createElement("td"); |
---|
507 | otd.innerHTML = mozbr; |
---|
508 | tr.insertBefore(otd, ref); |
---|
509 | } |
---|
510 | editor.focusEditor(); |
---|
511 | break; |
---|
512 | case "TO-col-split": |
---|
513 | var td = this.getClosest("td"); |
---|
514 | if (!td) { |
---|
515 | break; |
---|
516 | } |
---|
517 | splitCol(td); |
---|
518 | break; |
---|
519 | case "TO-col-delete": |
---|
520 | var td = this.getClosest("td"); |
---|
521 | if (!td) { |
---|
522 | break; |
---|
523 | } |
---|
524 | var index = td.cellIndex; |
---|
525 | if (td.parentNode.cells.length == 1) { |
---|
526 | alert(i18n["not-del-last-col"]); |
---|
527 | break; |
---|
528 | } |
---|
529 | // set the caret first to a position that doesn't disappear |
---|
530 | selectNextNode(td); |
---|
531 | var rows = td.parentNode.parentNode.rows; |
---|
532 | for (var i = rows.length; --i >= 0;) { |
---|
533 | var tr = rows[i]; |
---|
534 | tr.removeChild(tr.cells[index]); |
---|
535 | } |
---|
536 | editor.forceRedraw(); |
---|
537 | editor.focusEditor(); |
---|
538 | editor.updateToolbar(); |
---|
539 | break; |
---|
540 | |
---|
541 | // CELLS |
---|
542 | |
---|
543 | case "TO-cell-split": |
---|
544 | var td = this.getClosest("td"); |
---|
545 | if (!td) { |
---|
546 | break; |
---|
547 | } |
---|
548 | splitCell(td); |
---|
549 | break; |
---|
550 | case "TO-cell-insert-before": |
---|
551 | case "TO-cell-insert-after": |
---|
552 | var td = this.getClosest("td"); |
---|
553 | if (!td) { |
---|
554 | break; |
---|
555 | } |
---|
556 | var tr = td.parentNode; |
---|
557 | var otd = editor._doc.createElement("td"); |
---|
558 | otd.innerHTML = mozbr; |
---|
559 | tr.insertBefore(otd, /after/.test(button_id) ? td.nextSibling : td); |
---|
560 | editor.forceRedraw(); |
---|
561 | editor.focusEditor(); |
---|
562 | break; |
---|
563 | case "TO-cell-delete": |
---|
564 | var td = this.getClosest("td"); |
---|
565 | if (!td) { |
---|
566 | break; |
---|
567 | } |
---|
568 | if (td.parentNode.cells.length == 1) { |
---|
569 | alert(i18n["not-del-last-cell"]); |
---|
570 | break; |
---|
571 | } |
---|
572 | // set the caret first to a position that doesn't disappear |
---|
573 | selectNextNode(td); |
---|
574 | td.parentNode.removeChild(td); |
---|
575 | editor.forceRedraw(); |
---|
576 | editor.updateToolbar(); |
---|
577 | break; |
---|
578 | case "TO-cell-merge": |
---|
579 | // !! FIXME: Mozilla specific !! |
---|
580 | var sel = editor._getSelection(); |
---|
581 | var range, i = 0; |
---|
582 | var rows = []; |
---|
583 | var row = null; |
---|
584 | var cells = null; |
---|
585 | if (!HTMLArea.is_ie) { |
---|
586 | try { |
---|
587 | while (range = sel.getRangeAt(i++)) { |
---|
588 | var td = range.startContainer.childNodes[range.startOffset]; |
---|
589 | if (td.parentNode != row) { |
---|
590 | row = td.parentNode; |
---|
591 | (cells) && rows.push(cells); |
---|
592 | cells = []; |
---|
593 | } |
---|
594 | cells.push(td); |
---|
595 | } |
---|
596 | } catch(e) {/* finished walking through selection */} |
---|
597 | rows.push(cells); |
---|
598 | } else { |
---|
599 | // Internet Explorer "browser" |
---|
600 | var td = this.getClosest("td"); |
---|
601 | if (!td) { |
---|
602 | alert(i18n["Please click into some cell"]); |
---|
603 | break; |
---|
604 | } |
---|
605 | var tr = td.parentElement; |
---|
606 | var no_cols = prompt(i18n["How many columns would you like to merge?"], 2); |
---|
607 | if (!no_cols) { |
---|
608 | // cancelled |
---|
609 | break; |
---|
610 | } |
---|
611 | var no_rows = prompt(i18n["How many rows would you like to merge?"], 2); |
---|
612 | if (!no_rows) { |
---|
613 | // cancelled |
---|
614 | break; |
---|
615 | } |
---|
616 | var cell_index = td.cellIndex; |
---|
617 | while (no_rows-- > 0) { |
---|
618 | td = tr.cells[cell_index]; |
---|
619 | cells = [td]; |
---|
620 | for (var i = 1; i < no_cols; ++i) { |
---|
621 | td = td.nextSibling; |
---|
622 | if (!td) { |
---|
623 | break; |
---|
624 | } |
---|
625 | cells.push(td); |
---|
626 | } |
---|
627 | rows.push(cells); |
---|
628 | tr = tr.nextSibling; |
---|
629 | if (!tr) { |
---|
630 | break; |
---|
631 | } |
---|
632 | } |
---|
633 | } |
---|
634 | var HTML = ""; |
---|
635 | for (i = 0; i < rows.length; ++i) { |
---|
636 | // i && (HTML += "<br />"); |
---|
637 | var cells = rows[i]; |
---|
638 | for (var j = 0; j < cells.length; ++j) { |
---|
639 | // j && (HTML += " "); |
---|
640 | var cell = cells[j]; |
---|
641 | HTML += cell.innerHTML; |
---|
642 | (i || j) && (cell.parentNode.removeChild(cell)); |
---|
643 | } |
---|
644 | } |
---|
645 | var td = rows[0][0]; |
---|
646 | td.innerHTML = HTML; |
---|
647 | td.rowSpan = rows.length; |
---|
648 | td.colSpan = rows[0].length; |
---|
649 | editor.selectNodeContents(td); |
---|
650 | editor.forceRedraw(); |
---|
651 | editor.focusEditor(); |
---|
652 | break; |
---|
653 | |
---|
654 | // PROPERTIES |
---|
655 | |
---|
656 | case "TO-table-prop": |
---|
657 | this.dialogTableProperties(); |
---|
658 | break; |
---|
659 | |
---|
660 | case "TO-row-prop": |
---|
661 | this.dialogRowCellProperties(false); |
---|
662 | break; |
---|
663 | |
---|
664 | case "TO-cell-prop": |
---|
665 | this.dialogRowCellProperties(true); |
---|
666 | break; |
---|
667 | |
---|
668 | default: |
---|
669 | alert("Button [" + button_id + "] not yet implemented"); |
---|
670 | } |
---|
671 | }; |
---|
672 | |
---|
673 | // the list of buttons added by this plugin |
---|
674 | TableOperations.btnList = [ |
---|
675 | // table properties button |
---|
676 | ["table-prop", "table"], |
---|
677 | null, // separator |
---|
678 | |
---|
679 | // ROWS |
---|
680 | ["row-prop", "tr"], |
---|
681 | ["row-insert-above", "tr"], |
---|
682 | ["row-insert-under", "tr"], |
---|
683 | ["row-delete", "tr"], |
---|
684 | ["row-split", "td[rowSpan!=1]"], |
---|
685 | null, |
---|
686 | |
---|
687 | // COLS |
---|
688 | ["col-insert-before", "td"], |
---|
689 | ["col-insert-after", "td"], |
---|
690 | ["col-delete", "td"], |
---|
691 | ["col-split", "td[colSpan!=1]"], |
---|
692 | null, |
---|
693 | |
---|
694 | // CELLS |
---|
695 | ["cell-prop", "td"], |
---|
696 | ["cell-insert-before", "td"], |
---|
697 | ["cell-insert-after", "td"], |
---|
698 | ["cell-delete", "td"], |
---|
699 | ["cell-merge", "tr"], |
---|
700 | ["cell-split", "td[colSpan!=1,rowSpan!=1]"] |
---|
701 | ]; |
---|
702 | |
---|
703 | |
---|
704 | |
---|
705 | //// GENERIC CODE [style of any element; this should be moved into a separate |
---|
706 | //// file as it'll be very useful] |
---|
707 | //// BEGIN GENERIC CODE ----------------------------------------------------- |
---|
708 | |
---|
709 | TableOperations.getLength = function(value) { |
---|
710 | var len = parseInt(value); |
---|
711 | if (isNaN(len)) { |
---|
712 | len = ""; |
---|
713 | } |
---|
714 | return len; |
---|
715 | }; |
---|
716 | |
---|
717 | // Applies the style found in "params" to the given element. |
---|
718 | TableOperations.processStyle = function(params, element) { |
---|
719 | var style = element.style; |
---|
720 | for (var i in params) { |
---|
721 | var val = params[i]; |
---|
722 | switch (i) { |
---|
723 | case "f_st_backgroundColor": |
---|
724 | style.backgroundColor = val; |
---|
725 | break; |
---|
726 | case "f_st_color": |
---|
727 | style.color = val; |
---|
728 | break; |
---|
729 | case "f_st_backgroundImage": |
---|
730 | if (/\S/.test(val)) { |
---|
731 | style.backgroundImage = "url(" + val + ")"; |
---|
732 | } else { |
---|
733 | style.backgroundImage = "none"; |
---|
734 | } |
---|
735 | break; |
---|
736 | case "f_st_borderWidth": |
---|
737 | style.borderWidth = val; |
---|
738 | break; |
---|
739 | case "f_st_borderStyle": |
---|
740 | style.borderStyle = val; |
---|
741 | break; |
---|
742 | case "f_st_borderColor": |
---|
743 | style.borderColor = val; |
---|
744 | break; |
---|
745 | case "f_st_borderCollapse": |
---|
746 | style.borderCollapse = val ? "collapse" : ""; |
---|
747 | break; |
---|
748 | case "f_st_width": |
---|
749 | if (/\S/.test(val)) { |
---|
750 | style.width = val + params["f_st_widthUnit"]; |
---|
751 | } else { |
---|
752 | style.width = ""; |
---|
753 | } |
---|
754 | break; |
---|
755 | case "f_st_height": |
---|
756 | if (/\S/.test(val)) { |
---|
757 | style.height = val + params["f_st_heightUnit"]; |
---|
758 | } else { |
---|
759 | style.height = ""; |
---|
760 | } |
---|
761 | break; |
---|
762 | case "f_st_textAlign": |
---|
763 | if (val == "char") { |
---|
764 | var ch = params["f_st_textAlignChar"]; |
---|
765 | if (ch == '"') { |
---|
766 | ch = '\\"'; |
---|
767 | } |
---|
768 | style.textAlign = '"' + ch + '"'; |
---|
769 | } else { |
---|
770 | style.textAlign = val; |
---|
771 | } |
---|
772 | break; |
---|
773 | case "f_st_verticalAlign": |
---|
774 | style.verticalAlign = val; |
---|
775 | break; |
---|
776 | case "f_st_float": |
---|
777 | style.cssFloat = val; |
---|
778 | break; |
---|
779 | // case "f_st_margin": |
---|
780 | // style.margin = val + "px"; |
---|
781 | // break; |
---|
782 | // case "f_st_padding": |
---|
783 | // style.padding = val + "px"; |
---|
784 | // break; |
---|
785 | } |
---|
786 | } |
---|
787 | }; |
---|
788 | |
---|
789 | // Returns an HTML element for a widget that allows color selection. That is, |
---|
790 | // a button that contains the given color, if any, and when pressed will popup |
---|
791 | // the sooner-or-later-to-be-rewritten select_color.html dialog allowing user |
---|
792 | // to select some color. If a color is selected, an input field with the name |
---|
793 | // "f_st_"+name will be updated with the color value in #123456 format. |
---|
794 | TableOperations.createColorButton = function(doc, editor, color, name) { |
---|
795 | if (!color) { |
---|
796 | color = ""; |
---|
797 | } else if (!/#/.test(color)) { |
---|
798 | color = HTMLArea._colorToRgb(color); |
---|
799 | } |
---|
800 | |
---|
801 | var df = doc.createElement("span"); |
---|
802 | var field = doc.createElement("input"); |
---|
803 | field.type = "hidden"; |
---|
804 | df.appendChild(field); |
---|
805 | field.name = "f_st_" + name; |
---|
806 | field.value = color; |
---|
807 | var button = doc.createElement("span"); |
---|
808 | button.className = "buttonColor"; |
---|
809 | df.appendChild(button); |
---|
810 | var span = doc.createElement("span"); |
---|
811 | span.className = "chooser"; |
---|
812 | // span.innerHTML = " "; |
---|
813 | span.style.backgroundColor = color; |
---|
814 | button.appendChild(span); |
---|
815 | button.onmouseover = function() { if (!this.disabled) { this.className += " buttonColor-hilite"; }}; |
---|
816 | button.onmouseout = function() { if (!this.disabled) { this.className = "buttonColor"; }}; |
---|
817 | span.onclick = function() { |
---|
818 | if (this.parentNode.disabled) { |
---|
819 | return false; |
---|
820 | } |
---|
821 | editor._popupDialog("select_color.html", function(color) { |
---|
822 | if (color) { |
---|
823 | span.style.backgroundColor = "#" + color; |
---|
824 | field.value = "#" + color; |
---|
825 | } |
---|
826 | }, color); |
---|
827 | }; |
---|
828 | var span2 = doc.createElement("span"); |
---|
829 | span2.innerHTML = "×"; |
---|
830 | span2.className = "nocolor"; |
---|
831 | span2.title = TableOperations.I18N["Unset color"]; |
---|
832 | button.appendChild(span2); |
---|
833 | span2.onmouseover = function() { if (!this.parentNode.disabled) { this.className += " nocolor-hilite"; }}; |
---|
834 | span2.onmouseout = function() { if (!this.parentNode.disabled) { this.className = "nocolor"; }}; |
---|
835 | span2.onclick = function() { |
---|
836 | span.style.backgroundColor = ""; |
---|
837 | field.value = ""; |
---|
838 | }; |
---|
839 | return df; |
---|
840 | }; |
---|
841 | |
---|
842 | TableOperations.createStyleLayoutFieldset = function(doc, editor, el) { |
---|
843 | var i18n = TableOperations.I18N; |
---|
844 | var fieldset = doc.createElement("fieldset"); |
---|
845 | var legend = doc.createElement("legend"); |
---|
846 | fieldset.appendChild(legend); |
---|
847 | legend.innerHTML = i18n["Layout"]; |
---|
848 | var table = doc.createElement("table"); |
---|
849 | fieldset.appendChild(table); |
---|
850 | table.style.width = "100%"; |
---|
851 | var tbody = doc.createElement("tbody"); |
---|
852 | table.appendChild(tbody); |
---|
853 | |
---|
854 | var tagname = el.tagName.toLowerCase(); |
---|
855 | var tr, td, input, select, option, options, i; |
---|
856 | |
---|
857 | if (tagname != "td" && tagname != "tr" && tagname != "th") { |
---|
858 | tr = doc.createElement("tr"); |
---|
859 | tbody.appendChild(tr); |
---|
860 | td = doc.createElement("td"); |
---|
861 | td.className = "label"; |
---|
862 | tr.appendChild(td); |
---|
863 | td.innerHTML = i18n["Float"] + ":"; |
---|
864 | td = doc.createElement("td"); |
---|
865 | tr.appendChild(td); |
---|
866 | select = doc.createElement("select"); |
---|
867 | td.appendChild(select); |
---|
868 | select.name = "f_st_float"; |
---|
869 | options = ["None", "Left", "Right"]; |
---|
870 | for (i in options) { |
---|
871 | var Val = options[i]; |
---|
872 | var val = options[i].toLowerCase(); |
---|
873 | option = doc.createElement("option"); |
---|
874 | option.innerHTML = i18n[Val]; |
---|
875 | option.value = val; |
---|
876 | option.selected = (("" + el.style.cssFloat).toLowerCase() == val); |
---|
877 | select.appendChild(option); |
---|
878 | } |
---|
879 | } |
---|
880 | |
---|
881 | tr = doc.createElement("tr"); |
---|
882 | tbody.appendChild(tr); |
---|
883 | td = doc.createElement("td"); |
---|
884 | td.className = "label"; |
---|
885 | tr.appendChild(td); |
---|
886 | td.innerHTML = i18n["Width"] + ":"; |
---|
887 | td = doc.createElement("td"); |
---|
888 | tr.appendChild(td); |
---|
889 | input = doc.createElement("input"); |
---|
890 | input.type = "text"; |
---|
891 | input.value = TableOperations.getLength(el.style.width); |
---|
892 | input.size = "5"; |
---|
893 | input.name = "f_st_width"; |
---|
894 | input.style.marginRight = "0.5em"; |
---|
895 | td.appendChild(input); |
---|
896 | select = doc.createElement("select"); |
---|
897 | select.name = "f_st_widthUnit"; |
---|
898 | option = doc.createElement("option"); |
---|
899 | option.innerHTML = i18n["percent"]; |
---|
900 | option.value = "%"; |
---|
901 | option.selected = /%/.test(el.style.width); |
---|
902 | select.appendChild(option); |
---|
903 | option = doc.createElement("option"); |
---|
904 | option.innerHTML = i18n["pixels"]; |
---|
905 | option.value = "px"; |
---|
906 | option.selected = /px/.test(el.style.width); |
---|
907 | select.appendChild(option); |
---|
908 | td.appendChild(select); |
---|
909 | |
---|
910 | select.style.marginRight = "0.5em"; |
---|
911 | td.appendChild(doc.createTextNode(i18n["Text align"] + ":")); |
---|
912 | select = doc.createElement("select"); |
---|
913 | select.style.marginLeft = select.style.marginRight = "0.5em"; |
---|
914 | td.appendChild(select); |
---|
915 | select.name = "f_st_textAlign"; |
---|
916 | options = ["Left", "Center", "Right", "Justify"]; |
---|
917 | if (tagname == "td") { |
---|
918 | options.push("Char"); |
---|
919 | } |
---|
920 | input = doc.createElement("input"); |
---|
921 | input.name = "f_st_textAlignChar"; |
---|
922 | input.size = "1"; |
---|
923 | input.style.fontFamily = "monospace"; |
---|
924 | td.appendChild(input); |
---|
925 | for (i in options) { |
---|
926 | var Val = options[i]; |
---|
927 | var val = Val.toLowerCase(); |
---|
928 | option = doc.createElement("option"); |
---|
929 | option.value = val; |
---|
930 | option.innerHTML = i18n[Val]; |
---|
931 | option.selected = (el.style.textAlign.toLowerCase() == val); |
---|
932 | select.appendChild(option); |
---|
933 | } |
---|
934 | function setCharVisibility(value) { |
---|
935 | input.style.visibility = value ? "visible" : "hidden"; |
---|
936 | if (value) { |
---|
937 | input.focus(); |
---|
938 | input.select(); |
---|
939 | } |
---|
940 | }; |
---|
941 | select.onchange = function() { setCharVisibility(this.value == "char"); }; |
---|
942 | setCharVisibility(select.value == "char"); |
---|
943 | |
---|
944 | tr = doc.createElement("tr"); |
---|
945 | tbody.appendChild(tr); |
---|
946 | td = doc.createElement("td"); |
---|
947 | td.className = "label"; |
---|
948 | tr.appendChild(td); |
---|
949 | td.innerHTML = i18n["Height"] + ":"; |
---|
950 | td = doc.createElement("td"); |
---|
951 | tr.appendChild(td); |
---|
952 | input = doc.createElement("input"); |
---|
953 | input.type = "text"; |
---|
954 | input.value = TableOperations.getLength(el.style.height); |
---|
955 | input.size = "5"; |
---|
956 | input.name = "f_st_height"; |
---|
957 | input.style.marginRight = "0.5em"; |
---|
958 | td.appendChild(input); |
---|
959 | select = doc.createElement("select"); |
---|
960 | select.name = "f_st_heightUnit"; |
---|
961 | option = doc.createElement("option"); |
---|
962 | option.innerHTML = i18n["percent"]; |
---|
963 | option.value = "%"; |
---|
964 | option.selected = /%/.test(el.style.height); |
---|
965 | select.appendChild(option); |
---|
966 | option = doc.createElement("option"); |
---|
967 | option.innerHTML = i18n["pixels"]; |
---|
968 | option.value = "px"; |
---|
969 | option.selected = /px/.test(el.style.height); |
---|
970 | select.appendChild(option); |
---|
971 | td.appendChild(select); |
---|
972 | |
---|
973 | select.style.marginRight = "0.5em"; |
---|
974 | td.appendChild(doc.createTextNode(i18n["Vertical align"] + ":")); |
---|
975 | select = doc.createElement("select"); |
---|
976 | select.name = "f_st_verticalAlign"; |
---|
977 | select.style.marginLeft = "0.5em"; |
---|
978 | td.appendChild(select); |
---|
979 | options = ["Top", "Middle", "Bottom", "Baseline"]; |
---|
980 | for (i in options) { |
---|
981 | var Val = options[i]; |
---|
982 | var val = Val.toLowerCase(); |
---|
983 | option = doc.createElement("option"); |
---|
984 | option.value = val; |
---|
985 | option.innerHTML = i18n[Val]; |
---|
986 | option.selected = (el.style.verticalAlign.toLowerCase() == val); |
---|
987 | select.appendChild(option); |
---|
988 | } |
---|
989 | |
---|
990 | return fieldset; |
---|
991 | }; |
---|
992 | |
---|
993 | // Returns an HTML element containing the style attributes for the given |
---|
994 | // element. This can be easily embedded into any dialog; the functionality is |
---|
995 | // also provided. |
---|
996 | TableOperations.createStyleFieldset = function(doc, editor, el) { |
---|
997 | var i18n = TableOperations.I18N; |
---|
998 | var fieldset = doc.createElement("fieldset"); |
---|
999 | var legend = doc.createElement("legend"); |
---|
1000 | fieldset.appendChild(legend); |
---|
1001 | legend.innerHTML = i18n["CSS Style"]; |
---|
1002 | var table = doc.createElement("table"); |
---|
1003 | fieldset.appendChild(table); |
---|
1004 | table.style.width = "100%"; |
---|
1005 | var tbody = doc.createElement("tbody"); |
---|
1006 | table.appendChild(tbody); |
---|
1007 | |
---|
1008 | var tr, td, input, select, option, options, i; |
---|
1009 | |
---|
1010 | tr = doc.createElement("tr"); |
---|
1011 | tbody.appendChild(tr); |
---|
1012 | td = doc.createElement("td"); |
---|
1013 | tr.appendChild(td); |
---|
1014 | td.className = "label"; |
---|
1015 | td.innerHTML = i18n["Background"] + ":"; |
---|
1016 | td = doc.createElement("td"); |
---|
1017 | tr.appendChild(td); |
---|
1018 | var df = TableOperations.createColorButton(doc, editor, el.style.backgroundColor, "backgroundColor"); |
---|
1019 | df.firstChild.nextSibling.style.marginRight = "0.5em"; |
---|
1020 | td.appendChild(df); |
---|
1021 | td.appendChild(doc.createTextNode(i18n["Image URL"] + ": ")); |
---|
1022 | input = doc.createElement("input"); |
---|
1023 | input.type = "text"; |
---|
1024 | input.name = "f_st_backgroundImage"; |
---|
1025 | if (el.style.backgroundImage.match(/url\(\s*(.*?)\s*\)/)) { |
---|
1026 | input.value = RegExp.$1; |
---|
1027 | } |
---|
1028 | // input.style.width = "100%"; |
---|
1029 | td.appendChild(input); |
---|
1030 | |
---|
1031 | tr = doc.createElement("tr"); |
---|
1032 | tbody.appendChild(tr); |
---|
1033 | td = doc.createElement("td"); |
---|
1034 | tr.appendChild(td); |
---|
1035 | td.className = "label"; |
---|
1036 | td.innerHTML = i18n["FG Color"] + ":"; |
---|
1037 | td = doc.createElement("td"); |
---|
1038 | tr.appendChild(td); |
---|
1039 | td.appendChild(TableOperations.createColorButton(doc, editor, el.style.color, "color")); |
---|
1040 | |
---|
1041 | // for better alignment we include an invisible field. |
---|
1042 | input = doc.createElement("input"); |
---|
1043 | input.style.visibility = "hidden"; |
---|
1044 | input.type = "text"; |
---|
1045 | td.appendChild(input); |
---|
1046 | |
---|
1047 | tr = doc.createElement("tr"); |
---|
1048 | tbody.appendChild(tr); |
---|
1049 | td = doc.createElement("td"); |
---|
1050 | tr.appendChild(td); |
---|
1051 | td.className = "label"; |
---|
1052 | td.innerHTML = i18n["Border"] + ":"; |
---|
1053 | td = doc.createElement("td"); |
---|
1054 | tr.appendChild(td); |
---|
1055 | |
---|
1056 | var colorButton = TableOperations.createColorButton(doc, editor, el.style.borderColor, "borderColor"); |
---|
1057 | var btn = colorButton.firstChild.nextSibling; |
---|
1058 | td.appendChild(colorButton); |
---|
1059 | // borderFields.push(btn); |
---|
1060 | btn.style.marginRight = "0.5em"; |
---|
1061 | |
---|
1062 | select = doc.createElement("select"); |
---|
1063 | var borderFields = []; |
---|
1064 | td.appendChild(select); |
---|
1065 | select.name = "f_st_borderStyle"; |
---|
1066 | options = ["none", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"]; |
---|
1067 | var currentBorderStyle = el.style.borderStyle; |
---|
1068 | // Gecko reports "solid solid solid solid" for "border-style: solid". |
---|
1069 | // That is, "top right bottom left" -- we only consider the first |
---|
1070 | // value. |
---|
1071 | (currentBorderStyle.match(/([^\s]*)\s/)) && (currentBorderStyle = RegExp.$1); |
---|
1072 | for (i in options) { |
---|
1073 | var val = options[i]; |
---|
1074 | option = doc.createElement("option"); |
---|
1075 | option.value = val; |
---|
1076 | option.innerHTML = val; |
---|
1077 | (val == currentBorderStyle) && (option.selected = true); |
---|
1078 | select.appendChild(option); |
---|
1079 | } |
---|
1080 | select.style.marginRight = "0.5em"; |
---|
1081 | function setBorderFieldsStatus(value) { |
---|
1082 | for (i in borderFields) { |
---|
1083 | var el = borderFields[i]; |
---|
1084 | el.style.visibility = value ? "hidden" : "visible"; |
---|
1085 | if (!value && (el.tagName.toLowerCase() == "input")) { |
---|
1086 | el.focus(); |
---|
1087 | el.select(); |
---|
1088 | } |
---|
1089 | } |
---|
1090 | }; |
---|
1091 | select.onchange = function() { setBorderFieldsStatus(this.value == "none"); }; |
---|
1092 | |
---|
1093 | input = doc.createElement("input"); |
---|
1094 | borderFields.push(input); |
---|
1095 | input.type = "text"; |
---|
1096 | input.name = "f_st_borderWidth"; |
---|
1097 | input.value = TableOperations.getLength(el.style.borderWidth); |
---|
1098 | input.size = "5"; |
---|
1099 | td.appendChild(input); |
---|
1100 | input.style.marginRight = "0.5em"; |
---|
1101 | var span = doc.createElement("span"); |
---|
1102 | span.innerHTML = i18n["pixels"]; |
---|
1103 | td.appendChild(span); |
---|
1104 | borderFields.push(span); |
---|
1105 | |
---|
1106 | setBorderFieldsStatus(select.value == "none"); |
---|
1107 | |
---|
1108 | if (el.tagName.toLowerCase() == "table") { |
---|
1109 | // the border-collapse style is only for tables |
---|
1110 | tr = doc.createElement("tr"); |
---|
1111 | tbody.appendChild(tr); |
---|
1112 | td = doc.createElement("td"); |
---|
1113 | td.className = "label"; |
---|
1114 | tr.appendChild(td); |
---|
1115 | input = doc.createElement("input"); |
---|
1116 | input.type = "checkbox"; |
---|
1117 | input.name = "f_st_borderCollapse"; |
---|
1118 | input.id = "f_st_borderCollapse"; |
---|
1119 | var val = (/collapse/i.test(el.style.borderCollapse)); |
---|
1120 | input.checked = val ? 1 : 0; |
---|
1121 | td.appendChild(input); |
---|
1122 | |
---|
1123 | td = doc.createElement("td"); |
---|
1124 | tr.appendChild(td); |
---|
1125 | var label = doc.createElement("label"); |
---|
1126 | label.htmlFor = "f_st_borderCollapse"; |
---|
1127 | label.innerHTML = i18n["Collapsed borders"]; |
---|
1128 | td.appendChild(label); |
---|
1129 | } |
---|
1130 | |
---|
1131 | // tr = doc.createElement("tr"); |
---|
1132 | // tbody.appendChild(tr); |
---|
1133 | // td = doc.createElement("td"); |
---|
1134 | // td.className = "label"; |
---|
1135 | // tr.appendChild(td); |
---|
1136 | // td.innerHTML = i18n["Margin"] + ":"; |
---|
1137 | // td = doc.createElement("td"); |
---|
1138 | // tr.appendChild(td); |
---|
1139 | // input = doc.createElement("input"); |
---|
1140 | // input.type = "text"; |
---|
1141 | // input.size = "5"; |
---|
1142 | // input.name = "f_st_margin"; |
---|
1143 | // td.appendChild(input); |
---|
1144 | // input.style.marginRight = "0.5em"; |
---|
1145 | // td.appendChild(doc.createTextNode(i18n["Padding"] + ":")); |
---|
1146 | |
---|
1147 | // input = doc.createElement("input"); |
---|
1148 | // input.type = "text"; |
---|
1149 | // input.size = "5"; |
---|
1150 | // input.name = "f_st_padding"; |
---|
1151 | // td.appendChild(input); |
---|
1152 | // input.style.marginLeft = "0.5em"; |
---|
1153 | // input.style.marginRight = "0.5em"; |
---|
1154 | // td.appendChild(doc.createTextNode(i18n["pixels"])); |
---|
1155 | |
---|
1156 | return fieldset; |
---|
1157 | }; |
---|
1158 | |
---|
1159 | //// END GENERIC CODE ------------------------------------------------------- |
---|