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

3 years ago
  1. /*!
  2. * Table dialog plugin for Editor.md
  3. *
  4. * @file table-dialog.js
  5. * @author pandao
  6. * @version 1.2.1
  7. * @updateTime 2015-06-09
  8. * {@link https://github.com/pandao/editor.md}
  9. * @license MIT
  10. */
  11. (function() {
  12. var factory = function (exports) {
  13. var $ = jQuery;
  14. var pluginName = "table-dialog";
  15. var langs = {
  16. "zh-cn" : {
  17. toolbar : {
  18. table : "表格"
  19. },
  20. dialog : {
  21. table : {
  22. title : "添加表格",
  23. cellsLabel : "单元格数",
  24. alignLabel : "对齐方式",
  25. rows : "行数",
  26. cols : "列数",
  27. aligns : ["默认", "左对齐", "居中对齐", "右对齐"]
  28. }
  29. }
  30. },
  31. "zh-tw" : {
  32. toolbar : {
  33. table : "添加表格"
  34. },
  35. dialog : {
  36. table : {
  37. title : "添加表格",
  38. cellsLabel : "單元格數",
  39. alignLabel : "對齊方式",
  40. rows : "行數",
  41. cols : "列數",
  42. aligns : ["默認", "左對齊", "居中對齊", "右對齊"]
  43. }
  44. }
  45. },
  46. "en" : {
  47. toolbar : {
  48. table : "Tables"
  49. },
  50. dialog : {
  51. table : {
  52. title : "Tables",
  53. cellsLabel : "Cells",
  54. alignLabel : "Align",
  55. rows : "Rows",
  56. cols : "Cols",
  57. aligns : ["Default", "Left align", "Center align", "Right align"]
  58. }
  59. }
  60. }
  61. };
  62. exports.fn.tableDialog = function() {
  63. var _this = this;
  64. var cm = this.cm;
  65. var editor = this.editor;
  66. var settings = this.settings;
  67. var path = settings.path + "../plugins/" + pluginName +"/";
  68. var classPrefix = this.classPrefix;
  69. var dialogName = classPrefix + pluginName, dialog;
  70. $.extend(true, this.lang, langs[this.lang.name]);
  71. this.setToolbar();
  72. var lang = this.lang;
  73. var dialogLang = lang.dialog.table;
  74. var dialogContent = [
  75. "<div class=\"editormd-form\" style=\"padding: 13px 0;\">",
  76. "<label>" + dialogLang.cellsLabel + "</label>",
  77. dialogLang.rows + " <input type=\"number\" value=\"3\" class=\"number-input\" style=\"width:40px;height: 30px;\" max=\"100\" min=\"2\" data-rows />&nbsp;&nbsp;",
  78. dialogLang.cols + " <input type=\"number\" value=\"2\" class=\"number-input\" style=\"width:40px;height: 30px;\" max=\"100\" min=\"1\" data-cols /><br/>",
  79. "<label>" + dialogLang.alignLabel + "</label>",
  80. "<div class=\"fa-btns\"></div>",
  81. "</div>"
  82. ].join("\n");
  83. if (editor.find("." + dialogName).length > 0)
  84. {
  85. dialog = editor.find("." + dialogName);
  86. this.dialogShowMask(dialog);
  87. this.dialogLockScreen();
  88. dialog.show();
  89. }
  90. else
  91. {
  92. dialog = this.createDialog({
  93. name : dialogName,
  94. title : dialogLang.title,
  95. width : 360,
  96. height : 226,
  97. mask : settings.dialogShowMask,
  98. drag : settings.dialogDraggable,
  99. content : dialogContent,
  100. lockScreen : settings.dialogLockScreen,
  101. maskStyle : {
  102. opacity : settings.dialogMaskOpacity,
  103. backgroundColor : settings.dialogMaskBgColor
  104. },
  105. buttons : {
  106. enter : [lang.buttons.enter, function() {
  107. var rows = parseInt(this.find("[data-rows]").val());
  108. var cols = parseInt(this.find("[data-cols]").val());
  109. var align = this.find("[name=\"table-align\"]:checked").val();
  110. var table = "";
  111. var hrLine = "------------";
  112. var alignSign = {
  113. _default : hrLine,
  114. left : ":" + hrLine,
  115. center : ":" + hrLine + ":",
  116. right : hrLine + ":"
  117. };
  118. if ( rows > 1 && cols > 0)
  119. {
  120. for (var r = 0, len = rows; r < len; r++)
  121. {
  122. var row = [];
  123. var head = [];
  124. for (var c = 0, len2 = cols; c < len2; c++)
  125. {
  126. if (r === 1) {
  127. head.push(alignSign[align]);
  128. }
  129. row.push(" ");
  130. }
  131. if (r === 1) {
  132. table += "| " + head.join(" | ") + " |" + "\n";
  133. }
  134. table += "| " + row.join( (cols === 1) ? "" : " | " ) + " |" + "\n";
  135. }
  136. }
  137. cm.replaceSelection(table);
  138. this.hide().lockScreen(false).hideMask();
  139. return false;
  140. }],
  141. cancel : [lang.buttons.cancel, function() {
  142. this.hide().lockScreen(false).hideMask();
  143. return false;
  144. }]
  145. }
  146. });
  147. }
  148. var faBtns = dialog.find(".fa-btns");
  149. if (faBtns.html() === "")
  150. {
  151. var icons = ["align-justify", "align-left", "align-center", "align-right"];
  152. var _lang = dialogLang.aligns;
  153. var values = ["_default", "left", "center", "right"];
  154. for (var i = 0, len = icons.length; i < len; i++)
  155. {
  156. var checked = (i === 0) ? " checked=\"checked\"" : "";
  157. var btn = "<a href=\"javascript:;\"><label for=\"editormd-table-dialog-radio"+i+"\" title=\"" + _lang[i] + "\">";
  158. btn += "<input type=\"radio\" name=\"table-align\" id=\"editormd-table-dialog-radio"+i+"\" value=\"" + values[i] + "\"" +checked + " />&nbsp;";
  159. btn += "<i class=\"fa fa-" + icons[i] + "\"></i>";
  160. btn += "</label></a>";
  161. faBtns.append(btn);
  162. }
  163. }
  164. };
  165. };
  166. // CommonJS/Node.js
  167. if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
  168. {
  169. module.exports = factory;
  170. }
  171. else if (typeof define === "function") // AMD/CMD/Sea.js
  172. {
  173. if (define.amd) { // for Require.js
  174. define(["editormd"], function(editormd) {
  175. factory(editormd);
  176. });
  177. } else { // for Sea.js
  178. define(function(require) {
  179. var editormd = require("./../../editormd");
  180. factory(editormd);
  181. });
  182. }
  183. }
  184. else
  185. {
  186. factory(window.editormd);
  187. }
  188. })();