You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

218 lines
5.8 KiB

/*!
* Table dialog plugin for Editor.md
*
* @file table-dialog.js
* @author pandao
* @version 1.2.1
* @updateTime 2015-06-09
* {@link https://github.com/pandao/editor.md}
* @license MIT
*/
(function() {
var factory = function (exports) {
var $ = jQuery;
var pluginName = "table-dialog";
var langs = {
"zh-cn" : {
toolbar : {
table : "表格"
},
dialog : {
table : {
title : "添加表格",
cellsLabel : "单元格数",
alignLabel : "对齐方式",
rows : "行数",
cols : "列数",
aligns : ["默认", "左对齐", "居中对齐", "右对齐"]
}
}
},
"zh-tw" : {
toolbar : {
table : "添加表格"
},
dialog : {
table : {
title : "添加表格",
cellsLabel : "單元格數",
alignLabel : "對齊方式",
rows : "行數",
cols : "列數",
aligns : ["默認", "左對齊", "居中對齊", "右對齊"]
}
}
},
"en" : {
toolbar : {
table : "Tables"
},
dialog : {
table : {
title : "Tables",
cellsLabel : "Cells",
alignLabel : "Align",
rows : "Rows",
cols : "Cols",
aligns : ["Default", "Left align", "Center align", "Right align"]
}
}
}
};
exports.fn.tableDialog = function() {
var _this = this;
var cm = this.cm;
var editor = this.editor;
var settings = this.settings;
var path = settings.path + "../plugins/" + pluginName +"/";
var classPrefix = this.classPrefix;
var dialogName = classPrefix + pluginName, dialog;
$.extend(true, this.lang, langs[this.lang.name]);
this.setToolbar();
var lang = this.lang;
var dialogLang = lang.dialog.table;
var dialogContent = [
"<div class=\"editormd-form\" style=\"padding: 13px 0;\">",
"<label>" + dialogLang.cellsLabel + "</label>",
dialogLang.rows + " <input type=\"number\" value=\"3\" class=\"number-input\" style=\"width:40px;height: 30px;\" max=\"100\" min=\"2\" data-rows />&nbsp;&nbsp;",
dialogLang.cols + " <input type=\"number\" value=\"2\" class=\"number-input\" style=\"width:40px;height: 30px;\" max=\"100\" min=\"1\" data-cols /><br/>",
"<label>" + dialogLang.alignLabel + "</label>",
"<div class=\"fa-btns\"></div>",
"</div>"
].join("\n");
if (editor.find("." + dialogName).length > 0)
{
dialog = editor.find("." + dialogName);
this.dialogShowMask(dialog);
this.dialogLockScreen();
dialog.show();
}
else
{
dialog = this.createDialog({
name : dialogName,
title : dialogLang.title,
width : 360,
height : 226,
mask : settings.dialogShowMask,
drag : settings.dialogDraggable,
content : dialogContent,
lockScreen : settings.dialogLockScreen,
maskStyle : {
opacity : settings.dialogMaskOpacity,
backgroundColor : settings.dialogMaskBgColor
},
buttons : {
enter : [lang.buttons.enter, function() {
var rows = parseInt(this.find("[data-rows]").val());
var cols = parseInt(this.find("[data-cols]").val());
var align = this.find("[name=\"table-align\"]:checked").val();
var table = "";
var hrLine = "------------";
var alignSign = {
_default : hrLine,
left : ":" + hrLine,
center : ":" + hrLine + ":",
right : hrLine + ":"
};
if ( rows > 1 && cols > 0)
{
for (var r = 0, len = rows; r < len; r++)
{
var row = [];
var head = [];
for (var c = 0, len2 = cols; c < len2; c++)
{
if (r === 1) {
head.push(alignSign[align]);
}
row.push(" ");
}
if (r === 1) {
table += "| " + head.join(" | ") + " |" + "\n";
}
table += "| " + row.join( (cols === 1) ? "" : " | " ) + " |" + "\n";
}
}
cm.replaceSelection(table);
this.hide().lockScreen(false).hideMask();
return false;
}],
cancel : [lang.buttons.cancel, function() {
this.hide().lockScreen(false).hideMask();
return false;
}]
}
});
}
var faBtns = dialog.find(".fa-btns");
if (faBtns.html() === "")
{
var icons = ["align-justify", "align-left", "align-center", "align-right"];
var _lang = dialogLang.aligns;
var values = ["_default", "left", "center", "right"];
for (var i = 0, len = icons.length; i < len; i++)
{
var checked = (i === 0) ? " checked=\"checked\"" : "";
var btn = "<a href=\"javascript:;\"><label for=\"editormd-table-dialog-radio"+i+"\" title=\"" + _lang[i] + "\">";
btn += "<input type=\"radio\" name=\"table-align\" id=\"editormd-table-dialog-radio"+i+"\" value=\"" + values[i] + "\"" +checked + " />&nbsp;";
btn += "<i class=\"fa fa-" + icons[i] + "\"></i>";
btn += "</label></a>";
faBtns.append(btn);
}
}
};
};
// CommonJS/Node.js
if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
{
module.exports = factory;
}
else if (typeof define === "function") // AMD/CMD/Sea.js
{
if (define.amd) { // for Require.js
define(["editormd"], function(editormd) {
factory(editormd);
});
} else { // for Sea.js
define(function(require) {
var editormd = require("./../../editormd");
factory(editormd);
});
}
}
else
{
factory(window.editormd);
}
})();