Media query scoping

To alter a behavior at a breakpoint, in this example large and larger breakpoints, lg+ you can scope a behavior to a media query:

<div class="MyBehavior" data-mybehavior-media="lg+">
  ...
</div>

import { createBehavior } from '@area17/a17-behaviors';

const MyBehavior = createBehavior(
  'MyBehavior',
  {
    // behavior methods
  },
  {
    init() {
      this.foo = '-';
    },
    enabled() {
      this.foo = 'large';
    },
    disabled() {
      this.foo = 'small';
    },
    destroy() {
      // this.foo is destroyed automatically
    },
  }
);

export default MyBehavior;

In this example, initially this.foo will be -. If the media query is smaller than lg then this.foo will be small and when the media query is large and above, then this.foo will be large. If the window is resized, these values will automatically update.