table-operations.js

很棒的在线教学系统

// Table Operations Plugin for HTMLArea-3.0
// Implementation by Mihai Bazon.  Sponsored by http://www.bloki.com
//
// htmlArea v3.0 - Copyright (c) 2002 interactivetools.com, inc.
// This notice MUST stay intact for use (see license.txt).
//
// A free WYSIWYG editor replacement for <textarea> fields.
// For full source code and docs, visit http://www.interactivetools.com/
//
// Version 3.0 developed by Mihai Bazon for InteractiveTools.
//   http://dynarch.com/mishoo
//
// $Id: table-operations.js,v 1.1.18.1 2008/01/03 22:40:12 poltawski Exp $

// Object that will encapsulate all the table operations provided by
// HTMLArea-3.0 (except "insert table" which is included in the main file)
function TableOperations(editor) {
    this.editor = editor;

    var cfg = editor.config;
    var tt = TableOperations.I18N;
    var bl = TableOperations.btnList;
    var self = this;

    // register the toolbar buttons provided by this plugin
    var toolbar = ["linebreak"];
    for (var i in bl) {
        var btn = bl[i];
        if (!btn) {
            toolbar.push("separator");
        } else {
            var id = "TO-" + btn[0];
            cfg.registerButton(id, tt[id], editor.imgURL(btn[0] + ".gif", "TableOperations"), false,
                       function(editor, id) {
                           // dispatch button press event
                           self.buttonPress(editor, id);
                       }, btn[1]);
            toolbar.push(id);
        }
    }

    // add a new line in the toolbar
    cfg.toolbar.push(toolbar);
};

TableOperations._pluginInfo = {
    name          : "TableOperations",
    version       : "1.0",
    developer     : "Mihai Bazon",
    developer_url : "http://dynarch.com/mishoo/",
    c_owner       : "Mihai Bazon",
    sponsor       : "Zapatec Inc.",
    sponsor_url   : "http://www.bloki.com",
    license       : "htmlArea"
};

/************************
 * UTILITIES
 ************************/

// retrieves the closest element having the specified tagName in the list of
// ancestors of the current selection/caret.
TableOperations.prototype.getClosest = function(tagName) {
    var editor = this.editor;
    var ancestors = editor.getAllAncestors();
    var ret = null;
    tagName = ("" + tagName).toLowerCase();
    for (var i in ancestors) {
        var el = ancestors[i];
        if (el.tagName.toLowerCase() == tagName) {
            ret = el;
            break;
        }
    }
    return ret;
};

// this function requires the file PopupDiv/PopupWin to be loaded from browser
TableOperations.prototype.dialogTableProperties = function() {
    var i18n = TableOperations.I18N;
    // retrieve existing values
    var table = this.getClosest("table");
    // this.editor.selectNodeContents(table);
    // this.editor.updateToolbar();

    var dialog = new PopupWin(this.editor, i18n["Table Properties"], function(dialog, params) {
        TableOperations.processStyle(params, table);
        for (var i in params) {
            var val = params[i];
            switch (i) {
                case "f_caption":
                if (/\S/.test(val)) {
                    // contains non white-space characters
                    var caption = table.getElementsByTagName("caption")[0];
                    if (!caption) {
                        caption = dialog.editor._doc.createElement("caption");
                        table.insertBefore(caption, table.firstChild);
                    }
                    caption.innerHTML = val;
                } else {
                    // search for caption and delete it if found
                    var caption = table.getElementsByTagName("caption")[0];
                    if (caption) {
                        caption.parentNode.removeChild(caption);
                    }
                }
                break;
                case "f_summary":
                table.summary = val;
                break;
                case "f_width":
                table.style.width = ("" + val) + params.f_unit;
                break;
                case "f_align":
                table.align = val;
                break;
                case "f_spacing":
                table.cellSpacing = val;
                break;
                case "f_padding":
                table.cellPadding = val;
                break;
                case "f_borders":
                table.border = val;
                break;
                case "f_frames":
                table.frame = val;
                break;
                case "f_rules":
                table.rules = val;
                break;
            }
        }
        // various workarounds to refresh the table display (Gecko,
        // what's going on?! do not disappoint me!)
        dialog.editor.forceRedraw();
        dialog.editor.focusEditor();
        dialog.editor.updateToolbar();
        var save_collapse = table.style.borderCollapse;
        table.style.borderCollapse = "collapse";
        table.style.borderCollapse = "separate";
        table.style.borderCollapse = save_collapse;
    },

    // this function gets called when the dialog needs to be initialized
    function (dialog) {

        var f_caption = "";
        var capel = table.getElementsByTagName("caption")[0];
        if (capel) {
            f_caption = capel.innerHTML;
        }
        var f_summary = table.summary;
        var f_width = parseInt(table.style.width);
        isNaN(f_width) && (f_width = "");
        var f_unit = /%/.test(table.style.width) ? 'percent' : 'pixels';
        var f_align = table.align;
        var f_spacing = table.cellSpacing;
        var f_padding = table.cellPadding;
        var f_borders = table.border;
        var f_frames = table.frame;
        var f_rules = table.rules;

        function selected(val) {
            return val ? " selected" : "";
        };

        // dialog contents

        dialog.content.innerHTML = " \
<div class='title'\
 style='background: url(" + dialog.baseURL + dialog.editor.imgURL("table-prop.gif", "TableOperations") + ") #fff 98% 50% no-repeat'>" + i18n["Table Properties"] + "\
</div> \
<table style='width:100%'> \
  <tr> \
    <td> \
      <fieldset><legend>" + i18n["Description"] + "</legend> \
       <table style='width:100%'> \
        <tr> \
          <td class='label'>" + i18n["Caption"] + ":</td> \
          <td class='value'><input type='text' name='f_caption' value='" + f_caption + "'/></td> \
        </tr><tr> \
          <td class='label'>" + i18n["Summary"] + ":</td> \
          <td class='value'><input type='text' name='f_summary' value='" + f_summary + "'/></td> \
        </tr> \
       </table> \
      </fieldset> \
    </td> \
  </tr> \
  <tr><td id='--HA-layout'></td></tr> \
  <tr> \
    <td> \
      <fieldset><legend>" + i18n["Spacing and padding"] + "</legend> \
       <table style='width:100%'> \
"+//        <tr> \
//           <td class='label'>" + i18n["Width"] + ":</td> \
//           <td><input type='text' name='f_width' value='" + f_width + "' size='5' /> \
//             <select name='f_unit'> \
//               <option value='%'" + selected(f_unit == "percent") + ">" + i18n["percent"] + "</option> \
//               <option value='px'" + selected(f_unit == "pixels") + ">" + i18n["pixels"] + "</option> \
//             </select> &nbsp;&nbsp;" + i18n["Align"] + ": \
//             <select name='f_align'> \
//               <option value='left'" + selected(f_align == "left") + ">" + i18n["Left"] + "</option> \
//               <option value='center'" + selected(f_align == "center") + ">" + i18n["Center"] + "</option> \
//               <option value='right'" + selected(f_align == "right") + ">" + i18n["Right"] + "</option> \
//             </select> \
//           </td> \
//         </tr> \
"        <tr> \
          <td class='label'>" + i18n["Spacing"] + ":</td> \
          <td><input type='text' name='f_spacing' size='5' value='" + f_spacing + "' /> &nbsp;" + i18n["Padding"] + ":\
            <input type='text' name='f_padding' size='5' value='" + f_padding + "' /> &nbsp;&nbsp;" + i18n["pixels"] + "\
          </td> \
        </tr> \
       </table> \
      </fieldset> \
    </td> \
  </tr> \
  <tr> \
    <td> \
      <fieldset><legend>Frame and borders</legend> \
        <table width='100%'> \
          <tr> \
            <td class='label'>" + i18n["Borders"] + ":</td> \
            <td><input name='f_borders' type='text' size='5' value='" + f_borders + "' /> &nbsp;&nbsp;" + i18n["pixels"] + "</td> \
          </tr> \
          <tr> \
            <td class='label'>" + i18n["Frames"] + ":</td> \
            <td> \
              <select name='f_frames'> \
                <option value='void'" + selected(f_frames == "void") + ">" + i18n["No sides"] + "</option> \
                <option value='above'" + selected(f_frames == "above") + ">" + i18n["The top side only"] + "</option> \
                <option value='below'" + selected(f_frames == "below") + ">" + i18n["The bottom side only"] + "</option> \
                <option value='hsides'" + selected(f_frames == "hsides") + ">" + i18n["The top and bottom sides only"] + "</option> \
                <option value='vsides'" + selected(f_frames == "vsides") + ">" + i18n["The right and left sides only"] + "</option> \
                <option value='lhs'" + selected(f_frames == "lhs") + ">" + i18n["The left-hand side only"] + "</option> \
                <option value='rhs'" + selected(f_frames == "rhs") + ">" + i18n["The right-hand side only"] + "</option> \
                <option value='box'" + selected(f_frames == "box") + ">" + i18n["All four sides"] + "</option> \
              </select> \
            </td> \
          </tr> \
          <tr> \
            <td class='label'>" + i18n["Rules"] + ":</td> \
            <td> \
              <select name='f_rules'> \
                <option value='none'" + selected(f_rules == "none") + ">" + i18n["No rules"] + "</option> \
                <option value='rows'" + selected(f_rules == "rows") + ">" + i18n["Rules will appear between rows only"] + "</option> \
                <option value='cols'" + selected(f_rules == "cols") + ">" + i18n["Rules will appear between columns only"] + "</option> \
                <option value='all'" + selected(f_rules == "all") + ">" + i18n["Rules will appear between all rows and columns"] + "</option> \
              </select> \
            </td> \
          </tr> \
        </table> \
      </fieldset> \
    </td> \
  </tr> \
  <tr> \
    <td id='--HA-style'></td> \
  </tr> \
</table> \
";
        var st_prop = TableOperations.createStyleFieldset(dialog.doc, dialog.editor, table);
        var p = dialog.doc.getElementById("--HA-style");
        p.appendChild(st_prop);
        var st_layout = TableOperations.createStyleLayoutFieldset(dialog.doc, dialog.editor, table);
        p = dialog.doc.getElementById("--HA-layout");
        p.appendChild(st_layout);
        dialog.modal = true;
        dialog.addButtons("ok", "cancel");
        dialog.showAtElement(dialog.editor._iframe, "c");
        dialog.content.style.width = "400px";
        if (document.all) {
            dialog.content.style.height = dialog.content.clientHeight + 60 + 'px'; //moodlefix
        }
    });
};

// this function requires the file PopupDiv/PopupWin to be loaded from browser
TableOperations.prototype.dialogRowCellProperties = function(cell) {
    var i18n = TableOperations.I18N;
    // retrieve existing values
    var element = this.getClosest(cell ? "td" : "tr");
    var table = this.getClosest("table");
    // this.editor.selectNodeContents(element);
    // this.editor.updateToolbar();

    var dialog = new PopupWin(this.editor, i18n[cell ? "Cell Properties" : "Row Properties"], function(dialog, params) {
        TableOperations.processStyle(params, element);
        for (var i in params) {
            var val = params[i];
            switch (i) {
                case "f_align":
                element.align = val;
                break;
                case "f_char":
                element.ch = val;
                break;
                case "f_valign":
                element.vAlign = val;
                break;
            }
        }
        // various workarounds to refresh the table display (Gecko,
        // what's going on?! do not disappoint me!)
        dialog.editor.forceRedraw();
        dialog.editor.focusEditor();
        dialog.editor.updateToolbar();
        var save_collapse = table.style.borderCollapse;
        table.style.borderCollapse = "collapse";
        table.style.borderCollapse = "separate";
        table.style.borderCollapse = save_collapse;
    },

    // this function gets called when the dialog needs to be initialized
    function (dialog) {

        var f_align = element.align;
        var f_valign = element.vAlign;
        var f_char = element.ch;

        function selected(val) {
            return val ? " selected" : "";
        };

        // dialog contents
        dialog.content.style.width = "400px";
        dialog.content.innerHTML = " \
<div class='title'\
 style='background: url(" + dialog.baseURL + dialog.editor.imgURL(cell ? "cell-prop.gif" : "row-prop.gif", "TableOperations") + ") #fff 98% 50% no-repeat'>" + i18n[cell ? "Cell Properties" : "Row Properties"] + "</div> \
<table style='width:100%'> \
  <tr> \
    <td id='--HA-layout'> \
"+//      <fieldset><legend>" + i18n["Layout"] + "</legend> \
//        <table style='width:100%'> \
//         <tr> \
//           <td class='label'>" + i18n["Align"] + ":</td> \
//           <td> \
//             <select name='f_align'> \
//               <option value='left'" + selected(f_align == "left") + ">" + i18n["Left"] + "</option> \
//               <option value='center'" + selected(f_align == "center") + ">" + i18n["Center"] + "</option> \
//               <option value='right'" + selected(f_align == "right") + ">" + i18n["Right"] + "</option> \
//               <option value='char'" + selected(f_align == "char") + ">" + i18n["Char"] + "</option> \
//             </select> \
//             &nbsp;&nbsp;" + i18n["Char"] + ": \
//             <input type='text' style='font-family: monospace; text-align: center' name='f_char' size='1' value='" + f_char + "' /> \
//           </td> \
//         </tr><tr> \
//           <td class='label'>" + i18n["Vertical align"] + ":</td> \
//           <td> \
//             <select name='f_valign'> \
//               <option value='top'" + selected(f_valign == "top") + ">" + i18n["Top"] + "</option> \
//               <option value='middle'" + selected(f_valign == "middle") + ">" + i18n["Middle"] + "</option> \
//               <option value='bottom'" + selected(f_valign == "bottom") + ">" + i18n["Bottom"] + "</option> \
//               <option value='baseline'" + selected(f_valign == "baseline") + ">" + i18n["Baseline"] + "</option> \
//             </select> \
//           </td> \
//         </tr> \
//        </table> \
//       </fieldset> \
"    </td> \
  </tr> \
  <tr> \
    <td id='--HA-style'></td> \
  </tr> \
</table> \
";
        var st_prop = TableOperations.createStyleFieldset(dialog.doc, dialog.editor, element);
        var p = dialog.doc.getElementById("--HA-style");
        p.appendChild(st_prop);
        var st_layout = TableOperations.createStyleLayoutFieldset(dialog.doc, dialog.editor, element);
        p = dialog.doc.getElementById("--HA-layout");
        p.appendChild(st_layout);
        dialog.modal = true;
        dialog.addButtons("ok", "cancel");
        dialog.showAtElement(dialog.editor._iframe, "c");
        if (document.all) {
            dialog.content.style.height = dialog.content.clientHeight + 60 + 'px'; //moodlefix
        }
    });
};

// this function gets called when some button from the TableOperations toolbar
// was pressed.
TableOperations.prototype.buttonPress = function(editor, button_id) {
    this.editor = editor;
    var mozbr = HTMLArea.is_gecko ? "<br />" : "";
    var i18n = TableOperations.I18N;

    // helper function that clears the content in a table row
    function clearRow(tr) {