maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make multiple reactions play nicely with edge caching (Frontend) (#19147)

Browse source 
* Make multiple reactions play nicely with edge caching

* Remove backend code

* Update app/assets/javascripts/initializers/initializeArticleReactions.js
This commit is contained in:
Ben Halpern 2023-02-20 12:55:50 -05:00 • committed by GitHub
parent 104a013551
commit 9b66a8e406
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/assets/javascripts/initializers/initializeArticleReactions.js
View file

@ -27,6 +27,25 @@ function setReactionCount(reactionName, newCount) {
}
}
function setSumReactionCount(counts) {
let totalCountObj = document.getElementById('reaction_total_count');
if (totalCountObj && counts.length > 2) {
let sum = 0;
for (let i in counts) {
if (counts[i]['category'] != 'readinglist') {
sum += counts[i]['count'];
}
}
totalCountObj.textContent = sum;
}
}
function showCommentCount() {
let commentCountObj = document.getElementById('reaction-number-comment');
if (commentCountObj && commentCountObj.dataset.count) {
commentCountObj.textContent = commentCountObj.dataset.count;
}
}
function showUserReaction(reactionName, animatedClass) {
const reactionButton = document.getElementById(
'reaction-butt-' + reactionName,
@ -172,6 +191,8 @@ function requestReactionCounts(articleId) {
ajaxReq.onreadystatechange = () => {
if (ajaxReq.readyState === XMLHttpRequest.DONE) {
var json = JSON.parse(ajaxReq.response);
setSumReactionCount(json.article_reaction_counts)
showCommentCount();
json.article_reaction_counts.forEach((reaction) => {
setReactionCount(reaction.category, reaction.count);
});

2
app/assets/stylesheets/views/article.scss
View file

@ -452,6 +452,8 @@
.multiple_reactions_engagement {
padding: 0.5em 0;
height: 43px;
cursor: default;
span {
margin-right: 1em;

6
app/views/articles/_multiple_reactions.html.erb
View file

@ -12,7 +12,7 @@
<%= image_tag "heart-plus-active.svg", aria_hidden: true, height: 24, width: 24 %>
</span>
<span class="crayons-reaction__count" id="reaction_total_count">
<%= @article.public_reactions_count %>
<span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span>
</span>
</button>
@ -41,7 +41,9 @@
<span class="crayons-reaction__icon <%= "crayons-reaction__icon--borderless" if FeatureFlag.enabled?(:multiple_reactions) %> crayons-reaction__icon--inactive">
<%= crayons_icon_tag("comment.svg", aria_hidden: true) %>
</span>
<span class="crayons-reaction__count" id="reaction-number-comment"><%= @article.comments_count %></span>
<span class="crayons-reaction__count" id="reaction-number-comment" data-count="<%= @article.comments_count %>">
<span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span>
</span>
<span data-testid="tooltip" class="crayons-tooltip__content">
<%= t("views.articles.jump_to_comments.label") %>