@@ -11,6 +11,7 @@ import {
11
11
SIZES_HEIGHT_DEFAULT ,
12
12
} from 'ember-element-query' ;
13
13
import { inject as service } from '@ember/service' ;
14
+ import { waitFor } from '@ember/test-waiters' ;
14
15
export interface SizeObject {
15
16
name : string ;
16
17
value : number ;
@@ -22,6 +23,7 @@ export type RangeDirection = 'at' | 'from' | 'to';
22
23
interface ResizeObserverService {
23
24
observe ( element : HTMLElement , callback ?: ( ) => void ) : void ;
24
25
unobserve ( element : HTMLElement , callback ?: ( ) => void ) : void ;
26
+ isEnabled : boolean ;
25
27
}
26
28
27
29
/** @internal */
@@ -41,6 +43,7 @@ export default class ElementQueryModifier extends Modifier<ModifierArgs> {
41
43
sizesRatioDefault : Sizes = SIZES_RATIO_DEFAULT ;
42
44
43
45
_element ?: HTMLElement ; // For some reason, this.element is not always available
46
+ _promiseResolveHasBeenInstalled ?: ( value ?: unknown ) => void ;
44
47
45
48
// -------------------
46
49
// Computed properties
@@ -541,12 +544,20 @@ export default class ElementQueryModifier extends Modifier<ModifierArgs> {
541
544
: sizeObjectsSortedAsc [ sizeObjectsSortedAsc . length - 1 ] ;
542
545
}
543
546
547
+ _maybeRunPromiseResolveHasBeenInstalled ( ) : void {
548
+ if ( this . _promiseResolveHasBeenInstalled ) {
549
+ this . _promiseResolveHasBeenInstalled ( ) ;
550
+ this . _promiseResolveHasBeenInstalled = undefined ;
551
+ }
552
+ }
553
+
544
554
_didResizeHandler ( ) : void {
545
555
window . requestAnimationFrame ( ( ) => {
546
556
if ( ! this . args . named . isDisabled && ! this . isDestroying && ! this . isDestroyed ) {
547
557
this . applyAttributesToElement ( ) ;
548
558
this . callOnResize ( ) ;
549
559
}
560
+ this . _maybeRunPromiseResolveHasBeenInstalled ?.( ) ;
550
561
} ) ;
551
562
}
552
563
@@ -561,18 +572,25 @@ export default class ElementQueryModifier extends Modifier<ModifierArgs> {
561
572
// -------------------
562
573
// Lifecycle hooks
563
574
// -------------------
564
-
565
- didInstall ( ) : void {
575
+ @ waitFor
576
+ didInstall ( ) : void | Promise < void > {
566
577
if ( ! this . element ) throw new Error ( 'Expected this.element to be available' ) ;
567
578
568
579
this . _element = this . element ;
569
580
570
581
this . resizeObserver . observe ( this . element , this . didResizeHandler ) ; // eslint-disable-line @typescript-eslint/unbound-method
582
+
583
+ if ( ! this . args . named . isDisabled && this . resizeObserver . isEnabled ) {
584
+ return new Promise ( ( resolve ) => {
585
+ this . _promiseResolveHasBeenInstalled = resolve ;
586
+ } ) ;
587
+ } else {
588
+ return Promise . resolve ( ) ;
589
+ }
571
590
}
572
591
573
592
didUpdateArguments ( ) : void {
574
- // @ts -ignore https://github.com/Microsoft/TypeScript/issues/28502#issuecomment-609607344
575
- if ( ! ResizeObserver ) return ;
593
+ if ( ! this . resizeObserver . isEnabled ) return ;
576
594
577
595
this . didResizeHandler ( ) ;
578
596
}
0 commit comments