search

Financial-Times / o-grid

Responsive grid system
http://registry.origami.ft.com/components/o-grid
94 stars 17 forks source link

➕ Adds ability to listen to layout change events #143

Closed aendra-rininsland closed 7 years ago

aendra-rininsland commented 7 years ago

My colleague and I are working on a project for the homepage front page that needs to respond to changing o-grid breakpoints, and we could either use getCurrentLayout() in a listening on window.onresize, which will call getGridProperties() continuously, or we could call getGridProperties() once during initialisation and then use window.matchMedia based on those values.

To that latter end, this PR.

aendra-rininsland commented 7 years ago

Actually, disregard for now — I need to amend to provide more detail.

aendra-rininsland commented 7 years ago

I've updated this to add two helper functions, getGridBreakpoints() and addBreakpointListeners(). The former outputs the names and sizes of all grid breakpoints in JSON via html:before, the later adds MediaQueryListListeners for all o-grid breakpoints that fires an o-grid.layoutChange CustomEvent when the layout changes.

aendra-rininsland commented 7 years ago

@JakeChampion I've updated main.js as discussed, apologies for how long that took! I've also changed the API a bit as per discussion with my colleagues.