/*jslint onevar: false, nomen: false*/
/*global Trex, TrexMessage, TXMSG, $tom, $tx, _FALSE, _NULL, _TRUE */
Trex.MarkupTemplate.add('table.col.resize.dragger', '
<\/div>');
Trex.MarkupTemplate.add('table.row.resize.dragger', '
<\/div>');
TrexMessage.addMsg({
'@table.noselect.alert': "테이블을 선택하신 후 사용가능합니다."
});
Trex.Table = {};
Trex.module("table selector", function (editor, toolbar, sidebar, canvas, config) {
var initDragger;
initDragger = function (canvas) {
var colDragger, rowDragger, wysiwygEl;
colDragger = Trex.MarkupTemplate.get("table.col.resize.dragger").evaluateAsDom({});
rowDragger = Trex.MarkupTemplate.get("table.row.resize.dragger").evaluateAsDom({});
wysiwygEl = canvas.wysiwygEl;
$tom.insertFirst(wysiwygEl, colDragger);
$tom.insertFirst(wysiwygEl, rowDragger);
$tx.hide(colDragger);
$tx.hide(rowDragger);
};
canvas.observeJob(Trex.Ev.__CANVAS_PANEL_BACKSPACE_TABLE, function(node) {
$tom.remove(node);
});
canvas.observeJob(Trex.Ev.__IFRAME_LOAD_COMPLETE, function () {
var tableSelect, tableMerge, tableInsert, tableDelete, tableBorder, tableTemplateLoader;
tableSelect = new Trex.Table.Selector(editor, config);
tableMerge = new Trex.Table.Merge(editor, config);
tableInsert = new Trex.Table.Insert(editor, config);
tableDelete = new Trex.Table.Delete(editor, config);
tableBorder = new Trex.Table.Border(editor, config);
tableTemplateLoader = new Trex.Table.TemplateLoader();
initDragger(canvas);
var wysiwygPanel = canvas.getPanel(Trex.Canvas.__WYSIWYG_MODE);
var processor = wysiwygPanel.getProcessor();
/**
* selectCellByCaret
* 캐럿의 위치에 해당하는 cell 을 선택한다.
*/
var selectCellByCaret = function () {
var node, td;
if (tableSelect.getSelected().isValid() === _FALSE) {
node = processor.getNode();
td = Trex.TableUtil.getClosestByTagNames(["td", "th"], node);
if (td) {
tableSelect.selectByTd(td, td);
}
}
};
/**
* table 을 선택하면 advanced 가 열림.
* //CHECK:
* table 버튼들의 위치가 advanced 라고 가정하고 있음.
*/
canvas.observeElement({
tag: 'table'
}, function (elem) {
if (toolbar.tools.advanced) {
toolbar.tools.advanced.forceOpen();
}
});
/**
* border 를 적용하기 위한 4가지 옵션값.
*/
var borderProperty = {
range: "all",
color: "",
height: 1,
type: "solid"
};
var setDefaultBorderProperty = function () {
var tool = toolbar.tools.cellslinecolor;
if (tool) {
borderProperty.color = tool.config.defaultcolor;
}
};
setDefaultBorderProperty();
var alertFromNoSelect = function () {
alert(TXMSG('@table.noselect.alert'));
};
processor.table = {
/**
* getTdArr
* 선택한 cell 들의 array.
* //CHECK: getSelectedCells ?
* 지금보니 이름이 마음에 들지 않네...
* @return {Array}
*/
getTdArr: function () {
return tableSelect.getSelectedTdArr();
},
/**
* isDuringSelection
* 선택을 하고 있는 중인지 여부(선택을 위한 드래그 중).
* @return {boolean}
*/
isDuringSelection: function () {
return tableSelect.isDuringSelection();
},
execute: function (fn, noCaretSelect) {
if (! noCaretSelect) {
selectCellByCaret();
}
if (tableSelect.getSelected().isValid()) {
fn();
canvas.history.saveHistory();
} else {
alertFromNoSelect();
}
},
merge: function () {
this.execute(function () {
tableMerge.merge(tableSelect);
}, _TRUE);
},
resetMerge: function () {
this.execute(function () {
tableMerge.resetMerge(tableSelect);
});
},
insertRowAbove: function () {
this.execute(function () {
tableInsert.insertRowAbove(tableSelect);
});
},
insertRowBelow: function () {
this.execute(function () {
tableInsert.insertRowBelow(tableSelect);
});
},
insertColLeft: function () {
this.execute(function () {
tableInsert.insertColLeft(tableSelect);
});
},
insertColRight: function () {
this.execute(function () {
tableInsert.insertColRight(tableSelect);
});
},
deleteRow: function () {
this.execute(function () {
tableDelete.deleteRow(tableSelect);
});
},
deleteCol: function () {
this.execute(function () {
tableDelete.deleteCol(tableSelect);
});
},
setBorderRange: function (outlineType) {
borderProperty.range = outlineType;
},
setBorderColor: function (color) {
borderProperty.color = color;
toolbar.fireJobs(Trex.Ev.__TOOL_CELL_LINE_CHANGE, {
color: color
});
},
setBorderHeight: function (height) {
borderProperty.height = height;
toolbar.fireJobs(Trex.Ev.__TOOL_CELL_LINE_CHANGE, {
height: height
});
},
setBorderType: function (type) {
borderProperty.type = type;
toolbar.fireJobs(Trex.Ev.__TOOL_CELL_LINE_CHANGE, {
type: type
});
},
setNoBorder: function () {
var self = this;
this.execute(function () {
tableBorder.setTableSelect(tableSelect);
tableBorder.setBorderRange("all");
tableBorder.changeBorderColor(self.getTdArr(), "");
tableBorder.changeBorderHeight(self.getTdArr(), "0");
tableBorder.changeBorderType(self.getTdArr(), "none");
});
},
setBorderButtons: function (color, height, type) {
var tool;
tool = toolbar.tools.cellslinecolor;
if (tool) {
tool.execute(color);
}
tool = toolbar.tools.cellslineheight;
if (tool) {
tool.execute(height);
}
tool = toolbar.tools.cellslinestyle;
if (tool) {
tool.execute(type);
}
},
getBorderProperty: function () {
return {
color: borderProperty.color,
height: borderProperty.height,
type: borderProperty.type
};
},
applyBorder: function () {
var self = this;
this.execute(function () {
tableBorder.setTableSelect(tableSelect);
tableBorder.setBorderRange(borderProperty.range);
tableBorder.changeBorderColor(self.getTdArr(), borderProperty.color);
tableBorder.changeBorderHeight(self.getTdArr(), borderProperty.height);
tableBorder.changeBorderType(self.getTdArr(), borderProperty.type);
self.addBorderHistory();
});
},
addBorderHistory: function () {
var tool;
tool = toolbar.tools.cellslinepreview;
if (tool) {
tool.addBorderHistory(borderProperty);
}
},
tableBackground: function (value) {
var self = this;
this.execute(function () {
var style, tdArr, i, len;
style = {
"backgroundColor": value
};
tdArr = self.getTdArr();
len = tdArr.length;
for (i = 0; i < len; i += 1) {
$tx.setStyle(tdArr[i], style);
}
tableSelect.reset();
});
},
setTemplateStyle: function (table, templateIndex) {
if (table) {
var self = this;
tableTemplateLoader.getTemplate(templateIndex, function(template) {
template.apply(table);
self._applyTemplateOutline(table, template.templateData);
tableSelect.reset();
});
} else {
alertFromNoSelect();
}
},
/**
* 테이블 템플릿을 적용해도 테두리에 대한 정확한 적용이 되지않아 흰색 혹은 none의 상태가 된다.
* 이를 보완하기 위해서 테이블 기본 기능을 이용해서 테두리를 재설정 한다.
*
* @param table
* @param templateData
* @private
*/
_applyTemplateOutline: function(table, templateData) {
var item = templateData;
var self = this;
var outlineBorder = {
top: this._parseBorderStyle(item.firstRow.borderTop),
right: this._parseBorderStyle(item.lastCol.borderRight || item.common.borderRight),
bottom: this._parseBorderStyle(item.lastRow.borderBottom || item.common.borderBottom),
left: this._parseBorderStyle(item.firstCol.borderLeft)
};
var tableMatrixer = new Trex.Tool.Table.TableCellMatrixer(table);
var tdMatrix = tableMatrixer.getTdMatrix();
var rowSize = tableMatrixer.getRowSize();
var colSize = tableMatrixer.getColSize();
if (tdMatrix && tdMatrix.length) {
tableSelect.selectByTd(tdMatrix[0][0], tdMatrix[rowSize-1][colSize-1]);
tableBorder.setTableSelect(tableSelect);
var direction = ['top', 'right', 'bottom', 'left'];
direction.each(function(dir){
tableBorder.setBorderRange(dir);
tableBorder.changeBorderColor(self.getTdArr(), outlineBorder[dir]['color']);
tableBorder.changeBorderHeight(self.getTdArr(), outlineBorder[dir]['height']);
tableBorder.changeBorderType(self.getTdArr(), outlineBorder[dir]['type']);
});
}
},
/**
* border style을 파싱해서 object로 반환한다.
*
* ex1. "1px solid red"
* ex2. "none"
*
* @param styleString
* @returns {object}
* @private
*/
_parseBorderStyle: function(styleString) {
styleString = styleString.trim().toLowerCase();
if (styleString === 'none') {
return {
height: 'none',
type: 'solid',
color: 'transparent'
};
} else {
var parts = styleString.split(' ');
if (parts.length != 3) {
parts = ['1px', 'solid', '#000'];
}
return {
height: parts[0].parsePx() || 1,
type: parts[1],
color: parts[2]
};
}
}
};
toolbar.fireJobs(Trex.Ev.__TOOL_CELL_LINE_CHANGE, {
color: borderProperty.color,
height: borderProperty.height,
type: borderProperty.type,
fromInit: _TRUE
});
toolbar.observeJob(Trex.Ev.__TOOL_CLICK, function (identity) {
if ([
"fontfamily",
"fontsize",
"bold",
"underline",
"italic",
"strike",
"forecolor",
"backcolor",
"indent",
"outdent",
"alignleft",
"aligncenter",
"alignright",
"alignfull",
"mergecells",
"splitcells",
"insertcells",
"deletecells",
"cellsoutline",
"cellslinecolor",
"cellslineheight",
"cellslinestyle",
"cellslinepreview",
"tablebackcolor",
"tabletemplate"
].contains(identity) === _FALSE) {
tableSelect.reset();
}
if (identity === "tablebackcolor") {
selectCellByCaret();
}
});
});
});