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
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 /> ",
|
|
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 + " /> ";
|
|
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);
|
|
}
|
|
|
|
})();
|