Ticket #908: table-operations.js

File table-operations.js, 38.4 kB (added by wymsy, 5 years ago)

table-operations.js

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