Skip to content

Respond to window and view resizing easily in Ember.js

License

Notifications You must be signed in to change notification settings

mike-north/ember-resize

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ember-resize

Build Status npm version

Respond to window and view resize events easily and reliably. Events are only fired when dimensions actually change, and you may choose to respond to only width changes, only height changes, or changes to both.

Use

  • ember-cli < 0.2.3 ember install:addon ember-resize
  • ember-cli >= 0.2.3 ember install ember-resize

Service: Resize

The resize service makes it easy to respond to window resize events. By default it is injected onto your views and components, but you may change this via configuration.

This service fires two events

  • didResize - Fires anytime the window is resized
  • debouncedDidResize - Identical to didResize, but debounced (configurable, 100ms by default)

An example of how you might use this service:

let MyView = Ember.View.extend({
  init() {
    this.get('resizeService').on('didResize', event => {
      console.log(`width: ${window.innerWidth}, height: ${window.innerHeight}`);
    })
  }
})

Mixin: ResizeAware

A little sugar on top of the service, making it as easy as possible to respond to resize events in an ember-idiomatic way. Just as you can implement mouse events on your views via methods like click, you can now implement didResize and debouncedDidResize methods as well. When you use this mixin on a component, resize events will only fire if that component's size is affected.

import ResizeAware from 'ember-resize/mixins/resize-aware';

let MyOtherView = Ember.View.extend(ResizeAware, {
  resizeWidthSensitive: true,
  resizeHeightSensitive: true,

  didResize(width, height, evt) {
    console.log(`Resized! ${width}x${height}`);
  },
  debouncedDidResize(width, height, evt) {
    console.log(`Debounced Resize! ${width}x${height}`);
  }
})

You can configure component/view response to height, width changes via the resizeWidthSensitive and resizeHeightSensitive properties.

Note that the global environment configuration will override these if you set heightSensitive or widthSensitive to false.

Configuration

In your config/environment.js, you may configure some options. The defaults are:

module.exports = function(environment) {
  var ENV = {
    resizeServiceDefaults: {
      debounceTimeout    : 200,
      heightSensitive    : true,
      widthSensitive     : true,
      injectionFactories : [ 'view', 'component']
    }
  }
}

Installation

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

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

Analytics