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

238 lines
7.8 KiB
JavaScript

3 years ago
/*!
* Code block dialog plugin for Editor.md
*
* @file code-block-dialog.js
* @author pandao
* @version 1.2.0
* @updateTime 2015-03-07
* {@link https://github.com/pandao/editor.md}
* @license MIT
*/
(function() {
var factory = function (exports) {
var cmEditor;
var pluginName = "code-block-dialog";
// for CodeBlock dialog select
var codeLanguages = exports.codeLanguages = {
asp : ["ASP", "vbscript"],
actionscript : ["ActionScript(3.0)/Flash/Flex", "clike"],
bash : ["Bash/Bat", "shell"],
css : ["CSS", "css"],
c : ["C", "clike"],
cpp : ["C++", "clike"],
csharp : ["C#", "clike"],
coffeescript : ["CoffeeScript", "coffeescript"],
d : ["D", "d"],
dart : ["Dart", "dart"],
delphi : ["Delphi/Pascal", "pascal"],
erlang : ["Erlang", "erlang"],
go : ["Golang", "go"],
groovy : ["Groovy", "groovy"],
html : ["HTML", "text/html"],
java : ["Java", "clike"],
json : ["JSON", "text/json"],
javascript : ["Javascript", "javascript"],
lua : ["Lua", "lua"],
less : ["LESS", "css"],
markdown : ["Markdown", "gfm"],
"objective-c" : ["Objective-C", "clike"],
php : ["PHP", "php"],
perl : ["Perl", "perl"],
python : ["Python", "python"],
r : ["R", "r"],
rst : ["reStructedText", "rst"],
ruby : ["Ruby", "ruby"],
sql : ["SQL", "sql"],
sass : ["SASS/SCSS", "sass"],
shell : ["Shell", "shell"],
scala : ["Scala", "clike"],
swift : ["Swift", "clike"],
vb : ["VB/VBScript", "vb"],
xml : ["XML", "text/xml"],
yaml : ["YAML", "yaml"]
};
exports.fn.codeBlockDialog = function() {
var _this = this;
var cm = this.cm;
var lang = this.lang;
var editor = this.editor;
var settings = this.settings;
var cursor = cm.getCursor();
var selection = cm.getSelection();
var classPrefix = this.classPrefix;
var dialogName = classPrefix + pluginName, dialog;
var dialogLang = lang.dialog.codeBlock;
cm.focus();
if (editor.find("." + dialogName).length > 0)
{
dialog = editor.find("." + dialogName);
dialog.find("option:first").attr("selected", "selected");
dialog.find("textarea").val(selection);
this.dialogShowMask(dialog);
this.dialogLockScreen();
dialog.show();
}
else
{
var dialogHTML = "<div class=\"" + classPrefix + "code-toolbar\">" +
dialogLang.selectLabel + "<select><option selected=\"selected\" value=\"\">" + dialogLang.selectDefaultText + "</option></select>" +
"</div>" +
"<textarea placeholder=\"coding now....\" style=\"display:none;\">" + selection + "</textarea>";
dialog = this.createDialog({
name : dialogName,
title : dialogLang.title,
width : 780,
height : 565,
mask : settings.dialogShowMask,
drag : settings.dialogDraggable,
content : dialogHTML,
lockScreen : settings.dialogLockScreen,
maskStyle : {
opacity : settings.dialogMaskOpacity,
backgroundColor : settings.dialogMaskBgColor
},
buttons : {
enter : [lang.buttons.enter, function() {
var codeTexts = this.find("textarea").val();
var langName = this.find("select").val();
if (langName === "")
{
alert(lang.dialog.codeBlock.unselectedLanguageAlert);
return false;
}
if (codeTexts === "")
{
alert(lang.dialog.codeBlock.codeEmptyAlert);
return false;
}
langName = (langName === "other") ? "" : langName;
cm.replaceSelection(["```" + langName, codeTexts, "```"].join("\n"));
if (langName === "") {
cm.setCursor(cursor.line, cursor.ch + 3);
}
this.hide().lockScreen(false).hideMask();
return false;
}],
cancel : [lang.buttons.cancel, function() {
this.hide().lockScreen(false).hideMask();
return false;
}]
}
});
}
var langSelect = dialog.find("select");
if (langSelect.find("option").length === 1)
{
for (var key in codeLanguages)
{
var codeLang = codeLanguages[key];
langSelect.append("<option value=\"" + key + "\" mode=\"" + codeLang[1] + "\">" + codeLang[0] + "</option>");
}
langSelect.append("<option value=\"other\">" + dialogLang.otherLanguage + "</option>");
}
var mode = langSelect.find("option:selected").attr("mode");
var cmConfig = {
mode : (mode) ? mode : "text/html",
theme : settings.theme,
tabSize : 4,
autofocus : true,
autoCloseTags : true,
indentUnit : 4,
lineNumbers : true,
lineWrapping : true,
extraKeys : {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
foldGutter : true,
gutters : ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
matchBrackets : true,
indentWithTabs : true,
styleActiveLine : true,
styleSelectedText : true,
autoCloseBrackets : true,
showTrailingSpace : true,
highlightSelectionMatches : true
};
var textarea = dialog.find("textarea");
var cmObj = dialog.find(".CodeMirror");
if (dialog.find(".CodeMirror").length < 1)
{
cmEditor = exports.$CodeMirror.fromTextArea(textarea[0], cmConfig);
cmObj = dialog.find(".CodeMirror");
cmObj.css({
"float" : "none",
margin : "8px 0",
border : "1px solid #ddd",
fontSize : settings.fontSize,
width : "100%",
height : "390px"
});
cmEditor.on("change", function(cm) {
textarea.val(cm.getValue());
});
}
else
{
cmEditor.setValue(cm.getSelection());
}
langSelect.change(function(){
var _mode = $(this).find("option:selected").attr("mode");
cmEditor.setOption("mode", _mode);
});
};
};
// 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);
}
})();