Events

Events

You can add listeners to Bricklayer for full control. These allow you to create more extensible layouts. You can use these events especially for animations. Please see examples.

Assuming you have a bricklayer instance:

var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))

Layout Based Events

They are useful when you want to detect if the layout is changed, gives information about Bricklayer's lifecycle.

breakpoint

It will be fired when browser is resized and CSS media query breakpoint changes. event.detail gives calculated columnCount.

bricklayer.on('breakpoint', function (e) {
  var columnCount = e.detail.columnCount
  // In every breakpoint, this event will be fired with the count of columns
})

redraw

It will be fired when something called redraw method. event.detail gives calculated columnCount.

bricklayer.on('redraw', function (e) {
  var columnCount = e.detail.columnCount
  // In every breakpoint, this event will be fired with the count of columns
})

destroy

It will be fired when destroy method is called and the Bricklayer is destroyed.

bricklayer.on('destroy', function (e) {
  // Bricklayer is destroyed :(
})

Element Based Events

They are useful when you want to make animations or element based works.

beforeAppend

It will be fired just before a brick appends to a column. event.detail gives item and column as DOM elements.

bricklayer.on('beforeAppend', function (e) {
  var itemElement = e.detail.item
  var columnElement = e.detail.column
  // `itemElement` will be appended to the end of `columnElement`
})

beforePrepend

It will be fired just before a brick prepends to a column. event.detail gives item and column as DOM elements.

bricklayer.on('beforePrepend', function (e) {
  var itemElement = e.detail.item
  var columnElement = e.detail.column
  // `itemElement` will be prepended to the top of `columnElement`
})

afterAppend

It will be fired just after a brick appended to a column. event.detail gives item and column as DOM elements.

bricklayer.on('afterAppend', function (e) {
  var itemElement = e.detail.item
  var columnElement = e.detail.column
  // `itemElement` is appended to the end of `columnElement`
})

afterPrepend

It will be fired just after a brick prepended to a column. event.detail gives item and column as DOM elements.

bricklayer.on('afterPrepend', function (e) {
  var itemElement = e.detail.item
  var columnElement = e.detail.column
  // `itemElement` is prepended to the top of `columnElement`
})