premium/public/static/plugin/meditor/plugins/table-dialog/table-dialog.js

/*!
 * 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;\" max=\"100\" min=\"2\" data-rows />&nbsp;&nbsp;",
                dialogLang.cols + " <input type=\"number\" value=\"2\" class=\"number-input\" style=\"width:40px;\" 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);
    }

})();