Add support for comment preview on client side via showdown.js

Add info circle for Markdown modal
This commit is contained in:
TobiGr 2018-03-29 13:57:18 +02:00
parent af3903e462
commit be6cf8571e
3 changed files with 44 additions and 2 deletions

View File

@ -1,7 +1,7 @@
/* Isso Ich schrei sonst!
*/
define(["app/dom", "app/utils", "app/config", "app/api", "app/jade", "app/i18n", "app/lib", "app/globals"],
function($, utils, config, api, jade, i18n, lib, globals) {
define(["app/dom", "app/utils", "app/config", "app/api", "app/jade", "app/i18n", "app/lib", "app/globals", "app/showdown"],
function($, utils, config, api, jade, i18n, lib, globals, showdown) {
"use strict";
@ -51,6 +51,33 @@ define(["app/dom", "app/utils", "app/config", "app/api", "app/jade", "app/i18n",
$("[name='author']", el).placeholder.replace(/ \(.*\)/, "");
}
showdown.setOption('strikethrough', 'true');
var converter = new showdown.Converter();
$("[name=toggle-preview]", el).on("click", function() {
if (! el.validate()) {
return;
}
var avatar = config["avatar"] ? $(".avatar", el, false)[0] : null;
if ($("[name=toggle-preview]", el).innerHTML === "Preview") {
$("[name=toggle-preview]", el).innerHTML = "Edit";
if (avatar !== null) {
avatar.show();
}
var author = $("[name=author]", el).value || null;
$(".author", el).innerHTML = author;
var text = utils.text($(".textarea", el).innerHTML);
var htmlResult = converter.makeHtml(text);
$("[name='preview']", el).innerHTML = htmlResult;
$(".textarea-wrapper", el).classList.add("preview");
} else {
$("[name=toggle-preview]", el).innerHTML = "Preview";
$(".textarea-wrapper", el).classList.remove("preview");
}
return el;
});
// submit form, initialize optional fields with `null` and reset form.
// If replied to a comment, remove form completely.
$("[type=submit]", el).on("click", function() {

3
isso/js/app/showdown.js Normal file

File diff suppressed because one or more lines are too long

View File

@ -3,6 +3,15 @@ div(class='isso-postbox')
div(class='textarea-wrapper')
div(class='textarea placeholder' contenteditable='true')
= i18n('postbox-text')
div(class='isso-comment')
if conf.avatar
div(class='avatar')
svg(viewbox=' 0 0 48 48')
rect(x='0' y='0' width='48' height='48' style='fill: #f0f0f0' )
div(class='text-wrapper')
div(class='isso-comment-header' role='meta')
span(class='author')
div(class='preview text' name='preview')
section(class='auth-section')
p(class='input-wrapper')
input(type='text' name='author' placeholder=i18n('postbox-author')
@ -14,4 +23,7 @@ div(class='isso-postbox')
input(type='text' name='website' placeholder=i18n('postbox-website')
value=website != null ? '#{website}' : '')
p(class='post-action')
span(class='info-icon' data-toggle='modal' data-target='#comments-info-modal')
i(class='fa fa-info-circle')
button(class='preview' name='toggle-preview' ) Preview
input(type='submit' value=i18n('postbox-submit'))