Haundo Design

Events

Magnet emits events on certain processes completion. This events can be emitted by the container or items.

Container

arrangeComplete

Triggers after all items have ended hide, reveal and layout transitions.

//jQuery
$('.grid').on('arrangeComplete', function() {
  console.log('Arrange is completed');
});
//vanilla JS
var elem = document.querySelector('.grid');
elem.addEventListener('arrangeComplete', function(){
  console.log('Arrange is completed');
});

layoutComplete

Triggers after all items have ended layout transition.

//jQuery
$('.grid').on('layoutComplete', function() {
  console.log('Layout is completed');
});
//vanilla JS
var elem = document.querySelector('.grid');
elem.addEventListener('layoutComplete', function(){
  console.log('Layout is completed');
});

revealComplete

Triggers after all items have ended reveal transition.

//jQuery
$('.grid').on('revealComplete', function() {
  console.log('Reveal is completed');
});
//vanilla JS
var elem = document.querySelector('.grid');
elem.addEventListener('revealComplete', function(){
  console.log('Reveal is completed');
});

hideComplete

Triggers after all items have ended reveal transition.

//jQuery
$('.grid').on('hideComplete', function() {
  console.log('Hide is completed');
});
//vanilla JS
var elem = document.querySelector('.grid');
elem.addEventListener('hideComplete', function(){
  console.log('Hide is completed');
});

removeComplete

Triggers after all items have ended remove transition.

//jQuery
$('.grid').on('removeComplete', function() {
  console.log('Remove is completed');
});
//vanilla JS
var elem = document.querySelector('.grid');
elem.addEventListener('removeComplete', function(){
  console.log('Remove is completed');
});

Items

layout

Triggers after an item has been positioned on the layout and ended transition.

//jQuery
$('.grid-item').on('layout', function(event){
  console.log('Positioned ' + event.target);
});
//vanilla JS
var elems = document.querySelectorAll('.grid-item');
elems.forEach(function(elem){
  elem.addEventListener('layout', function(){
    console.log('Positioned ' + event.currentTarget);
  });
});

reveal

Triggers after an item has been revealed in the layout and ended transition.

//jQuery
$('.grid-item').on('reveal', function(event){
  console.log('Revealed ' + event.target);
});
//vanilla JS
var elems = document.querySelectorAll('.grid-item');
elems.forEach(function(elem){
  elem.addEventListener('layout', function(){
    console.log('Revealed ' + event.currentTarget);
  });
});

hide

Triggers after an item has been hidden in the layout and ended transition.

//jQuery
$('.grid-item').on('hide', function(event){
  console.log('Hidden ' + event.target);
});
//vanilla JS
var elems = document.querySelectorAll('.grid-item');
elems.forEach(function(elem){
  elem.addEventListener('layout', function(){
    console.log('Hidden ' + event.currentTarget);
  });
});

remove

Triggers after an item has been removed from the layout and ended transition.

//jQuery
$('.grid-item').on('remove', function(event){
  console.log('Removed ' + event.target);
});
//vanilla JS
var elems = document.querySelectorAll('.grid-item');
elems.forEach(function(elem){
  elem.addEventListener('layout', function(){
    console.log('Removed ' + event.currentTarget);
  });
});

transition

Triggers after an item has ended a transition.

//jQuery
$('.grid-item').on('transition', function(event){
  console.log('Transition ended ' + event.target);
});
//vanilla JS
var elems = document.querySelectorAll('.grid-item');
elems.forEach(function(elem){
  elem.addEventListener('layout', function(){
    console.log('Transition ended ' + event.currentTarget);
  });
});