// 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.6 2004/07/13 15:19:51 mishoo 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 = 0; i < bl.length; ++i) {		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 = 0; i < ancestors.length; ++i) {		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 browserTableOperations.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> &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");	});};// this function requires the file PopupDiv/PopupWin to be loaded from browserTableOperations.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");	});};// 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;		}