gedion
commented
12 years ago continued.... I accidentally hit submit...
Here are the rest of the changes. Remember to use the firefox browser when testing. In Chrome, the caret jumps around when it is within the table. Please send us ideas and feedback
/*
In contentcollector.js, in function isBlockElement(), we need to make sure that br tags within tables do not induce a new line
*/
function isBlockElement(n)
{
var divNode = dom.nodeTagName(n) || "";
if(divNode == 'DIV'){
var tAttr = dom.nodeAttr(n,'value')
if(tAttr==null||tAttr!='tblBreak'){
return !!_blockElems[(dom.nodeTagName(n) || "").toLowerCase()];
}
}
return false;
}/* similarly in cc.collectContent , the br condition needs an update */
if (tname == "br")
{
tAttr = dom.nodeAttr(node,'value');
if(tAttr == null || tAttr!='tblBreak'){
cc.startNewLine(state);
}
}/*
* in domline.js and domline_clinet.js, we add the below function to render the json string as html table
*/
/*
this code snippet needs to be added to result.appendSpan(txt,cls)
*/
else if (txt)
{
if(txt.indexOf("data-tables")!=-1){
try{
tblJSONObj = JSON.parse(txt);
var htmlTbl = buildText(tblJSONObj,cls);
html.push('<span class="', cls || '', '">',htmlTbl, perTextNodeProcess(""), '</span>');
}catch(error){
var tempErrorMessage = "hmm...something went wrong. ctrl-z is the best thing a man could have. Reporting it to WLOS developers is the 2nd best thing!";
top.$('#error_message_cont').html('Error: buildText ' + error + '<br>' + tempErrorMessage);
top.$('#error_message_cont').fadeIn().delay(5000).fadeOut('slow');
}
}
else{
if (href)
{
if(!~href.indexOf("http")) // if the url doesn't include http or https etc prefix it.
{
href = "http://"+href;
}
extraOpenTags = extraOpenTags + '<a href="' + domline.escapeHTML(href) + '">';
extraCloseTags = '</a>' + extraCloseTags;
}
if (simpleTags)
{
simpleTags.sort();
extraOpenTags = extraOpenTags + '<' + simpleTags.join('><') + '>';
simpleTags.reverse();
extraCloseTags = '</' + simpleTags.join('></') + '>' + extraCloseTags;
}
html.push('<span class="', cls || '', '">', extraOpenTags, perTextNodeProcess(domline.escapeHTML(txt)), extraCloseTags, '</span>');
}
}
function buildText(tblJSONObj, cls) {
var htmlTbl = "";
var tblId = tblJSONObj.tblId;
var tblClass = tblJSONObj.tblClass;
var tdClass = tblJSONObj.tdClass;
var trClass = tblJSONObj.trClass;
var payload = tblJSONObj.payload;
var tblProperties = tblJSONObj.tblProperties;
var rowAttrs = tblProperties.rowAttrs;
var cellAttrs = tblProperties.cellAttrs;
var colAttrs = tblProperties.colAttrs;
var tblWidth = typeof (tblProperties) == 'undefined' || tblProperties == null ? "6" : tblProperties.width || "6";
tblWidth = getAttrInInch(tblWidth);
var tblHeight = typeof (tblProperties) == 'undefined' || tblProperties == null ? "" : tblProperties.height || "";
tblHeight = getAttrInInch(tblHeight);
var tblBorderWidth = typeof (tblProperties) == 'undefined' || tblProperties == null ? 2 : tblProperties.borderWidth || 2;
var tblBorderColor = typeof (tblProperties) == 'undefined' || tblProperties == null ? "" : tblProperties.borderColor || "";
var currRow = tblProperties.currRowAuthorIdx;
var currCell = tblProperties.currCellAuthorIdx;
var authors = tblProperties.authors;
var htmlTbl = "<table id='" + tblId + "' class='" + tblClass + "' style='width:" + tblWidth + "px;height:" + tblHeight + "px;'><tbody>";
var rows = tblJSONObj.payload;
var evenRowBgColor = typeof (rowAttrs) == 'undefined' || rowAttrs == null ? "" : rowAttrs.evenBgColor || "";
var oddRowBgColor = typeof (rowAttrs) == 'undefined' || rowAttrs == null ? "" : rowAttrs.oddBgColor || "";
for (var j = 0, rl = rows.length; j < rl; j++) {
var tds = rows[j];
trClassName = "";
var rowBgColor = oddRowBgColor;
if (j % 2 == 0) {
trClassName = "alt";
rowBgColor = evenRowBgColor;
}
htmlTbl += "<tr style='background-color:" + rowBgColor + ";' class='" + trClass + " " + trClassName + "'>";
var preHeader = "";
if (j == 0) {
preHeader = "{\"payload\":["
}
htmlTbl += "<td class='" + tdClass + " overhead'>" + preHeader + "[\"" + "</td>";
for (var i = 0, tl = tds.length; i < tl; i++) {
var cellAttr = typeof (cellAttrs[j]) == 'undefined' || cellAttrs[j] == null ? null : cellAttrs[j][i];
var cellStyles = getCellAttrs(cellAttr, colAttrs[i], authors, i, j)
var quoteAndComma = ",\"";
var bracketAndcomma = "";
if (i == tl - 1) {
quoteAndComma = "";
bracketAndcomma = "],";
if (j == rl - 1) {
bracketAndcomma = "]],\"tblId\":\"" + tblId + "\",\"tblClass\":\"" + tblClass + "\",\"trClass\":\"" + trClass + "\",\"tdClass\":\"" + tdClass + "\",\"tblProperties\":" + JSON.stringify(tblProperties) + "}";
}
}
if (tds[i].indexOf('/r/n') != -1) {
cellsWithBr = "";
var tdText = tds[i].split('/r/n');
for (var k = 0; k < tdText.length; k++) {
if (k < tdText.length - 1) {
cellsWithBr += domline.escapeHTML(tdText[k]) + "<div value='tblBreak' class='hide-el'>/r/n</div><br value='tblBreak'>";
} else cellsWithBr += domline.escapeHTML(tdText[k]);
}
htmlTbl += "<td style='" + cellStyles + "border:" + tblBorderWidth + "px solid " + tblBorderColor + ";' >" + cellsWithBr + "<br value='tblBreak'></td><td class='" + tdClass + " overhead'>\"" + quoteAndComma + bracketAndcomma + "</td>";
} else {
htmlTbl += "<td style='" + cellStyles + "border:" + tblBorderWidth + "px solid " + tblBorderColor + ";' >" + domline.escapeHTML(tds[i] + "") + "<br value='tblBreak'></td><td class=' " + tdClass + " overhead'>\"" + quoteAndComma + bracketAndcomma + "</td>";
}
}
htmlTbl += "</tr>";
}
htmlTbl += "</tbody></table>";
return htmlTbl;
};
function getCellAttrs(cellAttr, colAttr, authors, cell, row) {
var attrsJSO = {};
var colWidth = typeof (colAttr) == 'undefined' || colAttr == null ? "1" : colAttr.width || "1";
attrsJSO['width'] = getAttrInInch(colWidth) + 'px';
var cellBgColor = typeof (cellAttr) == 'undefined' || cellAttr == null ? "" : cellAttr.bgColor || "";
if (typeof (authors) != 'undefined' && authors != null) {
for (var authorId in authors) {
author = authors[authorId];
if (typeof (author) != 'undefined' && author != null && author.cell == cell && author.row == row) {
cellBgColor = author.colorId;
}
}
}
attrsJSO['background-color'] = cellBgColor;
var cellHeight = typeof (cellAttr) == 'undefined' || cellAttr == null ? "" : cellAttr.height || "";
attrsJSO['height'] = getAttrInInch(cellHeight) + 'px';
var cellPadding = typeof (cellAttr) == 'undefined' || cellAttr == null ? "" : cellAttr.padding || "";
attrsJSO['padding-top'] = attrsJSO['padding-bottom'] = attrsJSO['padding-left'] = attrsJSO['padding-right'] = getAttrInInch(cellPadding) + 'px';
var cellVAlign = typeof (cellAttr) == 'undefined' || cellAttr == null ? "" : cellAttr.vAlign || "";
attrsJSO['vertical-align'] = cellVAlign;
var cellFontSize = typeof (cellAttr) == 'undefined' || cellAttr == null ? "" : cellAttr.fontSize || "";
attrsJSO['font-size'] = cellFontSize + 'px';
var cellFontWeight = typeof (cellAttr) == 'undefined' || cellAttr == null ? "" : cellAttr.fontWeight || "";
attrsJSO['font-weight'] = cellFontWeight;
var cellFontStyle = typeof (cellAttr) == 'undefined' || cellAttr == null ? "" : cellAttr.fontStyle || "";
attrsJSO['font-style'] = cellFontStyle;
var cellTextDecoration = typeof (cellAttr) == 'undefined' || cellAttr == null ? "" : cellAttr.textDecoration || "";
attrsJSO['text-decoration'] = cellTextDecoration;
var attrsString = "";
for (var attrName in attrsJSO) {
if (attrName) attrsString += attrName + ":" + attrsJSO[attrName] + ";";
}
return attrsString;
}
function getAttrInInch(attrValue) {
var intAttrValue = 0;
intAttrValue = parseInt(attrValue);
attrValue = isNaN(intAttrValue) ? parseFloat(attrValue) : intAttrValue;
return 96 * attrValue - 1;
}css to hide the unneeded columns. hide-el:{display:none;}
JohnMcLear
zeigerpuppy
marcelklehr
teian
mgoldboi
Hello. My partner and I have come up with the following idea for table representation. However we are having difficulties with concurrent modifications(for special table properties like hitting tab key,row/cell highlighting) and are seeking your opinions.
The table is represented using a json string like below.
in domline.js/domlilne_client.js this string object is processed and rendered as shown below.
We then use css to hide the unnecessary columns.
Most of our additions in ace2_inner.js and domline.js/domline_client.js are straightforward and harmless.
Here are a minimal change one can do to make this work.