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

Fix reading list comments reaction (#2493)

Browse source 
* just opening PR

* add comments-container id to comment-trees

- allows initializeCommentsPage() to attach event listeners to heart reaction buttons
- reactions are created now when clicked
- page still needs to properly render reactions in its "reacted" state and proper reaction count/tally

* reactions, counts, and reacted state are accurate

adds readinglist ids to comment container parent, initializeCommentsPage handles lists of ids now instead of just one id, /reactions?... get request is now synchronous to handle multiple ids

* catch styling for reading list comments

* make xmlhttprequest async
This commit is contained in:
Mario See 2019-04-25 14:33:19 -04:00 • committed by Ben Halpern
parent bd9ed2c67a
commit c1456ee9d6
2 changed files with 52 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
app/assets/javascripts/initializers/initializeCommentsPage.js.erb
View file

@ -5,54 +5,61 @@ function initializeCommentsPage() {
toggleCodeOfConduct();
var commentableId = document.getElementById('comments-container').dataset.commentableId;
var commentableType = document.getElementById('comments-container').dataset.commentableType;
var ajaxReq;
if (window.XMLHttpRequest) {
ajaxReq = new XMLHttpRequest();
} else {
ajaxReq = new ActiveXObject('Microsoft.XMLHTTP');
}
ajaxReq.onreadystatechange = function () {
if (ajaxReq.readyState === XMLHttpRequest.DONE) {
var responseObj = JSON.parse(ajaxReq.response);
var reactions = responseObj.reactions;
var allNodes = document.getElementsByClassName('single-comment-node');
var positiveReactionCounts = responseObj.positive_reaction_counts;
for (var i = 0; i < reactions.length; i++) {
var buttForComment = document.getElementById('button-for-comment-' + reactions[i].reactable_id);
if (buttForComment) {
buttForComment.classList.add('reacted');
commentableIdList = commentableId.split(",");
var f = (function() {
for (var i = 0; i < commentableIdList.length; i++) {
(function(i){
var ajaxReq;
if (window.XMLHttpRequest) {
ajaxReq = new XMLHttpRequest();
} else {
ajaxReq = new ActiveXObject('Microsoft.XMLHTTP');
}
}
for (var i = 0; i < positiveReactionCounts.length; i++) {
var buttForComment = document.getElementById('button-for-comment-' + positiveReactionCounts[i].id);
if (buttForComment) {
if (positiveReactionCounts[i].count > 0) {
if (!document.getElementById('reactions-count-' + positiveReactionCounts[i].id)) {
buttForComment.innerHTML = buttForComment.innerHTML + "<span class='reactions-count' id='reactions-count-" + positiveReactionCounts[i].id + "'>" + positiveReactionCounts[i].count + '</span>';
} else {
document.getElementById('reactions-count-' + positiveReactionCounts[i].id).innerHTML = positiveReactionCounts[i].count;
ajaxReq.onreadystatechange = function () {
if (ajaxReq.readyState === XMLHttpRequest.DONE) {
var responseObj = JSON.parse(ajaxReq.response);
var reactions = responseObj.reactions;
var allNodes = document.getElementsByClassName('single-comment-node');
var positiveReactionCounts = responseObj.positive_reaction_counts;
for (var i = 0; i < reactions.length; i++) {
var buttForComment = document.getElementById('button-for-comment-' + reactions[i].reactable_id);
if (buttForComment) {
buttForComment.classList.add('reacted');
}
}
for (var i = 0; i < positiveReactionCounts.length; i++) {
var buttForComment = document.getElementById('button-for-comment-' + positiveReactionCounts[i].id);
if (buttForComment) {
if (positiveReactionCounts[i].count > 0) {
if (!document.getElementById('reactions-count-' + positiveReactionCounts[i].id)) {
buttForComment.innerHTML = buttForComment.innerHTML + "<span class='reactions-count' id='reactions-count-" + positiveReactionCounts[i].id + "'>" + positiveReactionCounts[i].count + '</span>';
} else {
document.getElementById('reactions-count-' + positiveReactionCounts[i].id).innerHTML = positiveReactionCounts[i].count;
}
}
}
}
for (var i = 0; i < allNodes.length; i++) {
if (allNodes[i].dataset.commentAuthorId == responseObj.current_user.id) {
allNodes[i].dataset.currentUserComment = "true";
var userActionsEl = allNodes[i].children[0].children[2].children[0];
var buttEl = document.getElementById('button-for-comment-' + allNodes[i].dataset.commentId);
if (userActionsEl && buttEl) {
userActionsEl.className = 'current-user-actions';
userActionsEl.style.display = 'inline-block';
document.getElementById('button-for-comment-' + allNodes[i].dataset.commentId).classList.add('reacted');
}
}
}
}
}
}
for (var i = 0; i < allNodes.length; i++) {
if (allNodes[i].dataset.commentAuthorId == responseObj.current_user.id) {
allNodes[i].dataset.currentUserComment = "true";
var userActionsEl = allNodes[i].children[0].children[2].children[0];
var buttEl = document.getElementById('button-for-comment-' + allNodes[i].dataset.commentId);
if (userActionsEl && buttEl) {
userActionsEl.className = 'current-user-actions';
userActionsEl.style.display = 'inline-block';
document.getElementById('button-for-comment-' + allNodes[i].dataset.commentId).classList.add('reacted');
}
}
}
};
var timeString = (Date.now()).toString();
ajaxReq.open("GET", "/reactions?commentable_id=" + commentableIdList[i] + "&commentable_type=" + commentableType, true);
ajaxReq.send();
})(i);
}
};
var timeString = (Date.now()).toString();
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++) {

2
app/assets/javascripts/initializers/initializeReadingListPage.js.erb
View file

@ -115,7 +115,7 @@ function getComments(){
}
resultDivs.push(aboveDiv+buildCommentHTML(comment));
});
substoriesDiv.innerHTML = '<div class="comment-trees"><h2>Recent Comment Activity</h2>'+resultDivs.join("<br/>")+'</div>';
substoriesDiv.innerHTML = `<div class="comments-container" id="comments-container" data-commentable-id=${user.reading_list_ids} data-commentable-type="Article"><div class="comment-trees"><h2>Recent Comment Activity</h2>`+resultDivs.join("<br/>")+'</div></div>';
initializeCommentDate();
initializeCommentDropdown();
initializeCommentsPage();