From 8e8a39af43b96d31dc451795f95ead20f73b1845 Mon Sep 17 00:00:00 2001 From: evazion Date: Thu, 9 Aug 2018 00:24:08 -0500 Subject: [PATCH 1/4] 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. --- app/javascript/src/javascripts/comments.js | 10 ---------- app/views/comments/_form.html.erb | 2 +- app/views/comments/edit.html.erb | 2 +- app/views/comments/partials/index/_list.html.erb | 2 +- app/views/comments/partials/show/_comment.html.erb | 4 ++-- 5 files changed, 5 insertions(+), 15 deletions(-) diff --git a/app/javascript/src/javascripts/comments.js b/app/javascript/src/javascripts/comments.js index 7131d8393..63ad45bc6 100644 --- a/app/javascript/src/javascripts/comments.js +++ b/app/javascript/src/javascripts/comments.js @@ -8,7 +8,6 @@ Comment.initialize_all = function() { this.initialize_response_link(); this.initialize_reply_links(); this.initialize_expand_links(); - this.initialize_vote_links(); if (!$("#a-edit").length) { this.initialize_edit_links(); @@ -27,7 +26,6 @@ Comment.initialize_all = function() { } Comment.initialize_reply_links(current_comment_section); Comment.initialize_edit_links(current_comment_section); - Comment.initialize_vote_links(current_comment_section); Dtext.initialize_expandables(current_comment_section); }); } @@ -74,13 +72,10 @@ Comment.initialize_response_link = function() { Utility.scroll_to($form); e.preventDefault(); }); - - $("div.new-comment form").hide(); } Comment.initialize_edit_links = function($parent) { $parent = $parent || $(document); - $parent.find(".edit_comment").hide(); $parent.find(".edit_comment_link").click(function(e) { var link_id = $(this).attr("id"); 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() { Comment.initialize_all(); }); diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index 645385043..e64ee90f1 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -1,6 +1,6 @@ <%= 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 %> <%= 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" %> diff --git a/app/views/comments/edit.html.erb b/app/views/comments/edit.html.erb index 6914b6f77..b163f50a7 100644 --- a/app/views/comments/edit.html.erb +++ b/app/views/comments/edit.html.erb @@ -2,7 +2,7 @@

Edit Comment

- <%= render "comments/form", :post => @comment.post, :comment => @comment %> + <%= render "comments/form", comment: @comment %>
diff --git a/app/views/comments/partials/index/_list.html.erb b/app/views/comments/partials/index/_list.html.erb index 6cf957800..10c092ed6 100644 --- a/app/views/comments/partials/index/_list.html.erb +++ b/app/views/comments/partials/index/_list.html.erb @@ -28,7 +28,7 @@ <% if CurrentUser.is_member? %>

<%= link_to "Post comment", new_comment_path, :class => "expand-comment-response" %>

- <%= render "comments/form", :post => post, :comment => post.comments.new %> + <%= render "comments/form", comment: post.comments.new, hidden: true %>
<% end %> diff --git a/app/views/comments/partials/show/_comment.html.erb b/app/views/comments/partials/show/_comment.html.erb index a490a7b2d..5d9f9a306 100644 --- a/app/views/comments/partials/show/_comment.html.erb +++ b/app/views/comments/partials/show/_comment.html.erb @@ -35,7 +35,7 @@ <% end %> - + <% if CurrentUser.is_moderator? %>
  • |
  • @@ -46,7 +46,7 @@ <% end %> <% if comment.editable_by?(CurrentUser.user) %> - <%= render "comments/form", :post => comment.post, :comment => comment %> + <%= render "comments/form", comment: comment, hidden: true %> <% end %> <% end %> From 031cb6b8cff9007214c2675a707af0fa8d88f182 Mon Sep 17 00:00:00 2001 From: evazion Date: Thu, 9 Aug 2018 00:57:36 -0500 Subject: [PATCH 2/4] comments.js: use event delegation to bind click handlers. Use event delegation to bind click handlers so that they don't have to be rebound when comments are dynamically loaded with "Show all comments". --- app/javascript/src/javascripts/comments.js | 41 +++++++--------------- 1 file changed, 12 insertions(+), 29 deletions(-) diff --git a/app/javascript/src/javascripts/comments.js b/app/javascript/src/javascripts/comments.js index 63ad45bc6..82c137e85 100644 --- a/app/javascript/src/javascripts/comments.js +++ b/app/javascript/src/javascripts/comments.js @@ -5,13 +5,10 @@ let Comment = {}; Comment.initialize_all = function() { if ($("#c-posts").length || $("#c-comments").length) { - this.initialize_response_link(); - this.initialize_reply_links(); + $(document).on("click", ".reply-link", Comment.quote); + $(document).on("click", ".edit_comment_link", Comment.show_edit_form); + $(document).on("click", ".expand-comment-response", Comment.show_new_comment_form); this.initialize_expand_links(); - - if (!$("#a-edit").length) { - this.initialize_edit_links(); - } } if ($("#c-posts").length && $("#a-show").length) { @@ -24,8 +21,6 @@ Comment.initialize_all = function() { } else { Comment.highlight_threshold_comments(post_id); } - Comment.initialize_reply_links(current_comment_section); - Comment.initialize_edit_links(current_comment_section); Dtext.initialize_expandables(current_comment_section); }); } @@ -49,11 +44,6 @@ Comment.quote = function(e) { e.preventDefault(); } -Comment.initialize_reply_links = function($parent) { - $parent = $parent || $(document); - $parent.find(".reply-link").click(Comment.quote); -} - Comment.initialize_expand_links = function() { $(".comment-section form").hide(); $(".comment-section input.expand-comment-response").click(function(e) { @@ -64,24 +54,17 @@ Comment.initialize_expand_links = function() { }); } -Comment.initialize_response_link = function() { - $("a.expand-comment-response").click(function(e) { - $(e.target).hide(); - var $form = $(e.target).closest("div.new-comment").find("form"); - $form.show(); - Utility.scroll_to($form); - e.preventDefault(); - }); +Comment.show_new_comment_form = function(e) { + $(e.target).hide(); + var $form = $(e.target).closest("div.new-comment").find("form"); + $form.show(); + Utility.scroll_to($form); + e.preventDefault(); } -Comment.initialize_edit_links = function($parent) { - $parent = $parent || $(document); - $parent.find(".edit_comment_link").click(function(e) { - var link_id = $(this).attr("id"); - var comment_id = link_id.match(/^edit_comment_link_(\d+)$/)[1]; - $("#edit_comment_" + comment_id).fadeToggle("fast"); - e.preventDefault(); - }); +Comment.show_edit_form = function(e) { + $(this).closest(".comment").find(".edit_comment").show(); + e.preventDefault(); } Comment.highlight_threshold_comments = function(post_id) { From 130570aa33fadb1d6b2df196274aeaa6f12de83a Mon Sep 17 00:00:00 2001 From: evazion Date: Thu, 9 Aug 2018 12:41:15 -0500 Subject: [PATCH 3/4] comments.js: fix thresholded comments. * Restore behavior of thresholded comments being greyed out (lost in 6fa0ae2cf). * Set the `below-threshold` class for thresholded comments in the html instead of in javascript. * Remove `include_below_threshold` param; it was always true when clicking "Show all comments". --- app/controllers/comments_controller.rb | 1 - app/javascript/src/javascripts/comments.js | 23 ++----------------- app/models/comment.rb | 4 ++++ app/views/comments/index_for_post.js.erb | 2 +- .../comments/partials/index/_list.html.erb | 2 +- .../comments/partials/show/_comment.html.erb | 2 +- 6 files changed, 9 insertions(+), 25 deletions(-) diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 3c47bf13b..92a39c61e 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -70,7 +70,6 @@ private def index_for_post @post = Post.find(params[:post_id]) @comments = @post.comments - @comments = @comments.visible(CurrentUser.user) unless params[:include_below_threshold] render :action => "index_for_post" end diff --git a/app/javascript/src/javascripts/comments.js b/app/javascript/src/javascripts/comments.js index 82c137e85..2637b6f03 100644 --- a/app/javascript/src/javascripts/comments.js +++ b/app/javascript/src/javascripts/comments.js @@ -11,16 +11,8 @@ Comment.initialize_all = function() { this.initialize_expand_links(); } - if ($("#c-posts").length && $("#a-show").length) { - Comment.highlight_threshold_comments(Utility.meta("post-id")); - } - - $(window).on("danbooru:index_for_post", (_event, post_id, current_comment_section, include_below_threshold) => { - if (include_below_threshold) { - $("#threshold-comments-notice-for-" + post_id).hide(); - } else { - Comment.highlight_threshold_comments(post_id); - } + $(window).on("danbooru:index_for_post", (_event, post_id, current_comment_section) => { + $("#threshold-comments-notice-for-" + post_id).hide(); Dtext.initialize_expandables(current_comment_section); }); } @@ -67,17 +59,6 @@ Comment.show_edit_form = function(e) { e.preventDefault(); } -Comment.highlight_threshold_comments = function(post_id) { - var threshold = parseInt(Utility.meta("user-comment-threshold")); - var articles = $("article.comment[data-post-id=" + post_id + "]"); - articles.each(function(i, v) { - var $comment = $(v); - if (parseInt($comment.data("score")) < threshold) { - $comment.addClass("below-threshold"); - } - }); -} - Comment.hide_threshold_comments = function(post_id) { var threshold = parseInt(Utility.meta("user-comment-threshold")); var articles = $("article.comment[data-post-id=" + post_id + "]"); diff --git a/app/models/comment.rb b/app/models/comment.rb index a252d0233..0a7fcbfb6 100644 --- a/app/models/comment.rb +++ b/app/models/comment.rb @@ -189,6 +189,10 @@ class Comment < ApplicationRecord true end + def below_threshold?(user = CurrentUser.user) + score < user.comment_threshold + end + def editable_by?(user) creator_id == user.id || user.is_moderator? end diff --git a/app/views/comments/index_for_post.js.erb b/app/views/comments/index_for_post.js.erb index a58fd7168..7cea35603 100644 --- a/app/views/comments/index_for_post.js.erb +++ b/app/views/comments/index_for_post.js.erb @@ -2,4 +2,4 @@ $("#hidden-comments-notice-for-<%= @post.id %>").hide(); var current_comment_section = $("div.comments-for-post[data-post-id=<%= @post.id %>] div.list-of-comments"); current_comment_section.html("<%= j(render(:partial => 'comments/partials/show/comment', :collection => @comments))%>"); -$(window).trigger("danbooru:index_for_post", [<%= @post.id %>, current_comment_section, <%= ActiveModel::Type::Boolean.new.cast(params[:include_below_threshold]) %>]); +$(window).trigger("danbooru:index_for_post", [<%= @post.id %>, current_comment_section]); diff --git a/app/views/comments/partials/index/_list.html.erb b/app/views/comments/partials/index/_list.html.erb index 10c092ed6..5c3d7193f 100644 --- a/app/views/comments/partials/index/_list.html.erb +++ b/app/views/comments/partials/index/_list.html.erb @@ -6,7 +6,7 @@
    <% if post.comments.hidden(CurrentUser.user).count > 0 || (params[:controller] == "comments" && post.comments.count > 6) %> - <%= link_to "Show all comments", comments_path(:post_id => post.id, :include_below_threshold => true), :remote => true %> + <%= link_to "Show all comments", comments_path(:post_id => post.id), :remote => true %> <% end %>
    diff --git a/app/views/comments/partials/show/_comment.html.erb b/app/views/comments/partials/show/_comment.html.erb index 5d9f9a306..d8f014098 100644 --- a/app/views/comments/partials/show/_comment.html.erb +++ b/app/views/comments/partials/show/_comment.html.erb @@ -1,6 +1,6 @@ <% if CurrentUser.is_moderator? || (params[:search] && params[:search][:is_deleted] =~ /t/) || !comment.is_deleted? %> -
    +
    " data-post-id="<%= comment.post_id %>" data-comment-id="<%= comment.id %>" data-score="<%= comment.score %>" data-creator="<%= comment.creator_name %>" data-is-sticky="<%= comment.is_sticky %>">

    <%= link_to_user comment.creator %> From 755397e6c9a81ab25e9df1b9f3c4c7b0842a1160 Mon Sep 17 00:00:00 2001 From: evazion Date: Thu, 9 Aug 2018 03:46:17 -0500 Subject: [PATCH 4/4] comments.js: remove dead code. Remove dead and hide_threshold_comments and initialize_expand_links methods. initialize_expand_links is dead because `.comment-section` doesn't exist. --- app/javascript/src/javascripts/comments.js | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/app/javascript/src/javascripts/comments.js b/app/javascript/src/javascripts/comments.js index 2637b6f03..9347e24b7 100644 --- a/app/javascript/src/javascripts/comments.js +++ b/app/javascript/src/javascripts/comments.js @@ -8,7 +8,6 @@ Comment.initialize_all = function() { $(document).on("click", ".reply-link", Comment.quote); $(document).on("click", ".edit_comment_link", Comment.show_edit_form); $(document).on("click", ".expand-comment-response", Comment.show_new_comment_form); - this.initialize_expand_links(); } $(window).on("danbooru:index_for_post", (_event, post_id, current_comment_section) => { @@ -36,16 +35,6 @@ Comment.quote = function(e) { e.preventDefault(); } -Comment.initialize_expand_links = function() { - $(".comment-section form").hide(); - $(".comment-section input.expand-comment-response").click(function(e) { - var post_id = $(this).closest(".comment-section").data("post-id"); - $(this).hide(); - $(".comment-section[data-post-id=" + post_id + "] form").slideDown("fast"); - e.preventDefault(); - }); -} - Comment.show_new_comment_form = function(e) { $(e.target).hide(); var $form = $(e.target).closest("div.new-comment").find("form"); @@ -59,17 +48,6 @@ Comment.show_edit_form = function(e) { e.preventDefault(); } -Comment.hide_threshold_comments = function(post_id) { - var threshold = parseInt(Utility.meta("user-comment-threshold")); - var articles = $("article.comment[data-post-id=" + post_id + "]"); - articles.each(function(i, v) { - var $comment = $(v); - if (parseInt($comment.data("score")) < threshold) { - $comment.hide(); - } - }); -} - $(document).ready(function() { Comment.initialize_all(); });