From de8d31a3a0434c65ede2d32a8f5c4688ce8658ed Mon Sep 17 00:00:00 2001 From: danielwiehl Date: Wed, 9 Oct 2024 16:34:42 +0200 Subject: [PATCH] feat(toolkit/observable): warn if document root is not positioned when using `fromBoundingClientRect$` --- docs/site/tools/observable.md | 2 +- .../observable/src/bounding-client-rect.observable.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/site/tools/observable.md b/docs/site/tools/observable.md index 45a5f06c..8598aeca 100644 --- a/docs/site/tools/observable.md +++ b/docs/site/tools/observable.md @@ -85,7 +85,7 @@ fromBoundingClientRect$(element).subscribe((clientRect: DOMRect) => { ``` *** -The target element and the document root (``) must be positioned (`relative`, `absolute`, or `fixed`). If not, positioning is changed to `relative`. +The target element and the document root (``) must be positioned `relative` or `absolute`. If not, a warning is logged and positioning is changed to `relative`. *** *Note:* diff --git a/projects/scion/toolkit/observable/src/bounding-client-rect.observable.ts b/projects/scion/toolkit/observable/src/bounding-client-rect.observable.ts index c670d251..c5c51338 100644 --- a/projects/scion/toolkit/observable/src/bounding-client-rect.observable.ts +++ b/projects/scion/toolkit/observable/src/bounding-client-rect.observable.ts @@ -20,8 +20,9 @@ import {fromResize$} from './resize.observable'; * * Upon subscription, emits the current bounding box, and then continuously when the bounding box changes. The Observable never completes. * - * The target element and the document root (``) must be positioned (`relative`, `absolute`, or `fixed`). If not, positioning is changed to `relative`. - * + * The target element and the document root (``) must be positioned `relative` or `absolute`. + * If not, a warning is logged and positioning is changed to `relative`. + * Note: * As of 2024, there is no native browser API to observe the position of an element. This implementation uses {@link IntersectionObserver} and * {@link ResizeObserver} to detect position changes. For tracking only size changes, use {@link fromResize$} instead. @@ -217,6 +218,7 @@ function ensureElementPositioned(element: HTMLElement): void { const styleSheet = new CSSStyleSheet({}); styleSheet.insertRule(`html { position: relative; }`); document.adoptedStyleSheets.push(styleSheet); + console?.warn?.('[@scion/toolkit] fromBoundingClientRect$ requires the document root element () to be positioned relative or absolute. Changing positioning to relative.'); } else { setStyle(element, {position: 'relative'});