enableLayoutChangeEvents does not support custom layouts

[notlee]

It is possible to add a custom layout (breakpoint) to the grid:

@include oGridAddLayout(
    $layout-name: XS,
    $layout-width: 360px
);

However the enableLayoutChangeEvents method, which sets up event listeners to fire when layouts change, does not correctly fire for custom layouts. It fires layout change events for any custom layout when the default layout change is fired, regardless of the size of the custom layout.

Thoughts on potential solution:

• Replace the switch statement. Dynamically create the media query by sorting layouts by size, so that a min-width can be set to the layout size and max-width set to the size of the next biggest layout. Note: this would not work if layouts use differing units, e.g. px/rem.
• Resize Observer API plus ployfill?
• Add API to specify layouts in size order?
• Deprecate enableLayoutChangeEvents? It's used but perhaps not widely:
  • https://github.com/Financial-Times/ft-app/blob/eeee450b12f3f774459ec12f85047de6916c0efd/lib/components/media/index.js#L8
  • https://github.com/Financial-Times/o-grid/issues/185

This was reported by the apps team who both set custom layouts and use layout change events. It's not causing an immediate problem but was a good spot by @erayb, thanks for letting us know!

[notlee]

Looks like oGridAddLayout already errors if the unit of the layout does not match other layouts