Add support for comment preview on client side via showdown.js
Add info circle for Markdown modal
This commit is contained in:
parent
af3903e462
commit
be6cf8571e
@ -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
3
isso/js/app/showdown.js
Normal file
File diff suppressed because one or more lines are too long
@ -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'))
|
||||
|
Loading…
Reference in New Issue
Block a user