[WIP] mini markdown cheatsheet by comment form

app/assets/javascripts/initializers/initializeCommentsPage.js.erb

@@ -266,16 +266,39 @@ function handleFocus(event) {
     }, 100);
   } else {
     handleSizeChange(event);
+    showMarkdownHint();
   }
 }
 
+function showMarkdownHint() {
+  var markdownHint = document.getElementById("markdown-hint");
+  markdownHint.style.visibility = "visible";
+  markdownHint.style.opacity = 1;
+  if (window.innerWidth < 425) {
+    markdownHint.style.height = "27px";
+    markdownHint.children[0].style.height = "27px"
+  } else {
+    markdownHint.style.height = "14px";
+    markdownHint.children[0].style.height = "14px"
+  }
+}
+
+function hideMarkdownHint() {
+  var markdownHint = document.getElementById("markdown-hint");
+  markdownHint.style.opacity = 0;
+  markdownHint.style.height = "0px";
+  markdownHint.style.visibility = "hidden";
+  markdownHint.children[0].style.height = "0px"
+}
+
 function handleBlur(event) {
   setTimeout(function () {
     var el = document.getElementById('text-area');
     if (el.value.length == 0) {
       el.className = '';
     }
   }, 100);
+  hideMarkdownHint()
 }
 
 function handleKeyUp(event) {

app/assets/stylesheets/comments.scss

@@ -123,11 +123,43 @@ a.header-link {
       opacity: 1;
     }
   }
+  #markdown-hint {
+    margin: 0 15px;
+    font-size:0.6em;
+    padding: 0 5px;
+    width: calc(100% - 40px);
+    text-align: right;
+    -webkit-transition: visibility 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    -moz-transition: visibility 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    -o-transition: visibility 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    transition: visibility 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  }
+  #collapsible-markdown {
+    border: 1px solid #dbdbdb;
+    overflow-y: scroll;
+    background: white;
+    -webkit-transition: visibility 0.3s, height 0.3s, opacity 0.3s linear;
+    -moz-transition: visibility 0.3s, height 0.3s, opacity 0.3s linear;
+    -o-transition: visibility 0.3s, height 0.3s, opacity 0.3s linear;
+    transition: visibility 0.3s, height 0.3s, opacity 0.3s linear;
+    div {
+      font-size: 0.75em;
+      padding-top: 2px;
+      padding-left: 1.5%;
+      padding-right: 1.5%;
+      padding-bottom: 5px;
+    }
+  }
   .markdown-guide {
     position: absolute;
     left: 22px;
     bottom: 3px;
   }
+  #markdown-button {
+    position: absolute;
+    bottom: 3px;
+    left: calc(0.2vw + 78px);
+  }
   .editor-image-upload {
     font-size: 0.8em;
     position: absolute;

app/views/comments/_form.html.erb

@@ -34,10 +34,13 @@
                     required: true %>
     <div class="preview-toggle comment-preview-div" id="preview-div"></div>
   </div>
+  <div id="markdown-hint" style="height:0px; opacity:0; visibility:hidden">
+    <span><i>_italics_</i><b>**bold**</b> ~~<s>strikethrough</s>~~ <code>`code line`</code> <code>```code block```</code> &gt;quote</span>
+  </div>
   <div class="code-of-conduct" id="toggle-code-of-conduct-checkbox">
   </div>
-  <a href="/p/editor_guide" class="markdown-guide" target="_blank" title="Markdown Guide">
-    <img class="icon-image" src="<%= asset_path("info.svg") %>" />
+  <a class="markdown-guide" href="/p/editor_guide" target="_blank" title="Markdown Guide">
+    <img class="icon-image" src="<%= asset_path('info.svg') %>" />
   </a>
   <div class="editor-image-upload">
     <input type="file" id="image-upload-main" name="file" accept="image/*" style="display:none">
@@ -48,6 +51,9 @@
     <input type="submit" id='image-upload-submit-main' value="Upload" style="display:none">
     <input class="uploaded-image" id="uploaded-image-main" />
   </div>
+  <a id="markdown-button" href="#xyz" tabindex="0" aria-expanded="false" aria-controls="collapsible-markdown" title="Markdown Button">
+    <img class="icon-image" src="<%= asset_path('markdown-mark.svg') %>" />
+  </a>
   <div class="actions" id="submit-wrapper">
     <%= link_to request.referer.present? ? :back : commentable.path do %>
       <button id="cancel-button" class="comment-action-button comment-action-cancel">CANCEL</button>
@@ -57,6 +63,59 @@
   </div>
 <% end %>
 
+<div id="collapsible-markdown" aria-hidden="true" style="height:0px; visibility: hidden; height:0; opacity:0;">
+  <div>
+    <h4>Markdown Shortcuts</h4>
+    <ul>
+      <li>
+        <i>Italics</i>: _italics_ (command + i and fill in between)<br/>
+      </li>
+      <li>
+        <b>Bold</b>: **bold** (command + b and fill text in between)
+      </li>
+      <li>
+        <s>Strikethrough</s>: ~~strikethrough~~<br/>
+      </li>
+      <li>
+        <a href="#put-link-here">Surprise Link</a>: [Surprise Link](put-link-here)<br/>
+      </li>
+      <li>
+        <img alt="some text about the image" src=""></img>![some text about the image](put-direct-image-link-here)<br/>
+      </li>
+      <li>
+        Headers: is #h1, ##h2 ... and so on until ######h6 <br/>
+      </li>
+      <li>
+        Lists: +, -, * start unordered lists, while numbers like 1., 2. start ordered lists <br/>
+      </li>
+      <li>
+        Code: `inline code` is surrounded by backticks, while ```code blocks``` have them tripled <br/>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<script type="text/javascript">
+  var markdownCheatsheet = document.getElementById("collapsible-markdown");
+  var markdownButton = document.getElementById("markdown-button");
+
+  var toggleCheatsheet = function() {
+    var markdownCheatsheet = document.getElementById("collapsible-markdown");
+    markdownCheatsheet.style.height = (markdownCheatsheet.style.height == "0px") ? "200px" : "0px";
+    markdownCheatsheet.style.visibility = (markdownCheatsheet.style.visibility === "hidden") ? "visible" : "hidden";
+    markdownCheatsheet.style.opacity = (markdownCheatsheet.style.opacity == 0) ? 1 : 0;
+    var swap = (markdownCheatsheet.getAttribute("aria-hidden") === "false") ? "true" : "false";
+    markdownCheatsheet.setAttribute("aria-hidden", swap)
+  }
+
+  markdownButton.addEventListener("click", () => {
+    var swap = (markdownButton.getAttribute("aria-expanded") === "false") ? "true" : "false";
+    markdownButton.setAttribute("aria-expanded", swap)
+    toggleCheatsheet();
+    return false;
+  })
+</script>
+
 <% if @comment.persisted? %>
 
   <script defer>