frontend: add markdown help
This commit is contained in:
parent
30772ec720
commit
fa2ccfe42e
@ -55,6 +55,8 @@
|
||||
var ID_CONTENTS = "commento-comment-contents-";
|
||||
var ID_NAME = "commento-comment-name-";
|
||||
var ID_SUBMIT_BUTTON = "commento-submit-button-";
|
||||
var ID_MARKDOWN_BUTTON = "commento-markdown-button-";
|
||||
var ID_MARKDOWN_HELP = "commento-markdown-help-";
|
||||
var ID_FOOTER = "commento-footer";
|
||||
|
||||
|
||||
@ -417,6 +419,82 @@
|
||||
};
|
||||
|
||||
|
||||
function markdownHelpShow(id) {
|
||||
var textareaSuperContainer = $(ID_SUPER_CONTAINER + id);
|
||||
var markdownButton = $(ID_MARKDOWN_BUTTON + id);
|
||||
var markdownHelp = create("table");
|
||||
var italicsContainer = create("tr");
|
||||
var italicsLeft = create("td");
|
||||
var italicsRight = create("td");
|
||||
var boldContainer = create("tr");
|
||||
var boldLeft = create("td");
|
||||
var boldRight = create("td");
|
||||
var codeContainer = create("tr");
|
||||
var codeLeft = create("td");
|
||||
var codeRight = create("td");
|
||||
var strikethroughContainer = create("tr");
|
||||
var strikethroughLeft = create("td");
|
||||
var strikethroughRight = create("td");
|
||||
var hyperlinkContainer = create("tr");
|
||||
var hyperlinkLeft = create("td");
|
||||
var hyperlinkRight = create("td");
|
||||
var quoteContainer = create("tr");
|
||||
var quoteLeft = create("td");
|
||||
var quoteRight = create("td");
|
||||
|
||||
markdownHelp.id = ID_MARKDOWN_HELP + id;
|
||||
|
||||
classAdd(markdownHelp, "markdown-help");
|
||||
|
||||
boldLeft.innerHTML = "<b>bold</b>";
|
||||
boldRight.innerHTML = "surround text with <pre>**two asterisks**</pre>";
|
||||
italicsLeft.innerHTML = "<i>italics</i>";
|
||||
italicsRight.innerHTML = "surround text with <pre>*asterisks*</pre>";
|
||||
codeLeft.innerHTML = "<pre>code</pre>";
|
||||
codeRight.innerHTML = "surround text with <pre>`backticks`</pre>";
|
||||
strikethroughLeft.innerHTML = "<strike>strikethrough</strike>";
|
||||
strikethroughRight.innerHTML = "surround text with <pre>~~two tilde characters~~</pre>";
|
||||
hyperlinkLeft.innerHTML = "<a href=\"https://example.com\">hyperlink</a>";
|
||||
hyperlinkRight.innerHTML = "<pre>[hyperlink](https://example.com)</pre> or just a bare URL";
|
||||
quoteLeft.innerHTML = "<blockquote>quote</blockquote>";
|
||||
quoteRight.innerHTML = "prefix with <pre>></pre>";
|
||||
|
||||
markdownButton = removeAllEventListeners(markdownButton);
|
||||
onclick(markdownButton, markdownHelpHide, id);
|
||||
|
||||
append(italicsContainer, italicsLeft);
|
||||
append(italicsContainer, italicsRight);
|
||||
append(markdownHelp, italicsContainer);
|
||||
append(boldContainer, boldLeft);
|
||||
append(boldContainer, boldRight);
|
||||
append(markdownHelp, boldContainer);
|
||||
append(hyperlinkContainer, hyperlinkLeft);
|
||||
append(hyperlinkContainer, hyperlinkRight);
|
||||
append(markdownHelp, hyperlinkContainer);
|
||||
append(codeContainer, codeLeft);
|
||||
append(codeContainer, codeRight);
|
||||
append(markdownHelp, codeContainer);
|
||||
append(strikethroughContainer, strikethroughLeft);
|
||||
append(strikethroughContainer, strikethroughRight);
|
||||
append(markdownHelp, strikethroughContainer);
|
||||
append(quoteContainer, quoteLeft);
|
||||
append(quoteContainer, quoteRight);
|
||||
append(markdownHelp, quoteContainer);
|
||||
append(textareaSuperContainer, markdownHelp);
|
||||
}
|
||||
|
||||
|
||||
function markdownHelpHide(id) {
|
||||
var markdownButton = $(ID_MARKDOWN_BUTTON + id);
|
||||
var markdownHelp = $(ID_MARKDOWN_HELP + id);
|
||||
|
||||
markdownButton = removeAllEventListeners(markdownButton);
|
||||
onclick(markdownButton, markdownHelpShow, id);
|
||||
|
||||
remove(markdownHelp);
|
||||
}
|
||||
|
||||
|
||||
function textareaCreate(id) {
|
||||
var textareaSuperContainer = create("div");
|
||||
var textareaContainer = create("div");
|
||||
@ -425,18 +503,21 @@
|
||||
var anonymousCheckbox = create("input");
|
||||
var anonymousCheckboxLabel = create("label");
|
||||
var submitButton = create("button");
|
||||
var markdownButton = create("a");
|
||||
|
||||
textareaSuperContainer.id = ID_SUPER_CONTAINER + id;
|
||||
textareaContainer.id = ID_TEXTAREA_CONTAINER + id;
|
||||
textarea.id = ID_TEXTAREA + id;
|
||||
anonymousCheckbox.id = ID_ANONYMOUS_CHECKBOX + id;
|
||||
submitButton.id = ID_SUBMIT_BUTTON + id;
|
||||
markdownButton.id = ID_MARKDOWN_BUTTON + id;
|
||||
|
||||
classAdd(textareaContainer, "textarea-container");
|
||||
classAdd(anonymousCheckboxContainer, "round-check");
|
||||
classAdd(anonymousCheckboxContainer, "anonymous-checkbox-container");
|
||||
classAdd(submitButton, "button");
|
||||
classAdd(submitButton, "submit-button");
|
||||
classAdd(markdownButton, "markdown-button");
|
||||
classAdd(textareaSuperContainer, "button-margin");
|
||||
|
||||
attrSet(textarea, "placeholder", "Add a comment");
|
||||
@ -445,9 +526,11 @@
|
||||
|
||||
anonymousCheckboxLabel.innerText = "Comment anonymously";
|
||||
submitButton.innerText = "Add Comment";
|
||||
markdownButton.innerHTML = "<b>M ↓</b> Markdown";
|
||||
|
||||
textarea.oninput = autoExpander(textarea);
|
||||
onclick(submitButton, submitAccountDecide, id);
|
||||
onclick(markdownButton, markdownHelpShow, id);
|
||||
|
||||
append(textareaContainer, textarea);
|
||||
append(textareaSuperContainer, textareaContainer);
|
||||
@ -457,6 +540,7 @@
|
||||
if (!requireIdentification) {
|
||||
append(textareaSuperContainer, anonymousCheckboxContainer);
|
||||
}
|
||||
append(textareaSuperContainer, markdownButton);
|
||||
|
||||
return textareaSuperContainer;
|
||||
}
|
||||
|
@ -1,23 +1,21 @@
|
||||
@import "colors-main.scss";
|
||||
|
||||
code {
|
||||
background: $red-1;
|
||||
font-family: monospace;
|
||||
line-height: 1.5;
|
||||
color: $red-6;
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue-6;
|
||||
border-bottom: 1px solid $blue-6;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
box-shadow: 0 0 0 1px rgba(87, 85, 217, .2);
|
||||
blockquote {
|
||||
margin: 0 0 0 8px;
|
||||
padding: 0 0 0 5px;
|
||||
border-left: 2px solid $gray-5;
|
||||
color: $gray-6;
|
||||
}
|
||||
|
||||
.commento-button {
|
||||
|
@ -68,7 +68,7 @@ textarea {
|
||||
}
|
||||
|
||||
.commento-button-margin {
|
||||
padding-bottom: 60px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.commento-anonymous-checkbox-container {
|
||||
@ -91,3 +91,34 @@ textarea {
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.commento-markdown-button {
|
||||
color: $gray-6;
|
||||
margin: 0px 16px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
line-height: 58px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
|
||||
b {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.commento-markdown-help {
|
||||
border: 1px solid $gray-3;
|
||||
padding: 8px;
|
||||
|
||||
tr {
|
||||
td {
|
||||
padding: 0px 6px;
|
||||
pre {
|
||||
display: inline;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user