npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-responsive

v5.0.0

Published

An ember-cli addon that gives you a simple, Ember-aware way of dealing with media queries.

Downloads

92,241

Readme

ember-responsive Ember Observer Score

ember-responsive is an ember-cli addon that give you a simple, Ember-aware way of dealing with media queries.

All you need to do is tell it your application's breakpoints and it'll expose the rest for you. Here is an interactive demo

Requirements

ember-responsive needs window.matchMedia() to function, which isn't available in all browsers. Compatibility matrix

There is a polyfill by Paul Irish called matchMedia.js that will add support to older browsers

Getting Started

This is an ember-cli addon so, so all you need to do is

ember install ember-responsive

After that, simply register the breakpoints that are pertinent to your application in app/breakpoints.js:

export default {
  mobile:  '(max-width: 767px)',
  tablet:  '(min-width: 768px) and (max-width: 991px)',
  desktop: '(min-width: 992px) and (max-width: 1200px)',
  jumbo:   '(min-width: 1201px)'
};

This default config has already been provided for you. If you wish to change the values or add new ones, simply create a new app/breakpoints.js in your project and export your chosen config.

Now you can inject the media service in any object with access to the container:

import Component from '@ember/component';
import { inject as service } from '@ember/service';

export default Controller.extend({
  media: service(),
  doSomething() {
    this.get('media.isMobile'); // => true
  }
});

In your templates you have access to the media helper that allows you to query breakpoints easily.

{{#if (media 'isDesktop')}}
  Desktop view!
{{/if}}

You can also bind the list of active media queries to your app's rootElement. This means you won't have to deal with complicated media queries in CSS, instead simply use classes to style the different devices.

In your application.hbs template:

<div class="{{media 'classNames'}}">
  {{outlet}}
</div>

Injection

If you find explicitly injecting the service too repetitive, you can setup an initializer to inject it automatically in every controller and component like this:

// in app/initializers/ember-responsive
export default {
  name: 'responsive',
  initialize(application) {
    application.inject('controller', 'media', 'service:media');
    application.inject('component', 'media', 'service:media');
  }
};

Additional Media Queries

Media queries beyond those based on size will also work in your breakpoints.js file, including:

  portrait: '(orientation: portrait)',
  landscape: '(orientation: landscape)',
  dark: '(prefers-color-scheme: dark)',
  light: '(prefers-color-scheme: light)'

Updating to 2.x

When updating this addon, make sure to run the generate command. Choose no to overriding existing files, unless you want the defaults. This command has to be run when updating to 2.x if your application relies on automatic injection. Because as of version 1.2.9, the addon will generate an initializer to allow users to customize injection.

ember g ember-responsive

Updating to 3.x

The major breaking changes to update to 3.x are so far:

  • Test helpers are now all covered by setBreakpoint
  • Calling media breakpoints in templates is now done with a helper. {{media.isDesktop}} -> {{media 'isDesktop'}}
  • Tests run into issues if you have not ported to the new style tests (https://github.com/emberjs/rfcs/blob/master/text/0232-simplify-qunit-testing-api.md)

Usage in engines

If you are using engines and you want to share responsive behaviour between the main application and engine, you must pass the 'media' service to the engine app.

Testing Helpers

This project provides a single test helper which works in both integration and acceptance tests to assist in testing content specific to different breakpoints.

Acceptance Tests

...
import { setBreakpoint } from 'ember-responsive/test-support';

...

test('example test', function(assert) {
  setBreakpoint('mobile');
  visit('/');

  andThen(function() {
    // assert something specific to mobile
  });
});

Integration Tests

...
import { setBreakpoint } from 'ember-responsive/test-support';

...

test('it renders', function(assert) {
  setBreakpoint('mobile');

  this.render(hbs`{{your-component}}`);

  // assert something specific to mobile
});

Multiple Breakpoints in Tests

You can set multiple breakpoints to the helper. This is useful if your breakpoints.js file defines breakpoints that overlap.

// in app/breakpoints.js
export default {
  tablet:  '(min-width: 768px)',
  desktop: '(min-width: 992px)',
  jumbo:   '(min-width: 1201px)'
};

// in test file
...
import { setBreakpoint } from 'ember-responsive/test-support';

...

test('it renders', function(assert) {
  setBreakpoint(['tablet', 'desktop']);

  this.render(hbs`{{your-component}}`);

  // assert something specific to desktop, i.e. sizes 992px - 1201px
  // `isTablet` and `isDesktop` will both return true
});

Tests

To run the tests, after cloning do:

npm install
bower install
npm test

License

This library is lovingly brought to you by the FreshBooks developers. We've released it under the MIT license.