home *** CD-ROM | disk | FTP | other *** search
- // 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.5 2004/03/03 11:22:41 mschering 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 -------------------------------------------------------
-