https://github.com/gadicc/meteor-reactive-window
Reactive functions for window properties; width, scroll, etc
https://github.com/gadicc/meteor-reactive-window
Last synced: 9 months ago
JSON representation
Reactive functions for window properties; width, scroll, etc
- Host: GitHub
- URL: https://github.com/gadicc/meteor-reactive-window
- Owner: gadicc
- License: mit
- Created: 2014-08-26T09:57:46.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2016-12-04T11:24:07.000Z (over 9 years ago)
- Last Synced: 2025-07-17T18:16:00.459Z (11 months ago)
- Language: JavaScript
- Size: 17.6 KB
- Stars: 29
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: History.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# reactive-window [](https://travis-ci.org/gadicc/meteor-reactive-window)
Reactive helpers to work with screen size, etc.
Copyright (c) 2014-2016 Gadi Cohen , released under
the MIT license (see [LICENSE.txt](./LICENSE.txt)).
## Usage
To use: `meteor add gadicohen:reactive-window` in your project folder.
## 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](http://getbootstrap.com/css/#grid))
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.:
```handlebars
Current jQuery(window).width() is {{rwindow.$width}}
```
and
```handlebars
{{#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 (">=")