Disabling the modifier

Author: lolmaus

README.md

@@ -26,6 +26,7 @@ For example, if you put a responsive component into a tight sidebar, it will ali
     - [Customizing attribute prefix](#customizing-attribute-prefix)
     - [Using multiple modifiers on the same element](#using-multiple-modifiers-on-the-same-element)
     - [Using both width and height on the Element Query component](#using-both-width-and-height-on-the-element-query-component)
+    - [Disabling](#disabling)
   - [Browser support](#browser-support)
   - [Alternatives](#alternatives)
     - [Comparison](#comparison)
@@ -61,13 +62,15 @@ This addon is in active development.
   * [x] Accepts `dimension`
   * [x] Updates on arugments change
   * [x] Add fool-proof exceptions
+  * [x] Disabling
 * [ ] `<ElementQuery>` component
   * [ ] Exists
   * [ ] Applies attributes to itself
   * [ ] Yields block params
   * [ ] Accepts `sizes`
   * [ ] Accepts `prefix`
   * [ ] Accepts `dimension`
+  * [ ] Disabling
 * [ ] Expose types
 * [ ] CI
 * [ ] npm package
@@ -474,6 +477,25 @@ You can also pass `true` to `@sizesHeight`, which will enable default sizes. The
 
 
 
+### Disabling
+
+Pass a truthy value into `isDisabled` (modifier) or `@isDisabled` (component) to disable element query functionality:
+
+```
+<img
+  {{element-query @isDisabled=true}}
+>
+```
+
+```
+<ElementQuery
+  @isDisabled={{true}}
+>
+</ElementQuery>
+```
+
+
+
 Browser support
 ------------------------------------------------------------------------------
 

addon/-private/modifier.ts

@@ -10,6 +10,7 @@ interface Args extends ModifierArgs {
     sizes?: Sizes;
     prefix?: string;
     dimension?: Dimension;
+    isDisabled?: boolean;
   };
 }
 
@@ -225,7 +226,7 @@ export default class ElementQueryModifier extends Modifier<Args> {
 
   @action didResizeHandler(): void {
     window.requestAnimationFrame(() => {
-      if (!this.isDestroying && !this.isDestroyed) {
+      if (!this.args.named.isDisabled && !this.isDestroying && !this.isDestroyed) {
         this.applyAttributesToElement();
         this.callOnResize();
       }

tests/integration/modifier-test.ts

@@ -5,13 +5,15 @@ import hbs from 'htmlbars-inline-precompile';
 import sinon, { SinonSpy } from 'sinon';
 import { TestContext } from 'ember-test-helpers';
 import { Sizes } from 'ember-element-query/-private/modifier';
+import pause from '../helpers/pause';
 
 interface TestContextCustom extends TestContext {
   callback?: SinonSpy;
   actualWidth?: number;
   actualHeight?: number;
   sizes?: Sizes;
   prefix?: string;
+  isDisabled?: boolean;
 }
 
 module('Integration | Modifier | element-query', function (hooks) {
@@ -75,6 +77,88 @@ module('Integration | Modifier | element-query', function (hooks) {
     assert.ok(true);
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  test('does not call the onResize when isDisabled is initially set', async function (this: TestContextCustom, assert) {
+    let m;
+    let callCount = 0;
+    this.callback = sinon.spy(() => callCount++);
+
+    await render(hbs`
+      {{! template-lint-disable no-inline-styles }}
+      <div
+        id="test-subject"
+        style="width: 300px; height: 100px;"
+        {{element-query onResize=this.callback isDisabled=true}}
+      >
+      </div>
+    `);
+
+    const element = document.getElementById('test-subject');
+    if (!element) throw new Error('Expected element to exist');
+
+    m = 'Element is rendered';
+    assert.ok(true, m);
+
+    await pause(500);
+
+    m = 'Call count';
+    assert.equal(callCount, 0, m);
+
+    m = 'Attr `at-xs` presence';
+    assert.equal(element.getAttribute('at-xs'), null, m);
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  test('stops calling the onResize callback after updating isDisabled after rendering', async function (this: TestContextCustom, assert) {
+    let m;
+    let callCount = 0;
+    this.callback = sinon.spy(() => callCount++);
+    this.set('isDisabled', false);
+
+    await render(hbs`
+      {{! template-lint-disable no-inline-styles }}
+      <div
+        id="test-subject"
+        style="width: 300px; height: 100px;"
+        {{element-query onResize=this.callback isDisabled=this.isDisabled}}
+      >
+      </div>
+    `);
+
+    const element = document.getElementById('test-subject');
+    if (!element) throw new Error('Expected element to exist');
+
+    m = 'Element is rendered';
+    assert.ok(true, m);
+
+    await waitUntil(() => callCount === 1);
+
+    m = 'Callback called once';
+    assert.ok(true, m);
+
+    sinon.assert.calledWithExactly(
+      this.callback.firstCall,
+      sinon.match({
+        element,
+        width: 300,
+        height: 100,
+        ratio: 3,
+      })
+    );
+
+    this.set('isDisabled', true);
+
+    element.style.width = '400px';
+
+    await pause(500);
+
+    m = 'Call count';
+    assert.equal(callCount, 1, m);
+
+    m = 'Attr `at-s` presence';
+    assert.equal(element.getAttribute('at-s'), null, m);
+  });
+
   //
 
   // eslint-disable-next-line @typescript-eslint/no-misused-promises