Making Masonry compatible with Neos backend (http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorGuide/InteractionWithTheNeosBackend.html) – Included in https://speakerdeck.com/aertmann/tasty-recipes-for-every-day-neos

Backend.js

function reloadCards() {
	var cardsContainer = $('.cards');
	if (cardsContainer.data('masonry')) {
		cardsContainer.masonry('reloadItems').masonry('layout');
	}
}

function initializeResize(elements) {
	elements.resize(function() {
		var cardsContainer = $('.cards');
		if (cardsContainer.data('masonry')) {
			cardsContainer.masonry('layout');
		}
	});
}

// Trigger layout when the an element is added
document.addEventListener('Neos.NodeCreated', function(event) {
	reloadCards();
	initializeResize($(event.detail.element));
}, false);

// Trigger layout when the an element is removed
document.addEventListener('Neos.NodeRemoved', reloadCards, false);

// Trigger layout when the a page is loaded
document.addEventListener('Neos.PageLoaded', function() {
	initializeCards();
	initializeYoutube();
}, false);

// Trigger layout when the backend layout changes
$('body').on('webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd', reloadCards);

// Trigger layout when card dimensions change
initializeResize($('.card', '.cards'));