// 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.3 2004/01/15 01:44:50 fullo 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.style.width = "400px";
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> " + 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 + "' /> " + i18n["Padding"] + ":\
<input type='text' name='f_padding' size='5' value='" + f_padding + "' /> " + 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 + "' /> " + 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");
});
};
// 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> \
// " + 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");
});
};
// 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) {
var tds = tr.getElementsByTagName("td");
for (var i = tds.length; --i >= 0;) {
var td = tds[i];
td.rowSpan = 1;
td.innerHTML = mozbr;
}
};
function splitRow(td) {
var n = parseInt("" + td.rowSpan);
var nc = parseInt("" + td.colSpan);
td.rowSpan = 1;
tr = td.parentNode;
var itr = tr.rowIndex;
var trs = tr.parentNode.rows;
var index = td.cellIndex;
while (--n > 0) {
tr = trs[++itr];
var otd = editor._doc.createElement("td");
otd.colSpan = td.colSpan;
otd.innerHTML = mozbr;
tr.insertBefore(otd, tr.cells[index]);
}
editor.forceRedraw();
editor.updateToolbar();
};
function splitCol(td) {
var nc = parseInt("" + td.colSpan);
td.colSpan = 1;
tr = td.parentNode;
var ref = td.nextSibling;
while (--nc > 0) {
var otd = editor._doc.createElement("td");
otd.rowSpan = td.rowSpan;
otd.innerHTML = mozbr;
tr.insertBefore(otd, ref);
}
editor.forceRedraw();
editor.updateToolbar();
};
function splitCell(td) {
var nc = parseInt("" + td.colSpan);
splitCol(td);
var items = td.parentNode.cells;
var index = td.cellIndex;
while (nc-- > 0) {
splitRow(items[index++]);
}
};
function selectNextNode(el) {
var node = el.nextSibling;
while (node && node.nodeType != 1) {
node = node.nextSibling;
}
if (!node) {
node = el.previousSibling;
while (node && node.nodeType != 1) {
node = node.previousSibling;
}
}
if (!node) {
node = el.parentNode;
}
editor.selectNodeContents(node);
};
switch (button_id) {
// ROWS
case "TO-row-insert-above":
case "TO-row-insert-under":
var tr = this.getClosest("tr");
if (!tr) {
break;
}
var otr = tr.cloneNode(true);
clearRow(otr);
tr.parentNode.insertBefore(otr, /under/.test(button_id) ? tr.nextSibling : tr);
editor.forceRedraw();
editor.focusEditor();
break;
case "TO-row-delete":
var tr = this.getClosest("tr");
if (!tr) {
break;
}
var par = tr.parentNode;
if (par.rows.length == 1) {
alert(i18n["not-del-last-row"]);
break;
}
// set the caret first to a position that doesn't
// disappear.
selectNextNode(tr);
par.removeChild(tr);
editor.forceRedraw();
editor.focusEditor();
editor.updateToolbar();
break;
case "TO-row-split":
var td = this.getClosest("td");
if (!td) {
break;
}
splitRow(td);
break;
// COLUMNS
case "TO-col-insert-before":
case "TO-col-insert-after":
var td = this.getClosest("td");
if (!td) {
break;
}
var rows = td.parentNode.parentNode.rows;
var index = td.cellIndex;
for (var i = rows.length; --i >= 0;) {
var tr = rows[i];
var ref = tr.cells[index + (/after/.test(button_id) ? 1 : 0)];
var otd = editor._doc.createElement("td");
otd.innerHTML = mozbr;
tr.insertBefore(otd, ref);
}
editor.focusEditor();
break;
case "TO-col-split":
var td = this.getClosest("td");
if (!td) {
break;
}
splitCol(td);
break;
case "TO-col-delete":
var td = this.getClosest("td");
if (!td) {
break;
}
var index = td.cellIndex;
if (td.parentNode.cells.length == 1) {
alert(i18n["not-del-last-col"]);
break;
}
// set the caret first to a position that doesn't disappear
selectNextNode(td);
var rows = td.parentNode.parentNode.rows;
for (var i = rows.length; --i >= 0;) {
var tr = rows[i];
tr.removeChild(tr.cells[index]);
}
editor.forceRedraw();
editor.focusEditor();
editor.updateToolbar();
break;
// CELLS
case "TO-cell-split":
var td = this.getClosest("td");
if (!td) {
break;
}
splitCell(td);
break;
case "TO-cell-insert-before":
case "TO-cell-insert-after":
var td = this.getClosest("td");
if (!td) {
break;
}
var tr = td.parentNode;
var otd = editor._doc.createElement("td");
otd.innerHTML = mozbr;
tr.insertBefore(otd, /after/.test(button_id) ? td.nextSibling : td);
editor.forceRedraw();
editor.focusEditor();
break;
case "TO-cell-delete":
var td = this.getClosest("td");
if (!td) {
break;
}
if (td.parentNode.cells.length == 1) {
alert(i18n["not-del-last-cell"]);
break;
}
// set the caret first to a position that doesn't disappear
selectNextNode(td);
td.parentNode.removeChild(td);
editor.forceRedraw();
editor.updateToolbar();
break;
case "TO-cell-merge":
// !! FIXME: Mozilla specific !!
var sel = editor._getSelection();
var range, i = 0;
var rows = [];
var row = null;
var cells = null;
if (!HTMLArea.is_ie) {
try {
while (range = sel.getRangeAt(i++)) {
var td = range.startContainer.childNodes[range.startOffset];
if (td.parentNode != row) {
row = td.parentNode;
(cells) && rows.push(cells);
cells = [];
}
cells.push(td);
}
} catch(e) {/* finished walking through selection */}
rows.push(cells);
} else {
// Internet Explorer "browser"
var td = this.getClosest("td");
if (!td) {
alert(i18n["Please click into some cell"]);
break;
}
var tr = td.parentElement;
var no_cols = prompt(i18n["How many columns would you like to merge?"], 2);
if (!no_cols) {
// cancelled
break;
}
var no_rows = prompt(i18n["How many rows would you like to merge?"], 2);
if (!no_rows) {
// cancelled
break;
}
var cell_index = td.cellIndex;
while (no_rows-- > 0) {
td = tr.cells[cell_index];
cells = [td];
for (var i = 1; i < no_cols; ++i) {
td = td.nextSibling;
if (!td) {
break;
}
cells.push(td);
}
rows.push(cells);
tr = tr.nextSibling;
if (!tr) {
break;
}
}
}
var HTML = "";
for (i = 0; i < rows.length; ++i) {
// i && (HTML += "<br />");
var cells = rows[i];
for (var j = 0; j < cells.length; ++j) {
// j && (HTML += " ");
var cell = cells[j];
HTML += cell.innerHTML;
(i || j) && (cell.parentNode.removeChild(cell));
}
}
var td = rows[0][0];
td.innerHTML = HTML;
td.rowSpan = rows.length;
td.colSpan = rows[0].length;
editor.selectNodeContents(td);
editor.forceRedraw();
editor.focusEditor();
break;
// PROPERTIES
case "TO-table-prop":
this.dialogTableProperties();
break;
case "TO-row-prop":
this.dialogRowCellProperties(false);
break;
case "TO-cell-prop":
this.dialogRowCellProperties(true);
break;
default:
alert("Button [" + button_id + "] not yet implemented");
}
};
// the list of buttons added by this plugin
TableOperations.btnList = [
// table properties button
["table-prop", "table"],
null, // separator
// ROWS
["row-prop", "tr"],
["row-insert-above", "tr"],
["row-insert-under", "tr"],
["row-delete", "tr"],
["row-split", "td[rowSpan!=1]"],
null,
// COLS
["col-insert-before", "td"],
["col-insert-after", "td"],
["col-delete", "td"],
["col-split", "td[colSpan!=1]"],
null,
// CELLS
["cell-prop", "td"],
["cell-insert-before", "td"],
["cell-insert-after", "td"],
["cell-delete", "td"],
["cell-merge", "tr"],
["cell-split", "td[colSpan!=1,rowSpan!=1]"]
];
//// GENERIC CODE [style of any element; this should be moved into a separate
//// file as it'll be very useful]
//// BEGIN GENERIC CODE -----------------------------------------------------
TableOperations.getLength = function(value) {
var len = parseInt(value);
if (isNaN(len)) {
len = "";
}
return len;
};
// Applies the style found in "params" to the given element.
TableOperations.processStyle = function(params, element) {
var style = element.style;
for (var i in params) {
var val = params[i];
switch (i) {
case "f_st_backgroundColor":
style.backgroundColor = val;
break;
case "f_st_color":
style.color = val;
break;
case "f_st_backgroundImage":
if (/\S/.test(val)) {
style.backgroundImage = "url(" + val + ")";
} else {
style.backgroundImage = "none";
}
break;
case "f_st_borderWidth":
style.borderWidth = val;
break;
case "f_st_borderStyle":
style.borderStyle = val;
break;
case "f_st_borderColor":
style.borderColor = val;
break;
case "f_st_borderCollapse":
style.borderCollapse = val ? "collapse" : "";
break;
case "f_st_width":
if (/\S/.test(val)) {
style.width = val + params["f_st_widthUnit"];
} else {
style.width = "";
}
break;
case "f_st_height":
if (/\S/.test(val)) {
style.height = val + params["f_st_heightUnit"];
} else {
style.height = "";
}
break;
case "f_st_textAlign":
if (val == "char") {
var ch = params["f_st_textAlignChar"];
if (ch == '"') {
ch = '\\"';
}
style.textAlign = '"' + ch + '"';
} else {
style.textAlign = val;
}
break;
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.html", 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 -------------------------------------------------------
