diff --git a/frontend/js/commento.js b/frontend/js/commento.js index 68efed6..7f01a14 100644 --- a/frontend/js/commento.js +++ b/frontend/js/commento.js @@ -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 = "bold"; + boldRight.innerHTML = "surround text with
**two asterisks**
"; + italicsLeft.innerHTML = "italics"; + italicsRight.innerHTML = "surround text with
*asterisks*
"; + codeLeft.innerHTML = "
code
"; + codeRight.innerHTML = "surround text with
`backticks`
"; + strikethroughLeft.innerHTML = "strikethrough"; + strikethroughRight.innerHTML = "surround text with
~~two tilde characters~~
"; + hyperlinkLeft.innerHTML = "hyperlink"; + hyperlinkRight.innerHTML = "
[hyperlink](https://example.com)
or just a bare URL"; + quoteLeft.innerHTML = "
quote
"; + quoteRight.innerHTML = "prefix with
>
"; + + 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 = "M ↓   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; } diff --git a/frontend/sass/commento-common.scss b/frontend/sass/commento-common.scss index a50974f..54115fa 100644 --- a/frontend/sass/commento-common.scss +++ b/frontend/sass/commento-common.scss @@ -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 { diff --git a/frontend/sass/commento-input.scss b/frontend/sass/commento-input.scss index a39930f..d25b4cf 100644 --- a/frontend/sass/commento-input.scss +++ b/frontend/sass/commento-input.scss @@ -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; + } + } + } +}