Ivan/commento
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frontend: add markdown help

Browse Source
This commit is contained in:
Adhityaa Chandrasekar 2019-04-20 22:04:56 -04:00
parent 30772ec720
commit fa2ccfe42e
3 changed files with 122 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/js/commento.js
View File

@ -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>&gt;</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 &#8595;</b> &nbsp; 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;
}

14
frontend/sass/commento-common.scss
View File

@ -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 {

33
frontend/sass/commento-input.scss
View File

@ -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;
}
}
}
}