table-operations.js

很棒的在线教学系统

            case "f_st_verticalAlign":
            style.verticalAlign = val;
            break;
            case "f_st_float":
            style.cssFloat = val;
            break;
//          case "f_st_margin":
//          style.margin = val + "px";
//          break;
//          case "f_st_padding":
//          style.padding = val + "px";
//          break;
        }
    }
};

// Returns an HTML element for a widget that allows color selection.  That is,
// a button that contains the given color, if any, and when pressed will popup
// the sooner-or-later-to-be-rewritten select_color.html dialog allowing user
// to select some color.  If a color is selected, an input field with the name
// "f_st_"+name will be updated with the color value in #123456 format.
TableOperations.createColorButton = function(doc, editor, color, name) {
    if (!color) {
        color = "";
    } else if (!/#/.test(color)) {
        color = HTMLArea._colorToRgb(color);
    }

    var df = doc.createElement("span");
    var field = doc.createElement("input");
    field.type = "hidden";
    df.appendChild(field);
    field.name = "f_st_" + name;
    field.value = color;
    var button = doc.createElement("span");
    button.className = "buttonColor";
    df.appendChild(button);
    var span = doc.createElement("span");
    span.className = "chooser";
    // span.innerHTML = "       ";
    span.style.backgroundColor = color;
    button.appendChild(span);
    button.onmouseover = function() { if (!this.disabled) { this.className += " buttonColor-hilite"; }};
    button.onmouseout = function() { if (!this.disabled) { this.className = "buttonColor"; }};
    span.onclick = function() {
        if (this.parentNode.disabled) {
            return false;
        }
        editor._popupDialog("select_color.php", function(color) {
            if (color) {
                span.style.backgroundColor = "#" + color;
                field.value = "#" + color;
            }
        }, color);
    };
    var span2 = doc.createElement("span");
    span2.innerHTML = "×";
    span2.className = "nocolor";
    span2.title = TableOperations.I18N["Unset color"];
    button.appendChild(span2);
    span2.onmouseover = function() { if (!this.parentNode.disabled) { this.className += " nocolor-hilite"; }};
    span2.onmouseout = function() { if (!this.parentNode.disabled) { this.className = "nocolor"; }};
    span2.onclick = function() {
        span.style.backgroundColor = "";
        field.value = "";
    };
    return df;
};

TableOperations.createStyleLayoutFieldset = function(doc, editor, el) {
    var i18n = TableOperations.I18N;
    var fieldset = doc.createElement("fieldset");
    var legend = doc.createElement("legend");
    fieldset.appendChild(legend);
    legend.innerHTML = i18n["Layout"];
    var table = doc.createElement("table");
    fieldset.appendChild(table);
    table.style.width = "100%";
    var tbody = doc.createElement("tbody");
    table.appendChild(tbody);

    var tagname = el.tagName.toLowerCase();
    var tr, td, input, select, option, options, i;

    if (tagname != "td" && tagname != "tr" && tagname != "th") {
        tr = doc.createElement("tr");
        tbody.appendChild(tr);
        td = doc.createElement("td");
        td.className = "label";
        tr.appendChild(td);
        td.innerHTML = i18n["Float"] + ":";
        td = doc.createElement("td");
        tr.appendChild(td);
        select = doc.createElement("select");
        td.appendChild(select);
        select.name = "f_st_float";
        options = ["None", "Left", "Right"];
        for (i in options) {
            var Val = options[i];
            var val = options[i].toLowerCase();
            option = doc.createElement("option");
            option.innerHTML = i18n[Val];
            option.value = val;
            option.selected = (("" + el.style.cssFloat).toLowerCase() == val);
            select.appendChild(option);
        }
    }

    tr = doc.createElement("tr");
    tbody.appendChild(tr);
    td = doc.createElement("td");
    td.className = "label";
    tr.appendChild(td);
    td.innerHTML = i18n["Width"] + ":";
    td = doc.createElement("td");
    tr.appendChild(td);
    input = doc.createElement("input");
    input.type = "text";
    input.value = TableOperations.getLength(el.style.width);
    input.size = "5";
    input.name = "f_st_width";
    input.style.marginRight = "0.5em";
    td.appendChild(input);
    select = doc.createElement("select");
    select.name = "f_st_widthUnit";
    option = doc.createElement("option");
    option.innerHTML = i18n["percent"];
    option.value = "%";
    option.selected = /%/.test(el.style.width);
    select.appendChild(option);
    option = doc.createElement("option");
    option.innerHTML = i18n["pixels"];
    option.value = "px";
    option.selected = /px/.test(el.style.width);
    select.appendChild(option);
    td.appendChild(select);

    select.style.marginRight = "0.5em";
    td.appendChild(doc.createTextNode(i18n["Text align"] + ":"));
    select = doc.createElement("select");
    select.style.marginLeft = select.style.marginRight = "0.5em";
    td.appendChild(select);
    select.name = "f_st_textAlign";
    options = ["Left", "Center", "Right", "Justify"];
    if (tagname == "td") {
        options.push("Char");
    }
    input = doc.createElement("input");
    input.name = "f_st_textAlignChar";
    input.size = "1";
    input.style.fontFamily = "monospace";
    td.appendChild(input);
    for (i in options) {
        var Val = options[i];
        var val = Val.toLowerCase();
        option = doc.createElement("option");
        option.value = val;
        option.innerHTML = i18n[Val];
        option.selected = (el.style.textAlign.toLowerCase() == val);
        select.appendChild(option);
    }
    function setCharVisibility(value) {
        input.style.visibility = value ? "visible" : "hidden";
        if (value) {
            input.focus();
            input.select();
        }
    };
    select.onchange = function() { setCharVisibility(this.value == "char"); };
    setCharVisibility(select.value == "char");

    tr = doc.createElement("tr");
    tbody.appendChild(tr);
    td = doc.createElement("td");
    td.className = "label";
    tr.appendChild(td);
    td.innerHTML = i18n["Height"] + ":";
    td = doc.createElement("td");
    tr.appendChild(td);
    input = doc.createElement("input");
    input.type = "text";
    input.value = TableOperations.getLength(el.style.height);
    input.size = "5";
    input.name = "f_st_height";
    input.style.marginRight = "0.5em";
    td.appendChild(input);
    select = doc.createElement("select");
    select.name = "f_st_heightUnit";
    option = doc.createElement("option");
    option.innerHTML = i18n["percent"];
    option.value = "%";
    option.selected = /%/.test(el.style.height);
    select.appendChild(option);
    option = doc.createElement("option");
    option.innerHTML = i18n["pixels"];
    option.value = "px";
    option.selected = /px/.test(el.style.height);
    select.appendChild(option);
    td.appendChild(select);

    select.style.marginRight = "0.5em";
    td.appendChild(doc.createTextNode(i18n["Vertical align"] + ":"));
    select = doc.createElement("select");
    select.name = "f_st_verticalAlign";
    select.style.marginLeft = "0.5em";
    td.appendChild(select);
    options = ["Top", "Middle", "Bottom", "Baseline"];
    for (i in options) {
        var Val = options[i];
        var val = Val.toLowerCase();
        option = doc.createElement("option");
        option.value = val;
        option.innerHTML = i18n[Val];
        option.selected = (el.style.verticalAlign.toLowerCase() == val);
        select.appendChild(option);
    }

    return fieldset;
};

// Returns an HTML element containing the style attributes for the given
// element.  This can be easily embedded into any dialog; the functionality is
// also provided.
TableOperations.createStyleFieldset = function(doc, editor, el) {
    var i18n = TableOperations.I18N;
    var fieldset = doc.createElement("fieldset");
    var legend = doc.createElement("legend");
    fieldset.appendChild(legend);
    legend.innerHTML = i18n["CSS Style"];
    var table = doc.createElement("table");
    fieldset.appendChild(table);
    table.style.width = "100%";
    var tbody = doc.createElement("tbody");
    table.appendChild(tbody);

    var tr, td, input, select, option, options, i;

    tr = doc.createElement("tr");
    tbody.appendChild(tr);
    td = doc.createElement("td");
    tr.appendChild(td);
    td.className = "label";
    td.innerHTML = i18n["Background"] + ":";
    td = doc.createElement("td");
    tr.appendChild(td);
    var df = TableOperations.createColorButton(doc, editor, el.style.backgroundColor, "backgroundColor");
    df.firstChild.nextSibling.style.marginRight = "0.5em";
    td.appendChild(df);
    td.appendChild(doc.createTextNode(i18n["Image URL"] + ": "));
    input = doc.createElement("input");
    input.type = "text";
    input.name = "f_st_backgroundImage";
    if (el.style.backgroundImage.match(/url\(\s*(.*?)\s*\)/)) {
        input.value = RegExp.$1;
    }
    // input.style.width = "100%";
    td.appendChild(input);

    tr = doc.createElement("tr");
    tbody.appendChild(tr);
    td = doc.createElement("td");
    tr.appendChild(td);
    td.className = "label";
    td.innerHTML = i18n["FG Color"] + ":";
    td = doc.createElement("td");
    tr.appendChild(td);
    td.appendChild(TableOperations.createColorButton(doc, editor, el.style.color, "color"));

    // for better alignment we include an invisible field.
    input = doc.createElement("input");
    input.style.visibility = "hidden";
    input.type = "text";
    td.appendChild(input);

    tr = doc.createElement("tr");
    tbody.appendChild(tr);
    td = doc.createElement("td");
    tr.appendChild(td);
    td.className = "label";
    td.innerHTML = i18n["Border"] + ":";
    td = doc.createElement("td");
    tr.appendChild(td);

    var colorButton = TableOperations.createColorButton(doc, editor, el.style.borderColor, "borderColor");
    var btn = colorButton.firstChild.nextSibling;
    td.appendChild(colorButton);
    // borderFields.push(btn);
    btn.style.marginRight = "0.5em";

    select = doc.createElement("select");
    var borderFields = [];
    td.appendChild(select);
    select.name = "f_st_borderStyle";
    options = ["none", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
    var currentBorderStyle = el.style.borderStyle;
    // Gecko reports "solid solid solid solid" for "border-style: solid".
    // That is, "top right bottom left" -- we only consider the first
    // value.
    (currentBorderStyle.match(/([^\s]*)\s/)) && (currentBorderStyle = RegExp.$1);
    for (i in options) {
        var val = options[i];
        option = doc.createElement("option");
        option.value = val;
        option.innerHTML = val;
        (val == currentBorderStyle) && (option.selected = true);
        select.appendChild(option);
    }
    select.style.marginRight = "0.5em";
    function setBorderFieldsStatus(value) {
        for (i in borderFields) {
            var el = borderFields[i];
            el.style.visibility = value ? "hidden" : "visible";
            if (!value && (el.tagName.toLowerCase() == "input")) {
                el.focus();
                el.select();
            }
        }
    };
    select.onchange = function() { setBorderFieldsStatus(this.value == "none"); };

    input = doc.createElement("input");
    borderFields.push(input);
    input.type = "text";
    input.name = "f_st_borderWidth";
    input.value = TableOperations.getLength(el.style.borderWidth);
    input.size = "5";
    td.appendChild(input);
    input.style.marginRight = "0.5em";
    var span = doc.createElement("span");
    span.innerHTML = i18n["pixels"];
    td.appendChild(span);
    borderFields.push(span);

    setBorderFieldsStatus(select.value == "none");

    if (el.tagName.toLowerCase() == "table") {
        // the border-collapse style is only for tables
        tr = doc.createElement("tr");
        tbody.appendChild(tr);
        td = doc.createElement("td");
        td.className = "label";
        tr.appendChild(td);
        input = doc.createElement("input");
        input.type = "checkbox";
        input.name = "f_st_borderCollapse";
        input.id = "f_st_borderCollapse";
        var val = (/collapse/i.test(el.style.borderCollapse));
        input.checked = val ? 1 : 0;
        td.appendChild(input);

        td = doc.createElement("td");
        tr.appendChild(td);
        var label = doc.createElement("label");
        label.htmlFor = "f_st_borderCollapse";
        label.innerHTML = i18n["Collapsed borders"];
        td.appendChild(label);
    }

//  tr = doc.createElement("tr");
//  tbody.appendChild(tr);
//  td = doc.createElement("td");
//  td.className = "label";
//  tr.appendChild(td);
//  td.innerHTML = i18n["Margin"] + ":";
//  td = doc.createElement("td");
//  tr.appendChild(td);
//  input = doc.createElement("input");
//  input.type = "text";
//  input.size = "5";
//  input.name = "f_st_margin";
//  td.appendChild(input);
//  input.style.marginRight = "0.5em";
//  td.appendChild(doc.createTextNode(i18n["Padding"] + ":"));

//  input = doc.createElement("input");
//  input.type = "text";
//  input.size = "5";
//  input.name = "f_st_padding";
//  td.appendChild(input);
//  input.style.marginLeft = "0.5em";
//  input.style.marginRight = "0.5em";
//  td.appendChild(doc.createTextNode(i18n["pixels"]));

    return fieldset;
};

//// END GENERIC CODE -------------------------------------------------------