advanced-table-operations.js

Hippo CMS是一个以信息为中心的开源内容管理系统。Hippo CMS目标是供中,大型企业来管理其发布在互连网

	input.style.marginRight = "0.5em";
	var span = doc.createElement("span");
	span.innerHTML = HTMLArea._lc("pixels", "TableOperations");
	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 = HTMLArea._lc("Collapsed borders", "AdvancedTableOperations");
		td.appendChild(label);
	}
	return fieldset;
};


// this function requires the file PopupDiv/PopupWin to be loaded from browser
AdvancedTableOperations.prototype.dialogRowProperties = function() {
	// retrieve existing values
	var element = this.getElementNearby("tr");
	var table = this.getElementNearby("table");

	var dialog = new PopupWin(this.editor, HTMLArea._lc("Row Properties", "AdvancedTableOperations"), function(dialog, params) {
		AdvancedTableOperations.processStyle(params, element);
		AdvancedTableOperations.processRowCellTypes(params, element,dialog.editor);
		for (var i in params) {
      if(typeof params[i] == 'function') continue;
			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 = "";
		dialog.content.innerHTML = " \
<div class='title'\
 style='background: url(" + dialog.baseURL + dialog.editor.imgURL("row-prop.gif", "AdvancedTableOperations") + ") #fff 98% 50% no-repeat'>" + HTMLArea._lc("Row Properties", "AdvancedTableOperations") + "</div> \
<table style='width:100%'> \
  <tr> \
    <td id='--HA-layout'> \
"+//      <fieldset><legend>" + HTMLArea._lc("Layout", "AdvancedTableOperations") + "</legend> \
//        <table style='width:100%'> \
//         <tr> \
//           <td class='label'>" + HTMLArea._lc("Align", "AdvancedTableOperations") + ":</td> \
//           <td> \
//             <select name='f_align'> \
//               <option value='left'" + selected(f_align == "left") + ">" + HTMLArea._lc("Left", "AdvancedTableOperations") + "</option> \
//               <option value='center'" + selected(f_align == "center") + ">" + HTMLArea._lc("Center", "AdvancedTableOperations") + "</option> \
//               <option value='right'" + selected(f_align == "right") + ">" + HTMLArea._lc("Right", "AdvancedTableOperations") + "</option> \
//               <option value='char'" + selected(f_align == "char") + ">" + HTMLArea._lc("Char", "AdvancedTableOperations") + "</option> \
//             </select> \
//             &nbsp;&nbsp;" + HTMLArea._lc("Char", "AdvancedTableOperations") + ": \
//             <input type='text' style='font-family: monospace; text-align: center' name='f_char' size='1' value='" + f_char + "' /> \
//           </td> \
//         </tr><tr> \
//           <td class='label'>" + HTMLArea._lc("Vertical align", "AdvancedTableOperations") + ":</td> \
//           <td> \
//             <select name='f_valign'> \
//               <option value='top'" + selected(f_valign == "top") + ">" + HTMLArea._lc("Top", "AdvancedTableOperations") + "</option> \
//               <option value='middle'" + selected(f_valign == "middle") + ">" + HTMLArea._lc("Middle", "AdvancedTableOperations") + "</option> \
//               <option value='bottom'" + selected(f_valign == "bottom") + ">" + HTMLArea._lc("Bottom", "AdvancedTableOperations") + "</option> \
//               <option value='baseline'" + selected(f_valign == "baseline") + ">" + HTMLArea._lc("Baseline", "AdvancedTableOperations") + "</option> \
//             </select> \
//           </td> \
//         </tr> \
//        </table> \
//       </fieldset> \
"    </td> \
  </tr> \
  <tr> \
    <td id='--HA-style'></td> \
  </tr> \
  <tr> \
    <td id='--HA-type'></td> \
  </tr> \
</table> \
";
		var st_prop = AdvancedTableOperations.createStyleFieldset(dialog.doc, dialog.editor, element);
		var p = dialog.doc.getElementById("--HA-style");
		p.appendChild(st_prop);
		var st_layout = AdvancedTableOperations.createStyleLayoutFieldset(dialog.doc, dialog.editor, element);
		p = dialog.doc.getElementById("--HA-layout");
		p.appendChild(st_layout);
		var st_type = AdvancedTableOperations.createFieldtype(dialog.doc, dialog.editor, element);
		p = dialog.doc.getElementById("--HA-type");
		p.appendChild(st_type);
		dialog.modal = true;
		dialog.addButtons("OK", "Cancel");
		dialog.showAtElement(dialog.editor._iframe, "c");
	});
};

AdvancedTableOperations.prototype.getParentCellElement = function()
{
	var editor = this.editor;	
	var prnt = editor.getParentElement();
	if(prnt.nodeName.toLowerCase()=="td" || prnt.nodeName.toLowerCase()=="th")
	{
	  return prnt;
	}
	else
	{
	  return prnt.parentNode;
	}
};

// this function requires the file PopupDiv/PopupWin to be loaded from browser
AdvancedTableOperations.prototype.dialogCellProperties = function() {
	// retrieve existing values	
	var editor = this.editor;	
	
	var element = this.getParentCellElement();
	var table = this.getElementNearby("table");

	var dialog = new PopupWin(this.editor, HTMLArea._lc("Cell Properties", "AdvancedTableOperations"), function(dialog, params) {
	  AdvancedTableOperations.processCellType(params, element,dialog.editor);
		AdvancedTableOperations.processStyle(params, element);
		for (var i in params) {
      if(typeof params[i] == 'function') continue;
			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-prop.gif", "AdvancedTableOperations") + ") #fff 98% 50% no-repeat'>" + HTMLArea._lc("Cell Properties", "AdvancedTableOperations") + "</div> \
<table style='width:100%'> \
  <tr> \
    <td id='--HA-layout'> \
"+//      <fieldset><legend>" + HTMLArea._lc("Layout", "AdvancedTableOperations") + "</legend> \
//        <table style='width:100%'> \
//         <tr> \
//           <td class='label'>" + HTMLArea._lc("Align", "AdvancedTableOperations") + ":</td> \
//           <td> \
//             <select name='f_align'> \
//               <option value='left'" + selected(f_align == "left") + ">" + HTMLArea._lc("Left", "AdvancedTableOperations") + "</option> \
//               <option value='center'" + selected(f_align == "center") + ">" + HTMLArea._lc("Center", "AdvancedTableOperations") + "</option> \
//               <option value='right'" + selected(f_align == "right") + ">" + HTMLArea._lc("Right", "AdvancedTableOperations") + "</option> \
//               <option value='char'" + selected(f_align == "char") + ">" + HTMLArea._lc("Char", "AdvancedTableOperations") + "</option> \
//             </select> \
//             &nbsp;&nbsp;" + HTMLArea._lc("Char", "AdvancedTableOperations") + ": \
//             <input type='text' style='font-family: monospace; text-align: center' name='f_char' size='1' value='" + f_char + "' /> \
//           </td> \
//         </tr><tr> \
//           <td class='label'>" + HTMLArea._lc("Vertical align", "AdvancedTableOperations") + ":</td> \
//           <td> \
//             <select name='f_valign'> \
//               <option value='top'" + selected(f_valign == "top") + ">" + HTMLArea._lc("Top", "AdvancedTableOperations") + "</option> \
//               <option value='middle'" + selected(f_valign == "middle") + ">" + HTMLArea._lc("Middle", "AdvancedTableOperations") + "</option> \
//               <option value='bottom'" + selected(f_valign == "bottom") + ">" + HTMLArea._lc("Bottom", "AdvancedTableOperations") + "</option> \
//               <option value='baseline'" + selected(f_valign == "baseline") + ">" + HTMLArea._lc("Baseline", "AdvancedTableOperations") + "</option> \
//             </select> \
//           </td> \
//         </tr> \
//        </table> \
//       </fieldset> \
"    </td> \
  </tr> \
  <tr> \
    <td id='--HA-style'></td> \
  </tr> \
  <tr> \
    <td id='--HA-type'></td> \
  </tr> \
</table> \
";
		var st_prop = AdvancedTableOperations.createStyleFieldset(dialog.doc, dialog.editor, element);
		var p = dialog.doc.getElementById("--HA-style");
		p.appendChild(st_prop);
		var st_layout = AdvancedTableOperations.createStyleLayoutFieldset(dialog.doc, dialog.editor, element);
		p = dialog.doc.getElementById("--HA-layout");
		p.appendChild(st_layout);
		var st_type = AdvancedTableOperations.createFieldtype(dialog.doc, dialog.editor, element);
		p = dialog.doc.getElementById("--HA-type");
		p.appendChild(st_type);
		
		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
AdvancedTableOperations.prototype.dialogColProperties = function() {
	// retrieve existing values	
	var editor = this.editor;
	var element = this.getParentCellElement();
	var elIndex = element.cellIndex;
	var table = this.getElementNearby("table");

	var dialog = new PopupWin(this.editor, HTMLArea._lc("Col Properties", "AdvancedTableOperations"), function(dialog, params) {
	  AdvancedTableOperations.processColType(params, table ,elIndex ,dialog.editor);
		// 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-prop.gif", "AdvancedTableOperations") + ") #fff 98% 50% no-repeat'>" + HTMLArea._lc("Col Properties", "AdvancedTableOperations") + "</div> \
<table style='width:100%'> \
  <tr> \
    <td id='--HA-type'></td> \
  </tr> \
</table> \
";
		var st_type = AdvancedTableOperations.updateColtype(dialog.doc, dialog.editor, element);
		p = dialog.doc.getElementById("--HA-type");
		p.appendChild(st_type);
		
		dialog.modal = true;
		dialog.addButtons("OK", "Cancel");
		dialog.showAtElement(dialog.editor._iframe, "c");
	});
};

AdvancedTableOperations.updateColtype = function(doc, editor, el)
{
	var fieldset = doc.createElement("fieldset");
	var legend = doc.createElement("legend");
	fieldset.appendChild(legend);
	legend.innerHTML = HTMLArea._lc("Cell type", "AdvancedTableOperations");
	
	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 = doc.createElement("tr");
	tbody.appendChild(tr);
	td = doc.createElement("td");
	td.className = "label";
	tr.appendChild(td);
	td.innerHTML = HTMLArea._lc("Cell type", "AdvancedTableOperations") + ":";
	td = doc.createElement("td");
	tr.appendChild(td);
	
	var	select = doc.createElement("select");
	td.appendChild(select);
	select.name = "f_celltype";
	options = ["th", "td"];
	for (var i = 0; i < options.length; ++i) {
		var Val = options[i];
		var val = options[i].toLowerCase();
		option = doc.createElement("option");
		option.innerHTML = HTMLArea._lc(Val, "AdvancedTableOperations");
		option.value = val;
		option.selected = (tagName == val);
		select.appendChild(option);
	}
	
	return fieldset;

};

AdvancedTableOperations.processColType = function(params, htmlElement, elementIndex, curEditor)
{
  var editor = curEditor;
  var currentTable = htmlElement;
  var newCellType = "";
  
  var doc;
	for (var i in params)
	{
    if(typeof params[i] == 'function') continue;
		var val = params[i];
		switch (i) {
	    case "f_celltype":
	      newCellType = val;
			  break;
	  }
	}
	for(var t=0;t<currentTable.rows.length;t++)
    {
      var curRow = currentTable.rows.item(t);
      var curCell = curRow.childNodes[elementIndex];
      
      var newCell = editor._doc.createElement(newCellType);
      
      for (var c=0; c<curCell.childNodes.length; c++)
      {
        var tmpNode = curCell.childNodes[c].cloneNode(true);
	    newCell.appendChild(tmpNode);
      }
      if(curCell.attributes!=null)
      {      
  	    for (var a=0; a<curCell.attributes.length; a++) 
	    {
  		  var attr = curCell.attributes[a];
		  if(attr.value!='null' && attr.value!='')
		  {			  
            if(attr.name=='style')
		    {
		      newCell.setAttribute(attr.name, attr.value);
		    }
		  }		  
	    }
      }	
      curCell.parentNode.replaceChild(newCell, curCell);
	  curCell = newCell;
    }
};