` has been resized:
23 |
24 | ```handlebars
25 |
I have been resized {{this.count}} times!
26 | ```
27 |
28 | ## Advanced Usage
29 |
30 | `did-resize` also supports passing an `options` hash into ResizeObserver:
31 |
32 | ```handlebars{data-execute=false}
33 |
34 | ```
35 |
36 | The options supported are documented under [ResizeObserver.observe](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe).
37 |
--------------------------------------------------------------------------------
/docs-app/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
TestApp Tests
6 |
7 |
8 |
9 | {{content-for "head"}}
10 | {{content-for "test-head"}}
11 |
12 |
13 |
14 |
15 |
16 | {{content-for "head-footer"}}
17 | {{content-for "test-head-footer"}}
18 |
19 |
20 | {{content-for "body"}}
21 | {{content-for "test-body"}}
22 |
23 |
24 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {{content-for "body-footer"}}
37 | {{content-for "test-body-footer"}}
38 |
39 |
40 |
--------------------------------------------------------------------------------
/test-app/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
TestApp Tests
6 |
7 |
8 |
9 | {{content-for "head"}}
10 | {{content-for "test-head"}}
11 |
12 |
13 |
14 |
15 |
16 | {{content-for "head-footer"}}
17 | {{content-for "test-head-footer"}}
18 |
19 |
20 | {{content-for "body"}}
21 | {{content-for "test-body"}}
22 |
23 |
24 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | {{content-for "body-footer"}}
37 | {{content-for "test-body-footer"}}
38 |
39 |
40 |
--------------------------------------------------------------------------------
/test-app/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function (environment) {
4 | const ENV = {
5 | modulePrefix: 'test-app',
6 | environment,
7 | rootURL: '/',
8 | locationType: 'history',
9 | EmberENV: {
10 | EXTEND_PROTOTYPES: false,
11 | FEATURES: {
12 | // Here you can enable experimental features on an ember canary build
13 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
14 | },
15 | },
16 |
17 | APP: {
18 | // Here you can pass flags/options to your application instance
19 | // when it is created
20 | },
21 | };
22 |
23 | if (environment === 'development') {
24 | // ENV.APP.LOG_RESOLVER = true;
25 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
26 | // ENV.APP.LOG_TRANSITIONS = true;
27 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
28 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
29 | }
30 |
31 | if (environment === 'test') {
32 | // Testem prefers this...
33 | ENV.locationType = 'none';
34 |
35 | // keep test console output quieter
36 | ENV.APP.LOG_ACTIVE_GENERATION = false;
37 | ENV.APP.LOG_VIEW_LOOKUPS = false;
38 |
39 | ENV.APP.rootElement = '#ember-testing';
40 | ENV.APP.autoboot = false;
41 | }
42 |
43 | if (environment === 'production') {
44 | // here you can enable a production-specific feature
45 | }
46 |
47 | return ENV;
48 | };
49 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | root: true,
5 | parser: '@babel/eslint-parser',
6 | parserOptions: {
7 | ecmaVersion: 'latest',
8 | sourceType: 'module',
9 | requireConfigFile: false,
10 | babelOptions: {
11 | plugins: [
12 | ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
13 | ],
14 | },
15 | },
16 | plugins: ['ember'],
17 | extends: [
18 | 'eslint:recommended',
19 | 'plugin:ember/recommended',
20 | 'plugin:prettier/recommended',
21 | ],
22 | env: {
23 | browser: true,
24 | },
25 | rules: {},
26 | overrides: [
27 | // node files
28 | {
29 | files: [
30 | './.eslintrc.js',
31 | './.prettierrc.js',
32 | './.stylelintrc.js',
33 | './.template-lintrc.js',
34 | './ember-cli-build.js',
35 | './index.js',
36 | './testem.js',
37 | './blueprints/*/index.js',
38 | './config/**/*.js',
39 | './tests/dummy/config/**/*.js',
40 | ],
41 | parserOptions: {
42 | sourceType: 'script',
43 | },
44 | env: {
45 | browser: false,
46 | node: true,
47 | },
48 | extends: ['plugin:n/recommended'],
49 | },
50 | {
51 | // test files
52 | files: ['tests/**/*-test.{js,ts}'],
53 | extends: ['plugin:qunit/recommended'],
54 | },
55 | ],
56 | };
57 |
--------------------------------------------------------------------------------
/docs-app/.eslintrc.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | root: true,
5 | parser: '@babel/eslint-parser',
6 | parserOptions: {
7 | ecmaVersion: 'latest',
8 | sourceType: 'module',
9 | requireConfigFile: false,
10 | babelOptions: {
11 | plugins: [
12 | ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
13 | ],
14 | },
15 | },
16 | plugins: ['ember'],
17 | extends: [
18 | 'eslint:recommended',
19 | 'plugin:ember/recommended',
20 | 'plugin:prettier/recommended',
21 | ],
22 | env: {
23 | browser: true,
24 | },
25 | rules: {},
26 | overrides: [
27 | // node files
28 | {
29 | files: [
30 | './.eslintrc.js',
31 | './.prettierrc.js',
32 | './.stylelintrc.js',
33 | './.template-lintrc.js',
34 | './ember-cli-build.js',
35 | './testem.js',
36 | './blueprints/*/index.js',
37 | './config/**/*.js',
38 | './lib/*/index.js',
39 | './server/**/*.js',
40 | ],
41 | parserOptions: {
42 | sourceType: 'script',
43 | },
44 | env: {
45 | browser: false,
46 | node: true,
47 | },
48 | extends: ['plugin:n/recommended'],
49 | },
50 | {
51 | // test files
52 | files: ['tests/**/*-test.{js,ts}'],
53 | extends: ['plugin:qunit/recommended'],
54 | },
55 | ],
56 | };
57 |
--------------------------------------------------------------------------------
/test-app/.eslintrc.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | root: true,
5 | parser: '@babel/eslint-parser',
6 | parserOptions: {
7 | ecmaVersion: 'latest',
8 | sourceType: 'module',
9 | requireConfigFile: false,
10 | babelOptions: {
11 | plugins: [
12 | ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
13 | ],
14 | },
15 | },
16 | plugins: ['ember'],
17 | extends: [
18 | 'eslint:recommended',
19 | 'plugin:ember/recommended',
20 | 'plugin:prettier/recommended',
21 | ],
22 | env: {
23 | browser: true,
24 | },
25 | rules: {},
26 | overrides: [
27 | // node files
28 | {
29 | files: [
30 | './.eslintrc.js',
31 | './.prettierrc.js',
32 | './.stylelintrc.js',
33 | './.template-lintrc.js',
34 | './ember-cli-build.js',
35 | './testem.js',
36 | './blueprints/*/index.js',
37 | './config/**/*.js',
38 | './lib/*/index.js',
39 | './server/**/*.js',
40 | ],
41 | parserOptions: {
42 | sourceType: 'script',
43 | },
44 | env: {
45 | browser: false,
46 | node: true,
47 | },
48 | extends: ['plugin:n/recommended'],
49 | },
50 | {
51 | // test files
52 | files: ['tests/**/*-test.{js,ts}'],
53 | extends: ['plugin:qunit/recommended'],
54 | },
55 | ],
56 | };
57 |
--------------------------------------------------------------------------------
/docs-app/tests/helpers/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | setupApplicationTest as upstreamSetupApplicationTest,
3 | setupRenderingTest as upstreamSetupRenderingTest,
4 | setupTest as upstreamSetupTest,
5 | } from 'ember-qunit';
6 |
7 | // This file exists to provide wrappers around ember-qunit's
8 | // test setup functions. This way, you can easily extend the setup that is
9 | // needed per test type.
10 |
11 | function setupApplicationTest(hooks, options) {
12 | upstreamSetupApplicationTest(hooks, options);
13 |
14 | // Additional setup for application tests can be done here.
15 | //
16 | // For example, if you need an authenticated session for each
17 | // application test, you could do:
18 | //
19 | // hooks.beforeEach(async function () {
20 | // await authenticateSession(); // ember-simple-auth
21 | // });
22 | //
23 | // This is also a good place to call test setup functions coming
24 | // from other addons:
25 | //
26 | // setupIntl(hooks, 'en-us'); // ember-intl
27 | // setupMirage(hooks); // ember-cli-mirage
28 | }
29 |
30 | function setupRenderingTest(hooks, options) {
31 | upstreamSetupRenderingTest(hooks, options);
32 |
33 | // Additional setup for rendering tests can be done here.
34 | }
35 |
36 | function setupTest(hooks, options) {
37 | upstreamSetupTest(hooks, options);
38 |
39 | // Additional setup for unit tests can be done here.
40 | }
41 |
42 | export { setupApplicationTest, setupRenderingTest, setupTest };
43 |
--------------------------------------------------------------------------------
/test-app/tests/helpers/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | setupApplicationTest as upstreamSetupApplicationTest,
3 | setupRenderingTest as upstreamSetupRenderingTest,
4 | setupTest as upstreamSetupTest,
5 | } from 'ember-qunit';
6 |
7 | // This file exists to provide wrappers around ember-qunit's
8 | // test setup functions. This way, you can easily extend the setup that is
9 | // needed per test type.
10 |
11 | function setupApplicationTest(hooks, options) {
12 | upstreamSetupApplicationTest(hooks, options);
13 |
14 | // Additional setup for application tests can be done here.
15 | //
16 | // For example, if you need an authenticated session for each
17 | // application test, you could do:
18 | //
19 | // hooks.beforeEach(async function () {
20 | // await authenticateSession(); // ember-simple-auth
21 | // });
22 | //
23 | // This is also a good place to call test setup functions coming
24 | // from other addons:
25 | //
26 | // setupIntl(hooks, 'en-us'); // ember-intl
27 | // setupMirage(hooks); // ember-cli-mirage
28 | }
29 |
30 | function setupRenderingTest(hooks, options) {
31 | upstreamSetupRenderingTest(hooks, options);
32 |
33 | // Additional setup for rendering tests can be done here.
34 | }
35 |
36 | function setupTest(hooks, options) {
37 | upstreamSetupTest(hooks, options);
38 |
39 | // Additional setup for unit tests can be done here.
40 | }
41 |
42 | export { setupApplicationTest, setupRenderingTest, setupTest };
43 |
--------------------------------------------------------------------------------
/docs-app/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function (environment) {
4 | const ENV = {
5 | modulePrefix: 'test-app',
6 | environment,
7 | rootURL: '/',
8 | locationType: 'history',
9 | EmberENV: {
10 | EXTEND_PROTOTYPES: false,
11 | FEATURES: {
12 | // Here you can enable experimental features on an ember canary build
13 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
14 | },
15 | },
16 |
17 | APP: {
18 | // Here you can pass flags/options to your application instance
19 | // when it is created
20 | },
21 |
22 | 'field-guide': {
23 | name: 'Ember Resize Modifier',
24 | copyright: 'Copyright (c) 2020 Jordan Hawker',
25 | github: 'https://github.com/elwayman02/ember-resize-modifier',
26 | },
27 | };
28 |
29 | if (environment === 'development') {
30 | // ENV.APP.LOG_RESOLVER = true;
31 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
32 | // ENV.APP.LOG_TRANSITIONS = true;
33 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
34 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
35 | }
36 |
37 | if (environment === 'test') {
38 | // Testem prefers this...
39 | ENV.locationType = 'none';
40 |
41 | // keep test console output quieter
42 | ENV.APP.LOG_ACTIVE_GENERATION = false;
43 | ENV.APP.LOG_VIEW_LOOKUPS = false;
44 |
45 | ENV.APP.rootElement = '#ember-testing';
46 | ENV.APP.autoboot = false;
47 | }
48 |
49 | if (environment === 'production') {
50 | // here you can enable a production-specific feature
51 | }
52 |
53 | return ENV;
54 | };
55 |
--------------------------------------------------------------------------------
/docs-app/README.md:
--------------------------------------------------------------------------------
1 | # test-app
2 |
3 | This README outlines the details of collaborating on this Ember application.
4 | A short introduction of this app could easily go here.
5 |
6 | ## Prerequisites
7 |
8 | You will need the following things properly installed on your computer.
9 |
10 | - [Git](https://git-scm.com/)
11 | - [Node.js](https://nodejs.org/)
12 | - [pnpm](https://pnpm.io/)
13 | - [Ember CLI](https://cli.emberjs.com/release/)
14 | - [Google Chrome](https://google.com/chrome/)
15 |
16 | ## Installation
17 |
18 | - `git clone
` this repository
19 | - `cd test-app`
20 | - `pnpm install`
21 |
22 | ## Running / Development
23 |
24 | - `pnpm start`
25 | - Visit your app at [http://localhost:4200](http://localhost:4200).
26 | - Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
27 |
28 | ### Code Generators
29 |
30 | Make use of the many generators for code, try `ember help generate` for more details
31 |
32 | ### Running Tests
33 |
34 | - `pnpm test`
35 | - `pnpm test:ember --server`
36 |
37 | ### Linting
38 |
39 | - `pnpm lint`
40 | - `pnpm lint:fix`
41 |
42 | ### Building
43 |
44 | - `pnpm ember build` (development)
45 | - `pnpm build` (production)
46 |
47 | ### Deploying
48 |
49 | Specify what it takes to deploy your app.
50 |
51 | ## Further Reading / Useful Links
52 |
53 | - [ember.js](https://emberjs.com/)
54 | - [ember-cli](https://cli.emberjs.com/release/)
55 | - Development Browser Extensions
56 | - [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
57 | - [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
58 |
--------------------------------------------------------------------------------
/test-app/README.md:
--------------------------------------------------------------------------------
1 | # test-app
2 |
3 | This README outlines the details of collaborating on this Ember application.
4 | A short introduction of this app could easily go here.
5 |
6 | ## Prerequisites
7 |
8 | You will need the following things properly installed on your computer.
9 |
10 | - [Git](https://git-scm.com/)
11 | - [Node.js](https://nodejs.org/)
12 | - [pnpm](https://pnpm.io/)
13 | - [Ember CLI](https://cli.emberjs.com/release/)
14 | - [Google Chrome](https://google.com/chrome/)
15 |
16 | ## Installation
17 |
18 | - `git clone ` this repository
19 | - `cd test-app`
20 | - `pnpm install`
21 |
22 | ## Running / Development
23 |
24 | - `pnpm start`
25 | - Visit your app at [http://localhost:4200](http://localhost:4200).
26 | - Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
27 |
28 | ### Code Generators
29 |
30 | Make use of the many generators for code, try `ember help generate` for more details
31 |
32 | ### Running Tests
33 |
34 | - `pnpm test`
35 | - `pnpm test:ember --server`
36 |
37 | ### Linting
38 |
39 | - `pnpm lint`
40 | - `pnpm lint:fix`
41 |
42 | ### Building
43 |
44 | - `pnpm ember build` (development)
45 | - `pnpm build` (production)
46 |
47 | ### Deploying
48 |
49 | Specify what it takes to deploy your app.
50 |
51 | ## Further Reading / Useful Links
52 |
53 | - [ember.js](https://emberjs.com/)
54 | - [ember-cli](https://cli.emberjs.com/release/)
55 | - Development Browser Extensions
56 | - [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
57 | - [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
58 |
--------------------------------------------------------------------------------
/docs-app/config/ember-try.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const getChannelURL = require('ember-source-channel-url');
4 | const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup');
5 |
6 | module.exports = async function () {
7 | return {
8 | usePnpm: true,
9 | scenarios: [
10 | {
11 | name: 'ember-lts-4.4',
12 | npm: {
13 | devDependencies: {
14 | 'ember-source': '~4.4.0',
15 | },
16 | },
17 | },
18 | {
19 | name: 'ember-lts-4.8',
20 | npm: {
21 | devDependencies: {
22 | 'ember-source': '~4.8.0',
23 | },
24 | },
25 | },
26 | {
27 | name: 'ember-lts-4.12',
28 | npm: {
29 | devDependencies: {
30 | 'ember-source': '~4.12.0',
31 | },
32 | },
33 | },
34 | {
35 | name: 'ember-lts-5.4',
36 | npm: {
37 | devDependencies: {
38 | 'ember-source': '~5.4.0',
39 | },
40 | },
41 | },
42 | {
43 | name: 'ember-release',
44 | npm: {
45 | devDependencies: {
46 | 'ember-source': await getChannelURL('release'),
47 | },
48 | },
49 | },
50 | {
51 | name: 'ember-beta',
52 | npm: {
53 | devDependencies: {
54 | 'ember-source': await getChannelURL('beta'),
55 | },
56 | },
57 | },
58 | {
59 | name: 'ember-canary',
60 | npm: {
61 | devDependencies: {
62 | 'ember-source': await getChannelURL('canary'),
63 | },
64 | },
65 | },
66 | embroiderSafe(),
67 | embroiderOptimized(),
68 | ],
69 | };
70 | };
71 |
--------------------------------------------------------------------------------
/test-app/config/ember-try.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const getChannelURL = require('ember-source-channel-url');
4 | const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup');
5 |
6 | module.exports = async function () {
7 | return {
8 | usePnpm: true,
9 | scenarios: [
10 | {
11 | name: 'ember-lts-4.4',
12 | npm: {
13 | devDependencies: {
14 | 'ember-source': '~4.4.0',
15 | },
16 | },
17 | },
18 | {
19 | name: 'ember-lts-4.8',
20 | npm: {
21 | devDependencies: {
22 | 'ember-source': '~4.8.0',
23 | },
24 | },
25 | },
26 | {
27 | name: 'ember-lts-4.12',
28 | npm: {
29 | devDependencies: {
30 | 'ember-source': '~4.12.0',
31 | },
32 | },
33 | },
34 | {
35 | name: 'ember-lts-5.4',
36 | npm: {
37 | devDependencies: {
38 | 'ember-source': '~5.4.0',
39 | },
40 | },
41 | },
42 | {
43 | name: 'ember-release',
44 | npm: {
45 | devDependencies: {
46 | 'ember-source': await getChannelURL('release'),
47 | },
48 | },
49 | },
50 | {
51 | name: 'ember-beta',
52 | npm: {
53 | devDependencies: {
54 | 'ember-source': await getChannelURL('beta'),
55 | },
56 | },
57 | },
58 | {
59 | name: 'ember-canary',
60 | npm: {
61 | devDependencies: {
62 | 'ember-source': await getChannelURL('canary'),
63 | },
64 | },
65 | },
66 | embroiderSafe(),
67 | embroiderOptimized(),
68 | ],
69 | };
70 | };
71 |
--------------------------------------------------------------------------------
/ember-resize-modifier/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | root: true,
5 | // Only use overrides
6 | // https://github.com/ember-cli/eslint-plugin-ember?tab=readme-ov-file#gtsgjs
7 | overrides: [
8 | {
9 | files: ['**/*.js'],
10 | env: { browser: true },
11 | parser: '@babel/eslint-parser',
12 | parserOptions: {
13 | ecmaVersion: 'latest',
14 | sourceType: 'module',
15 | babelOptions: {
16 | root: __dirname,
17 | },
18 | },
19 | plugins: ['ember', 'import'],
20 | extends: [
21 | 'eslint:recommended',
22 | 'plugin:ember/recommended',
23 | 'plugin:prettier/recommended',
24 | ],
25 | rules: {
26 | // require relative imports use full extensions
27 | 'import/extensions': ['error', 'always', { ignorePackages: true }],
28 | // Add any custom rules here
29 | },
30 | },
31 | {
32 | files: ['**/*.gjs'],
33 | parser: 'ember-eslint-parser',
34 | plugins: ['ember', 'import'],
35 | extends: [
36 | 'eslint:recommended',
37 | 'plugin:ember/recommended',
38 | 'plugin:ember/recommended-gjs',
39 | 'plugin:prettier/recommended',
40 | ],
41 | rules: {
42 | // require relative imports use full extensions
43 | 'import/extensions': ['error', 'always', { ignorePackages: true }],
44 | // Add any custom rules here
45 | },
46 | },
47 | // node files
48 | {
49 | files: [
50 | './.eslintrc.cjs',
51 | './.prettierrc.cjs',
52 | './.template-lintrc.cjs',
53 | './addon-main.cjs',
54 | ],
55 | parserOptions: {
56 | sourceType: 'script',
57 | },
58 | env: {
59 | browser: false,
60 | node: true,
61 | },
62 | plugins: ['n'],
63 | extends: [
64 | 'eslint:recommended',
65 | 'plugin:n/recommended',
66 | 'plugin:prettier/recommended',
67 | ],
68 | },
69 | ],
70 | };
71 |
--------------------------------------------------------------------------------
/ember-resize-modifier/src/modifiers/did-resize.js:
--------------------------------------------------------------------------------
1 | import Modifier from 'ember-modifier';
2 | import { registerDestructor } from '@ember/destroyable';
3 |
4 | export default class DidResizeModifier extends Modifier {
5 | // Public API
6 | element;
7 | handler;
8 | options = {};
9 |
10 | // Private API
11 | static observer = null;
12 | static handlers = null;
13 |
14 | constructor() {
15 | super(...arguments);
16 |
17 | if (!('ResizeObserver' in window)) {
18 | return;
19 | }
20 |
21 | if (!DidResizeModifier.observer) {
22 | DidResizeModifier.handlers = new WeakMap();
23 | DidResizeModifier.observer = new ResizeObserver((entries, observer) => {
24 | window.requestAnimationFrame(() => {
25 | for (let entry of entries) {
26 | const handler = DidResizeModifier.handlers.get(entry.target);
27 | if (handler) handler(entry, observer);
28 | }
29 | });
30 | });
31 | }
32 |
33 | registerDestructor(this, unobserve);
34 | }
35 |
36 | modify(element, positional /*, named*/) {
37 | unobserve(this);
38 |
39 | this.element = element;
40 |
41 | const [handler, options] = positional;
42 |
43 | // Save arguments for when we need them
44 | this.handler = handler;
45 | this.options = options || this.options;
46 |
47 | this.observe();
48 | }
49 |
50 | observe() {
51 | if (DidResizeModifier.observer) {
52 | this.addHandler();
53 | DidResizeModifier.observer.observe(this.element, this.options);
54 | }
55 | }
56 |
57 | addHandler() {
58 | DidResizeModifier.handlers.set(this.element, this.handler);
59 | }
60 |
61 | removeHandler() {
62 | DidResizeModifier.handlers.delete(this.element);
63 | }
64 | }
65 |
66 | /**
67 | *
68 | * @param {DidResizeModifier} instance
69 | */
70 | function unobserve(instance) {
71 | if (instance.element && DidResizeModifier.observer) {
72 | DidResizeModifier.observer.unobserve(instance.element);
73 | instance.removeHandler();
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | - master
8 | pull_request: {}
9 |
10 | concurrency:
11 | group: ci-${{ github.head_ref || github.ref }}
12 | cancel-in-progress: true
13 |
14 | jobs:
15 | test:
16 | name: "Tests"
17 | runs-on: ubuntu-latest
18 | timeout-minutes: 10
19 |
20 | steps:
21 | - uses: actions/checkout@v4
22 | - uses: pnpm/action-setup@v4
23 | - uses: actions/setup-node@v4
24 | with:
25 | node-version: 18
26 | cache: pnpm
27 | - name: Install Dependencies
28 | run: pnpm install --frozen-lockfile
29 | - name: Lint
30 | run: pnpm lint
31 | - name: Run Tests
32 | run: pnpm test
33 |
34 | floating:
35 | name: "Floating Dependencies"
36 | runs-on: ubuntu-latest
37 | timeout-minutes: 10
38 |
39 | steps:
40 | - uses: actions/checkout@v4
41 | - uses: pnpm/action-setup@v4
42 | - uses: actions/setup-node@v4
43 | with:
44 | node-version: 18
45 | cache: pnpm
46 | - name: Install Dependencies
47 | run: pnpm install --no-lockfile
48 | - name: Run Tests
49 | run: pnpm test
50 |
51 | try-scenarios:
52 | name: ${{ matrix.try-scenario }}
53 | runs-on: ubuntu-latest
54 | needs: 'test'
55 | timeout-minutes: 10
56 |
57 | strategy:
58 | fail-fast: false
59 | matrix:
60 | try-scenario:
61 | - ember-lts-4.4
62 | - ember-lts-4.8
63 | - ember-lts-4.12
64 | - ember-lts-5.4
65 | - ember-release
66 | - ember-beta
67 | - ember-canary
68 | - embroider-safe
69 | - embroider-optimized
70 |
71 | steps:
72 | - uses: actions/checkout@v4
73 | - uses: pnpm/action-setup@v4
74 | - uses: actions/setup-node@v4
75 | with:
76 | node-version: 18
77 | cache: pnpm
78 | - name: Install Dependencies
79 | run: pnpm install --frozen-lockfile
80 | - name: Run Tests
81 | run: ./node_modules/.bin/ember try:one ${{ matrix.try-scenario }} --skip-cleanup
82 | working-directory: test-app
83 |
--------------------------------------------------------------------------------
/ember-resize-modifier/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ember-resize-modifier",
3 | "version": "0.0.0",
4 | "description": "The default blueprint for Embroider v2 addons.",
5 | "keywords": [
6 | "ember-addon"
7 | ],
8 | "repository": "",
9 | "license": "MIT",
10 | "author": "",
11 | "exports": {
12 | ".": "./dist/index.js",
13 | "./*": "./dist/*.js",
14 | "./addon-main.js": "./addon-main.cjs"
15 | },
16 | "files": [
17 | "addon-main.cjs",
18 | "declarations",
19 | "dist"
20 | ],
21 | "scripts": {
22 | "build": "rollup --config",
23 | "lint": "concurrently 'pnpm:lint:*(!fix)' --names 'lint:'",
24 | "lint:fix": "concurrently 'pnpm:lint:*:fix' --names 'fix:'",
25 | "lint:hbs": "ember-template-lint . --no-error-on-unmatched-pattern",
26 | "lint:hbs:fix": "ember-template-lint . --fix --no-error-on-unmatched-pattern",
27 | "lint:js": "eslint . --cache",
28 | "lint:js:fix": "eslint . --fix",
29 | "prepare": "pnpm run build",
30 | "prepack": "rollup --config",
31 | "start": "rollup --config --watch",
32 | "test": "echo 'A v2 addon does not have tests, run tests in test-app'"
33 | },
34 | "dependencies": {
35 | "@embroider/addon-shim": "^1.8.7",
36 | "decorator-transforms": "^2.2.2",
37 | "ember-modifier": "^4.2.0"
38 | },
39 | "devDependencies": {
40 | "@babel/core": "^7.25.7",
41 | "@babel/eslint-parser": "^7.25.7",
42 | "@babel/runtime": "^7.25.7",
43 | "@embroider/addon-dev": "^6.0.0",
44 | "@rollup/plugin-babel": "^6.0.4",
45 | "babel-plugin-ember-template-compilation": "^2.3.0",
46 | "concurrently": "^9.0.1",
47 | "ember-template-lint": "^6.0.0",
48 | "eslint": "^8.56.0",
49 | "eslint-config-prettier": "^9.1.0",
50 | "eslint-plugin-ember": "^12.2.1",
51 | "eslint-plugin-import": "^2.31.0",
52 | "eslint-plugin-n": "^17.10.3",
53 | "eslint-plugin-prettier": "^5.1.3",
54 | "prettier": "^3.2.5",
55 | "prettier-plugin-ember-template-tag": "^2.0.2",
56 | "rollup": "^4.24.0",
57 | "rollup-plugin-copy": "^3.5.0"
58 | },
59 | "publishConfig": {
60 | "registry": "https://registry.npmjs.org"
61 | },
62 | "ember": {
63 | "edition": "octane"
64 | },
65 | "ember-addon": {
66 | "version": 2,
67 | "type": "addon",
68 | "main": "addon-main.cjs",
69 | "app-js": {
70 | "./modifiers/did-resize.js": "./dist/_app_/modifiers/did-resize.js"
71 | }
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/RELEASE.md:
--------------------------------------------------------------------------------
1 | # Release
2 |
3 | Releases are mostly automated using
4 | [release-it](https://github.com/release-it/release-it/) and
5 | [lerna-changelog](https://github.com/lerna/lerna-changelog/).
6 |
7 |
8 | ## Preparation
9 |
10 | Since the majority of the actual release process is automated, the primary
11 | remaining task prior to releasing is confirming that all pull requests that
12 | have been merged since the last release have been labeled with the appropriate
13 | `lerna-changelog` labels and the titles have been updated to ensure they
14 | represent something that would make sense to our users. Some great information
15 | on why this is important can be found at
16 | [keepachangelog.com](https://keepachangelog.com/en/1.0.0/), but the overall
17 | guiding principle here is that changelogs are for humans, not machines.
18 |
19 | When reviewing merged PR's the labels to be used are:
20 |
21 | * breaking - Used when the PR is considered a breaking change.
22 | * enhancement - Used when the PR adds a new feature or enhancement.
23 | * bug - Used when the PR fixes a bug included in a previous release.
24 | * documentation - Used when the PR adds or updates documentation.
25 | * internal - Used for internal changes that still require a mention in the
26 | changelog/release notes.
27 |
28 |
29 | ## Release
30 |
31 | Once the prep work is completed, the actual release is straight forward:
32 |
33 | * First ensure that you have `release-it` installed globally, generally done by
34 | using one of the following commands:
35 |
36 | ```
37 | # using https://volta.sh
38 | volta install release-it
39 |
40 | # using Yarn
41 | yarn global add release-it
42 |
43 | # using npm
44 | npm install --global release-it
45 | ```
46 |
47 | * Second, ensure that you have installed your projects dependencies:
48 |
49 | ```
50 | yarn install
51 | ```
52 |
53 | * And last (but not least 😁) do your release. It requires a
54 | [GitHub personal access token](https://github.com/settings/tokens) as
55 | `$GITHUB_AUTH` environment variable. Only "repo" access is needed; no "admin"
56 | or other scopes are required.
57 |
58 | ```
59 | export GITHUB_AUTH="f941e0..."
60 | release-it
61 | ```
62 |
63 | [release-it](https://github.com/release-it/release-it/) manages the actual
64 | release process. It will prompt you to to choose the version number after which
65 | you will have the chance to hand tweak the changelog to be used (for the
66 | `CHANGELOG.md` and GitHub release), then `release-it` continues on to tagging,
67 | pushing the tag and commits, etc.
68 |
--------------------------------------------------------------------------------
/ember-resize-modifier/rollup.config.mjs:
--------------------------------------------------------------------------------
1 | import { babel } from '@rollup/plugin-babel';
2 | import copy from 'rollup-plugin-copy';
3 | import { Addon } from '@embroider/addon-dev/rollup';
4 |
5 | const addon = new Addon({
6 | srcDir: 'src',
7 | destDir: 'dist',
8 | });
9 |
10 | export default {
11 | // This provides defaults that work well alongside `publicEntrypoints` below.
12 | // You can augment this if you need to.
13 | output: addon.output(),
14 |
15 | plugins: [
16 | // These are the modules that users should be able to import from your
17 | // addon. Anything not listed here may get optimized away.
18 | // By default all your JavaScript modules (**/*.js) will be importable.
19 | // But you are encouraged to tweak this to only cover the modules that make
20 | // up your addon's public API. Also make sure your package.json#exports
21 | // is aligned to the config here.
22 | // See https://github.com/embroider-build/embroider/blob/main/docs/v2-faq.md#how-can-i-define-the-public-exports-of-my-addon
23 | addon.publicEntrypoints(['**/*.js', 'index.js']),
24 |
25 | // These are the modules that should get reexported into the traditional
26 | // "app" tree. Things in here should also be in publicEntrypoints above, but
27 | // not everything in publicEntrypoints necessarily needs to go here.
28 | addon.appReexports([
29 | 'components/**/*.js',
30 | 'helpers/**/*.js',
31 | 'modifiers/**/*.js',
32 | 'services/**/*.js',
33 | ]),
34 |
35 | // Follow the V2 Addon rules about dependencies. Your code can import from
36 | // `dependencies` and `peerDependencies` as well as standard Ember-provided
37 | // package names.
38 | addon.dependencies(),
39 |
40 | // This babel config should *not* apply presets or compile away ES modules.
41 | // It exists only to provide development niceties for you, like automatic
42 | // template colocation.
43 | //
44 | // By default, this will load the actual babel config from the file
45 | // babel.config.json.
46 | babel({
47 | extensions: ['.js', '.gjs'],
48 | babelHelpers: 'bundled',
49 | }),
50 |
51 | // Ensure that standalone .hbs files are properly integrated as Javascript.
52 | addon.hbs(),
53 |
54 | // Ensure that .gjs files are properly integrated as Javascript
55 | addon.gjs(),
56 |
57 | // addons are allowed to contain imports of .css files, which we want rollup
58 | // to leave alone and keep in the published output.
59 | addon.keepAssets(['**/*.css']),
60 |
61 | // Remove leftover build artifacts when starting a new build.
62 | addon.clean(),
63 |
64 | // Copy Readme and License into published package
65 | copy({
66 | targets: [
67 | { src: '../README.md', dest: '.' },
68 | { src: '../LICENSE.md', dest: '.' },
69 | ],
70 | }),
71 | ],
72 | };
73 |
--------------------------------------------------------------------------------
/docs-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-app",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "Test app for ember-resize-modifier addon",
6 | "repository": "",
7 | "license": "MIT",
8 | "author": "",
9 | "directories": {
10 | "doc": "doc",
11 | "test": "tests"
12 | },
13 | "scripts": {
14 | "build": "ember build --environment=production",
15 | "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\"",
16 | "lint:css": "stylelint \"**/*.css\"",
17 | "lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
18 | "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\"",
19 | "lint:hbs": "ember-template-lint .",
20 | "lint:hbs:fix": "ember-template-lint . --fix",
21 | "lint:js": "eslint . --cache",
22 | "lint:js:fix": "eslint . --fix",
23 | "start": "ember serve",
24 | "test:ember": "ember test"
25 | },
26 | "devDependencies": {
27 | "@babel/core": "^7.25.7",
28 | "@babel/eslint-parser": "^7.25.7",
29 | "@babel/plugin-proposal-decorators": "^7.25.7",
30 | "@ember/optional-features": "^2.1.0",
31 | "@ember/string": "^4.0.0",
32 | "@ember/test-helpers": "^4.0.4",
33 | "@embroider/test-setup": "^3.0.1",
34 | "@glimmer/component": "^1.1.2",
35 | "@glimmer/tracking": "^1.1.2",
36 | "broccoli-asset-rev": "^3.0.0",
37 | "concurrently": "^9.0.1",
38 | "ember-auto-import": "^2.8.1",
39 | "ember-cli": "~5.12.0",
40 | "ember-cli-app-version": "^7.0.0",
41 | "ember-cli-babel": "^8.2.0",
42 | "ember-cli-clean-css": "^3.0.0",
43 | "ember-cli-dependency-checker": "^3.3.2",
44 | "ember-cli-fastboot": "^4.1.5",
45 | "ember-cli-htmlbars": "^6.3.0",
46 | "ember-cli-inject-live-reload": "^2.1.0",
47 | "ember-cli-sri": "^2.1.1",
48 | "ember-cli-terser": "^4.0.2",
49 | "ember-data": "~5.3.8",
50 | "ember-fetch": "^8.1.2",
51 | "ember-load-initializers": "^3.0.1",
52 | "ember-modifier": "^4.2.0",
53 | "ember-page-title": "^8.2.3",
54 | "ember-qunit": "^8.1.0",
55 | "ember-resize-modifier": "workspace:*",
56 | "ember-resolver": "^13.0.2",
57 | "ember-source": "~5.12.0",
58 | "ember-source-channel-url": "^3.0.0",
59 | "ember-template-lint": "^6.0.0",
60 | "ember-try": "^3.0.0",
61 | "eslint": "^8.57.0",
62 | "eslint-config-prettier": "^9.1.0",
63 | "eslint-plugin-ember": "^12.2.1",
64 | "eslint-plugin-n": "^17.10.3",
65 | "eslint-plugin-prettier": "^5.1.3",
66 | "eslint-plugin-qunit": "^8.1.2",
67 | "field-guide": "^3.0.0",
68 | "field-guide-default-template": "^3.0.0",
69 | "loader.js": "^4.7.0",
70 | "prember": "^2.1.0",
71 | "prettier": "^3.3.2",
72 | "qunit": "^2.22.0",
73 | "qunit-dom": "^3.2.1",
74 | "sinon": "^19.0.2",
75 | "stylelint": "^16.9.0",
76 | "stylelint-config-standard": "^36.0.1",
77 | "stylelint-prettier": "^5.0.2",
78 | "tracked-built-ins": "^3.3.0",
79 | "webpack": "^5.95.0"
80 | },
81 | "engines": {
82 | "node": ">= 18"
83 | },
84 | "ember": {
85 | "edition": "octane"
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/test-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-app",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "Test app for ember-resize-modifier addon",
6 | "repository": "",
7 | "license": "MIT",
8 | "author": "",
9 | "directories": {
10 | "doc": "doc",
11 | "test": "tests"
12 | },
13 | "scripts": {
14 | "build": "ember build --environment=production",
15 | "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\"",
16 | "lint:css": "stylelint \"**/*.css\"",
17 | "lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
18 | "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\"",
19 | "lint:hbs": "ember-template-lint .",
20 | "lint:hbs:fix": "ember-template-lint . --fix",
21 | "lint:js": "eslint . --cache",
22 | "lint:js:fix": "eslint . --fix",
23 | "start": "ember serve -p 0",
24 | "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\"",
25 | "test:ember": "ember test"
26 | },
27 | "devDependencies": {
28 | "@babel/core": "^7.25.7",
29 | "@babel/eslint-parser": "^7.25.7",
30 | "@babel/plugin-proposal-decorators": "^7.25.7",
31 | "@ember/optional-features": "^2.1.0",
32 | "@ember/string": "^4.0.0",
33 | "@ember/test-helpers": "^4.0.4",
34 | "@embroider/test-setup": "^3.0.1",
35 | "@glimmer/component": "^1.1.2",
36 | "@glimmer/tracking": "^1.1.2",
37 | "broccoli-asset-rev": "^3.0.0",
38 | "concurrently": "^9.0.1",
39 | "ember-auto-import": "^2.8.1",
40 | "ember-cli": "~5.12.0",
41 | "ember-cli-app-version": "^7.0.0",
42 | "ember-cli-babel": "^8.2.0",
43 | "ember-cli-clean-css": "^3.0.0",
44 | "ember-cli-dependency-checker": "^3.3.2",
45 | "ember-cli-htmlbars": "^6.3.0",
46 | "ember-cli-inject-live-reload": "^2.1.0",
47 | "ember-cli-sri": "^2.1.1",
48 | "ember-cli-terser": "^4.0.2",
49 | "ember-data": "~5.3.8",
50 | "ember-fetch": "^8.1.2",
51 | "ember-load-initializers": "^3.0.1",
52 | "ember-modifier": "^4.2.0",
53 | "ember-page-title": "^8.2.3",
54 | "ember-qunit": "^8.1.0",
55 | "ember-resize-modifier": "workspace:*",
56 | "ember-resolver": "^13.0.2",
57 | "ember-source": "~5.12.0",
58 | "ember-source-channel-url": "^3.0.0",
59 | "ember-template-lint": "^6.0.0",
60 | "ember-try": "^3.0.0",
61 | "eslint": "^8.57.0",
62 | "eslint-config-prettier": "^9.1.0",
63 | "eslint-plugin-ember": "^12.2.1",
64 | "eslint-plugin-n": "^17.10.3",
65 | "eslint-plugin-prettier": "^5.1.3",
66 | "eslint-plugin-qunit": "^8.1.2",
67 | "loader.js": "^4.7.0",
68 | "prettier": "^3.3.2",
69 | "qunit": "^2.22.0",
70 | "qunit-dom": "^3.2.1",
71 | "sinon": "^19.0.2",
72 | "stylelint": "^16.9.0",
73 | "stylelint-config-standard": "^36.0.1",
74 | "stylelint-prettier": "^5.0.2",
75 | "tracked-built-ins": "^3.3.0",
76 | "webpack": "^5.95.0"
77 | },
78 | "dependenciesMeta": {
79 | "ember-resize-modifier": {
80 | "injected": true
81 | }
82 | },
83 | "engines": {
84 | "node": ">= 18"
85 | },
86 | "ember": {
87 | "edition": "octane"
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/docs-app/tests/integration/modifiers/did-resize-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { setupRenderingTest } from 'ember-qunit';
3 | import { clearRender, find, render } from '@ember/test-helpers';
4 | import hbs from 'htmlbars-inline-precompile';
5 | import sinon from 'sinon';
6 | import DidResizeModifier from 'ember-resize-modifier/modifiers/did-resize';
7 |
8 | module('Integration | Modifier | did-resize', function (hooks) {
9 | setupRenderingTest(hooks);
10 |
11 | let resizeCallback = null;
12 | let observeStub = sinon.stub();
13 | let unobserveStub = sinon.stub();
14 | let disconnectStub = sinon.stub();
15 | let resizeObserver = window.ResizeObserver;
16 | let originalRequestAnimationFrame = window.requestAnimationFrame;
17 | let mockResizeObserver = class MockResizeObserver {
18 | constructor(callback) {
19 | resizeCallback = callback;
20 | }
21 |
22 | observe = observeStub;
23 | unobserve = unobserveStub;
24 | disconnect = disconnectStub;
25 | };
26 |
27 | hooks.beforeEach(function () {
28 | observeStub.reset();
29 | unobserveStub.reset();
30 | disconnectStub.reset();
31 | this.resizeStub = sinon.stub();
32 | window.ResizeObserver = mockResizeObserver;
33 | window.requestAnimationFrame = (callback) => callback();
34 |
35 | // reset static properties to make sure every test case runs independently
36 | DidResizeModifier.observer = null;
37 | DidResizeModifier.handlers = null;
38 | resizeCallback = null;
39 | });
40 |
41 | hooks.afterEach(function () {
42 | window.ResizeObserver = resizeObserver;
43 | window.requestAnimationFrame = originalRequestAnimationFrame;
44 | });
45 |
46 | test('modifier integrates with ResizeObserver', async function (assert) {
47 | await render(hbs``);
48 |
49 | assert.ok(resizeCallback, 'ResizeObserver received callback');
50 | assert.ok(observeStub.calledOnce, 'observe was called');
51 |
52 | let [element, options] = observeStub.args[0];
53 |
54 | assert.ok(element, 'element was passed to observe');
55 | assert.strictEqual(
56 | Object.keys(options).length,
57 | 0,
58 | 'empty object passed as default options',
59 | );
60 | });
61 |
62 | test('modifier triggers handler when ResizeObserver fires callback', async function (assert) {
63 | await render(
64 | hbs``,
65 | );
66 | let entry = { target: find('#test-element') };
67 | let fakeObserver = { observe: {} };
68 |
69 | resizeCallback([entry], fakeObserver);
70 |
71 | assert.ok(
72 | this.resizeStub.calledOnceWith(entry, fakeObserver),
73 | 'handler fired with correct parameters',
74 | );
75 | });
76 |
77 | test('modifier passes options to ResizeObserver', async function (assert) {
78 | this.options = { box: 'content-box' };
79 |
80 | await render(hbs``);
81 |
82 | let [element, options] = observeStub.args[0];
83 |
84 | assert.ok(element, 'element was passed to observe');
85 | assert.deepEqual(options, this.options, 'options were correctly passed');
86 | });
87 |
88 | test('modifier graceful no-op if ResizeObserver does not exist', async function (assert) {
89 | delete window.ResizeObserver;
90 |
91 | await render(hbs``);
92 | assert.notOk(resizeCallback, 'no callback received');
93 | assert.notOk(observeStub.calledOnce, 'observe was not called');
94 | });
95 |
96 | test('modifier calls unobserve when arguments change', async function (assert) {
97 | await render(hbs``);
98 |
99 | assert.notOk(unobserveStub.called, 'unobserve not called yet');
100 | assert.ok(observeStub.calledOnce, 'observe was called');
101 |
102 | this.set('resizeStub', sinon.stub());
103 |
104 | assert.ok(unobserveStub.calledOnce, 'unobserve called');
105 | assert.ok(observeStub.calledTwice, 'observe was called again');
106 | });
107 |
108 | test('handlers are setup and called correctly when multiple modifiers are present', async function (assert) {
109 | this.setProperties({
110 | resizeStub2: sinon.stub(),
111 | resizeStub3: sinon.stub(),
112 | });
113 |
114 | await render(
115 | hbs`
116 |
117 | `,
118 | );
119 |
120 | let entries = ['#test-element1', '#test-element2', '#test-element3'].map(
121 | (elementId) => {
122 | return { target: find(elementId) };
123 | },
124 | );
125 | let fakeObserver = { observe: {} };
126 |
127 | // trigger resize on all elements
128 | resizeCallback(entries, fakeObserver);
129 |
130 | assert.ok(this.resizeStub.calledOnce, 'First handler was called only once');
131 | assert.ok(
132 | this.resizeStub2.calledOnce,
133 | 'Second handler was called only once',
134 | );
135 | assert.ok(
136 | this.resizeStub3.calledOnce,
137 | 'Third handler was called only once',
138 | );
139 |
140 | // trigger resize only on the first element
141 | resizeCallback([entries[0]], fakeObserver);
142 | assert.ok(
143 | this.resizeStub.calledTwice,
144 | 'First handler was called a second time',
145 | );
146 | assert.notOk(
147 | this.resizeStub2.calledTwice,
148 | 'Second handler was not called a second time',
149 | );
150 | assert.notOk(
151 | this.resizeStub3.calledTwice,
152 | 'Third handler was not called a second time',
153 | );
154 | });
155 |
156 | test('element gets unobserved before removing from the DOM', async function (assert) {
157 | await render(
158 | hbs``,
159 | );
160 | let element = find('#test-element');
161 | await clearRender();
162 |
163 | assert.ok(
164 | unobserveStub.calledOnceWith(element),
165 | 'unobserve is called with the HTMLElement of the modifier',
166 | );
167 |
168 | let entry = { target: element };
169 | let fakeObserver = { observe: {} };
170 | resizeCallback([entry], fakeObserver);
171 | assert.notOk(
172 | this.resizeStub.called,
173 | 'handler function is not called after element is removed from the DOM',
174 | );
175 | });
176 | });
177 |
--------------------------------------------------------------------------------
/test-app/tests/integration/modifiers/did-resize-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { setupRenderingTest } from 'ember-qunit';
3 | import { clearRender, find, render } from '@ember/test-helpers';
4 | import hbs from 'htmlbars-inline-precompile';
5 | import sinon from 'sinon';
6 | import DidResizeModifier from 'ember-resize-modifier/modifiers/did-resize';
7 |
8 | module('Integration | Modifier | did-resize', function (hooks) {
9 | setupRenderingTest(hooks);
10 |
11 | let resizeCallback = null;
12 | let observeStub = sinon.stub();
13 | let unobserveStub = sinon.stub();
14 | let disconnectStub = sinon.stub();
15 | let resizeObserver = window.ResizeObserver;
16 | let originalRequestAnimationFrame = window.requestAnimationFrame;
17 | let mockResizeObserver = class MockResizeObserver {
18 | constructor(callback) {
19 | resizeCallback = callback;
20 | }
21 |
22 | observe = observeStub;
23 | unobserve = unobserveStub;
24 | disconnect = disconnectStub;
25 | };
26 |
27 | hooks.beforeEach(function () {
28 | observeStub.reset();
29 | unobserveStub.reset();
30 | disconnectStub.reset();
31 | this.resizeStub = sinon.stub();
32 | window.ResizeObserver = mockResizeObserver;
33 | window.requestAnimationFrame = (callback) => callback();
34 |
35 | // reset static properties to make sure every test case runs independently
36 | DidResizeModifier.observer = null;
37 | DidResizeModifier.handlers = null;
38 | resizeCallback = null;
39 | });
40 |
41 | hooks.afterEach(function () {
42 | window.ResizeObserver = resizeObserver;
43 | window.requestAnimationFrame = originalRequestAnimationFrame;
44 | });
45 |
46 | test('modifier integrates with ResizeObserver', async function (assert) {
47 | await render(hbs``);
48 |
49 | assert.ok(resizeCallback, 'ResizeObserver received callback');
50 | assert.ok(observeStub.calledOnce, 'observe was called');
51 |
52 | let [element, options] = observeStub.args[0];
53 |
54 | assert.ok(element, 'element was passed to observe');
55 | assert.strictEqual(
56 | Object.keys(options).length,
57 | 0,
58 | 'empty object passed as default options',
59 | );
60 | });
61 |
62 | test('modifier triggers handler when ResizeObserver fires callback', async function (assert) {
63 | await render(
64 | hbs``,
65 | );
66 | let entry = { target: find('#test-element') };
67 | let fakeObserver = { observe: {} };
68 |
69 | resizeCallback([entry], fakeObserver);
70 |
71 | assert.ok(
72 | this.resizeStub.calledOnceWith(entry, fakeObserver),
73 | 'handler fired with correct parameters',
74 | );
75 | });
76 |
77 | test('modifier passes options to ResizeObserver', async function (assert) {
78 | this.options = { box: 'content-box' };
79 |
80 | await render(hbs``);
81 |
82 | let [element, options] = observeStub.args[0];
83 |
84 | assert.ok(element, 'element was passed to observe');
85 | assert.deepEqual(options, this.options, 'options were correctly passed');
86 | });
87 |
88 | test('modifier graceful no-op if ResizeObserver does not exist', async function (assert) {
89 | delete window.ResizeObserver;
90 |
91 | await render(hbs``);
92 | assert.notOk(resizeCallback, 'no callback received');
93 | assert.notOk(observeStub.calledOnce, 'observe was not called');
94 | });
95 |
96 | test('modifier calls unobserve when arguments change', async function (assert) {
97 | await render(hbs``);
98 |
99 | assert.notOk(unobserveStub.called, 'unobserve not called yet');
100 | assert.ok(observeStub.calledOnce, 'observe was called');
101 |
102 | this.set('resizeStub', sinon.stub());
103 |
104 | assert.ok(unobserveStub.calledOnce, 'unobserve called');
105 | assert.ok(observeStub.calledTwice, 'observe was called again');
106 | });
107 |
108 | test('handlers are setup and called correctly when multiple modifiers are present', async function (assert) {
109 | this.setProperties({
110 | resizeStub2: sinon.stub(),
111 | resizeStub3: sinon.stub(),
112 | });
113 |
114 | await render(
115 | hbs`
116 |
117 | `,
118 | );
119 |
120 | let entries = ['#test-element1', '#test-element2', '#test-element3'].map(
121 | (elementId) => {
122 | return { target: find(elementId) };
123 | },
124 | );
125 | let fakeObserver = { observe: {} };
126 |
127 | // trigger resize on all elements
128 | resizeCallback(entries, fakeObserver);
129 |
130 | assert.ok(this.resizeStub.calledOnce, 'First handler was called only once');
131 | assert.ok(
132 | this.resizeStub2.calledOnce,
133 | 'Second handler was called only once',
134 | );
135 | assert.ok(
136 | this.resizeStub3.calledOnce,
137 | 'Third handler was called only once',
138 | );
139 |
140 | // trigger resize only on the first element
141 | resizeCallback([entries[0]], fakeObserver);
142 | assert.ok(
143 | this.resizeStub.calledTwice,
144 | 'First handler was called a second time',
145 | );
146 | assert.notOk(
147 | this.resizeStub2.calledTwice,
148 | 'Second handler was not called a second time',
149 | );
150 | assert.notOk(
151 | this.resizeStub3.calledTwice,
152 | 'Third handler was not called a second time',
153 | );
154 | });
155 |
156 | test('element gets unobserved before removing from the DOM', async function (assert) {
157 | await render(
158 | hbs``,
159 | );
160 | let element = find('#test-element');
161 | await clearRender();
162 |
163 | assert.ok(
164 | unobserveStub.calledOnceWith(element),
165 | 'unobserve is called with the HTMLElement of the modifier',
166 | );
167 |
168 | let entry = { target: element };
169 | let fakeObserver = { observe: {} };
170 | resizeCallback([entry], fakeObserver);
171 | assert.notOk(
172 | this.resizeStub.called,
173 | 'handler function is not called after element is removed from the DOM',
174 | );
175 | });
176 | });
177 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## v0.7.1 (2023-10-11)
2 |
3 | #### :boom: Breaking Change
4 | * [#821](https://github.com/elwayman02/ember-resize-modifier/pull/821) Ember 5 Dependencies + Drop 3.28 Support ([@elwayman02](https://github.com/elwayman02))
5 | * [#822](https://github.com/elwayman02/ember-resize-modifier/pull/822) Ember 5 Partial Update + Drop Node 14 Support ([@elwayman02](https://github.com/elwayman02))
6 |
7 | #### :rocket: Enhancement
8 | * [#811](https://github.com/elwayman02/ember-resize-modifier/pull/811) Add ember-source 5 support ([@hexadecy](https://github.com/hexadecy))
9 |
10 | #### :bug: Bug Fix
11 | * [#817](https://github.com/elwayman02/ember-resize-modifier/pull/817) Embroider compatible with dynamic components ([@hexadecy](https://github.com/hexadecy))
12 | * [#761](https://github.com/elwayman02/ember-resize-modifier/pull/761) exclude .yarn folder from published package ([@patricklx](https://github.com/patricklx))
13 |
14 | #### :house: Internal
15 | * [#821](https://github.com/elwayman02/ember-resize-modifier/pull/821) Ember 5 Dependencies + Drop 3.28 Support ([@elwayman02](https://github.com/elwayman02))
16 | * [#822](https://github.com/elwayman02/ember-resize-modifier/pull/822) Ember 5 Partial Update + Drop Node 14 Support ([@elwayman02](https://github.com/elwayman02))
17 | * [#820](https://github.com/elwayman02/ember-resize-modifier/pull/820) prettier v3 ([@elwayman02](https://github.com/elwayman02))
18 | * [#818](https://github.com/elwayman02/ember-resize-modifier/pull/818) ember-try v3 ([@elwayman02](https://github.com/elwayman02))
19 | * [#817](https://github.com/elwayman02/ember-resize-modifier/pull/817) Embroider compatible with dynamic components ([@hexadecy](https://github.com/hexadecy))
20 |
21 | #### Committers: 3
22 | - Jordan Hawker ([@elwayman02](https://github.com/elwayman02))
23 | - Michel Couillard ([@hexadecy](https://github.com/hexadecy))
24 | - Patrick Pircher ([@patricklx](https://github.com/patricklx))
25 |
26 | ## v0.6.0 (2023-01-04)
27 |
28 | #### :boom: Breaking Change
29 | * [#632](https://github.com/elwayman02/ember-resize-modifier/pull/632) [skip netlify]: Bump ember-modifier from 3.2.7 to 4.0.0 ([@dependabot[bot]](https://github.com/apps/dependabot))
30 | * [#648](https://github.com/elwayman02/ember-resize-modifier/pull/648) Move ember-auto-import v2 to dep ([@elwayman02](https://github.com/elwayman02))
31 |
32 | #### Committers: 1
33 | - Jordan Hawker ([@elwayman02](https://github.com/elwayman02))
34 |
35 | ## v0.5.0 (2022-12-08)
36 |
37 | #### :boom: Breaking Change
38 | * [#625](https://github.com/elwayman02/ember-resize-modifier/pull/625) Ember 4.9 Upgrade ([@elwayman02](https://github.com/elwayman02))
39 |
40 | #### :house: Internal
41 | * [#625](https://github.com/elwayman02/ember-resize-modifier/pull/625) Ember 4.9 Upgrade ([@elwayman02](https://github.com/elwayman02))
42 | * [#623](https://github.com/elwayman02/ember-resize-modifier/pull/623) ESLint v8 Upgrade ([@elwayman02](https://github.com/elwayman02))
43 |
44 | #### Committers: 1
45 | - Jordan Hawker ([@elwayman02](https://github.com/elwayman02))
46 |
47 | ## v0.4.1 (2022-05-13)
48 |
49 | #### :rocket: Enhancement
50 | * [#514](https://github.com/elwayman02/ember-resize-modifier/pull/514) Performance: avoid creating callbacks for the destructor ([@chriskrycho](https://github.com/chriskrycho))
51 |
52 | #### :bug: Bug Fix
53 | * [#515](https://github.com/elwayman02/ember-resize-modifier/pull/515) Require ember-modifier@^3.2 ([@chriskrycho](https://github.com/chriskrycho))
54 |
55 | #### :house: Internal
56 | * [#514](https://github.com/elwayman02/ember-resize-modifier/pull/514) Performance: avoid creating callbacks for the destructor ([@chriskrycho](https://github.com/chriskrycho))
57 |
58 | #### Committers: 1
59 | - Chris Krycho ([@chriskrycho](https://github.com/chriskrycho))
60 |
61 | ## v0.4.0 (2022-05-13)
62 |
63 | #### :boom: Breaking Change
64 | * [#506](https://github.com/elwayman02/ember-resize-modifier/pull/506) Update ember-modifier to v3 ([@BnitoBzh](https://github.com/BnitoBzh))
65 |
66 | #### :house: Internal
67 | * [#506](https://github.com/elwayman02/ember-resize-modifier/pull/506) Update ember-modifier to v3 ([@BnitoBzh](https://github.com/BnitoBzh))
68 |
69 | #### Committers: 2
70 | - Jordan Hawker ([@elwayman02](https://github.com/elwayman02))
71 | - [@BnitoBzh](https://github.com/BnitoBzh)
72 |
73 | ## v0.3.0 (2021-10-11)
74 |
75 | #### :boom: Breaking Change
76 | * [#377](https://github.com/elwayman02/ember-resize-modifier/pull/377) Ember 3.28 Upgrade ([@elwayman02](https://github.com/elwayman02))
77 |
78 | #### :house: Internal
79 | * [#377](https://github.com/elwayman02/ember-resize-modifier/pull/377) Ember 3.28 Upgrade ([@elwayman02](https://github.com/elwayman02))
80 |
81 | #### Committers: 3
82 | - Jordan Hawker ([@elwayman02](https://github.com/elwayman02))
83 | - Tamas Sule ([@xjmdoo](https://github.com/xjmdoo))
84 | - [@dependabot-preview[bot]](https://github.com/apps/dependabot-preview)
85 |
86 | ## v0.2.0 (2021-03-03)
87 |
88 | #### :rocket: Enhancement
89 | * [#222](https://github.com/elwayman02/ember-resize-modifier/pull/222) Use single ResizeObserver for better performance ([@xjmdoo](https://github.com/xjmdoo))
90 |
91 | #### Committers: 3
92 | - Jordan Hawker ([@elwayman02](https://github.com/elwayman02))
93 | - Tamas Sule ([@xjmdoo](https://github.com/xjmdoo))
94 | - [@dependabot-preview[bot]](https://github.com/apps/dependabot-preview)
95 |
96 | ## v0.1.0 (2021-01-07)
97 |
98 | #### :memo: Documentation
99 | * [#29](https://github.com/elwayman02/ember-resize-modifier/pull/29) Add fastboot & prember to allow direct linking to non-index routes ([@elwayman02](https://github.com/elwayman02))
100 |
101 | #### :house: Internal
102 | * [#178](https://github.com/elwayman02/ember-resize-modifier/pull/178) Update to 3.24 Blueprint ([@elwayman02](https://github.com/elwayman02))
103 | * [#174](https://github.com/elwayman02/ember-resize-modifier/pull/174) Switch from Travis to GitHub Actions ([@elwayman02](https://github.com/elwayman02))
104 |
105 | #### Committers: 3
106 | - Chris Manson ([@mansona](https://github.com/mansona))
107 | - Jordan Hawker ([@elwayman02](https://github.com/elwayman02))
108 | - [@dependabot-preview[bot]](https://github.com/apps/dependabot-preview)
109 |
110 | ## v0.0.2 (2020-05-12)
111 |
112 | #### :memo: Documentation
113 | * [#24](https://github.com/elwayman02/ember-resize-modifier/pull/24) Add install instructions to docs ([@elwayman02](https://github.com/elwayman02))
114 |
115 | #### :house: Internal
116 | * [#25](https://github.com/elwayman02/ember-resize-modifier/pull/25) did-resize Refactoring ([@elwayman02](https://github.com/elwayman02))
117 | * [#22](https://github.com/elwayman02/ember-resize-modifier/pull/22) Set launchEditor to false ([@elwayman02](https://github.com/elwayman02))
118 |
119 | #### Committers: 2
120 | - Jordan Hawker ([@elwayman02](https://github.com/elwayman02))
121 | - [@dependabot-preview[bot]](https://github.com/apps/dependabot-preview)
122 |
123 | ## v0.0.1 (2020-05-11)
124 |
125 | #### :rocket: Enhancement
126 | * [#10](https://github.com/elwayman02/ember-resize-modifier/pull/10) Support options hash ([@elwayman02](https://github.com/elwayman02))
127 | * [#5](https://github.com/elwayman02/ember-resize-modifier/pull/5) Add did-resize modifier ([@elwayman02](https://github.com/elwayman02))
128 |
129 | #### :bug: Bug Fix
130 | * [#17](https://github.com/elwayman02/ember-resize-modifier/pull/17) Call setupSinon in test-helper.js ([@elwayman02](https://github.com/elwayman02))
131 | * [#14](https://github.com/elwayman02/ember-resize-modifier/pull/14) Test fallback ([@elwayman02](https://github.com/elwayman02))
132 |
133 | #### :memo: Documentation
134 | * [#13](https://github.com/elwayman02/ember-resize-modifier/pull/13) Fix Doc Typo ([@elwayman02](https://github.com/elwayman02))
135 | * [#12](https://github.com/elwayman02/ember-resize-modifier/pull/12) Add notice about browser fallback ([@elwayman02](https://github.com/elwayman02))
136 | * [#11](https://github.com/elwayman02/ember-resize-modifier/pull/11) Add a title to the dummy page ([@elwayman02](https://github.com/elwayman02))
137 | * [#10](https://github.com/elwayman02/ember-resize-modifier/pull/10) Support options hash ([@elwayman02](https://github.com/elwayman02))
138 | * [#4](https://github.com/elwayman02/ember-resize-modifier/pull/4) Package and README updates ([@elwayman02](https://github.com/elwayman02))
139 | * [#3](https://github.com/elwayman02/ember-resize-modifier/pull/3) Basic field-guide scaffolding ([@elwayman02](https://github.com/elwayman02))
140 |
141 | #### :house: Internal
142 | * [#17](https://github.com/elwayman02/ember-resize-modifier/pull/17) Call setupSinon in test-helper.js ([@elwayman02](https://github.com/elwayman02))
143 | * [#15](https://github.com/elwayman02/ember-resize-modifier/pull/15) Add `options` to public API more clearly ([@elwayman02](https://github.com/elwayman02))
144 | * [#14](https://github.com/elwayman02/ember-resize-modifier/pull/14) Test fallback ([@elwayman02](https://github.com/elwayman02))
145 | * [#9](https://github.com/elwayman02/ember-resize-modifier/pull/9) Add travis build status ([@elwayman02](https://github.com/elwayman02))
146 | * [#6](https://github.com/elwayman02/ember-resize-modifier/pull/6) Add dependabot config ([@elwayman02](https://github.com/elwayman02))
147 | * [#4](https://github.com/elwayman02/ember-resize-modifier/pull/4) Package and README updates ([@elwayman02](https://github.com/elwayman02))
148 | * [#2](https://github.com/elwayman02/ember-resize-modifier/pull/2) Include Ember 3.8 in ember-try config ([@elwayman02](https://github.com/elwayman02))
149 | * [#1](https://github.com/elwayman02/ember-resize-modifier/pull/1) Release-it config via create-rwjblue-release-it-setup ([@elwayman02](https://github.com/elwayman02))
150 |
151 | #### Committers: 2
152 | - Jordan Hawker ([@elwayman02](https://github.com/elwayman02))
153 | - [@dependabot-preview[bot]](https://github.com/apps/dependabot-preview)
154 |
155 |
156 |
--------------------------------------------------------------------------------