From 8ef05ec69b830f913a63cf0c936bbfc55a66a62c Mon Sep 17 00:00:00 2001 From: evazion Date: Mon, 28 Feb 2022 19:51:27 -0600 Subject: [PATCH] Fix #5021: Downvoting/upvoting a revealed hidden comment will hide it again. Fix it so that upvoting or downvoting a revealed thresholded comment doesn't hide it again. The fix is to explicitly store a `data-show-thresholded` flag on the comment, instead of manually hiding elements with jQuery, and to morph the comment HTML instead of replacing it so that the state isn't lost after voting. Alpine.js is used for this, which isn't strictly necessary, but is useful to test the library before adopting it on a wider scale. https://alpinejs.dev/start-here --- .../comment_component.html.erb | 11 +++--- .../comment_component/comment_component.scss | 8 +++++ app/javascript/packs/application.js | 6 ++++ .../src/javascripts/comment_component.js | 8 ----- app/views/comment_votes/create.js.erb | 7 ++-- package.json | 2 ++ yarn.lock | 34 +++++++++++++++++++ 7 files changed, 61 insertions(+), 15 deletions(-) diff --git a/app/components/comment_component/comment_component.html.erb b/app/components/comment_component/comment_component.html.erb index d914422d6..7e685d88c 100644 --- a/app/components/comment_component/comment_component.html.erb +++ b/app/components/comment_component/comment_component.html.erb @@ -1,4 +1,6 @@
+ data-is-downvoted="<%= downvoted? %>" + data-show-thresholded="false">
@@ -28,11 +31,9 @@
- <% if thresholded? %> - <%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link" %> - <% end %> + <%= link_to "[hidden]", "javascript:void(0)", class: "unhide-comment-link", "x-on:click": "showThresholded = true" %> - <%= tag.div class: "body prose", style: ("display: none;" if thresholded?) do %> + <%= tag.div class: "body prose" do %> <% if redact_deleted? %>

[deleted]

<% else %> diff --git a/app/components/comment_component/comment_component.scss b/app/components/comment_component/comment_component.scss index c4bab3c97..18ba1ddc3 100644 --- a/app/components/comment_component/comment_component.scss +++ b/app/components/comment_component/comment_component.scss @@ -17,6 +17,14 @@ article.comment { } } + &[data-is-thresholded="true"][data-show-thresholded="false"] { + .body { display: none; } + } + + &[data-is-thresholded="false"], &[data-is-thresholded="true"][data-show-thresholded="true"] { + .unhide-comment-link { display: none; } + } + .unhide-comment-link { margin-bottom: 0.75rem; display: block; diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 0edbd8fb3..b4e1cc6a0 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -10,6 +10,8 @@ require('@rails/ujs').start(); require('hammerjs'); require('jquery-hotkeys'); import morphdom from 'morphdom'; +import Alpine from 'alpinejs'; +import morph from '@alpinejs/morph'; // should start looking for nodejs replacements importAll(require.context('../vendor', true, /\.js$/)); @@ -93,4 +95,8 @@ Danbooru.error = Utility.error; window.$ = jQuery; window.jQuery = jQuery; window.morphdom = morphdom; +window.Alpine = Alpine; window.Danbooru = Danbooru; + +Alpine.plugin(morph); +Alpine.start(); diff --git a/app/javascript/src/javascripts/comment_component.js b/app/javascript/src/javascripts/comment_component.js index cbb03c41c..e4446d7af 100644 --- a/app/javascript/src/javascripts/comment_component.js +++ b/app/javascript/src/javascripts/comment_component.js @@ -5,7 +5,6 @@ class CommentComponent { if ($("#c-posts #a-show, #c-comments").length) { $(document).on("click.danbooru.comment", ".edit_comment_link", CommentComponent.showEditForm); $(document).on("click.danbooru.comment", ".expand-comment-response", CommentComponent.showNewCommentForm); - $(document).on("click.danbooru.comment", ".unhide-comment-link", CommentComponent.unhideComment); $(document).on("click.danbooru.comment", ".comment-copy-id", CommentComponent.copyID); $(document).on("click.danbooru.comment", ".comment-copy-link", CommentComponent.copyLink); } @@ -25,13 +24,6 @@ class CommentComponent { e.preventDefault(); } - static unhideComment(e) { - let $comment = $(this).closest(".comment"); - $comment.find(".unhide-comment-link").hide(); - $comment.find(".body").show(); - e.preventDefault(); - } - static async copyID(e) { let id = $(this).closest(".comment").data("id"); let link = `comment #${id}`; diff --git a/app/views/comment_votes/create.js.erb b/app/views/comment_votes/create.js.erb index 3439ecfba..471b5ea11 100644 --- a/app/views/comment_votes/create.js.erb +++ b/app/views/comment_votes/create.js.erb @@ -2,5 +2,8 @@ Danbooru.Utility.notice("<%= j flash[:notice] %>"); <% end %> -var $comment = $("article#comment_<%= @comment_vote.comment_id %>"); -$comment.replaceWith("<%= j render_comment(@comment_vote.comment, current_user: CurrentUser.user) %>"); +$(function() { + let $comment = $("article#comment_<%= @comment_vote.comment_id %>").get(0); + let html = "<%= j render_comment(@comment_vote.comment, current_user: CurrentUser.user) %>"; + Alpine.morph($comment, html); +}); diff --git a/package.json b/package.json index 64adb76dc..6b54f2b11 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "license": "MIT", "dependencies": { + "@alpinejs/morph": "^3.9.0", "@babel/plugin-proposal-decorators": "^7.16.7", "@fontsource/anton": "^4.0.0", "@fontsource/archivo-narrow": "^4.0.0", @@ -14,6 +15,7 @@ "@rails/ujs": "^7.0.1", "@rails/webpacker": "=6.0.0-rc.6", "@ruffle-rs/ruffle": "0.1.0-nightly.2022.1.31", + "alpinejs": "^3.9.0", "core-js": "^3.20.3", "css-loader": "^6.5.1", "dropzone": "^6.0.0-beta.2", diff --git a/yarn.lock b/yarn.lock index 834d2d73f..a5361d334 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5,6 +5,13 @@ __metadata: version: 4 cacheKey: 7 +"@alpinejs/morph@npm:^3.9.0": + version: 3.9.0 + resolution: "@alpinejs/morph@npm:3.9.0" + checksum: 8c338eaa902dfe5bb5c80023ee00e579401de02080f4fafa4455d44ddb6a4949178e8fbe6146b312b44c0876ca6da5606d9f94f45e77fa0338ea45d71b3b2baa + languageName: node + linkType: hard + "@ampproject/remapping@npm:^2.0.0": version: 2.1.1 resolution: "@ampproject/remapping@npm:2.1.1" @@ -1891,6 +1898,22 @@ __metadata: languageName: node linkType: hard +"@vue/reactivity@npm:~3.1.1": + version: 3.1.5 + resolution: "@vue/reactivity@npm:3.1.5" + dependencies: + "@vue/shared": 3.1.5 + checksum: 045103ae77f32b02e0d3d0b3b2503388e0282f07d1bdabff5a2dc01db05d0ff8b259069c17c060124658933146e47e6c7c8155e4923f1c0cf045e1e29e29c592 + languageName: node + linkType: hard + +"@vue/shared@npm:3.1.5": + version: 3.1.5 + resolution: "@vue/shared@npm:3.1.5" + checksum: 1f4395e246942486a50f0f9ba3955d81012753104d015b3be62797ed723aa39b62453ba6c50ae189fcab64945a53354e5f255613b3bb7c1a0f5261374d5e11f4 + languageName: node + linkType: hard + "@webassemblyjs/ast@npm:1.11.1": version: 1.11.1 resolution: "@webassemblyjs/ast@npm:1.11.1" @@ -2221,6 +2244,15 @@ __metadata: languageName: node linkType: hard +"alpinejs@npm:^3.9.0": + version: 3.9.0 + resolution: "alpinejs@npm:3.9.0" + dependencies: + "@vue/reactivity": ~3.1.1 + checksum: 6ece3b07330e78944d8cca8ef0536e681017a238d3084a47c0d5d93156e3f9bc1affed518799b23131fba58961f4bd3192676d2400704de1b3f265379f068548 + languageName: node + linkType: hard + "ansi-html-community@npm:^0.0.8": version: 0.0.8 resolution: "ansi-html-community@npm:0.0.8" @@ -7083,6 +7115,7 @@ fsevents@~2.3.2: version: 0.0.0-use.local resolution: "root-workspace-0b6124@workspace:." dependencies: + "@alpinejs/morph": ^3.9.0 "@babel/cli": ^7.16.8 "@babel/eslint-parser": ^7.16.5 "@babel/plugin-proposal-decorators": ^7.16.7 @@ -7099,6 +7132,7 @@ fsevents@~2.3.2: "@rails/webpacker": =6.0.0-rc.6 "@ruffle-rs/ruffle": 0.1.0-nightly.2022.1.31 "@webpack-cli/serve": ^1.6.0 + alpinejs: ^3.9.0 core-js: ^3.20.3 css-loader: ^6.5.1 dropzone: ^6.0.0-beta.2