From 7433c5e72a2e7b7609dd68e405e73a23d816aae8 Mon Sep 17 00:00:00 2001
From: Marti Martz <Martii@users.noreply.github.com>
Date: Thu, 26 Oct 2017 18:28:07 -0600
Subject: [PATCH] Embed the comment editor (#1204)

* Few minor HTML fixes
* Rewrote client side script to not be in jQuery. Polyfill for older browsers.. applies to #904
* Reference FAQ and GFM

Closes #1197

Auto-merge
---
 views/includes/commentEditor.html             | 10 ++-
 views/includes/commentForm.html               | 42 ++++++++--
 .../includes/scripts/commentReplyScript.html  | 79 ++++++-------------
 .../scripts/polyfillElementClosest.js         | 18 +++++
 views/pages/discussionPage.html               | 17 ++--
 views/pages/newDiscussionPage.html            |  2 +-
 views/pages/scriptIssuePage.html              | 20 ++---
 views/pages/scriptNewIssuePage.html           |  2 +-
 views/pages/scriptViewSourcePage.html         |  2 +-
 9 files changed, 97 insertions(+), 95 deletions(-)
 create mode 100644 views/includes/scripts/polyfillElementClosest.js

diff --git a/views/includes/commentEditor.html b/views/includes/commentEditor.html
index 32be28cd5..11f4f1e65 100644
--- a/views/includes/commentEditor.html
+++ b/views/includes/commentEditor.html
@@ -21,14 +21,16 @@
         </div>
         <div class="topic-post-contents row">
           <div class="user-data">
-            <textarea name="comment-content" data-provide="markdown" data-iconlibrary="fa" class="col-xs-12" placeholder="Type here using Markdown." required></textarea>
+            <textarea name="comment-content" data-provide="markdown" data-iconlibrary="fa" class="col-xs-12" placeholder="Type here using Markdown." required="required"></textarea>
           </div>
           <section class="post-menu-area">
-            <nav class="post-controls text-right">
-              <button class="btn btn-sm btn-success" title="submit your comment" type="submit">
+            <div class="submit-panel btn-toolbar">
+              <a href="/about/Frequently-Asked-Questions"><i class="fa fa-book"></i></a>
+              <a href="https://guides.github.com/features/mastering-markdown/" title="GitHub Flavor Markdown compatible"><i class="octicon octicon-markdown"></i></a>
+              <button class="btn btn-sm btn-success pull-right" title="submit your comment" type="submit">
                 <i class="fa fa-fw fa-reply"></i> Submit
               </button>
-            </nav>
+            </div>
           </section>
         </div>
       </div>
diff --git a/views/includes/commentForm.html b/views/includes/commentForm.html
index 1756a92c6..111d949fc 100644
--- a/views/includes/commentForm.html
+++ b/views/includes/commentForm.html
@@ -1,11 +1,37 @@
-<div id="reply-control" class="collapse">
-  <form action="{{{discussion.discussionPageUrl}}}" method="post">
-    <div class="container-fluid row user-content">
-      <div class="submit-panel pull-right btn-toolbar">
-        <button class="btn btn-sm btn-danger" type="button" data-toggle="collapse" data-target="#reply-control"><i class="fa fa-close"></i> Cancel</button>
-        <button class="btn btn-sm btn-success" type="submit"><i class="fa fa-reply"></i> Reply</button>
+<div class="topic-post list-group-item">
+  <article>
+    <div class="row">
+      <div class="topic-avatar col-sm-2">
+        <a href="{{{authedUser.userPageUrl}}}">
+          <i class="fa fa-user"></i>
+        </a>
+      </div>
+      <div class="topic-body col-sm-10 container-fluid">
+        <div class="topic-meta-data row">
+          <div class="names pull-left">
+            <span>
+              <a href="{{{authedUser.userPageUrl}}}" class="username">{{authedUser.name}}</a> <span class="label label-default">{{authedUser.roleName}}</span>
+            </span>
+          </div>
+          <div class="post-info pull-right">
+            <a class="post-date">
+              <time datetime="" title=""></time>
+            </a>
+          </div>
+        </div>
+        <div class="topic-post-contents row">
+          <form action="{{{discussion.discussionPageUrl}}}" method="post">
+            <div class="container-fluid row user-content">
+              <textarea name="comment-content" data-provide="markdown" data-iconlibrary="fa" class="col-xs-12" placeholder="Type here using Markdown." required="required"></textarea>
+              <div class="submit-panel btn-toolbar">
+                <a href="/about/Frequently-Asked-Questions"><i class="fa fa-book"></i></a>
+                <a href="https://guides.github.com/features/mastering-markdown/"><i class="octicon octicon-markdown" title="GitHub Flavor Markdown compatible"></i></a>
+                <button class="btn-sm btn btn-success pull-right" type="submit"><i class="fa fa-reply"></i> Reply</button>
+              </div>
+            </div>
+          </form>
+        </div>
       </div>
-      <textarea name="comment-content" data-provide="markdown" data-iconlibrary="fa" class="col-xs-12" placeholder="Type here using Markdown."></textarea>
     </div>
-  </form>
+  </article>
 </div>
diff --git a/views/includes/scripts/commentReplyScript.html b/views/includes/scripts/commentReplyScript.html
index f9d440545..e2f8ca594 100644
--- a/views/includes/scripts/commentReplyScript.html
+++ b/views/includes/scripts/commentReplyScript.html
@@ -1,80 +1,47 @@
 <script type="text/javascript">
   (function () {
+    'use strict';
 
-    var events = 'DOMContentLoaded load resize scroll';
-    var handler = null;
-    var didCallback = false;
+    {{> includes/scripts/polyfillElementClosest.js }}
 
-    $('#reply-control').on('show.bs.collapse', function () {
-      // Show spacer div
-      $('#show-reply-form-when-visible').css({
-        height:
-          {{#paginationRendered}}'210px'{{/paginationRendered}}
-          {{^paginationRendered}}'268px'{{/paginationRendered}}
-      });
-    });
-
-    $('#reply-control').on('hide.bs.collapse', function () {
-      // Hide spacer div
-      $('#show-reply-form-when-visible').css({
-        height: '0'
-      });
-
-      // Clear text value from reply box
-      $('#reply-control textarea[name="comment-content"]').val('');
-    });
-
-    $('.btn-comment-reply').click(function (aE) {
-      var $comment = $(aE.target).closest('.topic-post');
-      var $author = $comment.find('.topic-meta-data .names .username').first();
-      var $replyTextarea = $('#reply-control textarea[name="comment-content"]');
+    function onClick(aEv) {
+      var commentNode = document.querySelector('textarea[name="comment-content"]');
+      var containerNode = aEv.target.closest('.topic-post');
+      var authorNode = containerNode.querySelector('.topic-meta-data .names .username');
       var value = null;
-      var reUrl = null;
+      var url = null;
 
-      $('#reply-control').collapse('show');
+      document.location.hash = containerNode.id;
 
-      document.location.hash = $comment.attr('id');
+      url = document.location.pathname + document.location.search + document.location.hash;
+      url = url.replace(/\(/g, '%28').replace(/\)/g, '%29');
 
-      reUrl = document.location.pathname +
-        document.location.search +
-        document.location.hash;
-      reUrl = reUrl.replace(/\(/g, '%28').replace(/\)/g, '%29');
+      value = commentNode.value;
 
-      value = $replyTextarea.val();
       if (!/^\s*$/.test(value)) {
         // Add linebreaks if reply already started.
         value += '\n\n';
       }
-      value += '[Re](' + reUrl + '): ';
-      value += '@' + $author.text() + ': ';
-      value += '  \n';
-      $replyTextarea.val(value);
-      $replyTextarea.focus();
-    });
 
-    function callback(aEl) {
-      if (!didCallback) {
-        didCallback = true;
+      value += '[Re](' + url + '): ';
+      value += '@' + authorNode.textContent + ': ';
+      value += '  \n';
 
-        $('#reply-control').collapse('show');
-        $('#reply-control textarea[name="comment-content"]').focus();
-      }
+      commentNode.value = value;
+      commentNode.focus();
     }
 
-    {{> includes/scripts/isElementInViewport.js }}
-
-    function fireIfElementVisible(aEl, aCallback) {
-      return function () {
-        if (isElementInViewport(aEl)) {
-          $(window).off(events, handler);
+    function onDOMContentLoaded(aEv) {
+      var i = null;
+      var thisNode = null;
+      var replyNodes = document.querySelectorAll('.btn-comment-reply');
 
-          aCallback(aEl);
-        }
+      for (i = 0; thisNode = replyNodes[i++];) {
+        thisNode.addEventListener('click', onClick);
       }
     }
 
-    handler = fireIfElementVisible($('#show-reply-form-when-visible'), callback);
-    $(window).on(events, handler);
+    document.addEventListener('DOMContentLoaded', onDOMContentLoaded);
 
   })();
 </script>
diff --git a/views/includes/scripts/polyfillElementClosest.js b/views/includes/scripts/polyfillElementClosest.js
new file mode 100644
index 000000000..a7a8544b1
--- /dev/null
+++ b/views/includes/scripts/polyfillElementClosest.js
@@ -0,0 +1,18 @@
+// IE8+, Opera Presto, and older browser Element.Polyfill
+
+if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(aSelector) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(aSelector);
+    var i;
+    var el = this;
+
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {
+      };
+    } while ((i < 0) && (el = el.parentElement));
+
+    return el;
+  };
+}
diff --git a/views/pages/discussionPage.html b/views/pages/discussionPage.html
index 996293aa2..47837a268 100644
--- a/views/pages/discussionPage.html
+++ b/views/pages/discussionPage.html
@@ -4,15 +4,6 @@
   <title>{{title}}</title>
   {{> includes/head.html }}
   <link rel="stylesheet" type="text/css" media="all" href="/redist/npm/bootstrap-markdown/css/bootstrap-markdown.min.css">
-  <style>
-    #show-reply-form-when-visible {
-      -moz-transition: height 1s ease;
-      -ms-transition: height 1s ease;
-      -o-transition: height 1s ease;
-      -webkit-transition: height 1s ease;
-      transition: height 1s ease;
-    }
-  </style>
 </head>
 <body>
   {{> includes/header.html }}
@@ -45,6 +36,11 @@
                   </div>
                   {{/paginationRendered}}
                 </section>
+                {{#authedUser}}
+                <section class="topic-area list-group">
+                    {{> includes/commentForm.html }}
+                </section>
+                {{/authedUser}}
               </div>
             </div>
           </div>
@@ -54,8 +50,7 @@
       </div>
     </div>
   </div>
-  <div id="show-reply-form-when-visible"></div>
-  {{> includes/commentForm.html }}
+
   {{> includes/footer.html }}
   {{#paginationRendered}}
     {{> includes/scripts/showTopPagination.html }}
diff --git a/views/pages/newDiscussionPage.html b/views/pages/newDiscussionPage.html
index 9692c43c0..8601ef6d3 100644
--- a/views/pages/newDiscussionPage.html
+++ b/views/pages/newDiscussionPage.html
@@ -17,7 +17,7 @@
                 <ol class="breadcrumb col-xs-12">
                   <li><a href="/forum">Forum</a></li>
                   <li><a href="{{{category.categoryPageUrl}}}">{{category.name}}</a></li>
-                  <li><input type="text" id="discussion-topic" name="discussion-topic" size="60" placeholder="Topic" required></li>
+                  <li><input type="text" id="discussion-topic" name="discussion-topic" size="60" placeholder="Topic" required="required"></li>
                 </ol>
               </div>
               <div class="container-fluid comments">
diff --git a/views/pages/scriptIssuePage.html b/views/pages/scriptIssuePage.html
index 144c00441..3019f4bc5 100644
--- a/views/pages/scriptIssuePage.html
+++ b/views/pages/scriptIssuePage.html
@@ -5,15 +5,6 @@
   {{> includes/head.html }}
   <link rel="stylesheet" type="text/css" media="all" href="/redist/npm/bootstrap-markdown/css/bootstrap-markdown.min.css">
   <link rel="stylesheet" type="text/css" media="all" href="/css/scriptPage.css">
-  <style>
-    #show-reply-form-when-visible {
-      -moz-transition: height 1s ease;
-      -ms-transition: height 1s ease;
-      -o-transition: height 1s ease;
-      -webkit-transition: height 1s ease;
-      transition: height 1s ease;
-    }
-  </style>
 </head>
 <body>
   {{> includes/header.html }}
@@ -53,6 +44,11 @@
                 </div>
                 {{/paginationRendered}}
               </section>
+              {{#authedUser}}
+              <section class="topic-area list-group">
+                  {{> includes/commentForm.html }}
+              </section>
+              {{/authedUser}}
             </div>
           </div>
         </div>
@@ -63,16 +59,14 @@
     </div>
   </div>
 
-  <div id="show-reply-form-when-visible"></div>
-  {{> includes/commentForm.html }}
   {{> includes/footer.html }}
   {{#paginationRendered}}
       {{> includes/scripts/showTopPagination.html }}
   {{/paginationRendered}}
   {{> includes/scripts/lazyIconScript.html }}
   {{#authedUser}}
-  {{> includes/scripts/markdownEditor.html }}
-  {{> includes/scripts/commentReplyScript.html }}
+    {{> includes/scripts/markdownEditor.html }}
+    {{> includes/scripts/commentReplyScript.html }}
   {{/authedUser}}
   {{^authedUser}}
     {{> includes/scripts/commentReplyTooltip.html }}
diff --git a/views/pages/scriptNewIssuePage.html b/views/pages/scriptNewIssuePage.html
index 19a66821d..69a37e896 100644
--- a/views/pages/scriptNewIssuePage.html
+++ b/views/pages/scriptNewIssuePage.html
@@ -18,7 +18,7 @@
                   <li><a href="{{{script.scriptPageUrl}}}">{{script.name}}</a></li>
                   <li><a href="{{{category.categoryPageUrl}}}">{{category.name}}</a></li>
                   <li class="col-xs-12">
-                    <input type="text" id="discussion-topic" name="discussion-topic" size="60" placeholder="Topic" required>
+                    <input type="text" id="discussion-topic" name="discussion-topic" size="60" placeholder="Topic" required="required">
                   </li>
                 </ol>
               </div>
diff --git a/views/pages/scriptViewSourcePage.html b/views/pages/scriptViewSourcePage.html
index f1d416af2..79134568f 100644
--- a/views/pages/scriptViewSourcePage.html
+++ b/views/pages/scriptViewSourcePage.html
@@ -34,7 +34,7 @@
           <div class="pull-left">
             {{#isLib}}
               {{#newScript}}
-                <strong>Library Name:</strong> <input type="text" name="script_name" value="" required>
+                <strong>Library Name:</strong> <input type="text" name="script_name" value="" required="required">
               {{/newScript}}
               {{^newScript}}
                 <input type="hidden" name="script_name" value="{{scriptName}}" />