comments.js: fix forms flickering on page load.

Mark the edit form, new comment form, and unvote links as hidden in
html, instead of showing them by default then hiding them later in
Javascript. This eliminates flickering on page load.
This commit is contained in:
evazion
2018-08-09 00:24:08 -05:00
parent c615b53a7e
commit 8e8a39af43
5 changed files with 5 additions and 15 deletions

View File

@@ -8,7 +8,6 @@ Comment.initialize_all = function() {
this.initialize_response_link(); this.initialize_response_link();
this.initialize_reply_links(); this.initialize_reply_links();
this.initialize_expand_links(); this.initialize_expand_links();
this.initialize_vote_links();
if (!$("#a-edit").length) { if (!$("#a-edit").length) {
this.initialize_edit_links(); this.initialize_edit_links();
@@ -27,7 +26,6 @@ Comment.initialize_all = function() {
} }
Comment.initialize_reply_links(current_comment_section); Comment.initialize_reply_links(current_comment_section);
Comment.initialize_edit_links(current_comment_section); Comment.initialize_edit_links(current_comment_section);
Comment.initialize_vote_links(current_comment_section);
Dtext.initialize_expandables(current_comment_section); Dtext.initialize_expandables(current_comment_section);
}); });
} }
@@ -74,13 +72,10 @@ Comment.initialize_response_link = function() {
Utility.scroll_to($form); Utility.scroll_to($form);
e.preventDefault(); e.preventDefault();
}); });
$("div.new-comment form").hide();
} }
Comment.initialize_edit_links = function($parent) { Comment.initialize_edit_links = function($parent) {
$parent = $parent || $(document); $parent = $parent || $(document);
$parent.find(".edit_comment").hide();
$parent.find(".edit_comment_link").click(function(e) { $parent.find(".edit_comment_link").click(function(e) {
var link_id = $(this).attr("id"); var link_id = $(this).attr("id");
var comment_id = link_id.match(/^edit_comment_link_(\d+)$/)[1]; var comment_id = link_id.match(/^edit_comment_link_(\d+)$/)[1];
@@ -111,11 +106,6 @@ Comment.hide_threshold_comments = function(post_id) {
}); });
} }
Comment.initialize_vote_links = function($parent) {
$parent = $parent || $(document);
$parent.find(".unvote-comment-link").hide();
}
$(document).ready(function() { $(document).ready(function() {
Comment.initialize_all(); Comment.initialize_all();
}); });

View File

@@ -1,6 +1,6 @@
<%= error_messages_for :comment %> <%= error_messages_for :comment %>
<%= simple_form_for(comment, :html => {:class => "edit_comment"}) do |f| %> <%= simple_form_for(comment, :html => {:style => ("display: none;" if local_assigns[:hidden]), :class => "edit_comment"}) do |f| %>
<%= f.hidden_field :post_id %> <%= f.hidden_field :post_id %>
<%= dtext_field "comment", "body", :classes => "autocomplete-mentions", :value => comment.body, :input_id => "comment_body_for_#{comment.id}", :preview_id => "dtext-preview-for-#{comment.id}" %> <%= dtext_field "comment", "body", :classes => "autocomplete-mentions", :value => comment.body, :input_id => "comment_body_for_#{comment.id}", :preview_id => "dtext-preview-for-#{comment.id}" %>
<%= f.button :submit, "Submit" %> <%= f.button :submit, "Submit" %>

View File

@@ -2,7 +2,7 @@
<div id="a-edit"> <div id="a-edit">
<h1>Edit Comment</h1> <h1>Edit Comment</h1>
<%= render "comments/form", :post => @comment.post, :comment => @comment %> <%= render "comments/form", comment: @comment %>
</div> </div>
</div> </div>

View File

@@ -28,7 +28,7 @@
<% if CurrentUser.is_member? %> <% if CurrentUser.is_member? %>
<div class="new-comment"> <div class="new-comment">
<p><%= link_to "Post comment", new_comment_path, :class => "expand-comment-response" %></p> <p><%= link_to "Post comment", new_comment_path, :class => "expand-comment-response" %></p>
<%= render "comments/form", :post => post, :comment => post.comments.new %> <%= render "comments/form", comment: post.comments.new, hidden: true %>
</div> </div>
<% end %> <% end %>
</div> </div>

View File

@@ -35,7 +35,7 @@
<% end %> <% end %>
<li id="comment-vote-up-link-for-<%= comment.id %>"><%= link_to "Vote up", comment_votes_path(:comment_id => comment.id, :score => "up"), :method => :post, :remote => true %></li> <li id="comment-vote-up-link-for-<%= comment.id %>"><%= link_to "Vote up", comment_votes_path(:comment_id => comment.id, :score => "up"), :method => :post, :remote => true %></li>
<li id="comment-vote-down-link-for-<%= comment.id %>"><%= link_to "Vote down", comment_votes_path(:comment_id => comment.id, :score => "down"), :method => :post, :remote => true %></li> <li id="comment-vote-down-link-for-<%= comment.id %>"><%= link_to "Vote down", comment_votes_path(:comment_id => comment.id, :score => "down"), :method => :post, :remote => true %></li>
<li id="comment-unvote-link-for-<%= comment.id %>" class="unvote-comment-link"><%= link_to "Unvote", comment_votes_path(:comment_id => comment.id), :method => :delete, :remote => true %></li> <li style="display: none;" id="comment-unvote-link-for-<%= comment.id %>" class="unvote-comment-link"><%= link_to "Unvote", comment_votes_path(:comment_id => comment.id), :method => :delete, :remote => true %></li>
<% if CurrentUser.is_moderator? %> <% if CurrentUser.is_moderator? %>
<li>|</li> <li>|</li>
<li> <li>
@@ -46,7 +46,7 @@
<% end %> <% end %>
</menu> </menu>
<% if comment.editable_by?(CurrentUser.user) %> <% if comment.editable_by?(CurrentUser.user) %>
<%= render "comments/form", :post => comment.post, :comment => comment %> <%= render "comments/form", comment: comment, hidden: true %>
<% end %> <% end %>
<% end %> <% end %>
</div> </div>