avcengineering/ember-cli-responsive

Ember CLI addon for using ember-responsive

Ember-cli-responsive

Ember CLI addon for using ember-responsive

This README outlines the details of collaborating on this Ember addon. All contributions welcome!

Usage

• ember install ember-cli-responsive

Import ember-cli-responsive module into your app.js and add responsive break points as below.

import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';
import 'ember-cli-responsive/responsive';

let App;

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver
});

App.responsive({
  media: {
    mobile:  '(max-width: 768px)',
    tablet:  '(min-width: 769px) and (max-width: 992px)',
    desktop: '(min-width: 993px) and (max-width: 1200px)',
    jumbo:   '(min-width: 1201px)'
  }
});

loadInitializers(App, config.modulePrefix);

export default App;

You can then query those breakpoints in your controllers, components, routes, and views:

  this.get('media.isMobile'); // => true

The same is true in templates:

  {{#if media.isDesktop}}
    Desktop view!
  {{/if}}

Polyfill with matchMedia

After running the above generator you can simply import via your project's ember-cli-build.js

//ember-cli-build.js
app.import('bower_components/matchMedia/matchMedia.js');

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• npm test

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

ember-cli-responsive's Issues

Mention the original project and it's license

It seems like you forgot to reference the original project.

Add matchMedia polyfill back in as optional dependency

Unfortunately, many people still need to support IE8 and IE9. I'd recommend adding the matchMedia polyfill back in as an optional dependency, or at least mention it in the docs to prevent confusion over why their app is breaking in browsers that don't support matchMedia.

Deprecation Warning

DEPRECATION: Addon files were detected in `........./node_modules/ember-cli-responsive/addon`, but no JavaScript preprocessors were found for `ember-cli-responsive`. Please make sure to add a preprocessor (most likely `ember-cli-babel`) to in `dependencies` (NOT `devDependencies`) in `ember-cli-responsive`'s `package.json`.

When running ember serve, I get the following deprecation warning.

DEPRECATION: Ember.Set

Hey, thx for a great addition. Heads up for Ember 1.8 that added a deprecated flag to Ember.set. http://emberjs.com/blog/2014/10/26/ember-1-8-0-released.html#toc_notable-deprecations

DEPRECATION: Ember.Set is deprecated and will be removed in a future release.

It's line 6 in media.js causing this console warning

  matches: function() {
    return new Ember.Set();
  }.property(),

Ember-cli-responsive and IE9

Under IE9, I get this error message: SCRIPT5007: Object expected.

It corresponds to this line :

App.responsive({ // ember-cli-responsive plugin conf
// ....

Force media type in testing?

Is there a way to force different media query in an automated test? I use ember-cli-responsive to render different layouts for each device and would like to have a way to test it (without opening a browser).

Would't it be nicer if the `media` config was defined in `environment.js`

To me, it doesn't feel right to declare your media in app.js. Couldn't we better do this in environment.js?