Major update with dev work on FlagController

provides method to check if user has already flagged something

heartbeat.routing.yml

@@ -158,3 +158,16 @@ heartbeat.user_edit:
     _title: 'User Edit'
   requirements:
     _permission: 'access content'
+
+# In order to to create pages it is necessary to define routes for them.
+# A route maps a URL path to a controller. It defines what function
+# or method will be called when a URL is accessed.
+
+heartbeat.flag_controller:
+  path: '/heartbeat/userflaggings'
+  defaults:
+    _controller: '\Drupal\heartbeat\Controller\FlagController::getUserFlaggings'
+    _title: 'getUserFlaggings'
+  methods: [POST]
+  requirements:
+    _permission: 'access content'

js/heartbeat.js

@@ -4,6 +4,25 @@
 
 (function($, Drupal, drupalSettings) {
 
+  function hideCommentForms() {
+    let forms = document.querySelectorAll('.heartbeat-comment-form .js-form-type-textarea, .heartbeat-comment-form .form-submit');
+
+    for (let f = 0; f < forms.length; f++) {
+      forms[f].className += ' comment-form-hidden';
+    }
+  }
+
+  function toggleCommentElements(node) {
+
+    console.dir(node);
+    if (node.classList.contains('comment-form-hidden')) {
+      console.log('removing comment-form-hidden class from element');
+      node.classList.remove('comment-form-hidden');
+    } else {
+      node.className += ' comment-form-hidden';
+    }
+  }
+  
   const commentListen = function(e) {
 
     if (drupalSettings.user.uid > 0) {
@@ -26,105 +45,147 @@
     }
   };
 
+
   $(document).ready(function() {
 
+
     const loader = document.createElement('div');
     loader.id = 'heartbeat-loader';
     const body = document.getElementsByTagName('body')[0];
     body.appendChild(loader);
 
     Drupal.behaviors.heartbeat = {
-        attach: function (context, settings) {
+      attach: function (context, settings) {
 
-          if (drupalSettings.friendData != null) {
-            let divs = document.querySelectorAll('.flag-friendship a.use-ajax');
+        if (drupalSettings.friendData != null) {
+          let divs = document.querySelectorAll('.flag-friendship a.use-ajax');
 
-            for (let i = 0; i < divs.length; i++) {
-              let anchor = divs[i];
-              let userId = anchor.href.substring(anchor.href.indexOf('friendship') + 11, anchor.href.indexOf('?destination'));
-              JSON.parse(drupalSettings.friendData).forEach(function (friendship) {
-                if (friendship.uid_target === userId && friendship.uid == drupalSettings.user.uid && friendship.status == 0) {
-                  anchor.innerHTML = 'Friendship Pending';
-                }
-              });
-            }
+          for (let i = 0; i < divs.length; i++) {
+            let anchor = divs[i];
+            let userId = anchor.href.substring(anchor.href.indexOf('friendship') + 11, anchor.href.indexOf('?destination'));
+            JSON.parse(drupalSettings.friendData).forEach(function (friendship) {
+              if (friendship.uid_target === userId && friendship.uid == drupalSettings.user.uid && friendship.status == 0) {
+                anchor.innerHTML = 'Friendship Pending';
+              }
+            });
           }
+        }
 
-          feedElement = document.querySelector('.heartbeat-stream');
+        feedElement = document.querySelector('.heartbeat-stream');
 
-          if (drupalSettings.feedUpdate == true) {
-            updateFeed();
-          }
-
-            Drupal.AjaxCommands.prototype.selectFeed = function(ajax, response, status) {
+        if (drupalSettings.feedUpdate == true) {
+          updateFeed();
+        }
 
-              $.ajax({
-                type:'POST',
-                url:'/heartbeat/render_feed/' + response.feed,
-                success: function(response) {
-                  feedElement = document.querySelector('.heartbeat-stream');
-
-                  if (feedElement != null) {
-                    feedElement.innerHTML = response;
-                  } else {
-                    feedBlock = document.getElementById('block-heartbeatblock');
-                    insertNode = document.createElement('div');
-                    insertNode.innerHTML = response;
-                    feedBlock.appendChild(insertNode);
-                  }
-                }
-              });
-            };
+        Drupal.AjaxCommands.prototype.selectFeed = function (ajax, response, status) {
 
-            Drupal.AjaxCommands.prototype.updateFeed = function(ajax, response, status) {
-              if (response.update) {
-                $.ajax({
-                  type: 'POST',
-                  url:'/heartbeat/update_feed/' + response.timestamp,
-                  success: function(response) {
+          $.ajax({
+            type: 'POST',
+            url: '/heartbeat/render_feed/' + response.feed,
+            success: function (response) {
+              feedElement = document.querySelector('.heartbeat-stream');
 
-                  }
-                });
+              if (feedElement != null) {
+                feedElement.innerHTML = response;
+              } else {
+                feedBlock = document.getElementById('block-heartbeatblock');
+                insertNode = document.createElement('div');
+                insertNode.innerHTML = response;
+                feedBlock.appendChild(insertNode);
               }
-            };
-
-            listenImages();
-            listenCommentPost();
-
-          Drupal.AjaxCommands.prototype.myfavouritemethodintheworld = function(ajax, response, status) {
-            console.dir(response);
-            if (response.cid) {
-              console.log('this shit is getting called again');
-              let parentComment = document.getElementById('heartbeat-comment-' + response.cid);
-              let text = parentComment.querySelector('.form-textarea');
-
-              text.addEventListener('keydown', function (e) {
-                console.dir(e);
-                if (e.keyCode === 13) {
-                  let submitBtn = parentComment.querySelector('.form-submit');
-                  submitBtn.click();
-                }
-              });
             }
-          };
-        }
+          });
+        };
+
+        Drupal.AjaxCommands.prototype.updateFeed = function (ajax, response, status) {
+          if (response.update) {
+            $.ajax({
+              type: 'POST',
+              url: '/heartbeat/update_feed/' + response.timestamp,
+              success: function (response) {
+
+              }
+            });
+          }
+        };
+
+        listenImages();
+        listenCommentPost();
+
+        Drupal.AjaxCommands.prototype.myfavouritemethodintheworld = function (ajax, response, status) {
+          console.dir(response);
+          if (response.cid) {
+            console.log('this shit is getting called again');
+            let parentComment = document.getElementById('heartbeat-comment-' + response.cid);
+            let text = parentComment.querySelector('.form-textarea');
+
+            text.addEventListener('keydown', function (e) {
+              console.dir(e);
+              if (e.keyCode === 13) {
+                let submitBtn = parentComment.querySelector('.form-submit');
+                submitBtn.click();
+              }
+            });
+          }
+        };
+      }
     };
 
     commentFormListeners();
+
+    const flagListen = function(e) {
+      console.dir(e.srcElement);
+      let stringWithHid = e.srcElement.href.substring(0, e.srcElement.href.indexOf('?destination'));
+      let hid = stringWithHid.substring(stringWithHid.lastIndexOf('/') + 1);
+      let flagId = stringWithHid.substring(stringWithHid.lastIndexOf('/flag/'), stringWithHid.lastIndexOf(hid) - 1);
+      flagId = flagId.substring(flagId.lastIndexOf('/') + 1);
+      console.dir(flagId);
+      console.log(hid);
+      $.ajax({
+        type: 'POST',
+        url:'/heartbeat/userflaggings',
+        data: {
+          entity_id: hid,
+          entity_type: 'heartbeat',
+          flag_id: flagId,
+          uid: drupalSettings.user.uid
+        },
+        success: function(response) {
+          console.dir(response);
+        }
+      });
+    };
+
+    flagListeners();
+
     let stream = document.getElementById('block-heartbeatblock');
 
-    let observer = new MutationObserver(function(mutations) {
-    console.log('observer observes a change');
-    listenImages();
-    hideCommentForms();
-    commentFormListeners();
+    let observer = new MutationObserver(function (mutations) {
+      console.log('observer observes a change');
+      listenImages();
+      hideCommentForms();
+      commentFormListeners();
+      flagListeners();
     });
 
-    let config = { attributes: true, childList: true, characterData: true };
+    let config = {attributes: true, childList: true, characterData: true};
 
     observer.observe(stream, config);
-    console.dir(observer);
 
+    let flagObserver = new MutationObserver(function(mutations) {
+      console.dir(mutations);
+      if (mutations[0].target !== null && mutations[0].target.children !== null && mutations[0].target.children.length > 0 && mutations[0].target.children[0].classList.contains('flag')) {
+        flagListeners(mutations[0].target.children[0]);
+      }
+    });
+
+    let flagObserveConfig = {subTree: true, childList: true};
+
+    let flags = Array.from(document.querySelectorAll('.heartbeat-like, .heartbeat-unlike'));
+
+    flags.forEach(function(flag) {
+      flagObserver.observe(flag, flagObserveConfig);
+    });
 
     function updateFeed() {
       $.ajax({
@@ -141,7 +202,7 @@
         maxHeight: '960px',
       };
 
-      $('.heartbeat-content').find('img').each(function() {
+      $('.heartbeat-content').find('img').each(function () {
         let parentClass = $(this).parent().prop('className');
         let phid = parentClass.substring(parentClass.indexOf('hid') + 4);
         $(this).colorbox({rel: phid, href: $(this).attr('src'), cboxOptions});
@@ -153,8 +214,8 @@
 
       for (let i = 0; i < comments.length; i++) {
         let comment = comments[i];
-        comment.addEventListener('click', function() {
-            getParent(comment);
+        comment.addEventListener('click', function () {
+          getParent(comment);
         })
       }
     }
@@ -164,8 +225,8 @@
         let id = node.id.substr(node.id.indexOf('-') + 1);
         $.ajax({
           type: 'POST',
-          url:'/heartbeat/commentupdate/' + id,
-          success: function(response) {
+          url: '/heartbeat/commentupdate/' + id,
+          success: function (response) {
           }
         });
       } else {
@@ -177,20 +238,20 @@
 
     function getScrollXY() {
       var scrOfX = 0, scrOfY = 0;
-      if( typeof( window.pageYOffset ) == 'number' ) {
+      if (typeof( window.pageYOffset ) == 'number') {
 
         scrOfY = window.pageYOffset;
         scrOfX = window.pageXOffset;
-      } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
+      } else if (document.body && ( document.body.scrollLeft || document.body.scrollTop )) {
 
         scrOfY = document.body.scrollTop;
         scrOfX = document.body.scrollLeft;
-      } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
+      } else if (document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop )) {
 
         scrOfY = document.documentElement.scrollTop;
         scrOfX = document.documentElement.scrollLeft;
       }
-      return [ scrOfX, scrOfY ];
+      return [scrOfX, scrOfY];
     }
 
     //taken from http://james.padolsey.com/javascript/get-document-height-cross-browser/
@@ -205,69 +266,69 @@
 
     document.addEventListener("scroll", function (event) {
 
-    if (drupalSettings.filterMode == false && (getScrollXY()[1] + window.innerHeight) / getDocHeight() > 0.99) {
+      if (drupalSettings.filterMode == false && (getScrollXY()[1] + window.innerHeight) / getDocHeight() > 0.99) {
 
-      let streams = document.querySelectorAll('.heartbeat-stream');
-      let stream = streams.length > 1 ? streams[streams.length - 1] : streams[0];
+        let streams = document.querySelectorAll('.heartbeat-stream');
+        let stream = streams.length > 1 ? streams[streams.length - 1] : streams[0];
 
-      if (stream !== null) {
-        console.dir(stream);
-        let lastHeartbeat = stream.lastElementChild;
+        if (stream !== null) {
+          console.dir(stream);
+          let lastHeartbeat = stream.lastElementChild;
 
-        if (lastHeartbeat !== null) {
+          if (lastHeartbeat !== null) {
 
-          let hid = lastHeartbeat.id.substring(lastHeartbeat.id.indexOf('-') + 1);
-          if (drupalSettings.lastHid !== hid) {
+            let hid = lastHeartbeat.id.substring(lastHeartbeat.id.indexOf('-') + 1);
+            if (drupalSettings.lastHid !== hid) {
 
-            drupalSettings.lastHid = hid;
+              drupalSettings.lastHid = hid;
 
-            $('#heartbeat-loader').show(225);
+              $('#heartbeat-loader').show(225);
 
-            $.ajax({
-              type: 'POST',
-              url: '/heartbeat/update_feed/' + hid,
+              $.ajax({
+                type: 'POST',
+                url: '/heartbeat/update_feed/' + hid,
 
-              success: function (response) {
+                success: function (response) {
 
-                feedBlock = document.getElementById('block-heartbeatblock');
-                insertNode = document.createElement('div');
-                insertNode.innerHTML = response;
-                feedBlock.appendChild(insertNode)
-              },
+                  feedBlock = document.getElementById('block-heartbeatblock');
+                  insertNode = document.createElement('div');
+                  insertNode.innerHTML = response;
+                  feedBlock.appendChild(insertNode)
+                },
 
-              complete: function() {
-                $('#heartbeat-loader').hide(225);
-              }
-            });
+                complete: function () {
+                  $('#heartbeat-loader').hide(225);
+                }
+              });
+            }
           }
         }
       }
-    }
     });
 
-    $(document).on('cbox_open', function() {
-      $("#colorbox").swipe( {
-        //Generic swipe handler for all directions
-        swipeLeft:function(event, direction, distance, duration, fingerCount) {
-          $.colorbox.prev();
-        },
-        swipeRight:function(event, direction, distance, duration, fingerCount) {
-          $.colorbox.next();
-        },
-        //Default is 75px, set to 0 for demo so any distance triggers swipe
-        threshold:25
-      });
-      let cboxCloseBtn = $('#cboxClose');
-      cboxCloseBtn.on('click touchstart', function() {
-        $.colorbox.close();
-      });
-      cboxCloseBtn.on('keyup', function(e) {
-        if (e.keyCode == 27) {
-          $.colorbox().close();
-        }
-      });
+    $(document).on('cbox_open', function () {
+        $("#colorbox").swipe({
+          //Generic swipe handler for all directions
+          swipeLeft: function (event, direction, distance, duration, fingerCount) {
+            $.colorbox.prev();
+          },
+          swipeRight: function (event, direction, distance, duration, fingerCount) {
+            $.colorbox.next();
+          },
+          //Default is 75px, set to 0 for demo so any distance triggers swipe
+          threshold: 25
+        });
+        let cboxCloseBtn = $('#cboxClose');
+        cboxCloseBtn.on('click touchstart', function () {
+          $.colorbox.close();
+        });
+        cboxCloseBtn.on('keyup', function (e) {
+          if (e.keyCode == 27) {
+            $.colorbox().close();
+          }
+        });
 
-      return true;
+        return true;
 
       }
     );
@@ -282,61 +343,68 @@
         cFormButtons[b].addEventListener('click', commentListen);
       }
     }
-  });
-
-  /******** Load Login Block **********
-   ******** append to document ********
-   ******** Hover in middle of screen */
-
-  function loginModal() {
-
-    $('#heartbeat-loader').show(225);
-
-    $.ajax({
-      type: 'GET',
-      url: '/user/modal/login',
-      success: function (response) {
-        mainContainer = document.getElementById('main');
-        loginBlock = document.createElement('div');
-        loginBlock.innerHTML = response;
-        loginBlock.className = 'kekistan-login-block';
-        loginBlock.id = 'kekistan-login-block';
-        closeBtn = document.createElement('div');
-        closeBtn.className =  'kekistan-login-block-close';
-        closeBtn.innerHTML = '✖';
-        loginBlock.appendChild(closeBtn);
-        mainContainer.appendChild(loginBlock);
-
-        closeBtn.addEventListener('click', function() {
-          loginBlock.innerHTML = '';
-          mainContainer.removeChild(loginBlock);
-        });
 
-      },
-      complete: function() {
-        $('#heartbeat-loader').hide(225);
+    function flagListeners() {
+
+      if (arguments[0] !== null && arguments.constructor !== Array) {
+        //noinspection JSValidateTypes
+        arguments = [arguments[0]];
       }
-    });
-  }
 
-  function hideCommentForms() {
-    let forms = document.querySelectorAll('.heartbeat-comment-form .js-form-type-textarea, .heartbeat-comment-form .form-submit');
+      let flags = arguments[0] == undefined ? document.querySelectorAll('.flag .use-ajax') : arguments[0];
+      console.log("Reloading FLAG LISTENERS");
 
-    for (let f = 0; f < forms.length; f++) {
-      forms[f].className += ' comment-form-hidden';
+      if (flags.constructor === NodeList) {
+        for (let f = 0; f < flags.length; f++) {
+          flags[f].removeEventListener('click', flagListen);
+          flags[f].addEventListener('click', flagListen);
+        }
+      } else if (flags.constructor === Array && (flags[0].nodeType !== null && flags[0].nodeType > 0)) {
+        flags.forEach(function(node) {
+          node.removeEventListener('click', flagListen);
+          node.addEventListener('click', flagListen);
+        });
+      } else if (flags.nodeName !== null && flags.nodeName !== undefined) {
+        flags.removeEventListener('click', flagListen);
+        flags.addEventListener('click', flagListen);
+      } else {
+        console.debug('FlagListen called with no flags available');
+      }
     }
-  }
 
-  function toggleCommentElements(node) {
+    /******** Load Login Block **********
+     ******** append to document ********
+     ******** Hover in middle of screen */
 
-    console.dir(node);
-    if (node.classList.contains('comment-form-hidden')) {
-      console.log('removing comment-form-hidden class from element');
-      node.classList.remove('comment-form-hidden');
-    } else {
-      node.className += ' comment-form-hidden';
-    }
-  }
+    function loginModal() {
 
-})(jQuery, Drupal, drupalSettings);
+      $('#heartbeat-loader').show(225);
 
+      $.ajax({
+        type: 'GET',
+        url: '/user/modal/login',
+        success: function (response) {
+          mainContainer = document.getElementById('main');
+          loginBlock = document.createElement('div');
+          loginBlock.innerHTML = response;
+          loginBlock.className = 'kekistan-login-block';
+          loginBlock.id = 'kekistan-login-block';
+          closeBtn = document.createElement('div');
+          closeBtn.className = 'kekistan-login-block-close';
+          closeBtn.innerHTML = '✖';
+          loginBlock.appendChild(closeBtn);
+          mainContainer.appendChild(loginBlock);
+
+          closeBtn.addEventListener('click', function () {
+            loginBlock.innerHTML = '';
+            mainContainer.removeChild(loginBlock);
+          });
+
+        },
+        complete: function () {
+          $('#heartbeat-loader').hide(225);
+        }
+      });
+    }
+  })
+})(jQuery, Drupal, drupalSettings);

src/Controller/FlagController.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace Drupal\heartbeat\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Drupal\Core\Entity\EntityTypeManager;
+use Drupal\Core\Entity\Query\QueryFactory;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\flag\FlagService;
+use Symfony\Component\HttpFoundation\Response;
+
+/**
+ * Class FlagController.
+ *
+ * @package Drupal\heartbeat\Controller
+ */
+class FlagController extends ControllerBase {
+
+  /**
+   * Drupal\flag\FlagService definition.
+   *
+   * @var Drupal\flag\FlagService
+   */
+  protected $flagService;
+  protected $entityTypeManager;
+  protected $entityQuery;
+  /**
+   * {@inheritdoc}
+   */
+  public function __construct(FlagService $flag, EntityTypeManager $entity_type_manager, QueryFactory $entity_query) {
+    $this->flagService = $flag;
+    $this->entityTypeManager = $entity_type_manager;
+    $this->entityQuery = $entity_query;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('flag'),
+      $container->get('entity_type.manager'),
+      $container->get('entity.query')
+    );
+  }
+
+  /**
+   * Hello.
+   *
+   * @return string
+   *   Return Hello string.
+   */
+  public function getUserFlaggings() {
+
+    $entity_type = \Drupal::request()->request->get('entity_type');
+    $entity_id = \Drupal::request()->request->get('entity_id');
+    $flag_id = \Drupal::request()->request->get('flag_id');
+    $uid = \Drupal::request()->request->get('uid');;
+    $flaggedByUser = $this->entityQuery->get("flagging")
+      ->condition("flag_id", $flag_id, "=")
+      ->condition("entity_type", $entity_type, "=")
+      ->condition("entity_id", $entity_id)
+      ->condition("uid", $uid, "=")
+      ->execute();
+    $response = new Response();
+    $response->setContent(json_encode(array(
+      'flaggedByUser' => count(
+        $this->entityQuery->get("flagging")
+          ->condition("flag_id", $flag_id, "=")
+          ->condition("entity_type", $entity_type, "=")
+          ->condition("entity_id", $entity_id)
+          ->condition("uid", $uid, "=")
+            ->execute()) > 0)
+    ));
+
+    $response->headers->set('Content-Type', 'application/json');
+    return $response;
+  }
+
+}