advanced-table-operations.js

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

		this.collumnActionSplitCol(td);
		var items = td.parentNode.cells;
		var index = td.cellIndex;
		while (nc-- > 0) 
		{
			this.rowActionSplitRow(items[index++]);
		}
};

AdvancedTableOperations.prototype.cellActionDelete = function (td)
{
    var editor = this.editor;
		// set the caret first to a position that doesn't disappear
		this.selectNextNode(td);
		td.parentNode.removeChild(td);
		editor.forceRedraw();
		editor.updateToolbar();
};

AdvancedTableOperations.prototype.cellActionMergeNonIE = function (sel)
{
  var myCells = null;
  var myRows = [];
  var myRow;
  var myRange, i = 0;
  
  try 
  {
    while (myRange = sel.getRangeAt(i++)) 
    {
      var td = myRange.startContainer.childNodes[myRange.startOffset];
      if (td.parentNode != myRow) 
      {
        myRow = td.parentNode;
        (myCells) && myRows.push(myCells);
        myCells = [];
      }
      myCells.push(td);
    }
  } 
  catch(e) 
  {/* finished walking through selection */}
  return myCells;
};

AdvancedTableOperations.prototype.cellActionMergeCreateHTML = function (td,rows)
{
    var editor = this.editor;
		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 += "&nbsp;");
				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();
};

// this function requires the file PopupDiv/PopupWin to be loaded from browser
// [JR] TODO refactor this function and make a nice popup out of it.
AdvancedTableOperations.prototype.dialogTableProperties = function() {
	// retrieve existing values
	var table = this.getElementNearby("table");
	// this.editor.selectNodeContents(table);
	// this.editor.updateToolbar();

	var dialog = new PopupWin(this.editor, HTMLArea._lc("Table Properties", "AdvancedTableOperations"), function(dialog, params) {
		AdvancedTableOperations.processStyle(params, table);
		for (var i in params) {
      if(typeof params[i] == 'function') continue;
			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 = "";
		dialog.content.innerHTML = " \
<div class='title'\
 style='background: url(" + dialog.baseURL + dialog.editor.imgURL("table-prop.gif", "AdvancedTableOperations") + ") #fff 98% 50% no-repeat'>" + HTMLArea._lc("Table Properties", "TableOperations") + "\
</div> \
<table style='width:100%'> \
  <tr> \
    <td> \
      <fieldset><legend>" + HTMLArea._lc("Description", "AdvancedTableOperations") + "</legend> \
       <table style='width:100%'> \
        <tr> \
          <td class='label'>" + HTMLArea._lc("Caption", "AdvancedTableOperations") + ":</td> \
          <td class='value'><input type='text' name='f_caption' value='" + f_caption + "'/></td> \
        </tr><tr> \
          <td class='label'>" + HTMLArea._lc("Summary", "AdvancedTableOperations") + ":</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>" + HTMLArea._lc("Spacing and padding", "AdvancedTableOperations") + "</legend> \
       <table style='width:100%'> \
"+//        <tr> \
//           <td class='label'>" + HTMLArea._lc("Width", "AdvancedTableOperations") + ":</td> \
//           <td><input type='text' name='f_width' value='" + f_width + "' size='5' /> \
//             <select name='f_unit'> \
//               <option value='%'" + selected(f_unit == "percent") + ">" + HTMLArea._lc("percent", "TableOperations") + "</option> \
//               <option value='px'" + selected(f_unit == "pixels") + ">" + HTMLArea._lc("pixels", "TableOperations") + "</option> \
//             </select> &nbsp;&nbsp;" + HTMLArea._lc("Align", "AdvancedTableOperations") + ": \
//             <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> \
//             </select> \
//           </td> \
//         </tr> \
"        <tr> \
          <td class='label'>" + HTMLArea._lc("Spacing", "AdvancedTableOperations") + ":</td> \
          <td><input type='text' name='f_spacing' size='5' value='" + f_spacing + "' /> &nbsp;" + HTMLArea._lc("Padding", "AdvancedTableOperations") + ":\
            <input type='text' name='f_padding' size='5' value='" + f_padding + "' /> &nbsp;&nbsp;" + HTMLArea._lc("pixels", "AdvancedTableOperations") + "\
          </td> \
        </tr> \
       </table> \
      </fieldset> \
    </td> \
  </tr> \
  <tr> \
    <td> \
      <fieldset><legend>" + HTMLArea._lc("Frame and borders", "AdvancedTableOperations") + "</legend> \
        <table width='100%'> \
          <tr> \
            <td class='label'>" + HTMLArea._lc("Borders", "AdvancedTableOperations") + ":</td> \
            <td><input name='f_borders' type='text' size='5' value='" + f_borders + "' /> &nbsp;&nbsp;" + HTMLArea._lc("pixels", "AdvancedTableOperations") + "</td> \
          </tr> \
          <tr> \
            <td class='label'>" + HTMLArea._lc("Frames", "TableOperations") + ":</td> \
            <td> \
              <select name='f_frames'> \
                <option value='void'" + selected(f_frames == "void") + ">" + HTMLArea._lc("No sides", "AdvancedTableOperations") + "</option> \
                <option value='above'" + selected(f_frames == "above") + ">" + HTMLArea._lc("The top side only", "AdvancedTableOperations") + "</option> \
                <option value='below'" + selected(f_frames == "below") + ">" + HTMLArea._lc("The bottom side only", "AdvancedTableOperations") + "</option> \
                <option value='hsides'" + selected(f_frames == "hsides") + ">" + HTMLArea._lc("The top and bottom sides only", "AdvancedTableOperations") + "</option> \
                <option value='vsides'" + selected(f_frames == "vsides") + ">" + HTMLArea._lc("The right and left sides only", "AdvancedTableOperations") + "</option> \
                <option value='lhs'" + selected(f_frames == "lhs") + ">" + HTMLArea._lc("The left-hand side only", "AdvancedTableOperations") + "</option> \
                <option value='rhs'" + selected(f_frames == "rhs") + ">" + HTMLArea._lc("The right-hand side only", "AdvancedTableOperations") + "</option> \
                <option value='box'" + selected(f_frames == "box") + ">" + HTMLArea._lc("All four sides", "AdvancedTableOperations") + "</option> \
              </select> \
            </td> \
          </tr> \
          <tr> \
            <td class='label'>" + HTMLArea._lc("Rules", "TableOperations") + ":</td> \
            <td> \
              <select name='f_rules'> \
                <option value='none'" + selected(f_rules == "none") + ">" + HTMLArea._lc("No rules", "AdvancedTableOperations") + "</option> \
                <option value='rows'" + selected(f_rules == "rows") + ">" + HTMLArea._lc("Rules will appear between rows only", "AdvancedTableOperations") + "</option> \
                <option value='cols'" + selected(f_rules == "cols") + ">" + HTMLArea._lc("Rules will appear between columns only", "AdvancedTableOperations") + "</option> \
                <option value='all'" + selected(f_rules == "all") + ">" + HTMLArea._lc("Rules will appear between all rows and columns", "AdvancedTableOperations") + "</option> \
              </select> \
            </td> \
          </tr> \
        </table> \
      </fieldset> \
    </td> \
  </tr> \
  <tr> \
    <td id='--HA-style'></td> \
  </tr> \
</table> \
";
		var st_prop = AdvancedTableOperations.createStyleFieldset(dialog.doc, dialog.editor, table);
		var p = dialog.doc.getElementById("--HA-style");
		p.appendChild(st_prop);
		var st_layout = AdvancedTableOperations.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");
	});
};



/* generic code from table-operations
 * [JR] TODO refactor this code
 */
 
AdvancedTableOperations.getLength = function(value) {
	var len = parseInt(value);
	if (isNaN(len)) {
		len = "";
	}
	return len;
};

AdvancedTableOperations.processRowCellTypes = function(params, htmlElement, curEditor)
{
  var editor = curEditor;
  var currentRow = htmlElement.nodeName.toLowerCase();
  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;
	    }  
  }
  
  // create a new tr element
  var newRow = editor._doc.createElement("tr");
  
  //iterate through all tr childnodes
  for(var c=0; c<htmlElement.childNodes.length; c++)
  {
    //validate nodename, because mozilla detects it also extra text nodes?
    if(htmlElement.childNodes[c].nodeName.toLowerCase()=='td'||htmlElement.childNodes[c].nodeName.toLowerCase()=='th')
    {
    //create new cells
    var newCell = editor._doc.createElement(newCellType);
    for(var c1=0; c1<htmlElement.childNodes[c].childNodes.length;c1++)
    {      
      //append the currentvalue to the new cell      
	  var tmpNode = htmlElement.childNodes[c].childNodes[c1].cloneNode(true);
      newCell.appendChild(tmpNode);
    }
    
    if(htmlElement.childNodes[c].attributes!=null)
    {      
	for (var a=0; a<htmlElement.childNodes[c].attributes.length; a++) 
	{
		var attr = htmlElement.childNodes[c].attributes[a];
		if(attr.value!='null' && attr.value!='')
		{			  
		  if(attr.name=='style')
		  {
	      newCell.setAttribute(attr.name, attr.value);
	    }
	  }		  
	}
	}
    
    newRow.appendChild(newCell);
  }
  }
  htmlElement.parentNode.replaceChild(newRow, htmlElement);
  htmlElement = newRow;	
    
}

AdvancedTableOperations.processCellType = function(params, htmlElement, curEditor)
{
  var editor = curEditor;
  var currentCellType = htmlElement.nodeName.toLowerCase();
  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;
	  }
	}
	if(newCellType!=currentCellType)
	{
	  
	  //var newCell = editor.convertNode(currentCellType,newCellType);
		var newCell = editor._doc.createElement(newCellType);
		
		for (var c=0; c<htmlElement.childNodes.length; c++)
		{
		  var tmpNode = htmlElement.childNodes[c].cloneNode(true);
			newCell.appendChild(tmpNode);
	  }
		for (var a=0; a<htmlElement.attributes.length; a++) 
		{
			var attr = htmlElement.attributes[a];
			if(attr.value!='null' && attr.value!='')
			{			  
			  if(attr.name=='style')
			  {
		      newCell.setAttribute(attr.name, attr.value);
		    }
		  }		  
		}
		
		htmlElement.parentNode.replaceChild(newCell, htmlElement);
		htmlElement = newCell;	
	}
};

// Applies the style found in "params" to the given element.
AdvancedTableOperations.processStyle = function(params, element) {
	var style = element.style;
	for (var i in params) {
    if(typeof params[i] == 'function') continue;
		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":