zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(react): use popover and anchor position API (#178)

Browse Source
This commit is contained in:
Wesley Luyten
2025-11-11 12:28:50 -06:00
committed by GitHub
parent a62623ba41
commit f513c74a6c
15 changed files with 597 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/elements/popover.ts
+8 -3
View File
@@ -1,6 +1,6 @@
import { contains, getDocument, getDocumentOrShadowRoot, safePolygon } from '@videojs/utils/dom';
type Placement = 'top' | 'bottom' | 'left' | 'right';
type Placement = 'top' | 'top-start' | 'top-end';
export class PopoverElement extends HTMLElement {
static get observedAttributes(): string[] {
@@ -18,9 +18,14 @@ export class PopoverElement extends HTMLElement {
this.style.setProperty('position-anchor', `--${newValue}`);
}
this.style.setProperty('top', `calc(anchor(${this.side}) - ${this.sideOffset}px)`);
const [side, alignment] = this.side.split('-');
this.style.setProperty('top', `calc(anchor(${side}) - ${this.sideOffset}px)`);
this.style.setProperty('translate', `0 -100%`);
this.style.setProperty('justify-self', 'anchor-center');
this.style.setProperty('justify-self', alignment === 'start'
? 'anchor-start'
: alignment === 'end'
? 'anchor-end'
: 'anchor-center');
}
connectedCallback(): void {
packages/html/src/elements/tooltip.ts
+8 -4
View File
@@ -6,7 +6,7 @@ import {
getInBoundsAdjustments,
} from '@videojs/utils/dom';
type Placement = 'top' | 'bottom' | 'left' | 'right';
type Placement = 'top' | 'top-start' | 'top-end';
export class TooltipElement extends HTMLElement {
static get observedAttributes(): string[] {
@@ -30,14 +30,18 @@ export class TooltipElement extends HTMLElement {
if (name === 'id') {
this.style.setProperty('position-anchor', `--${newValue}`);
}
this.style.setProperty('top', `calc(anchor(${this.side}) - ${this.sideOffset}px)`);
const [side, alignment] = this.side.split('-');
this.style.setProperty('top', `calc(anchor(${side}) - ${this.sideOffset}px)`);
if (this.trackCursorAxis) {
this.style.setProperty('translate', `-50% -100%`);
} else {
this.style.setProperty('translate', `0 -100%`);
this.style.setProperty('justify-self', 'anchor-center');
this.style.setProperty('justify-self', alignment === 'start'
? 'anchor-start'
: alignment === 'end'
? 'anchor-end'
: 'anchor-center');
}
}
packages/html/src/media/media-container.ts
-4
View File
@@ -2,14 +2,10 @@ import type { Constructor, CustomElement } from '@open-wc/context-protocol';
import { ConsumerMixin } from '@open-wc/context-protocol';
/* @TODO We need to make sure portal logic is non-brittle longer term (CJP) */
export function getTemplateHTML() {
return /* html */ `
<slot name="media"></slot>
<slot></slot>
<div id="@default_portal_id" style={ position: absolute; zIndex: 10; }>
<slot name="portal"></slot>
</div>
`;
}