Magnet

Methods

Methods are actions that take place on Magnet instances.

jQuery methods follow the jQuery UI pattern .magnet('methodName', /* arguments */);

$('.grid').magnet()
  .magnet('hide', elem)
  .magnet('layout')
  //Chaining is broken by methods that return values
  .magnet('getFilteredItems');

Vanilla javascript methods follow the pattern magnet.methodName(/* arguments */), but they cannot be chained.

var elem = document.querySelector('.grid');
var mgnt = new Magnet(elem);
mgnt.hide(elem);
mgnt.layout();
mgnt.getFilteredItems();

Arrange and layout

arrange

Arguments: Yes Type: Object

Filters, sorts and lays out items. Accepts an option object as an argument to apply filtering and sorting.

//jQuery
$('.grid').magnet('arrange', options);
//Arrange is the main method of Magnet
//Both lines produce the same result
$('.grid').magnet(options);
//vanilla JS
mgnt.arrange(options);

layout

Arguments: No

Lays out all items. Refreshes the layout, if an item has changed size and items need to be laid out again.

//jQuery
$('.grid').magnet('layout');
//vanilla JS
mgnt.layout();

Click item to change size

layoutItems

Arguments: Yes Type: Array of Items, Boolean

Lays out specified items.

//jQuery
$('.grid').magnet('layoutItems', items, instant);
//vanilla JS
mgnt.layout(items, instant);

updateSortData

Arguments: No

Updates sort data.

//jQuery
$('.grid').magnet('updateSortData');
//vanilla JS
mgnt.updateSortData();

shuffle

Arguments: No

Lays out items in a random order.

//jQuery
$('.grid').magnet('shuffle');
//vanilla JS
mgnt.shuffle();

hide

Arguments: Yes Type: Element, NodeList, Array or jQuery Object

Hides items.

//jQuery
$('.grid').magnet('hide', elements);
//vanilla JS
mgnt.hide(elements);

reveal

Arguments: Yes Type: Element, NodeList, Array or jQuery Object

Reveals hidden items.

//jQuery
$('.grid').magnet('reveal', elements);
//vanilla JS
mgnt.reveal(elements);

Add or remove items

append

Arguments: Yes Type: Element, NodeList, Array or jQuery Object

Adds and lays out elements as items to the end of the layout.

//jQuery
$('.grid').magnet('append', elements);
//vanilla JS
mgnt.append(elements);

prepend

Arguments: Yes Type: Element, NodeList, Array or jQuery Object

Adds and lays out elements as items to the beginning of the layout.

//jQuery
$('.grid').magnet('prepend', elements);
//vanilla JS
mgnt.prepend(elements);

additems

Arguments: Yes Type: Element, NodeList, Array or jQuery Object

Adds items to the layout, therefore to the instance. Items are not laid out.

//jQuery
$('.grid').magnet('addItems', elements);
//vanilla JS
mgnt.addItems(elements);

insert

Arguments: Yes Type: Element, NodeList, Array or jQuery Object

Adds elements as items to the layout and filters, sorts and lays out items.

//jQuery
$('.grid').magnet('insert', elements);
//vanilla JS
mgnt.insert(elements);

remove

Arguments: Yes Type: Element, NodeList, Array or jQuery Object

Removes elements as items from the layout, therefore from the instance and DOM.

//jQuery
$('.grid').magnet('remove', elements);
//vanilla JS
mgnt.remove(elements);

Utilities

reloadItems

Arguments: No

Updates all items data. Applies changes made to the DOM to Magnet.

//jQuery
$('.grid').magnet('reloadItems');
//vanilla JS
mgnt.reloadItems();

getItem

Arguments: Yes Type: Element Returns: Item

Returns an item from the layout.

//jQuery
var item = $('.grid').magnet('getItem', element);
console.log(item);
//vanilla JS
var item = mgnt.getItem(element);
console.log(item);

Open the console to view result

getItems

Arguments: Yes Type: Element, NodeList, Array or jQuery Object Returns: Array of Items

Returns an array of all items from the layout.

//jQuery
var items = $('.grid').magnet('getItem', elements);
console.log(items);
//vanilla JS
var items = mgnt.getItem(elements);
console.log(items);

Open the console to view result

getItemsElements

Arguments: No Returns: Array of Items

Returns an array of all items elements from the layout.

//jQuery
var items = $('.grid').magnet('getItemsElements');
console.log(items);
//vanilla JS
var items = mgnt.getItemsElements();
console.log(items);

Open the console to view result

getFilteredItems

Arguments: No Returns: Array of Items

Returns an array of filtered items in the current order.

//jQuery
var items = $('.grid').magnet('getFilteredItems');
console.log(items);
//vanilla JS
var items = mgnt.getFilteredItems();
console.log(items);

Open the console to view result

getFilteredItemsElements

Arguments: No Returns: Array of Items

Returns an array of filtered items elements in the current order.

//jQuery
var items = $('.grid').magnet('getFilteredItemsElements');
console.log(items);
//vanilla JS
var items = mgnt.getFilteredItemsElements();
console.log(items);

Open the console to view result

destroy

Arguments: No

Removes all Magnet functionallity and returns the element back to its pre-initialization state.

//jQuery
$('.grid').magnet('destroy');
//vanilla JS
mgnt.destroy();