reactive-window

The start of some reactive helpers to work with screen size, etc.

In JavaScript:

• rwindow.innerWidth() and rwindow.outerWidth() - window width

• rwindow.innerHeight() and rwindow.outerHeight() - window height

• rwindow.$width() = $(window).width() - browser agnostic in some cases

• rwindow.$height() = $(window).height() - browser agnostic in some cases

• rwindow.screen() - like bootstrap3: xsmall, small, medium, large

(more info)

All the above functions take an optional operator, and value, e.g:

• rwindow.innerWidth('gt', 120) - returns true if width greater than 120
• rwindow.screen('lte', 'small') - true for xsmall, small screen sizes

If you're a stickler per performance, use rwindow.get('screen') etc if you know you won't be performing an op. rwindow._dict.get('screen') works too :)

In Templates:

All the above available as helpers, with the same parameters, e.g.:

Current jQuery(window).width() is {{rwindow.$width}}

and

{{#if rwindow.screen 'lte' 'medium'}}
  {{> xsmallSmallMediumLayout}}
{{else}}
  {{> largeLayout}}
{{/if}}

Operator reference

• lt - less than ("<")
• lte - less than or equal to ("<=")
• eq - equal to ("==")
• gt - greater than (">")
• gte - greater than or equal to (">=")