ember-screen
v2.0.0
Published
A screen size service for Ember
Downloads
1,896
Readme
Ember Screen
This addon adds a screen
service to your Ember application that will report
the current height and width of the window.
import Ember from 'ember';
const { Component, computed, inject } = Ember;
export default Ember.Component({
screen: inject.service(),
showTopNavigation: computed('screen.width', function() {
return this.get('screen.width') > 1000;
})
})
Installation
ember install ember-screen
Using Media Queries
Ember Screen is configured with a set of properties that correspond to
Bootstrap 4's media queries.
This is the default implementation of app/services/screen.js
.
import EmberScreen, { breakpoint } from 'ember-screen';
export default EmberScreen.extend({
isSmallAndUp: breakpoint('(min-width: 34em)'),
isMediumAndUp: breakpoint('(min-width: 48em)'),
isLargeAndUp: breakpoint('(min-width: 62em)'),
isExtraLargeAndUp: breakpoint('(min-width: 75em)'),
isExtraSmallAndDown: breakpoint('(max-width: 33.9999em)'),
isSmallAndDown: breakpoint('(max-width: 47.9999em)'),
isMediumAndDown: breakpoint('(max-width: 61.9999em)'),
isLargeAndDown: breakpoint('(max-width: 74.9999em)')
});
If you inject screen
into a component, you could use a media query property
like this:
{{#if screen.isSmallAndDown}}
☰ <!-- obligatory hamburger -->
{{/if}}
To configure your own media queries, create an app/services/screen.js
file
in your application and extend from the Ember Screen service.
import EmberScreen, { breakpoint } from 'ember-screen';
export default EmberScreen.extend({
isMobile: breakpoint('(max-width: 479px)'),
isDesktop: breakpoint('(min-width: 480px)')
});
Testing Media Queries
Creating automated tests for different screen sizes is often neglected because it is not practical to programmatically resize a web browser during tests. Ember Screen lets you to stub media features to run tests that are integrated with your screen service logic.
// An example acceptance test
test('shows large logo on HD tv', function(assert) {
let screen = this.owner.lookup('service:screen');
screen.stubMediaFeatures({ type: 'tv', width: 1920 });
visit('/');
andThen(function() {
assert.equal(find('.logo-large').length, 1, "HD TVs have large logo");
});
});
This feature uses css-mediaquery to
parse your configured breakpoints
and see if they match with the stubbed
values.
Running in FastBoot
Ember screen is compatible with FastBoot out
of the box. However in a FastBoot environment running on a server there is
no way to access the screen properties of the client. If your UI depends on
the device's screen size then you can use the screen service's
stubMediaFeatures
method to provide defaults. See this simple
example
of a FastBoot-only instance initializer.
Running the Tests for this Addon
Running tests that resize a web browser is challenging because web browsers
disable window.resizeTo
and window.resizeBy
APIs. Chrome will allow these
methods to work for popup windows that have been programatically created with
window.open
. The current test suite has some finicky configuration will only
succeed when running with Testem, so the proper way to run tests locally is to
use:
ember test
or
ember test --server