Retort + Post Like Counter


(Ivan) #1

I have been struggling with adding a post like-count using the Ember-Discourse way, and instead have created a function that runs every 3 seconds, checks the native like-count button (which has been set to display:none), and then outputs a fa-heart with the like-count.

We have done this as we felt that displaying the number of likes alongside the Retort plugin emojis was more aesthetically pleasing. Here is the function that checks each posts like-count, and inserts it after the closest cooked element.

window.setInterval(function() {
    $('.post-retort.like-count').remove();
    
    var parents = [];
    var likeCounts = [];
    var builtCounters = [];
    var i = 0;
    
    likeCounts = $('.widget-button.like-count');
    
    likeCounts.each(function(){
      parent = $(this).closest('.contents');
      parents.push(parent);
    });
    
    likeCounts.each(function() {
        var  splitString = $(this).html().split(' ');
        var numLikes = splitString[0];
        numLikes = '<span class="post-retort-count like-count">' + numLikes + '</span>';
        
        var buildCounter = '<button class="post-retort like-count"><i class="fa fa-heart" aria-hidden="true"></i>' + numLikes + '</button>';
        builtCounters.push(buildCounter);
        
    });
    
    likeCounts.each(function() {
        $(builtCounters[i]).insertAfter($(parents[i]).find('.cooked'));
        i += 1;
    })
    
    
}, 3000);

Here the emojis and like-count sits inline- this is what we want.


However, when I add a new Retort (we renamed it React), or add a Like, it displaces and creates two distinct layers. Upon page-refresh, this segregation disappears and everything sits inline again.


Would anyone be able to help figure out why this could be? Putting $(builtCounters[i]).insertBefore($(parents[i]).find('.post-menu-area.clearfix')); doesn’t remedy the situation.

Alternatively, suggest the “correct”/best-practice way of tapping into the attrs of each post so that I can use the Ember-way to build the like-count.

Thanks!


(Robin Ward) #2

If you are meddling with the DOM manually you are going to have a bad time. Our entire widget framework is based on a virtual dom, which will notice that the markup you added doesn’t belong there and remove it the next time a repaint event occurs.

Let’s try and figure out how to get the data you need into the widget framework’s attrs. Where is your data being stored and how is it retrieved?