Reactive functions for window properties; width, scroll, etc
MIT License
Reactive helpers to work with screen size, etc.
Copyright (c) 2014-2016 Gadi Cohen [email protected], released under the MIT license (see LICENSE.txt).
To use: meteor add gadicohen:reactive-window
in your project folder.
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 120rwindow.screen('lte', 'small')
- true for xsmall
, small
screen sizesIf 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 :)
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}}
lt
- less than ("<")lte
- less than or equal to ("<=")eq
- equal to ("==")gt
- greater than (">")gte
- greater than or equal to (">=")