Issue #3225725 by Ressinel: Update like_and_dislike_service.js with the new...

Issue #3225725 by Ressinel: Update like_and_dislike_service.js with the new version of the Like & Dislike module.

assets/js/like_and_dislike_service.min.js

-!function(t,i){window.likeAndDislikeService=function(){function e(){}return e.vote=function(e,n,a){t.ajax({type:"GET",url:drupalSettings.path.baseUrl+"like_and_dislike/"+n+"/"+a+"/"+e,success:function(a){var l=i.formatPlural(a.likes,"@count like","@count likes");t(t("#like-container-"+n+"-"+e+" a")).each(function(i){t(this).get(0).className=a.operation.like,t(this).parent().nextAll(".vote__count").find("a").html(l).attr("data-dialog-options",'{"title":"'+l+'", "width":"auto"}')}),t(t("#dislike-container-"+n+"-"+e+" a")).each(function(i){t(this).get(0).className=a.operation.dislike})}})},e}()}(jQuery,Drupal);
\ No newline at end of file
+!function(l,r){"use strict";function e(){}window.likeAndDislikeService=window.likeAndDislikeService||(e.vote=function(n,o,e){l.ajax({type:"POST",url:drupalSettings.path.baseUrl+"like_and_dislike/"+o+"/"+e+"/"+n,success:function(a){["like","dislike"].forEach(function(e){var i="#"+e+"-container-"+o+"-"+n,t=l(i+" a");if(0!=t.length&&(a.operation[e]?t.addClass("voted"):t.removeClass("voted"),l(i+" .count").text(a[e+"s"]),"like"===e)){var s=r.formatPlural(a[e+"s"],"@count like","@count likes");t.parent().nextAll(".vote__count").find("a").html(s).attr("data-dialog-options",'{"title":"'+s+'", "width":"auto"}')}}),l(".region.region-highlighted").html("<div class='messages__wrapper layout-container'><div class='messages messages--"+a.message_type+" role='contentinfo'>"+a.message+"</div></div>")}})},e)}(jQuery,Drupal);
\ No newline at end of file

components/03-molecules/like/like_and_dislike_service.js

@@ -4,29 +4,40 @@
  */
 (function ($, Drupal) {
 
-  window.likeAndDislikeService = (function() {
+  'use strict';
+
+  window.likeAndDislikeService = window.likeAndDislikeService || (function() {
     function likeAndDislikeService() {}
     likeAndDislikeService.vote = function(entity_id, entity_type, tag) {
       $.ajax({
-        type: "GET",
+        type: "POST",
         url: drupalSettings.path.baseUrl + 'like_and_dislike/' + entity_type + '/' + tag + '/' + entity_id,
         success: function(response) {
           // Expected response is a json object where likes is the new number
           // of likes, dislikes is the new number of dislikes, message_type is
           // the type of message to display ("status" or "warning") and message
           // is the message to display.
-          // @todo: Add/remove classes via jQuery.
-          // Like can occur more than once, for example in a modal, so we need to traverse each.
-          // Updates the likes and dislikes count.
-          var likeText = Drupal.formatPlural(response.likes, "@count like", "@count likes");
-          $($('#like-container-' + entity_type + '-' + entity_id + ' a')).each(function( index ) {
-            $(this).get(0).className = response.operation.like;
-            $(this).parent().nextAll('.vote__count').find('a').html(likeText).attr('data-dialog-options', '{"title":"' + likeText + '", "width":"auto"}');
-          });
+          ['like', 'dislike'].forEach(function (iconType) {
+            var selector = '#' + iconType + '-container-' + entity_type + '-' + entity_id;
+            var $aTag = $(selector + ' a');
+            if ($aTag.length == 0) {
+              return;
+            }
+            response.operation[iconType] ? $aTag.addClass('voted') : $aTag.removeClass('voted');
+            $(selector + ' .count').text(response[iconType + 's']);
 
-          $($('#dislike-container-' + entity_type + '-' + entity_id + ' a')).each(function( index ) {
-            $(this).get(0).className = response.operation.dislike;
+            // Updates the likes count.
+            if (iconType === 'like') {
+              var likeText = Drupal.formatPlural(response[iconType + 's'], "@count like", "@count likes");
+              $aTag.parent().nextAll('.vote__count').find('a').html(likeText).attr('data-dialog-options', '{"title":"' + likeText + '", "width":"auto"}');
+            }
           });
+
+          // Display a message whether the vote was registered or an error
+          // happened.
+          // @todo - this will work only for case when theme has messages in
+          // highlighted region.
+          $('.region.region-highlighted').html("<div class='messages__wrapper layout-container'><div class='messages messages--" + response.message_type + " role='contentinfo'>" + response.message + "</div></div>");
         }
       });
     };