Listening for browser resize

[alexlafroscia]

Is there a way to listen for browser resize events through Flexi? Since it's already scheduling tasks on every keyframe to check size changes, I want to avoid adding my own events. However, I couldn't find a public API for listening for this through the device/layout service. What I ended up doing was super-classing device/layout to add an event trigger:

import Ember from 'ember';
import LayoutService from 'flexi/services/device/layout';
import config from '../../config/environment';

const { Evented, get } = Ember;

export default LayoutService.extend(Evented, {
  breakpoints: config.flexi.breakpoints,

  updateResolution() {
    const originalWidth = get(this, 'width');

    this._super(...arguments);

    const newWidth = get(this, 'width');

    if (originalWidth !== newWidth) {
      this.trigger('width-changed');
    }
  }
});

Is there a better way to do this? Or maybe you'd consider adding a feature like this into Flexi itself?

[RobbieTheWagner]

@alexlafroscia I don't see why we couldn't add it in. Since we are already triggering things when the size changes, should be able to add in some sort of option to pass a function you want to call when that happens. Just not sure what would be the most user friendly way of doing it. Did you have some ideas? @runspired what do you think of something like this?

[alexlafroscia]

Did you have some ideas

I definitely like the idea of using Evented and allowing people to subscribe to events if they want it, like the example code I posted. Subscribe and unsubscribe is already the desired mechanics, and Ember.Evented provides an API for that already.

[runspired]

I've down, I'd rather an event than having you rely on binding to the props on the service.

[alexlafroscia]

What events would you want to provide? Probably something like

• width-changed
• height-changed
• resized (either changed)

although maybe not those names? I also thought that you could generate an even for each breakpoint, but that might be over-kill when it's easy enough to listen for the event and then check some property on the service like isDesktop (which is what I'm doing now)

I suppose that maybe just doing width-changed is enough but, since the device/layout service already stores the height info, you might as well issue events for them as well.

[RobbieTheWagner]

This is now completed in flexi-layouts html-next/flexi-layouts#4