Ticket #908: table-operations.2.js

File table-operations.2.js, 39.7 kB (added by ray, 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(cells,dir) {
464          if ( cells.length < 2) return;
465          if ( !dir ) {
466            if (cells[0].parentNode == cells[1].parentNode) {
467              dir = 'right'
468            }
469            else {
470              dir = 'down';
471            }
472          }
473          var HTML = "";
474          var spanProp = (dir == 'right') ? 'colSpan' : 'rowSpan';
475          var span = 0;
476    for (var i = 0; i<cells.length;i++)
477    {
478      var c = cells[i];
479      span += c[spanProp];
480      HTML += (c.innerHTML.length) ?  c.innerHTML.trim()+' ' : '';
481      if (i>0) c.parentNode.removeChild(c);
482    }
483    cells[0][spanProp] = span;
484    cells[0].innerHTML = HTML;
485
486          editor.selectNodeContents(cells[0]);
487                editor.forceRedraw();
488                editor.focusEditor();
489        }
490
491        switch (button_id) {
492                // ROWS
493            case "TO-row-insert-above":
494            case "TO-row-insert-under":
495                var tr = this.getClosest("tr");
496                if (!tr) {
497                        break;
498                }
499                var otr = tr.cloneNode(true);
500                clearRow(otr);
501                tr.parentNode.insertBefore(otr, /under/.test(button_id) ? tr.nextSibling : tr);
502                editor.forceRedraw();
503                editor.focusEditor();
504                break;
505            case "TO-row-delete":
506                var tr = this.getClosest("tr");
507                if (!tr) {
508                        break;
509                }
510                var par = tr.parentNode;
511                if (par.rows.length == 1) {
512                        alert(HTMLArea._lc("HTMLArea cowardly refuses to delete the last row in table.", "TableOperations"));
513                        break;
514                }
515                // set the caret first to a position that doesn't
516                // disappear.
517                selectNextNode(tr);
518                par.removeChild(tr);
519                editor.forceRedraw();
520                editor.focusEditor();
521                editor.updateToolbar();
522                break;
523            case "TO-row-split":
524                var td = this.getClosest("td");
525                if (!td) {
526                        break;
527                }
528                splitRow(td);
529                break;
530
531                // COLUMNS
532
533            case "TO-col-insert-before":
534            case "TO-col-insert-after":
535                var td = this.getClosest("td");
536                if (!td) {
537                        break;
538                }
539                var rows = td.parentNode.parentNode.rows;
540                var index = td.cellIndex;
541    var lastColumn = (td.parentNode.cells.length == index + 1);
542                for (var i = rows.length; --i >= 0;) {
543                        var tr = rows[i];                       
544                        var otd = editor._doc.createElement("td");
545                        otd.innerHTML = mozbr;
546      if (lastColumn && HTMLArea.is_ie)
547      {
548        tr.insertBefore(otd);
549      }
550      else 
551      {
552        var ref = tr.cells[index + (/after/.test(button_id) ? 1 : 0)];
553        tr.insertBefore(otd, ref);
554      }
555                }
556                editor.focusEditor();
557                break;
558            case "TO-col-split":
559                var td = this.getClosest("td");
560                if (!td) {
561                        break;
562                }
563                splitCol(td);
564                break;
565            case "TO-col-delete":
566                var td = this.getClosest("td");
567                if (!td) {
568                        break;
569                }
570                var index = td.cellIndex;
571                if (td.parentNode.cells.length == 1) {
572                        alert(HTMLArea._lc("HTMLArea cowardly refuses to delete the last column in table.", "TableOperations"));
573                        break;
574                }
575                // set the caret first to a position that doesn't disappear
576                selectNextNode(td);
577                var rows = td.parentNode.parentNode.rows;
578                for (var i = rows.length; --i >= 0;) {
579                        var tr = rows[i];
580                        tr.removeChild(tr.cells[index]);
581                }
582                editor.forceRedraw();
583                editor.focusEditor();
584                editor.updateToolbar();
585                break;
586
587                // CELLS
588
589            case "TO-cell-split":
590                var td = this.getClosest("td");
591                if (!td) {
592                        break;
593                }
594                splitCell(td);
595                break;
596            case "TO-cell-insert-before":
597            case "TO-cell-insert-after":
598                var td = this.getClosest("td");
599                if (!td) {
600                        break;
601                }
602                var tr = td.parentNode;
603                var otd = editor._doc.createElement("td");
604                otd.innerHTML = mozbr;
605                tr.insertBefore(otd, /after/.test(button_id) ? td.nextSibling : td);
606                editor.forceRedraw();
607                editor.focusEditor();
608                break;
609            case "TO-cell-delete":
610                var td = this.getClosest("td");
611                if (!td) {
612                        break;
613                }
614                if (td.parentNode.cells.length == 1) {
615                        alert(HTMLArea._lc("HTMLArea cowardly refuses to delete the last cell in row.", "TableOperations"));
616                        break;
617                }
618                // set the caret first to a position that doesn't disappear
619                selectNextNode(td);
620                td.parentNode.removeChild(td);
621                editor.forceRedraw();
622                editor.updateToolbar();
623                break;
624            case "TO-cell-merge":
625               
626                var cells = [];
627                var sel = editor._getSelection();
628                var range, i = 0;
629                // Mozilla, as opposed to IE allows the selection of several cells, which is fine :)
630                if (!HTMLArea.is_ie && sel.rangeCount > 1) {
631                       
632                        try {
633                                debugger;
634                                while (range = sel.getRangeAt(i)) {
635                                        cells.push(range.startContainer.childNodes[range.startOffset]);
636                                        i++;
637                                }
638                        } catch(e) {/* finished walking through selection */}
639                        cellMerge(cells);
640                } else {
641                        // Internet Explorer "browser" or not more than one cell selected in Moz
642                        var td = this.getClosest("td");
643                        if (!td) {
644                                alert(HTMLArea._lc("Please click into some cell", "TableOperations"));
645                                break;
646                        }
647                        editor._popupDialog("plugin://TableOperations/merge_cells.html", function(param) {
648                                if (!param) {   // user pressed Cancel
649                                        return false;
650                                }
651                                var num = parseInt(param['num'],10) +1;
652                                var dir = param['dir'];
653                                var tr = td.parentNode;
654                                var cell_index = td.cellIndex;
655                                var row_index = tr.rowIndex;
656                                var table = tr.parentNode;
657                                var cells = [];
658                                switch (dir)
659                                {
660                                  case "right":
661                                    for (var i=cell_index;i<(cell_index+num) && tr.cells[i];i++)
662                                    {
663                                      cells.push(tr.cells[i])
664                                    }
665                                  break;
666                                  case "down":
667                                  {
668                                    for (var i=row_index;i<(row_index+num) && table.rows[i];i++)
669                                    {
670                                      cells.push(table.rows[i].cells[cell_index]);
671                                    }
672                                  }
673                                }
674                                /*for (var i=row_index; i<row_index+no_rows; i++) {
675                                        row = table.rows[i];
676                                        for (var j=cell_index; j<cell_index+no_cols; j++) {
677                                                if (row.cells[j].colSpan >1 || row.cells[j].rowSpan > 1) {
678                                                        splitCell(row.cells[j]);
679                                                }
680                                                cells.push(row.cells[j]);
681                                        }
682                                        if (cells.length > 0) {
683                                                rows.push(cells);
684                                                cells = [];
685                                        }
686                                }*/
687                                cellMerge(cells,dir);
688                        }, null);       
689                }
690                break;
691
692                // PROPERTIES
693
694            case "TO-table-prop":
695                this.dialogTableProperties();
696                break;
697
698            case "TO-row-prop":
699                this.dialogRowCellProperties(false);
700                break;
701
702            case "TO-cell-prop":
703                this.dialogRowCellProperties(true);
704                break;
705
706            default:
707                alert("Button [" + button_id + "] not yet implemented");
708        }
709};
710
711// the list of buttons added by this plugin
712TableOperations.btnList = [
713        // table properties button
714    ["table-prop",       "table", "Table properties"],
715        null,                   // separator
716
717        // ROWS
718        ["row-prop",         "tr", "Row properties"],
719        ["row-insert-above", "tr", "Insert row before"],
720        ["row-insert-under", "tr", "Insert row after"],
721        ["row-delete",       "tr", "Delete row"],
722        ["row-split",        "td[rowSpan!=1]", "Split row"],
723        null,
724
725        // COLS
726        ["col-insert-before", "td", "Insert column before"],
727        ["col-insert-after",  "td", "Insert column after"],
728        ["col-delete",        "td", "Delete column"],
729        ["col-split",         "td[colSpan!=1]", "Split column"],
730        null,
731
732        // CELLS
733        ["cell-prop",          "td", "Cell properties"],
734        ["cell-insert-before", "td", "Insert cell before"],
735        ["cell-insert-after",  "td", "Insert cell after"],
736        ["cell-delete",        "td", "Delete cell"],
737        ["cell-merge",         "tr", "Merge cells"],
738        ["cell-split",         "td[colSpan!=1,rowSpan!=1]", "Split cell"]
739        ];
740
741
742
743//// GENERIC CODE [style of any element; this should be moved into a separate
744//// file as it'll be very useful]
745//// BEGIN GENERIC CODE -----------------------------------------------------
746
747TableOperations.getLength = function(value) {
748        var len = parseInt(value);
749        if (isNaN(len)) {
750                len = "";
751        }
752        return len;
753};
754
755// Applies the style found in "params" to the given element.
756TableOperations.processStyle = function(params, element) {
757        var style = element.style;
758        for (var i in params) {
759    if(typeof params[i] == 'function') continue;
760                var val = params[i];
761                switch (i) {
762                    case "f_st_backgroundColor":
763                        style.backgroundColor = val;
764                        break;
765                    case "f_st_color":
766                        style.color = val;
767                        break;
768                    case "f_st_backgroundImage":
769                        if (/\S/.test(val)) {
770                                style.backgroundImage = "url(" + val + ")";
771                        } else {
772                                style.backgroundImage = "none";
773                        }
774                        break;
775                    case "f_st_borderWidth":
776                        style.borderWidth = val;
777                        break;
778                    case "f_st_borderStyle":
779                        style.borderStyle = val;
780                        break;
781                    case "f_st_borderColor":
782                        style.borderColor = val;
783                        break;
784                    case "f_st_borderCollapse":
785                        style.borderCollapse = val ? "collapse" : "";
786                        break;
787                    case "f_st_width":
788                        if (/\S/.test(val)) {
789                                style.width = val + params["f_st_widthUnit"];
790                        } else {
791                                style.width = "";
792                        }
793                        break;
794                    case "f_st_height":
795                        if (/\S/.test(val)) {
796                                style.height = val + params["f_st_heightUnit"];
797                        } else {
798                                style.height = "";
799                        }
800                        break;
801                    case "f_st_textAlign":
802                        if (val == "char") {
803                                var ch = params["f_st_textAlignChar"];
804                                if (ch == '"') {
805                                        ch = '\\"';
806                                }
807                                style.textAlign = '"' + ch + '"';
808                        } else if (val == "-") {
809                            style.textAlign = "";
810                        } else {
811                                style.textAlign = val;
812                        }
813                        break;
814                    case "f_st_verticalAlign":
815                    element.vAlign = "";
816                        if (val == "-") {
817                            style.verticalAlign = "";
818                           
819                    } else {
820                            style.verticalAlign = val;
821                        }
822                        break;
823                    case "f_st_float":
824                        style.cssFloat = val;
825                        break;
826//                  case "f_st_margin":
827//                      style.margin = val + "px";
828//                      break;
829//                  case "f_st_padding":
830//                      style.padding = val + "px";
831//                      break;
832                }
833        }
834};
835
836// Returns an HTML element for a widget that allows color selection.  That is,
837// a button that contains the given color, if any, and when pressed will popup
838// the sooner-or-later-to-be-rewritten select_color.html dialog allowing user
839// to select some color.  If a color is selected, an input field with the name
840// "f_st_"+name will be updated with the color value in #123456 format.
841TableOperations.createColorButton = function(doc, editor, color, name) {
842        if (!color) {
843                color = "";
844        } else if (!/#/.test(color)) {
845                color = HTMLArea._colorToRgb(color);
846        }
847
848        var df = doc.createElement("span");
849        var field = doc.createElement("input");
850        field.type = "hidden";
851        df.appendChild(field);
852        field.name = "f_st_" + name;
853        field.value = color;
854        var button = doc.createElement("span");
855        button.className = "buttonColor";
856        df.appendChild(button);
857        var span = doc.createElement("span");
858        span.className = "chooser";
859        // span.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
860        span.style.backgroundColor = color;
861        button.appendChild(span);
862        button.onmouseover = function() { if (!this.disabled) { this.className += " buttonColor-hilite"; }};
863        button.onmouseout = function() { if (!this.disabled) { this.className = "buttonColor"; }};
864        span.onclick = function() {
865                if (this.parentNode.disabled) {
866                        return false;
867                }
868                editor._popupDialog("select_color.html", function(color) {
869                        if (color) {
870                                span.style.backgroundColor = "#" + color;
871                                field.value = "#" + color;
872                        }
873                }, color);
874        };
875        var span2 = doc.createElement("span");
876        span2.innerHTML = "&#x00d7;";
877        span2.className = "nocolor";
878        span2.title = HTMLArea._lc("Unset color", "TableOperations");
879        button.appendChild(span2);
880        span2.onmouseover = function() { if (!this.parentNode.disabled) { this.className += " nocolor-hilite"; }};
881        span2.onmouseout = function() { if (!this.parentNode.disabled) { this.className = "nocolor"; }};
882        span2.onclick = function() {
883                span.style.backgroundColor = "";
884                field.value = "";
885        };
886        return df;
887};
888
889TableOperations.createStyleLayoutFieldset = function(doc, editor, el) {
890        var fieldset = doc.createElement("fieldset");
891        var legend = doc.createElement("legend");
892        fieldset.appendChild(legend);
893        legend.innerHTML = HTMLArea._lc("Layout", "TableOperations");
894        var table = doc.createElement("table");
895        fieldset.appendChild(table);
896        table.style.width = "100%";
897        var tbody = doc.createElement("tbody");
898        table.appendChild(tbody);
899
900        var tagname = el.tagName.toLowerCase();
901        var tr, td, input, select, option, options, i;
902
903        if (tagname != "td" && tagname != "tr" && tagname != "th") {
904                tr = doc.createElement("tr");
905                tbody.appendChild(tr);
906                td = doc.createElement("td");
907                td.className = "label";
908                tr.appendChild(td);
909                td.innerHTML = HTMLArea._lc("Float", "TableOperations") + ":";
910                td = doc.createElement("td");
911                tr.appendChild(td);
912                select = doc.createElement("select");
913                td.appendChild(select);
914                select.name = "f_st_float";
915                options = ["None", "Left", "Right"];
916                for (var i = 0; i < options.length; ++i) {
917                        var Val = options[i];
918                        var val = options[i].toLowerCase();
919                        option = doc.createElement("option");
920                        option.innerHTML = HTMLArea._lc(Val, "TableOperations");
921                        option.value = val;
922                        option.selected = (("" + el.style.cssFloat).toLowerCase() == val);
923                        select.appendChild(option);
924                }
925        }
926
927        tr = doc.createElement("tr");
928        tbody.appendChild(tr);
929        td = doc.createElement("td");
930        td.className = "label";
931        tr.appendChild(td);
932        td.innerHTML = HTMLArea._lc("Width", "TableOperations") + ":";
933        td = doc.createElement("td");
934        tr.appendChild(td);
935        input = doc.createElement("input");
936        input.type = "text";
937        input.value = TableOperations.getLength(el.style.width);
938        input.size = "5";
939        input.name = "f_st_width";
940        input.style.marginRight = "0.5em";
941        td.appendChild(input);
942        select = doc.createElement("select");
943        select.name = "f_st_widthUnit";
944        option = doc.createElement("option");
945        option.innerHTML = HTMLArea._lc("percent", "TableOperations");
946        option.value = "%";
947        option.selected = /%/.test(el.style.width);
948        select.appendChild(option);
949        option = doc.createElement("option");
950        option.innerHTML = HTMLArea._lc("pixels", "TableOperations");
951        option.value = "px";
952        option.selected = /px/.test(el.style.width);
953        select.appendChild(option);
954        td.appendChild(select);
955
956        select.style.marginRight = "0.5em";
957        td.appendChild(doc.createTextNode(HTMLArea._lc("Text align", "TableOperations") + ":"));
958        select = doc.createElement("select");
959        select.style.marginLeft = select.style.marginRight = "0.5em";
960        td.appendChild(select);
961        select.name = "f_st_textAlign";
962        options = ["Left", "Center", "Right", "Justify", "-"];
963        if (tagname == "td") {
964                options.push("Char");
965        }
966        input = doc.createElement("input");
967        input.name = "f_st_textAlignChar";
968        input.size = "1";
969        input.style.fontFamily = "monospace";
970        td.appendChild(input);
971        for (var i = 0; i < options.length; ++i) {
972                var Val = options[i];
973                var val = Val.toLowerCase();
974                option = doc.createElement("option");
975                option.value = val;
976                option.innerHTML = HTMLArea._lc(Val, "TableOperations");
977                option.selected = ((el.style.textAlign.toLowerCase() == val) || (el.style.textAlign == "" && Val == "-"));
978                select.appendChild(option);
979        }
980        function setCharVisibility(value) {
981                input.style.visibility = value ? "visible" : "hidden";
982                if (value) {
983                        input.focus();
984                        input.select();
985                }
986        }
987        select.onchange = function() { setCharVisibility(this.value == "char"); };
988        setCharVisibility(select.value == "char");
989
990        tr = doc.createElement("tr");
991        tbody.appendChild(tr);
992        td = doc.createElement("td");
993        td.className = "label";
994        tr.appendChild(td);
995        td.innerHTML = HTMLArea._lc("Height", "TableOperations") + ":";
996        td = doc.createElement("td");
997        tr.appendChild(td);
998        input = doc.createElement("input");
999        input.type = "text";
1000        input.value = TableOperations.getLength(el.style.height);
1001        input.size = "5";
1002        input.name = "f_st_height";
1003        input.style.marginRight = "0.5em";
1004        td.appendChild(input);
1005        select = doc.createElement("select");
1006        select.name = "f_st_heightUnit";
1007        option = doc.createElement("option");
1008        option.innerHTML = HTMLArea._lc("percent", "TableOperations");
1009        option.value = "%";
1010        option.selected = /%/.test(el.style.height);
1011        select.appendChild(option);
1012        option = doc.createElement("option");
1013        option.innerHTML = HTMLArea._lc("pixels", "TableOperations");
1014        option.value = "px";
1015        option.selected = /px/.test(el.style.height);
1016        select.appendChild(option);
1017        td.appendChild(select);
1018
1019        select.style.marginRight = "0.5em";
1020        td.appendChild(doc.createTextNode(HTMLArea._lc("Vertical align", "TableOperations") + ":"));
1021        select = doc.createElement("select");
1022        select.name = "f_st_verticalAlign";
1023        select.style.marginLeft = "0.5em";
1024        td.appendChild(select);
1025        options = ["Top", "Middle", "Bottom", "Baseline", "-"];
1026        for (var i = 0; i < options.length; ++i) {
1027                var Val = options[i];
1028                var val = Val.toLowerCase();
1029                option = doc.createElement("option");
1030                option.value = val;
1031                option.innerHTML = HTMLArea._lc(Val, "TableOperations");
1032                option.selected = ((el.style.verticalAlign.toLowerCase() == val) || (el.style.verticalAlign == "" && Val == "-"));
1033                select.appendChild(option);
1034        }
1035
1036        return fieldset;
1037};
1038
1039// Returns an HTML element containing the style attributes for the given
1040// element.  This can be easily embedded into any dialog; the functionality is
1041// also provided.
1042TableOperations.createStyleFieldset = function(doc, editor, el) {
1043        var fieldset = doc.createElement("fieldset");
1044        var legend = doc.createElement("legend");
1045        fieldset.appendChild(legend);
1046        legend.innerHTML = HTMLArea._lc("CSS Style", "TableOperations");
1047        var table = doc.createElement("table");
1048        fieldset.appendChild(table);
1049        table.style.width = "100%";
1050        var tbody = doc.createElement("tbody");
1051        table.appendChild(tbody);
1052
1053        var tr, td, input, select, option, options, i;
1054
1055        tr = doc.createElement("tr");
1056        tbody.appendChild(tr);
1057        td = doc.createElement("td");
1058        tr.appendChild(td);
1059        td.className = "label";
1060        td.innerHTML = HTMLArea._lc("Background", "TableOperations") + ":";
1061        td = doc.createElement("td");
1062        tr.appendChild(td);
1063        var df = TableOperations.createColorButton(doc, editor, el.style.backgroundColor, "backgroundColor");
1064        df.firstChild.nextSibling.style.marginRight = "0.5em";
1065        td.appendChild(df);
1066        td.appendChild(doc.createTextNode(HTMLArea._lc("Image URL", "TableOperations") + ": "));
1067        input = doc.createElement("input");
1068        input.type = "text";
1069        input.name = "f_st_backgroundImage";
1070        if (el.style.backgroundImage.match(/url\(\s*(.*?)\s*\)/)) {
1071                input.value = RegExp.$1;
1072        }
1073        // input.style.width = "100%";
1074        td.appendChild(input);
1075
1076        tr = doc.createElement("tr");
1077        tbody.appendChild(tr);
1078        td = doc.createElement("td");
1079        tr.appendChild(td);
1080        td.className = "label";
1081        td.innerHTML = HTMLArea._lc("FG Color", "TableOperations") + ":";
1082        td = doc.createElement("td");
1083        tr.appendChild(td);
1084        td.appendChild(TableOperations.createColorButton(doc, editor, el.style.color, "color"));
1085
1086        // for better alignment we include an invisible field.
1087        input = doc.createElement("input");
1088        input.style.visibility = "hidden";
1089        input.type = "text";
1090        td.appendChild(input);
1091
1092        tr = doc.createElement("tr");
1093        tbody.appendChild(tr);
1094        td = doc.createElement("td");
1095        tr.appendChild(td);
1096        td.className = "label";
1097        td.innerHTML = HTMLArea._lc("Border", "TableOperations") + ":";
1098        td = doc.createElement("td");
1099        tr.appendChild(td);
1100
1101        var colorButton = TableOperations.createColorButton(doc, editor, el.style.borderColor, "borderColor");
1102        var btn = colorButton.firstChild.nextSibling;
1103        td.appendChild(colorButton);
1104        // borderFields.push(btn);
1105        btn.style.marginRight = "0.5em";
1106
1107        select = doc.createElement("select");
1108        var borderFields = [];
1109        td.appendChild(select);
1110        select.name = "f_st_borderStyle";
1111        options = ["none", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
1112        var currentBorderStyle = el.style.borderStyle;
1113        // Gecko reports "solid solid solid solid" for "border-style: solid".
1114        // That is, "top right bottom left" -- we only consider the first
1115        // value.
1116        (currentBorderStyle.match(/([^\s]*)\s/)) && (currentBorderStyle = RegExp.$1);
1117        for (var i in options) {
1118    if(typeof options[i] == 'function') continue;
1119                var val = options[i];
1120                option = doc.createElement("option");
1121                option.value = val;
1122                option.innerHTML = val;
1123                (val == currentBorderStyle) && (option.selected = true);
1124                select.appendChild(option);
1125        }
1126        select.style.marginRight = "0.5em";
1127        function setBorderFieldsStatus(value) {
1128                for (var i = 0; i < borderFields.length; ++i) {
1129                        var el = borderFields[i];
1130                        el.style.visibility = value ? "hidden" : "visible";
1131                        if (!value && (el.tagName.toLowerCase() == "input")) {
1132                                el.focus();
1133                                el.select();
1134                        }
1135                }
1136        }
1137        select.onchange = function() { setBorderFieldsStatus(this.value == "none"); };
1138
1139        input = doc.createElement("input");
1140        borderFields.push(input);
1141        input.type = "text";
1142        input.name = "f_st_borderWidth";
1143        input.value = TableOperations.getLength(el.style.borderWidth);
1144        input.size = "5";
1145        td.appendChild(input);
1146        input.style.marginRight = "0.5em";
1147        var span = doc.createElement("span");
1148        span.innerHTML = HTMLArea._lc("pixels", "TableOperations");
1149        td.appendChild(span);
1150        borderFields.push(span);
1151
1152        setBorderFieldsStatus(select.value == "none");
1153
1154        if (el.tagName.toLowerCase() == "table") {
1155                // the border-collapse style is only for tables
1156                tr = doc.createElement("tr");
1157                tbody.appendChild(tr);
1158                td = doc.createElement("td");
1159                td.className = "label";
1160                tr.appendChild(td);
1161                input = doc.createElement("input");
1162                input.type = "checkbox";
1163                input.name = "f_st_borderCollapse";
1164                input.id = "f_st_borderCollapse";
1165                var val = (/collapse/i.test(el.style.borderCollapse));
1166                input.checked = val ? 1 : 0;
1167                td.appendChild(input);
1168
1169                td = doc.createElement("td");
1170                tr.appendChild(td);
1171                var label = doc.createElement("label");
1172                label.htmlFor = "f_st_borderCollapse";
1173                label.innerHTML = HTMLArea._lc("Collapsed borders", "TableOperations");
1174                td.appendChild(label);
1175        }
1176
1177//      tr = doc.createElement("tr");
1178//      tbody.appendChild(tr);
1179//      td = doc.createElement("td");
1180//      td.className = "label";
1181//      tr.appendChild(td);
1182//      td.innerHTML = HTMLArea._lc("Margin", "TableOperations") + ":";
1183//      td = doc.createElement("td");
1184//      tr.appendChild(td);
1185//      input = doc.createElement("input");
1186//      input.type = "text";
1187//      input.size = "5";
1188//      input.name = "f_st_margin";
1189//      td.appendChild(input);
1190//      input.style.marginRight = "0.5em";
1191//      td.appendChild(doc.createTextNode(HTMLArea._lc("Padding", "TableOperations") + ":"));
1192
1193//      input = doc.createElement("input");
1194//      input.type = "text";
1195//      input.size = "5";
1196//      input.name = "f_st_padding";
1197//      td.appendChild(input);
1198//      input.style.marginLeft = "0.5em";
1199//      input.style.marginRight = "0.5em";
1200//      td.appendChild(doc.createTextNode(HTMLArea._lc("pixels", "TableOperations")));
1201
1202        return fieldset;
1203};
1204
1205//// END GENERIC CODE -------------------------------------------------------