From 205feb4adda7e57bfa5bfa9c5e8f86fccb078ec4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonatan=20K=C5=82osko?= Date: Mon, 11 Jul 2016 15:20:09 +0200 Subject: [PATCH] Add Sweet Alert 2 and use it as a replacement for the JavaScript prompt. --- README.md | 4 +- gulpfile.js | 9 +++-- package.json | 4 +- src/js/simplemde.js | 97 +++++++++++++++++++++++++++++---------------- 4 files changed, 72 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 5166e43..3868269 100644 --- a/README.md +++ b/README.md @@ -94,8 +94,8 @@ simplemde.value("This text will appear in the editor"); - **underscoresBreakWords**: If set to `true`, let underscores be a delimiter for separating words. Defaults to `false`. - **placeholder**: Custom placeholder that should be displayed - **previewRender**: Custom function for parsing the plaintext Markdown and returning HTML. Used when user previews. -- **promptTables**: If set to `true`, a JS alert window appears twice asking for the number of columns and rows to generate the table scheme. Defaults to `false`. -- **promptURLs**: If set to `true`, a JS alert window appears asking for the link or image URL. Defaults to `false`. +- **promptTables**: If set to `true`, a nice window appears twice asking for the number of columns and rows to generate the table scheme. Defaults to `false`. +- **promptURLs**: If set to `true`, a nice window appears asking for the link or image URL. Defaults to `false`. - **renderingConfig**: Adjust settings for parsing the Markdown during previewing (not editing). - **codeSyntaxHighlighting**: If set to `true`, will highlight using [highlight.js](https://github.com/isagalaev/highlight.js). Defaults to `false`. To use this feature you must include highlight.js on your page. For example, include the script and the CSS files like:
``
`` - **markedOptions**: Set the internal Markdown renderer's [options](https://github.com/chjj/marked#options-1). Other `renderingConfig` options will take precedence. diff --git a/gulpfile.js b/gulpfile.js index 702a162..23f14e2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -27,7 +27,7 @@ gulp.task("prettify-js", [], function() { .pipe(prettify({js: {brace_style: "collapse", indent_char: "\t", indent_size: 1, max_preserve_newlines: 3, space_before_conditional: false}})) .pipe(gulp.dest("./src/js")); }); - + gulp.task("prettify-css", [], function() { return gulp.src("./src/css/simplemde.css") .pipe(prettify({css: {indentChar: "\t", indentSize: 1}})) @@ -65,7 +65,7 @@ gulp.task("browserify", ["lint"], function() { gulp.task("scripts", ["browserify:debug", "browserify", "lint"], function() { var js_files = ["./debug/simplemde.js"]; - + return gulp.src(js_files) .pipe(concat("simplemde.min.js")) .pipe(uglify()) @@ -78,9 +78,10 @@ gulp.task("styles", ["prettify-css"], function() { var css_files = [ "./node_modules/codemirror/lib/codemirror.css", "./src/css/*.css", - "./node_modules/codemirror-spell-checker/src/css/spell-checker.css" + "./node_modules/codemirror-spell-checker/src/css/spell-checker.css", + "./node_modules/sweetalert2/dist/sweetalert2.min.css" ]; - + return gulp.src(css_files) .pipe(concat("simplemde.css")) .pipe(buffer()) diff --git a/package.json b/package.json index 2c3954b..9bf4592 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,9 @@ "dependencies": { "codemirror": "*", "codemirror-spell-checker": "*", - "marked": "*" + "marked": "*", + "sweetalert2": "*", + "es6-promise": "*" }, "devDependencies": { "browserify": "*", diff --git a/src/js/simplemde.js b/src/js/simplemde.js index aa83f68..5f083df 100644 --- a/src/js/simplemde.js +++ b/src/js/simplemde.js @@ -12,7 +12,8 @@ require("codemirror/mode/gfm/gfm.js"); require("codemirror/mode/xml/xml.js"); var CodeMirrorSpellChecker = require("codemirror-spell-checker"); var marked = require("marked"); - +var sweetAlert = require("sweetalert2"); +var Promise = require("es6-promise").Promise; // Some variables var isMac = /Mac/.test(navigator.platform); @@ -617,14 +618,17 @@ function drawLink(editor) { var cm = editor.codemirror; var stat = getState(cm); var options = editor.options; - var url = "http://"; if(options.promptURLs) { - url = prompt(options.promptTexts.link); - if(!url) { - return false; - } + sweetAlert({ + title: options.promptTexts.link, + input: "text", + showCancelButton: true + }).then(function(enteredUrl) { + _replaceSelection(cm, stat.link, options.insertTexts.link, enteredUrl); + }); + } else { + _replaceSelection(cm, stat.link, options.insertTexts.link, "http://"); } - _replaceSelection(cm, stat.link, options.insertTexts.link, url); } /** @@ -634,14 +638,17 @@ function drawImage(editor) { var cm = editor.codemirror; var stat = getState(cm); var options = editor.options; - var url = "http://"; if(options.promptURLs) { - url = prompt(options.promptTexts.image); - if(!url) { - return false; - } + sweetAlert({ + title: options.promptTexts.image, + input: "text", + showCancelButton: true + }).then(function(enteredUrl) { + _replaceSelection(cm, stat.image, options.insertTexts.image, enteredUrl); + }); + } else { + _replaceSelection(cm, stat.image, options.insertTexts.image, "http://"); } - _replaceSelection(cm, stat.image, options.insertTexts.image, url); } /** @@ -652,25 +659,45 @@ function drawTable(editor) { var stat = getState(cm); var options = editor.options; if(options.promptTables) { - var columns = parseInt(prompt(options.promptTexts.tableColumns)); - if(isNaN(columns) || columns <= 0) { - return false; - } - var rows = parseInt(prompt(options.promptTexts.tableRows)); - if(isNaN(rows) || rows <= 0) { - return false; - } - // Build the table. - var tableString = "\n\n|"; - for(var i = 1; i <= columns; ++i) { - tableString += " Column " + i + " |"; - } - tableString += "\n|" + " --------------- |".repeat(columns); - var rowString = "\n|" + " Text |".repeat(columns); - tableString += rowString.repeat(rows); - tableString += "\n\n"; + var numberValidator = function(input) { + return new Promise(function(resolve, reject) { + if(isNaN(input)) { + reject("You must provide a positive number."); + } else if(input <= 0) { + reject("The number must be greater than zero."); + } else { + resolve(); + } + }); + }; + + sweetAlert({ + title: options.promptTexts.tableColumns, + input: "text", + showCancelButton: true, + confirmButtonText: "Next ", + inputValidator: numberValidator + }).then(function(columns) { + sweetAlert({ + title: options.promptTexts.tableRows, + input: "text", + showCancelButton: true, + inputValidator: numberValidator + }).then(function(rows) { + // Build the table. + var tableString = "\n\n|"; + for(var i = 1; i <= columns; ++i) { + tableString += " Column " + i + " |"; + } + tableString += "\n|" + " --------------- |".repeat(columns); + var rowString = "\n|" + " Text |".repeat(columns); + tableString += rowString.repeat(rows); + tableString += "\n\n"; + + _replaceSelection(cm, stat.table, ["", tableString]); + }); + }); - _replaceSelection(cm, stat.table, ["", tableString]); } else { _replaceSelection(cm, stat.table, options.insertTexts.table); } @@ -1270,10 +1297,10 @@ var insertTexts = { }; var promptTexts = { - link: "URL for the link:", - image: "URL of the image:", - tableColumns: "The number of columns:", - tableRows: "The number of rows:" + link: "URL for the link", + image: "URL of the image", + tableColumns: "The number of columns", + tableRows: "The number of rows" }; var blockStyles = {