mike-north / ember-resize Goto Github PK

Respond to window and view resizing easily in Ember.js

Home Page: http://mike.works/ember-resize

License: MIT License

JavaScript 30.32% HTML 6.35% CSS 0.80% TypeScript 58.89% Handlebars 3.63%

ember-resize's Introduction

Ember-resize

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

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

Running Tests

ember test
ember test --server

Building

ember build

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

ember-resize's People

Contributors

Stargazers

Watchers

Forkers

jpadilla kategengler engwan kpavankumar jherdman jasonmit wmhobbes davidpett khaitu therocketforever mphasize djsegal briarsweetbriar aaronbhansen drewtempelmeyer jakeleboeuf eriktrom thedyrt lmcardle vsymguysung ciena-blueplanet notmessenger sportsrecruits zcharli dineshvgp localpcguy stepicorg tarponjargon zachnthebox joankaradimov simonihmig raghuvaran chriskrycho x-b-e digitallumens wozny1989 alyne systembugtj jukeboxhero foodee rsingh-quotient

ember-resize's Issues

Replace travis-deploy-once with Travis-CI stage

New release

Can we release current master? As from Ember 3.4 this package doesn't work as the latest release is using ember-cli-shims which is already deprecated and removed from projects dependency.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Tests

Setting injectionFactories does not work

Setting injectionFactories to [] I expected config['default'].resizeServiceDefaults.injectionFactories in resize initializer to be []. Instead it was ["view", "component"].

Setting injectionFactories to ["YOLO"], I expected config['default'].resizeServiceDefaults.injectionFactories to be ["YOLO"] in the initializer. Instead it was ["YOLO", "component"].

Deprecation warnings with Ember 3.21

Ember 3.21 deprecated getWithDefault. ember-resize uses it in a couple of places - here and here. This leads to a bunch of warnings.

Events cleanup

When I navigate away from a component that's resize aware and then resize the window, I get an error:

Uncaught TypeError: Cannot read property '0' of undefined

on this line:

 return this.$()[0].getClientRects()[0];

I assume because the events are not cleaned up? Should the mixin also include a willDestroyElement hook that removes the event listeners?

Also, it's good to add a reminder to the docs to call this._super on didInsertElement if it's overriden when using the mixin. Took me a while to realize why it wasn't working.

TypeError when no resize service defaults specified in config file

If ENV in config/environment.js does not contain a resizeServiceDefaults entry, the line

var injectionFactories = resizeServiceDefaults.injectionFactories;

in initializers/resize.js throws a TypeError since resizeServiceDefaults is undefined. I would expect that defaults would be provided if no resizeServiceDefaults were specified.

A TypeError is also thrown if injectionFactories is not specified in resizeServiceDefaults.

`export =` is not supported by `@babel/plugin-transform-typescript#7.1.0`

Ember app with ember-resize addon doesn't build when used along with ember-cli-typescript@(v2.0.0-beta.3). Looks like the newer version of babel doesn't support export =

ember-resize/app/config/environment.d.ts

Line 7 in f2cc804

export = env;

Request "adoption"

@mike-north we'd like to adopt this addon- would you consider allowing the (newly formed) org- Adopted Ember Addons - to care for this addon?

We're in the process of adopting a few other addons that could use a little extra TLC to stay alive.

If you're willing to do so, please feel free to transfer ownership: https://github.com/adopted-ember-addons

Thanks for considering!

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

Uncaught Error: Could not find module `@ember-decorators/object/computed` imported from `ember-resize/services/resize`

With version 0.2.0, I'm getting that error:

Uncaught Error: Could not find module `@ember-decorators/object/computed` imported from `ember-resize/services/resize` at http://localhost:7357/tests/assets/vendor.js, line 252\n

Whenever I run ember test.

P.S. Doesn't happen on 0.1.0.

In application tests - Error: Cannot re-register: 'service:resize', as it has already been resolved

This was encountered in an Ember application's test suite when upgrading from Ember.js 2.8.0 to 2.12.3 but likely affects older versions than 2.12.3 as well.

This issue in Ember Data describes a similar scenario and the solution - emberjs/data#3690

Mix-in vs. Service: different behaviour when used in a component

The mix-in event will fire only when the component itself is resized.
The service event will fire whenever the entire window is resized.

Is this intentional? The readme documentation makes it sound like the two are equivalent.
https://ember-twiddle.com/7ba80efb25e56c2dd7b9baa9aadec42e

Resize event only firing a few times and then stops completely...

Hello,

I just started using this package and noticed that when I resize the browser to be smaller in width, the didResize is firing normally. However if I then drag the browser size back up it does not fire and thus my resize code only works in one direction.

Any thoughts or ideas on this?

Thanks!

A better demo page

Only called once

Hello,
I have just installed this package using the ResizeAware mixin inside my component, however it seems to only fire once.

On the first time I resize the window it fires, after that it doesnt...

here is my component

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

export default Ember.Component.extend ResizeAware,
  tagName: 'section'
  classNames: ['right-page-split', 'col-md-6']

  setup: (->
    # Handle sizing the component based on the left-page-component width.
    width = Ember.$('.left-page-split').outerWidth()
    @.$(@element).css 'width', width
  ).on 'didInsertElement'

  didResize: (width, height, evt)->
    console.log 'weeeeee'

here is my config

  var ENV = {
    modulePrefix: 'client-web',
    environment: environment,
    baseURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
      }
    },
    contentSecurityPolicy: {
      'default-src': "'none'",
      'script-src': "'self' 'unsafe-eval' 'unsafe-inline' http://*.gstatic.com http://*.googleapis.com http://use.typekit.net",
      'font-src': "'self' data: http://*.gstatic.com",
      'connect-src': "'self' ws://localhost:7000 localhost:7000",
      'img-src': "'self' http://*.gstatic.com http://*.googleapis.com http://p.typekit.net",
      'style-src': "'self' 'unsafe-inline' http://*.googleapis.com http://use.typekit.net",
      'media-src': "'self' data:"
    },

    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
    },

    resizeServiceDefaults: {
      debounceTimeout: 50,
      heightSensitive: false,
      widthSensitive: true,
      injectionFactories : ['component']
    }
  };

Initial Component Size Unknown

A pattern I find myself in is needing to know the initial size of a component/view upon insertion of the element. The ResizeAware mixin provides width/height values upon resize, but it'd be great if it provided width/height values upon insertion as well.

Does not work with decorators

When used with decorators, I get this error:

Uncaught Error: Assertion Failed: Attempting to inject an unknown injection: 'service:resizeService

Used in Component like this:

@service
resizeService

Latest ember cli, native decorators.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	`@types/ember-qunit`
npm	`@types/ember__test-helpers`
npm	`babel-eslint`
npm	`ember-cli-htmlbars-inline-precompile`
npm	`ember-cli-qunit`
npm	`ember-cli-uglify`
npm	`eslint-plugin-node`
npm	`eslint-plugin-typescript`
npm	`typescript-eslint-parser`

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

npm

package.json

ember-cli-babel ^7.1.0

ember-cli-htmlbars ^6.0.0

@commitlint/cli 7.6.1

@commitlint/config-conventional 7.6.0

@commitlint/travis-cli 7.6.1

@mike-north/js-lib-renovate-config 1.2.0

@mike-north/js-lib-semantic-release-config 1.0.1

@types/ember 3.0.29

@types/ember-qunit 3.4.15

@types/ember__test-helpers 0.7.12

@types/qunit 2.5.4

@types/rsvp 4.0.4

babel-eslint 10.1.0

broccoli-asset-rev 3.0.0

ember-cli 4.12.2

ember-cli-app-version 3.2.0

ember-cli-dependency-checker 3.3.2

ember-cli-htmlbars-inline-precompile 3.0.2

ember-cli-inject-live-reload 2.1.0

ember-cli-qunit 4.4.0

ember-cli-tslint 0.1.4

ember-cli-typescript 1.5.0

ember-cli-uglify 3.0.0

ember-disable-prototype-extensions 1.1.3

ember-disable-proxy-controllers 1.0.2

ember-export-application-global 2.0.1

ember-load-initializers 2.1.2

ember-maybe-import-regenerator 0.1.6

ember-qunit-decorators 1.5.0

ember-resolver 10.1.1

ember-source 4.12.3

ember-source-channel-url 1.2.0

ember-try 1.4.0

eslint-plugin-ember 11.10.0

eslint-plugin-node 11.1.0

eslint-plugin-typescript 0.14.0

loader.js 4.7.0

qunit-dom 2.0.0

semantic-release 15.12.5

typescript 3.2.4

typescript-eslint-parser 21.0.2

node 6.* || 8.* || >= 10.*

travis

.travis.yml

node 8

node 10

Check this box to trigger a request for Renovate to run again on this repository

Release a new version

Thanks for the great plugin! I see that in master you've updated Ember to 2.18 (and most notably ember-cli-babel to version 6) - could you release a new version with these changes? This would allow us to remove ember-cli-shims and potentially fix some deprecation warnings.

Legacy ember support

Removing event listeners on debouncedDidResize removes every listener regardless of context

Following this components destruction, every previously registered debouncedDidResize listener stops firing.

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

function doResize() { /* ... */ }

export default Component.extend({
  resize: service(),

  didInsertElement() {
    this._super(...arguments);

    this.get('resize').on('debouncedDidResize', this, doResize, 100);
    doResize.call(this);
  },

  willDestroyElement() {
    this._super(...arguments);
    this.get('resize').off('debouncedDidResize', this);
  }
});

Ember 3.12, error, remove a not existing function listener

On ember 3.12, on acceptance test we encountered the error below :

You attempted to remove a function listener which did not exist on the instance, which means you may have attempted to remove it before it was added.

The error is throwed by the resize-aware mixin inside the willDestroyElement method when trying to remove the didResize and/or debouncedDidResize listener.

resizeService not injected in test environment

Versions
ember 2.4.4
ember-resize 0.0.12

Problem
I recently integrated ember-resize into a component, which broke my integration tests. The component rendered and behaved as expected during development, but test runs would fail.

Even though I stubbed the resizeService as per the Ember component testing docs, the tests failed due to resizeService being undefined.

It appears that ember-resize does not inject the service in the test environment.

Example Test:

// tests/integration/components/my-component-test.js

const resizeServiceStub = Ember.Service.extend({
  on() {}
});

test('it renders', function(assert) {
    this.register('service:resize', resizeServiceStub);
    this.inject.service('resize', { as: 'resizeService' });

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

// TEST FAILED: TypeError: Cannot read property 'on' of undefined

Workaround

The problem can be fixed by manually-injecting the service into your component, in your app code

// app/components/my-component.js

resizeService: Ember.inject.service('resize')

This injection is redundant outside of the test environment, but required within it.

Future Usage with Glimmer Components

Are there any plans to move away from mixin usage to allow for easy implementation with Octane's glimmer components? In addition, are there any suggested workarounds that could currently be used to work with glimmer components?

Doesn't seem to be doing anything in ember-cli 2.10.0?

I've tried both the mixin and the service in a controller and it doesn't seem to console.log when resizing. Hmm...

I'm sure it's something I'm doing but I can't get it to work.

TypeError when the Mixin is on a compnent which is not yet visible (dialog boxes).

I will provide a fix by protecting the access to the width property.

public window width/height

Is there any reason for making window width/height private?

Quite often I need a computed property which dependends on window size. It would be nice to do just this:

someProp: Em.computed( 'resizeService.windowWidth', function(){
  ...
})

Instead of bunch of subscribe/unsubscribe logic.
I'd like to send a PR to address this. What would be idiomatic way here?

Upgrade to current ember-cli-typescript

We're getting some reports that users are now seeing warnings since typed-ember/ember-cli-typescript#1046 landed; this is a function of the fact that this is using the pre-2.x compilation model. If we upgrade it to 3.x, users will stop seeing the warning.

0.3.1 not published

I think there may have been an issue with your deployment.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@mike-north/js-lib-renovate-config)

Resize handler executing code against destroyed service object

We've been hitting this error pretty regularly in our acceptance test and it has been causing chaos on our tests because it errors out while other tests are executing.

Error: Assertion Failed: calling set on destroyed object: <mcp-ui@service:resize::ember149994>._oldWidthDebounced = 921

It happens randomly when visiting routes. I think it occurs when the application is destroyed while the resize event or it's handler is still in flight due to the delay introduced by the debounced callback. It's hard to reproduce but happens regularly on our build agents.

events don't fire more than once.

I added a console.log to my app, and it only prints once when I continuously resize, and stop resizing, and resize again.

Does this happen for anyone else?

Respond to orientationchange event?

Does it make sense to add a listener or method for orientationchange? is that outside of the scope of this addon?

mike-north / ember-resize Goto Github PK

ember-resize's Introduction

Ember-resize

Use

Service: Resize

Mixin: ResizeAware

Configuration

Installation

Running

Running Tests

Building

ember-resize's People

Contributors

Stargazers

Watchers

Forkers

ember-resize's Issues

Repository problems

Rate-Limited

Open

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org

Service: `Resize`

Mixin: `ResizeAware`