Go to rebrand

Broadcasters

Implementation

Make sure the main_site_core.js chunk is included, if so you need to activate the broadcaster you want to use in the page, then to test it's working you can just add an event listener in the window console for the custom events and check that they are triggered:

// We activate the broadcasters we need on the page window.ScrollThrottledBroadcaster = true; window.MediaSizeBroadcaster = true; // This is how you can test them window.addEventListener('com.consumeraffairs.styleguide.mediaChange', e => console.log('Media Changed',e)); window.addEventListener('com.consumeraffairs.styleguide.userScroll', e => console.log('User scrolled',e));

Media Size Broadcaster

It dispatches an event com.consumeraffairs.styleguide.mediaChange everytime the screen is resized and it reaches a breakpoint. The event contains the screenSize in which you currently are (xs, sm, md, lg, xl) By listening to this broadcaster instead of the resize event we're reducing the calls that occur, only listen to the resize event if you need a custom breakpoint specifically.

Demo

Critical breakpoints that are broadcasted

Screen size Min width Max width
xs 0px 479px
sm 480px 767px
md 768px 991px
lg 992px 1199px
xl 1200px 10000px

Event details

Name:

com.consumeraffairs.styleguide.mediaChange

Detail:

{ screenSize: String (Takes xs,sm,md,lg or xl) }

Scroll throttled Broadcaster

Throttles the scroll position to every 50ms to avoid broadcasting for every single time and then dispatches a custom event com.consumeraffairs.styleguide.userScroll.

Demo

Event details

Name:

com.consumeraffairs.styleguide.userScroll

Detail:

{ scrollTop: integer (Scrolled pixels) }