-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WIP resize observer component. Did not fit into initial POC, but will…
… reevaluate in tables.
- Loading branch information
1 parent
e14a940
commit a89d7f5
Showing
3 changed files
with
111 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
packages/web-components/src/components/cbp-resize-observer/cbp-resize-observer.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| cbp-resize-observer { | ||
| max-width: 100%; | ||
| display: inline-block; | ||
| overflow: visible; | ||
| } |
103 changes: 103 additions & 0 deletions
103
packages/web-components/src/components/cbp-resize-observer/cbp-resize-observer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { Component, Element, Prop, Event, EventEmitter, Host, h } from '@stencil/core'; | ||
|
|
||
| /** | ||
| * @slot - any markup or content may be placed in the default slot. | ||
| */ | ||
| @Component({ | ||
| tag: 'cbp-resize-observer', | ||
| styleUrl: 'cbp-resize-observer.scss' | ||
| }) | ||
| export class CbpResizeObserver { | ||
|
|
||
| private observer: ResizeObserver; | ||
| private observedEl: Element | ||
| //private parentEl: HTMLElement; | ||
| //private childEl: HTMLElement; | ||
|
|
||
| @Element() host: HTMLElement; | ||
|
|
||
| /** Optionally specify a selector with which to query the closest matching parent of the host tag to observe. */ | ||
| @Prop() parent: string; | ||
|
|
||
| /** Optionally specify a selector with which to query the a child of the host tag to observe. */ | ||
| @Prop() child: string; | ||
|
|
||
| /** A custom event emitted when the click event occurs for either a rendered button or anchor/link. */ | ||
| @Event() resized!: EventEmitter; | ||
|
|
||
|
|
||
| async getCurrentSize() { | ||
| return this.getClientRect(); | ||
| } | ||
| getClientRect() { | ||
| return this.host.getBoundingClientRect(); | ||
| } | ||
|
|
||
|
|
||
| componentDidLoad() { | ||
| // TODO: still need to figure out what comparisons are useful at this level - parent or children | ||
| const children = this.host.children; | ||
| this.observedEl = this.host; //this.host.querySelector(child) or this.host.closest(parent); ? | ||
| /* | ||
| ResizeObserver object structure: | ||
| Entries[]: | ||
| Entries[0]: ResizeObserverEntry (I've never seen more than 1 entry...) | ||
| borderBoxSize[]: ResizeObserverSize | ||
| contentBoxSize[]: ResizeObserverSize | ||
| contentRect: DOMRectReadOnly <- this is what we want | ||
| bottom | ||
| height | ||
| left | ||
| right | ||
| top | ||
| width | ||
| x | ||
| y | ||
| devicePixelContentBoxSize[]: ResizeObserverSize | ||
| target | ||
| */ | ||
| this.observer = new ResizeObserver(([{ contentRect }]) => { | ||
| const {width, height, top, bottom, left, right, x, y} = contentRect; | ||
| console.log('Resize Observer: ', width, height, children, children[0].getBoundingClientRect()); | ||
|
|
||
| // TODO: do comparisons, such as to check for overflow (against child? this depends what we're observing) | ||
| // When using browser zoom, the numbers reported back are sometimes sub-pixel and trigger a flickering of the controls; adding +1 fixes this. | ||
| /* | ||
| if (width+1 > this.wrapper.scrollWidth) { | ||
| // | ||
| } | ||
| else { | ||
| // | ||
| } | ||
| */ | ||
|
|
||
|
|
||
| // TechDebt: should this be debounced? | ||
| this.resized.emit({ | ||
| width: width, | ||
| height: height, | ||
| top: top, | ||
| bottom: bottom, | ||
| left: left, | ||
| right: right, | ||
| x: x, | ||
| y: y | ||
| }); | ||
|
|
||
| }); | ||
| this.observer.observe(this.observedEl); | ||
| } | ||
|
|
||
| disconnectedCallback(){ | ||
| this.observer.disconnect() | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <Host> | ||
| <slot /> | ||
| </Host> | ||
| ); | ||
| } | ||
|
|
||
| } |