Merge pull request #18 from evoactivity/use-resize-observer-service

Use resize observer service instead of window resize
evoactivity · Jun 14, 2022 · 7ce7185 · 7ce7185
2 parents 0a2b5f6 + d151d6c
commit 7ce7185
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:fix:*",
     "lint:fix:addon": "yarn workspace ember-fast-marquee run lint:fix",
     "lint:fix:test-app": "yarn workspace test-app run lint:fix",
-    "test": "npm-run-all --aggregate-output --continue-on-error --parallel \"test:!(watch)\"",
+    "test": "KEEP_DATA_TEST_SELECTORS=1 yarn prepare && npm-run-all --aggregate-output --continue-on-error --parallel \"test:!(watch)\"",
     "test:watch": "npm-run-all --aggregate-output --continue-on-error --parallel test:watch:*",
     "test:test-app": "yarn workspace test-app run test",
     "test:watch:test-app": "yarn workspace test-app run test:watch",

diff --git a/packages/ember-fast-marquee/package.json b/packages/ember-fast-marquee/package.json
@@ -31,7 +31,8 @@
   },
   "dependencies": {
     "@embroider/addon-shim": "^1.7.1",
-    "ember-modifier": "^3.2.7"
+    "ember-modifier": "^3.2.7",
+    "ember-resize-observer-service": "^1.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",

diff --git a/packages/ember-fast-marquee/src/components/index.d.ts b/packages/ember-fast-marquee/src/components/index.d.ts
@@ -2,3 +2,16 @@ declare module '*.css' {
   const styles: { [className: string]: string };
   export default styles;
 }
+
+declare module 'ember-resize-observer-service/services/resize-observer' {
+  import Service from '@ember/service';
+
+  export default class extends Service {
+    isEnabled: boolean;
+    observe(element: HTMLDivElement, callback: () => void): void;
+    unobserve(element: HTMLDivElement, callback: () => void): void;
+    clear(): void;
+    willDestroy(): void;
+    handleResize(entries: ResizeObserverEntry[]): void;
+  }
+}
diff --git a/packages/ember-fast-marquee/src/modifiers/marquee.ts b/packages/ember-fast-marquee/src/modifiers/marquee.ts
@@ -1,6 +1,8 @@
 import Modifier, { ArgsFor, PositionalArgs, NamedArgs } from 'ember-modifier';
 import { registerDestructor } from '@ember/destroyable';
 import type component from '../components/marquee';
+import { inject as service } from '@ember/service';
+import type ResizeObserverService from 'ember-resize-observer-service/services/resize-observer';
 
 interface MarqueeModifierSignature {
   Args: {
@@ -23,16 +25,19 @@ interface MarqueeModifierSignature {
 
 function cleanup(instance: MarqueeModifier): void {
   if (instance.boundFn) {
-    window.removeEventListener('resize', instance.boundFn);
+    instance.resizeObserver.unobserve(instance.containerEl, instance.boundFn);
   }
   if (instance.listeningForResize) instance.listeningForResize = false;
 }
 
 type MarqueeState = NamedArgs<MarqueeModifierSignature>;
 
 export default class MarqueeModifier extends Modifier<MarqueeModifierSignature> {
+  @service resizeObserver!: ResizeObserverService;
+
   boundFn?: (() => void) | null = null;
   component?: component;
+  containerEl!: HTMLDivElement;
   delay?: MarqueeState['delay'];
   direction?: MarqueeState['direction'];
   fillRow?: MarqueeState['fillRow'];
@@ -138,21 +143,20 @@ export default class MarqueeModifier extends Modifier<MarqueeModifierSignature>
     this.play = play;
     this.rgbaGradientColor = rgbaGradientColor;
     this.speed = speed;
-
-    const containerEl = element;
+    this.containerEl = element;
     const marqueeEl = <HTMLDivElement>(
-      containerEl.querySelector('.' + marqueeSelector)
+      this.containerEl.querySelector('.' + marqueeSelector)
     );
 
-    this.measureAndSetCSSVariables(containerEl, marqueeEl);
+    this.measureAndSetCSSVariables(this.containerEl, marqueeEl);
 
     this.boundFn = this.measureAndSetCSSVariables.bind(
       this,
-      containerEl,
+      this.containerEl,
       marqueeEl
     );
     if (!this.listeningForResize) {
-      window.addEventListener('resize', this.boundFn);
+      this.resizeObserver.observe(this.containerEl, this.boundFn);
       this.listeningForResize = true;
     }
   }

diff --git a/yarn.lock b/yarn.lock
@@ -6080,6 +6080,14 @@ ember-qunit@^5.1.5:
     silent-error "^1.1.1"
     validate-peer-dependencies "^1.2.0"
 
+ember-resize-observer-service@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ember-resize-observer-service/-/ember-resize-observer-service-1.1.0.tgz#62729a9de656e8eade4b3e65bd9999840dc44f65"
+  integrity sha512-/vbfxtHSyOGSNdjPKL8X3SyvUnYo3z88sJtD/bLJ0ZGhqVPaXCmtSkLyr/Fh75ckJDixRFxK4i4zEUSlrbk0PA==
+  dependencies:
+    ember-cli-babel "^7.26.6"
+    ember-cli-htmlbars "^5.7.1"
+
 ember-resolver@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/ember-resolver/-/ember-resolver-8.0.3.tgz#40f243aa58281bf195c695fe84a6b291e204690a"