How do I get masonry to run again once twitter widgets have rendered?

Question

I am using the Masonry API and Masonry Views modules to get a view to render nicely, it works well.

I'm using oEmbed Core to render the URL provided by the user into an embedded tweet for a specific node type. That also works fine.

When the tweet shows up in the view however, my blocks get overlapped because the twitter widget is rendering after masonry has run. How do I rerun masonry once the tweet has fully rendered?

Answer 1

I went through the twitter documentation and found a way to call functions on twitter widget events:

// Load the twitter widgets script
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));

// Bind an event to rerun the masonry layout when a tweet is rendered
twttr.ready(
  function (twttr) {
    twttr.events.bind(
      'rendered',
      function (event) {
        jQuery(function($) {
          $('.view-content.masonry').masonry();
        });
      }
    );
  }
);