Skip to content

Commit baa2163

Browse files
dmanekdmanek
authored
♻️ Migrate observeWithSharedInOb to observeIntersections (#36106)
1 parent b184510 commit baa2163

15 files changed

Lines changed: 139 additions & 140 deletions

File tree

‎extensions/amp-3d-gltf/0.1/amp-3d-gltf.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ import {
66
observeContentSize,
77
unobserveContentSize,
88
} from '#core/dom/layout/size-observer';
9-
import {
10-
observeWithSharedInOb,
11-
unobserveWithSharedInOb,
12-
} from '#core/dom/layout/viewport-observer';
9+
import {observeIntersections} from '#core/dom/layout/viewport-observer';
1310
import {dict} from '#core/types/object';
1411

1512
import {Services} from '#service';
@@ -50,6 +47,9 @@ export class Amp3dGltf extends AMP.BaseElement {
5047
this.unlistenMessage_ = null;
5148

5249
this.onResized_ = this.onResized_.bind(this);
50+
51+
/** @private {?UnlistenDef} */
52+
this.unobserveIntersections_ = null;
5353
}
5454

5555
/**
@@ -78,7 +78,8 @@ export class Amp3dGltf extends AMP.BaseElement {
7878

7979
/** @override */
8080
unlayoutCallback() {
81-
unobserveWithSharedInOb(this.element);
81+
this.unobserveIntersections_?.();
82+
this.unobserveIntersections = null;
8283
this.viewportCallback_(false);
8384
if (this.iframe_) {
8485
removeElement(this.iframe_);
@@ -143,8 +144,9 @@ export class Amp3dGltf extends AMP.BaseElement {
143144

144145
/** @override */
145146
layoutCallback() {
146-
observeWithSharedInOb(this.element, (inViewport) =>
147-
this.viewportCallback_(inViewport)
147+
this.unobserveIntersections_ = observeIntersections(
148+
this.element,
149+
({isIntersecting}) => this.viewportCallback_(isIntersecting)
148150
);
149151
if (!isWebGLSupported()) {
150152
this.toggleFallback(true);

‎extensions/amp-a4a/0.1/amp-a4a.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,7 @@ import {
1010
isLayoutSizeDefined,
1111
} from '#core/dom/layout';
1212
import {intersectionEntryToJson} from '#core/dom/layout/intersection';
13-
import {
14-
observeWithSharedInOb,
15-
unobserveWithSharedInOb,
16-
} from '#core/dom/layout/viewport-observer';
13+
import {observeIntersections} from '#core/dom/layout/viewport-observer';
1714
import {DetachedDomStream, streamResponseToWriter} from '#core/dom/stream';
1815
import {setStyle} from '#core/dom/style';
1916
import {duplicateErrorIfNecessary} from '#core/error';
@@ -369,8 +366,8 @@ export class AmpA4A extends AMP.BaseElement {
369366
*/
370367
this.transferDomBody_ = null;
371368

372-
/** @private {function(boolean)} */
373-
this.boundViewportCallback_ = this.viewportCallbackTemp.bind(this);
369+
/** @private {?UnlistenDef} */
370+
this.unobserveIntersections_ = null;
374371
}
375372

376373
/** @override */
@@ -1313,7 +1310,10 @@ export class AmpA4A extends AMP.BaseElement {
13131310
this.destroyFrame(true);
13141311
}
13151312
return this.attemptToRenderCreative().then(() => {
1316-
observeWithSharedInOb(this.element, this.boundViewportCallback_);
1313+
this.unobserveIntersections_ = observeIntersections(
1314+
this.element,
1315+
({isIntersecting}) => this.viewportCallbackTemp(isIntersecting)
1316+
);
13171317
});
13181318
}
13191319

@@ -1414,7 +1414,8 @@ export class AmpA4A extends AMP.BaseElement {
14141414

14151415
/** @override */
14161416
unlayoutCallback() {
1417-
unobserveWithSharedInOb(this.element);
1417+
this.unobserveIntersections_?.();
1418+
this.unobserveIntersections = null;
14181419
this.tearDownSlot();
14191420
return true;
14201421
}

‎extensions/amp-ad/0.1/amp-ad-3p-impl.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,7 @@ import {
3434
import {getIframe, preloadBootstrap} from '../../../src/3p-frame';
3535
import {intersectionEntryToJson} from '#core/dom/layout/intersection';
3636
import {moveLayoutRect} from '#core/dom/layout/rect';
37-
import {
38-
observeWithSharedInOb,
39-
unobserveWithSharedInOb,
40-
} from '#core/dom/layout/viewport-observer';
37+
import {observeIntersections} from '#core/dom/layout/viewport-observer';
4138
import {toWin} from '#core/window';
4239

4340
/** @const {string} Tag name for 3P AD implementation. */
@@ -129,6 +126,9 @@ export class AmpAd3PImpl extends AMP.BaseElement {
129126
* @private {boolean}
130127
*/
131128
this.isFullWidthRequested_ = false;
129+
130+
/** @private {?UnlistenDef} */
131+
this.unobserveIntersections_ = null;
132132
}
133133

134134
/** @override */
@@ -409,8 +409,9 @@ export class AmpAd3PImpl extends AMP.BaseElement {
409409
return this.xOriginIframeHandler_.init(iframe);
410410
})
411411
.then(() => {
412-
observeWithSharedInOb(this.element, (inViewport) =>
413-
this.viewportCallback_(inViewport)
412+
this.unobserveIntersections_ = observeIntersections(
413+
this.element,
414+
({isIntersecting}) => this.viewportCallback_(isIntersecting)
414415
);
415416
});
416417
incrementLoadingAds(this.win, this.layoutPromise_);
@@ -436,7 +437,8 @@ export class AmpAd3PImpl extends AMP.BaseElement {
436437
unlayoutCallback() {
437438
this.unlisteners_.forEach((unlisten) => unlisten());
438439
this.unlisteners_.length = 0;
439-
unobserveWithSharedInOb(this.element);
440+
this.unobserveIntersections_?.();
441+
this.unobserveIntersections = null;
440442

441443
this.layoutPromise_ = null;
442444
this.uiHandler.applyUnlayoutUI();

‎extensions/amp-anim/0.1/amp-anim.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@ import * as st from '#core/dom/style';
22
import {applyFillContent, isLayoutSizeDefined} from '#core/dom/layout';
33
import {dev} from '../../../src/log';
44
import {guaranteeSrcForSrcsetUnsupportedBrowsers} from '#core/dom/img';
5-
import {
6-
observeWithSharedInOb,
7-
unobserveWithSharedInOb,
8-
} from '#core/dom/layout/viewport-observer';
5+
import {observeIntersections} from '#core/dom/layout/viewport-observer';
96
import {propagateAttributes} from '#core/dom/propagate-attributes';
107
import {propagateObjectFitStyles} from '#core/dom/style';
118

@@ -29,6 +26,9 @@ export class AmpAnim extends AMP.BaseElement {
2926

3027
/** @private {?Element} */
3128
this.img_ = null;
29+
30+
/** @private {?UnlistenDef} */
31+
this.unobserveIntersections_ = null;
3232
}
3333

3434
/** @override */
@@ -81,8 +81,9 @@ export class AmpAnim extends AMP.BaseElement {
8181
);
8282
guaranteeSrcForSrcsetUnsupportedBrowsers(img);
8383
return this.loadPromise(img).then(() => {
84-
observeWithSharedInOb(this.element, (inViewport) =>
85-
this.viewportCallback_(inViewport)
84+
this.unobserveIntersections_ = observeIntersections(
85+
this.element,
86+
({isIntersecting}) => this.viewportCallback_(isIntersecting)
8687
);
8788
});
8889
}
@@ -94,7 +95,8 @@ export class AmpAnim extends AMP.BaseElement {
9495

9596
/** @override */
9697
unlayoutCallback() {
97-
unobserveWithSharedInOb(this.element);
98+
this.unobserveIntersections_?.();
99+
this.unobserveIntersections = null;
98100
this.viewportCallback_(false);
99101
// Release memory held by the image - animations are typically large.
100102
this.img_.src = SRC_PLACEHOLDER;

‎extensions/amp-apester-media/0.1/amp-apester-media.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,7 @@ import {
3232
setFullscreenOn,
3333
} from './utils';
3434
import {handleCompanionAds} from './monetization';
35-
import {
36-
observeWithSharedInOb,
37-
unobserveWithSharedInOb,
38-
} from '#core/dom/layout/viewport-observer';
35+
import {observeIntersections} from '#core/dom/layout/viewport-observer';
3936
import {px, setStyles} from '#core/dom/style';
4037
import {removeElement} from '#core/dom';
4138

@@ -106,6 +103,9 @@ class AmpApesterMedia extends AMP.BaseElement {
106103
this.unlisteners_ = [];
107104
/** @private {?IntersectionObserver3pHost} */
108105
this.intersectionObserverHostApi_ = null;
106+
107+
/** @private {?UnlistenDef} */
108+
this.unobserveIntersections_ = null;
109109
}
110110

111111
/**
@@ -363,8 +363,9 @@ class AmpApesterMedia extends AMP.BaseElement {
363363
})
364364
)
365365
.then(() => {
366-
observeWithSharedInOb(this.element, (inViewport) =>
367-
this.viewportCallback_(inViewport)
366+
this.unobserveIntersections_ = observeIntersections(
367+
this.element,
368+
({isIntersecting}) => this.viewportCallback_(isIntersecting)
368369
);
369370
});
370371
})
@@ -405,7 +406,8 @@ class AmpApesterMedia extends AMP.BaseElement {
405406

406407
/** @override */
407408
unlayoutCallback() {
408-
unobserveWithSharedInOb(this.element);
409+
this.unobserveIntersections_?.();
410+
this.unobserveIntersections = null;
409411
if (this.iframe_) {
410412
this.intersectionObserverHostApi_.destroy();
411413
this.intersectionObserverHostApi_ = null;

‎extensions/amp-carousel/0.1/base-carousel.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import {Keys} from '#core/constants/key-codes';
22
import {Services} from '#service';
33
import {isAmp4Email} from '../../../src/format';
4-
import {
5-
observeWithSharedInOb,
6-
unobserveWithSharedInOb,
7-
} from '#core/dom/layout/viewport-observer';
4+
import {observeIntersections} from '#core/dom/layout/viewport-observer';
85
import {toggleAttribute} from '#core/dom';
96

107
const _CONTROL_HIDE_ATTRIBUTE = 'i-amphtml-carousel-hide-buttons';
@@ -30,6 +27,9 @@ export class BaseCarousel extends AMP.BaseElement {
3027

3128
/** @private {boolean} */
3229
this.showControls_ = false;
30+
31+
/** @private {?UnlistenDef} */
32+
this.unobserveIntersections_ = null;
3333
}
3434

3535
/** @override */
@@ -234,14 +234,17 @@ export class BaseCarousel extends AMP.BaseElement {
234234

235235
/** @override */
236236
layoutCallback() {
237-
observeWithSharedInOb(this.element, (inViewport) =>
238-
this.viewportCallbackTemp(inViewport)
237+
this.unobserveIntersections_ = observeIntersections(
238+
this.element,
239+
({isIntersecting}) => this.viewportCallbackTemp(isIntersecting)
239240
);
240241
return Promise.resolve();
241242
}
243+
242244
/** @override */
243245
unlayoutCallback() {
244-
unobserveWithSharedInOb(this.element);
246+
this.unobserveIntersections_?.();
247+
this.unobserveIntersections = null;
245248
return true;
246249
}
247250

‎extensions/amp-carousel/0.1/scrollable-carousel.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@ import {dev} from '../../../src/log';
77
import {isLayoutSizeFixed} from '#core/dom/layout';
88
import {listen} from '../../../src/event-helper';
99
import {numeric} from '#core/dom/transition';
10-
import {
11-
observeWithSharedInOb,
12-
unobserveWithSharedInOb,
13-
} from '#core/dom/layout/viewport-observer';
10+
import {observeIntersections} from '#core/dom/layout/viewport-observer';
1411
import {realChildElements} from '#core/dom/query';
1512

1613
/** @const {string} */
@@ -35,6 +32,9 @@ export class AmpScrollableCarousel extends BaseCarousel {
3532

3633
/** @private {?number} */
3734
this.scrollTimerId_ = null;
35+
36+
/** @private {?UnlistenDef} */
37+
this.unobserveIntersections_ = null;
3838
}
3939

4040
/** @override */
@@ -100,8 +100,9 @@ export class AmpScrollableCarousel extends BaseCarousel {
100100

101101
/** @override */
102102
layoutCallback() {
103-
observeWithSharedInOb(this.element, (inViewport) =>
104-
this.viewportCallbackTemp(inViewport)
103+
this.unobserveIntersections_ = observeIntersections(
104+
this.element,
105+
({isIntersecting}) => this.viewportCallbackTemp(isIntersecting)
105106
);
106107

107108
this.doLayout_(this.pos_);
@@ -112,7 +113,8 @@ export class AmpScrollableCarousel extends BaseCarousel {
112113

113114
/** @override */
114115
unlayoutCallback() {
115-
unobserveWithSharedInOb(this.element);
116+
this.unobserveIntersections_?.();
117+
this.unobserveIntersections = null;
116118
return super.unlayoutCallback();
117119
}
118120

‎extensions/amp-carousel/0.1/slidescroll.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,7 @@ import {
2020
observeContentSize,
2121
unobserveContentSize,
2222
} from '#core/dom/layout/size-observer';
23-
import {
24-
observeWithSharedInOb,
25-
unobserveWithSharedInOb,
26-
} from '#core/dom/layout/viewport-observer';
23+
import {observeIntersections} from '#core/dom/layout/viewport-observer';
2724
import {triggerAnalyticsEvent} from '../../../src/analytics';
2825
import {BaseCarousel} from './base-carousel';
2926

@@ -165,6 +162,9 @@ export class AmpSlideScroll extends BaseCarousel {
165162
this.hasFirstResizedOccured_ = false;
166163

167164
this.onResized_ = this.onResized_.bind(this);
165+
166+
/** @private {?UnlistenDef} */
167+
this.unobserveIntersections_ = null;
168168
}
169169

170170
/** @override */
@@ -414,8 +414,9 @@ export class AmpSlideScroll extends BaseCarousel {
414414

415415
/** @override */
416416
layoutCallback() {
417-
observeWithSharedInOb(this.element, (inViewport) =>
418-
this.viewportCallbackTemp(inViewport)
417+
this.unobserveIntersections_ = observeIntersections(
418+
this.element,
419+
({isIntersecting}) => this.viewportCallbackTemp(isIntersecting)
419420
);
420421

421422
// TODO(sparhami) #19259 Tracks a more generic way to do this. Remove once
@@ -460,7 +461,8 @@ export class AmpSlideScroll extends BaseCarousel {
460461

461462
/** @override */
462463
unlayoutCallback() {
463-
unobserveWithSharedInOb(this.element);
464+
this.unobserveIntersections_?.();
465+
this.unobserveIntersections = null;
464466
this.slideIndex_ = null;
465467
return super.unlayoutCallback();
466468
}

‎extensions/amp-delight-player/0.1/amp-delight-player.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import {Deferred} from '#core/data-structures/promise';
22
import {dispatchCustomEvent, removeElement} from '#core/dom';
33
import {applyFillContent, isLayoutSizeDefined} from '#core/dom/layout';
4-
import {
5-
observeWithSharedInOb,
6-
unobserveWithSharedInOb,
7-
} from '#core/dom/layout/viewport-observer';
4+
import {observeIntersections} from '#core/dom/layout/viewport-observer';
85
import {htmlFor} from '#core/dom/static-template';
96
import {setStyle} from '#core/dom/style';
107
import {PauseHelper} from '#core/dom/video/pause-helper';
@@ -132,6 +129,9 @@ class AmpDelightPlayer extends AMP.BaseElement {
132129

133130
/** @private @const */
134131
this.pauseHelper_ = new PauseHelper(this.element);
132+
133+
/** @private {?UnlistenDef} */
134+
this.unobserveIntersections_ = null;
135135
}
136136

137137
/**
@@ -168,9 +168,9 @@ class AmpDelightPlayer extends AMP.BaseElement {
168168

169169
/** @override */
170170
layoutCallback() {
171-
observeWithSharedInOb(
171+
this.unobserveIntersections_ = observeIntersections(
172172
this.element,
173-
(isInViewport) => (this.isInViewport_ = isInViewport)
173+
({isIntersecting}) => (this.isInViewport_ = isIntersecting)
174174
);
175175
const src = `${this.baseURL_}/player/${this.contentID_}?amp=1`;
176176
const iframe = createFrameFor(this, src);
@@ -207,7 +207,8 @@ class AmpDelightPlayer extends AMP.BaseElement {
207207
this.playerReadyResolver_ = deferred.resolve;
208208

209209
this.unregisterEventHandlers_();
210-
unobserveWithSharedInOb(this.element);
210+
this.unobserveIntersections_?.();
211+
this.unobserveIntersections = null;
211212
this.pauseHelper_.updatePlaying(false);
212213

213214
return true;

0 commit comments

Comments
 (0)