Add comment template to post (#1692)

* add myself to the core contributors * add comment template * merge upstream * make sure the template re-appears for top level comments after submission * make interface admin only * Adjust comment template form * Fix merge conflicts * Remove unnecessary comment template from json
forem · Jan 30, 2019 · d7665fc · d7665fc
1 parent 2b779d1
commit d7665fc
Show file tree

Hide file tree

Showing 13 changed files with 165 additions and 90 deletions.
diff --git a/app/assets/javascripts/initializers/initializeBaseUserData.js b/app/assets/javascripts/initializers/initializeBaseUserData.js
@@ -1,52 +1,87 @@
-function initializeBaseUserData(){
-  var user = userData()
-  var userProfileLinkHTML = '<a href="/'+user.username+'" id="first-nav-link"><div class="option prime-option">@'+user.username+'</div></a>'
-  document.getElementById("user-profile-link-placeholder").innerHTML = userProfileLinkHTML;
-  document.getElementById("nav-profile-image").src = user.profile_image_90;
+function initializeBaseUserData() {
+  var user = userData();
+  var userProfileLinkHTML =
+    '<a href="/' +
+    user.username +
+    '" id="first-nav-link"><div class="option prime-option">@' +
+    user.username +
+    '</div></a>';
+  document.getElementById(
+    'user-profile-link-placeholder',
+  ).innerHTML = userProfileLinkHTML;
+  document.getElementById('nav-profile-image').src = user.profile_image_90;
   initializeUserSidebar(user);
   addRelevantButtonsToArticle(user);
 }
 
 function initializeUserSidebar(user) {
-  if (!document.getElementById("sidebar-nav")) return;
+  if (!document.getElementById('sidebar-nav')) return;
   initializeUserProfileContent(user);
-  var tagHTML = "";
+  var tagHTML = '';
   var followedTags = JSON.parse(user.followed_tags);
-  document.getElementById("tag-separator").innerHTML = followedTags.length === 0 ? "Follow tags to improve your feed" : "Other Popular Tags";
-
+  document.getElementById('tag-separator').innerHTML =
+    followedTags.length === 0
+      ? 'Follow tags to improve your feed'
+      : 'Other Popular Tags';
+
   // sort tags by descending weigth, descending popularity and name
   followedTags.sort(function(tagA, tagB) {
-    return tagB.points - tagA.points || tagB.hotness_score - tagA.hotness_score || tagA.name.localeCompare(tagB.name);
+    return (
+      tagB.points - tagA.points ||
+      tagB.hotness_score - tagA.hotness_score ||
+      tagA.name.localeCompare(tagB.name)
+    );
   });
-
-  followedTags.forEach(function(t){
-    var element = document.getElementById("default-sidebar-element-"+t.name);
-    tagHTML += t.points > 0.0 ?
-      '<div class="sidebar-nav-element" id="sidebar-element-'+t.name+'">' +
-      '<a class="sidebar-nav-link" href="/t/'+t.name+'">' +
-      '<span class="sidebar-nav-tag-text">#'+t.name+'</span>' +
-      '</a>' +
-      '</div>' : '';
-    if(element) element.remove();
+
+  followedTags.forEach(function(t) {
+    var element = document.getElementById('default-sidebar-element-' + t.name);
+    tagHTML +=
+      t.points > 0.0
+        ? '<div class="sidebar-nav-element" id="sidebar-element-' +
+          t.name +
+          '">' +
+          '<a class="sidebar-nav-link" href="/t/' +
+          t.name +
+          '">' +
+          '<span class="sidebar-nav-tag-text">#' +
+          t.name +
+          '</span>' +
+          '</a>' +
+          '</div>'
+        : '';
+    if (element) element.remove();
   });
-  document.getElementById("sidebar-nav-followed-tags").innerHTML = tagHTML;
-  document.getElementById("sidebar-nav-default-tags").classList.add("showing");
+  document.getElementById('sidebar-nav-followed-tags').innerHTML = tagHTML;
+  document.getElementById('sidebar-nav-default-tags').classList.add('showing');
 }
 
 function initializeUserProfileContent(user) {
-  document.getElementById("sidebar-profile-pic").innerHTML = '<img alt="" class="sidebar-profile-pic-img" src="'+user.profile_image_90+'" />'
-  document.getElementById("sidebar-profile-name").innerHTML =  filterXSS(user.name);
-  document.getElementById("sidebar-profile-username").innerHTML = '@'+user.username;
-  document.getElementById("sidebar-profile-snapshot-inner").href = "/"+user.username;
+  document.getElementById('sidebar-profile-pic').innerHTML =
+    '<img alt="" class="sidebar-profile-pic-img" src="' +
+    user.profile_image_90 +
+    '" />';
+  document.getElementById('sidebar-profile-name').innerHTML = filterXSS(
+    user.name,
+  );
+  document.getElementById('sidebar-profile-username').innerHTML =
+    '@' + user.username;
+  document.getElementById('sidebar-profile-snapshot-inner').href =
+    '/' + user.username;
 }
 
 function addRelevantButtonsToArticle(user) {
   var articleContainer = document.getElementById('article-show-container');
   if (articleContainer) {
     if (parseInt(articleContainer.dataset.authorId) == user.id) {
-      document.getElementById('action-space').innerHTML = '<a href="' + articleContainer.dataset.path + '/edit" rel="nofollow">EDIT <span class="post-word">POST</span></a>';
+      document.getElementById('action-space').innerHTML =
+        '<a href="' +
+        articleContainer.dataset.path +
+        '/edit" rel="nofollow">EDIT <span class="post-word">POST</span></a>';
     } else if (user.trusted) {
-      document.getElementById('action-space').innerHTML = '<a href="' + articleContainer.dataset.path + '/mod" rel="nofollow">MODERATE <span class="post-word">POST</span></a>';
+      document.getElementById('action-space').innerHTML =
+        '<a href="' +
+        articleContainer.dataset.path +
+        '/mod" rel="nofollow">MODERATE <span class="post-word">POST</span></a>';
     }
   }
   var commentsContainer = document.getElementById('comments-container');

diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb
@@ -51,14 +51,14 @@ function initializeCommentsPage() {
       }
     };
     var timeString = (Date.now()).toString();
-    ajaxReq.open("GET", "/reactions?commentable_id="+commentableId+"&commentable_type="+commentableType, true);
+    ajaxReq.open("GET", "/reactions?commentable_id=" + commentableId + "&commentable_type=" + commentableType, true);
     ajaxReq.send();
 
     var butts = document.getElementsByClassName('reaction-button');
     for (var i = 0; i < butts.length; i++) {
       var butt = butts[i];
       butt.onclick = function (event) {
-              var thisButt = this;
+        var thisButt = this;
         thisButt.blur();
         event.preventDefault();
         sendHapticMessage('medium');
@@ -99,9 +99,9 @@ function initializeCommentsPage() {
     var replyButts = document.getElementsByClassName('toggle-reply-form');
     for (var i = 0; i < replyButts.length; i++) {
       var butt = replyButts[i];
-      butt.onclick = function(event) {
+      butt.onclick = function (event) {
         event.preventDefault();
-        if (event.target.classList.contains("thread-indication")){
+        if (event.target.classList.contains("thread-indication")) {
           return false;
         } else {
           var userStatus = document.getElementsByTagName('body')[0].getAttribute('data-user-status');
@@ -111,7 +111,7 @@ function initializeCommentsPage() {
           }
           var actionNode = event.target.parentNode;
           var parentId = actionNode.dataset.commentId;
-          document.getElementById("button-for-comment-"+actionNode.dataset.commentId).style.zIndex = "5";
+          document.getElementById("button-for-comment-" + actionNode.dataset.commentId).style.zIndex = "5";
           var waitingOnCSRF = setInterval(function () {
             var metaTag = document.querySelector("meta[name='csrf-token']");
             if (metaTag) {
@@ -144,7 +144,7 @@ function initializeCommentsPage() {
 
 function toggleCodeOfConduct() {
   var user = userData();
-  if (!user){
+  if (!user) {
     return;
   }
   var codeOfConduct = user.checked_code_of_conduct
@@ -159,18 +159,18 @@ function toggleCodeOfConduct() {
 function replaceActionButts(el) {
   var loggedInActionButts = "";
   var wrapper = el.getElementsByClassName("actions")[0]
-  if ( el.dataset.currentUserComment == "true"){
+  if (el.dataset.currentUserComment == "true") {
     loggedInActionButts = '<a data-no-instant href="' + el.parentNode.parentNode.dataset.path + '/delete_confirm" class="edit-butt">DELETE</a>\
                             <a href="' + el.parentNode.parentNode.dataset.path + '/edit">EDIT</a>'
   }
-  wrapper.innerHTML = '<span class="current-user-actions">'+loggedInActionButts+'</span><a href="#" class="toggle-reply-form">REPLY</a>';
+  wrapper.innerHTML = '<span class="current-user-actions">' + loggedInActionButts + '</span><a href="#" class="toggle-reply-form">REPLY</a>';
 }
 
 function handleCommentSubmit(event) {
   event.preventDefault();
   var form = event.target;
   form.classList.add('submitting');
-  var parentComment = document.getElementById("comment-node-"+event.target.dataset.commentId);
+  var parentComment = document.getElementById("comment-node-" + event.target.dataset.commentId);
 
   var body = JSON.stringify({
     comment: {
@@ -185,7 +185,7 @@ function handleCommentSubmit(event) {
     .then(sendFetch('comment-creation', body))
     .then(function (response) {
       if (response.status === 200) {
-        response.json().then(function(newComment) {
+        response.json().then(function (newComment) {
           var newNode = document.createElement('div');
           if (newComment.status == "comment already exists") {
             return false;
@@ -219,10 +219,10 @@ function handleCommentSubmit(event) {
 
           else if (mainCommentsForm) {
             var mainCommentsForm = document.getElementById("new_comment");
-            var textArea = document.getElementById("text-area");
             mainCommentsForm.classList.remove("submitting");
-            textArea.value = "";
+            const textArea = document.getElementById("text-area");
             textArea.classList = "";
+            textArea.value = newComment.comment_template;
             var preview = document.getElementById("preview-div");
             preview.classList.add("preview-toggle");
             preview.innerHTML = "";
@@ -231,7 +231,7 @@ function handleCommentSubmit(event) {
           }
           else if (document.getElementById("notifications-container")) {
             var newDiv = document.createElement("span")
-            newDiv.innerHTML = '<div class="reply-sent-notice">Reply sent — <a href="'+newComment.url+'">Check it out</a></div>'
+            newDiv.innerHTML = '<div class="reply-sent-notice">Reply sent — <a href="' + newComment.url + '">Check it out</a></div>'
             form.replaceWith(newDiv);
           }
           else {
@@ -280,7 +280,7 @@ function handleSubmit(event) {
   // Get user details and extract code of conduct & comment count
   var user = userData();
   if (!user) {
-      return;
+    return;
   }
 
   var commentCount = user.number_of_comments;
@@ -308,7 +308,7 @@ function handleBoldAndItalic(event) {
 
   var selection = textArea.value.substring(textArea.selectionStart, textArea.selectionEnd);
   var selectionStart = textArea.selectionStart;
-  var surroundingStr =  event.keyCode === KEY_CODE_B ? "**" : "_";
+  var surroundingStr = event.keyCode === KEY_CODE_B ? "**" : "_";
 
   replaceSelectedText(textArea, `${surroundingStr}${selection}${surroundingStr}`);
 
@@ -336,10 +336,10 @@ function handleLink(event) {
 
 function replaceSelectedText(textArea, text) {
   // Chrome and other modern browsers (except FF and IE 8,9,10,11)
-  if(document.execCommand('insertText', false, text)) {
+  if (document.execCommand('insertText', false, text)) {
   }
   // Firefox (non-standard method)
-  else if(typeof textArea.setRangeText === "function") {
+  else if (typeof textArea.setRangeText === "function") {
     textArea.setRangeText(text);
   }
 
@@ -424,16 +424,16 @@ function generateUploadFormdata(image) {
 function handleImageUpload(event, randomIdNumber) {
   var commentableId = document.getElementById('comments-container').dataset.commentableId;
   event.preventDefault();
-  document.getElementById('image-upload-'+ randomIdNumber).click();
-  document.getElementById('image-upload-'+ randomIdNumber).onchange = function (e) {
-    var image = document.getElementById('image-upload-'+ randomIdNumber).files;
+  document.getElementById('image-upload-' + randomIdNumber).click();
+  document.getElementById('image-upload-' + randomIdNumber).onchange = function (e) {
+    var image = document.getElementById('image-upload-' + randomIdNumber).files;
     if (image.length > 0) {
       document.getElementById("image-upload-file-label-" + randomIdNumber).style.color = '#888888';
       document.getElementById("image-upload-file-label-" + randomIdNumber).innerHTML = "Uploading...";
       document.getElementById("image-upload-submit-" + randomIdNumber).value = "uploading";
-      setTimeout(function(){
-        document.getElementById("image-upload-submit-" + randomIdNumber).click(function(){});
-      },50)
+      setTimeout(function () {
+        document.getElementById("image-upload-submit-" + randomIdNumber).click(function () { });
+      }, 50)
     }
   }
 

diff --git a/app/assets/stylesheets/article_form.scss b/app/assets/stylesheets/article_form.scss
@@ -274,7 +274,12 @@
     margin-top:13px;
     right:14px;
   }
-  textarea{
+  .comment-template {
+    display: block;
+    width: 98%;
+    margin: 0 auto;
+  }
+  .article-field {
     width:calc(100% - 32px);
     min-height: 550px;
     margin:auto;

diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
@@ -228,6 +228,12 @@ a.header-link{
     .field{
       margin-bottom:0px;
     }
+    .article-comment-form-preamble {
+      font-size: 0.7em;
+      margin-left: 20px;
+      margin-top: 8px;
+      margin-bottom: -5px;
+    }
     textarea{
       width:calc(100% - 52px);
       margin:15px auto 2px;

diff --git a/app/controllers/articles_controller.rb b/app/controllers/articles_controller.rb
@@ -184,6 +184,7 @@ def article_params
     params[:article][:published] = true if params[:submit_button] == "PUBLISH"
     modified_params = policy(Article).permitted_attributes
     modified_params << :user_id if org_admin_user_change_privilege
+    modified_params << :comment_template if current_user.has_role?(:admin)
     params.require(:article).permit(modified_params)
   end
 

diff --git a/app/controllers/stories_controller.rb b/app/controllers/stories_controller.rb
@@ -206,11 +206,11 @@ def redirect_if_show_view_param
   def handle_article_show
     @article_show = true
     @variant_number = params[:variant_version] || rand(2)
-    @comment = Comment.new
     assign_user_and_org
     @comments_to_show_count = @article.cached_tag_list_array.include?("discuss") ? 50 : 30
     assign_second_and_third_user
     not_found if permission_denied?
+    @comment = Comment.new(body_markdown: @article&.comment_template)
     set_surrogate_key_header @article.record_key
     redirect_if_show_view_param
     return if performed?

diff --git a/app/javascript/article-form/articleForm.jsx b/app/javascript/article-form/articleForm.jsx
@@ -181,17 +181,17 @@ export default class ArticleForm extends Component {
     const imageArea = mainImage ? (
       <MainImage mainImage={mainImage} onEdit={this.toggleImageManagement} />
     ) : (
-        ''
-      );
+      ''
+    );
     const imageManagement = imageManagementShowing ? (
       <ImageManagement
         onExit={this.toggleImageManagement}
         mainImage={mainImage}
         onMainImageUrlChange={this.handleMainImageUrlChange}
       />
     ) : (
-        ''
-      );
+      ''
+    );
     const moreConfig = moreConfigShowing ? (
       <MoreConfig
         onExit={this.toggleMoreConfig}
@@ -200,17 +200,17 @@ export default class ArticleForm extends Component {
         onConfigChange={this.handleConfigChange}
       />
     ) : (
-        ''
-      );
+      ''
+    );
     const orgArea = organization ? (
       <OrgSettings
         organization={organization}
         postUnderOrg={postUnderOrg}
         onToggle={this.toggleOrgPosting}
       />
     ) : (
-        ''
-      );
+      ''
+    );
     const errorsArea = errors ? <Errors errorsList={errors} /> : '';
     let editorView = '';
     if (previewShowing) {
@@ -243,7 +243,7 @@ export default class ArticleForm extends Component {
             >
               <img src={ImageUploadIcon} />
               {' '}
-              IMAGES
+IMAGES
             </button>
             <button
               className="articleform__detailsButton articleform__detailsButton--moreconfig"
@@ -262,7 +262,7 @@ export default class ArticleForm extends Component {
           >
             <img src={ImageUploadIcon} />
             {' '}
-            IMAGES
+IMAGES
           </button>
           <button
             className="articleform__detailsButton articleform__detailsButton--moreconfig articleform__detailsButton--bottom"

diff --git a/app/views/articles/_markdown_form.html.erb b/app/views/articles/_markdown_form.html.erb
@@ -55,7 +55,7 @@
             <input id="uploaded-image" style="display:none" />
           </div>
         </div>
-        <%= f.text_area :body_markdown %>
+        <%= f.text_area :body_markdown, class: "article-field" %>
         <% if hiring_form?(@tag, @article) %>
           <% if current_user.organization %>
             <div class="hiring-form-toggle">
@@ -72,6 +72,10 @@
           </div>
         <% end %>
       </div>
+      <% if @user.has_role?(:admin) %>
+        <%= f.label :comment_template %>
+        <%= f.text_area :comment_template, class: "comment-template" %>
+      <% end %>
     </div>
   </div>
 <% end %>