Skip to content

Commit

Permalink
Showing 22 changed files with 3,386 additions and 3,563 deletions.
6,347 changes: 3,177 additions & 3,170 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -142,6 +142,7 @@
},
"dependencies": {
"@marko-tags/subscribe": "^0.5.0",
"@floating-ui/core": "^1.5.2",
"makeup-active-descendant": "0.6.1",
"makeup-expander": "~0.10.1",
"makeup-floating-label": "~0.3.2",
72 changes: 71 additions & 1 deletion src/components/components/ebay-tooltip-base/component-browser.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import Expander from "makeup-expander";
import focusables from "makeup-focusables";
import { inline, autoUpdate, flip, computePosition, shift, offset, arrow, type Placement } from '@floating-ui/dom';
import { pointerStyles } from './constants'

interface TooptipBaseInput {
open?: boolean;
toJSON?: () => Object;
type: string;
offset?: number;
"no-hover"?: boolean;
"overlay-style"?: string;
"overlay-id"?: string;
"render-body"?: Marko.Renderable;
placement?: Placement;
pointer?: keyof typeof pointerStyles;
"on-base-expand"?: (event: { originalEvent: Event }) => void;
"on-base-collapse"?: (event: { originalEvent: Event }) => void;
}
@@ -18,9 +23,14 @@ class TooltipBase extends Marko.Component<Input> {
declare action: "expand" | "collapse" | null;
declare _expander: any;
declare cancelFocus: ReturnType<typeof focusables>;
declare hostEl: HTMLElement | null;
declare overlayEl: HTMLElement | null;
declare arrowEl: HTMLElement | null;
cleanup: (() => void) | undefined;

handleExpand() {
this.emit("base-expand");
this.updateTip();
}

handleCollapse() {
@@ -75,7 +85,7 @@ class TooltipBase extends Marko.Component<Input> {
const expanderEl = container?.getElementsByClassName(type)[0];

if (host && !isTourtip) {
this._expander = new Expander(expanderEl, {
this._expander = new Expander(expanderEl, {
hostSelector: hostSelector,
contentSelector: `.${type}__overlay`,
expandedClass: `${type}--expanded`,
@@ -90,9 +100,65 @@ class TooltipBase extends Marko.Component<Input> {
host.setAttribute("aria-describedby", input.overlayId!);
}
}
if (this.hostEl && this.overlayEl) {
this.updateTip();
this.cleanup = autoUpdate(
this.hostEl,
this.overlayEl,
this.update.bind(this),
);
}
}

updateTip() {
computePosition((this.hostEl as HTMLElement), (this.overlayEl as HTMLElement), {
placement: this.input.placement || pointerStyles[this.input.pointer ?? 'bottom'],
middleware: [
offset(this.input.offset || 6),
inline(),
flip(),
shift(),
arrow({ element: this.arrowEl as HTMLElement, padding: 20 }),
],
}).then(({ x, y, placement, middlewareData }) => {
Object.assign(this.overlayEl?.style || {}, {
left: `${x}px`,
top: `${y}px`,
});

// Accessing the data
const arrowX = middlewareData.arrow?.x;
const arrowY = middlewareData.arrow?.y;

const staticSide = {
top: 'bottom',
strategy: 'fixed',
right: 'left',
bottom: 'top',
left: 'right',
}[placement.split('-')[0]];

Object.assign(this.arrowEl?.style || {}, {
left: arrowX != null ? `${arrowX}px` : '',
top: arrowY != null ? `${arrowY}px` : '',
right: '',
bottom: '',
[staticSide || '']: '-4px',
});
});
}


_setupBaseTooltip() {
const { type } = this.input;
const hostClass = `${type}__host`;
const hostSelector = `.${hostClass}`;

this.hostEl = this.el?.querySelector(hostSelector) || null;
this.overlayEl = this.el?.querySelector(`.${type}__overlay`) || null;
this.arrowEl = this.el?.querySelector(`.${type}__pointer`) || null;


if (this.input.type !== "dialog--mini") {
this._setupMakeup();
}
@@ -148,6 +214,10 @@ class TooltipBase extends Marko.Component<Input> {
this._expander.destroy();
this._expander = undefined;
}
if (this.cleanup) {
this.cleanup();
this.cleanup = undefined;
}
}
}

16 changes: 16 additions & 0 deletions src/components/components/ebay-tooltip-base/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { Placement } from '@floating-ui/dom';

export const pointerStyles:{[index: string]: Placement} = {
"left": "right",
"left-top": "right-start",
"left-bottom": "right-end",
"right": "left",
"right-top": "left-start",
"right-bottom": "left-end",
"top": "bottom",
"top-left": "bottom-start",
"top-right": "bottom-end",
"bottom-right": "top-end",
"bottom-left": "top-start",
"bottom": "top",
} as const;
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import type { AttrClass } from "marko/tags-html";
import type { pointerStyles, typeRoles } from "./constants";
export const typeRoles = {
tourtip: "region",
tooltip: "tooltip",
infotip: "tooltip",
} as const;

interface TooltipOverlayInput {
toJSON?: any;
"style-top"?: string;
"style-left"?: string;
"style-right"?: string;
"style-bottom"?: string;
pointer?: keyof typeof pointerStyles;
heading?: Marko.Input<"span"> & {
as: Marko.NativeTags;
renderBody: Marko.Body;
93 changes: 0 additions & 93 deletions src/components/components/ebay-tooltip-overlay/constants.ts

This file was deleted.

19 changes: 3 additions & 16 deletions src/components/components/ebay-tooltip-overlay/index.marko
Original file line number Diff line number Diff line change
@@ -1,23 +1,10 @@
import { processHtmlAttributes } from "../../../common/html-attributes";
import { typeRoles, pointerStyles } from "./constants";
import { typeRoles } from "./component-browser";

static function noop() {}
static var ignoredHeaderAttributes = ["id", "as", "class"];

$ input.toJSON = noop;

$ var hasUserStyles = (
input.styleTop ||
input.styleLeft ||
input.styleRight ||
input.styleBottom
);
$ var overlayStyles = hasUserStyles ? {
top: input.styleTop,
left: input.styleLeft,
right: input.styleRight,
bottom: input.styleBottom
} : pointerStyles[input.pointer || "bottom"];
$ var heading = input.heading;

<span
@@ -29,8 +16,8 @@ $ var heading = input.heading;
heading &&
component.elId("tourtip-label")
)
style=overlayStyles>
<span class=`${input.type}__pointer ${input.type}__pointer--${input.pointer}`/>
>
<span class=`${input.type}__pointer`/>
<span class=`${input.type}__mask`>
<span class=`${input.type}__cell`>
<span class=`${input.type}__content`>
10 changes: 4 additions & 6 deletions src/components/ebay-infotip/component.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import { pointerStyles } from "../components/ebay-tooltip-overlay/constants";
import EbayTooltipBase from "../components/ebay-tooltip-base/component-browser";
import type { Input as TooltipBaseInput } from "../components/ebay-tooltip-base/component-browser";

interface InfotipInput extends Omit<Marko.Input<"span">, `on${string}`> {
open?: boolean;
variant?: "modal" | "default";
pointer?: keyof typeof pointerStyles;
offset?: TooltipBaseInput['offset'];
pointer?: TooltipBaseInput['pointer'];
placement?: TooltipBaseInput['placement'];
disabled?: boolean;
"aria-label"?: string;
icon?: Marko.AttrTag<{ renderBody: Marko.Renderable }>;
"style-left"?: string;
"style-right"?: string;
"style-top"?: string;
"style-bottom"?: string;
heading: Marko.Input<"span"> & {
as: Marko.NativeTags;
renderBody: Marko.Renderable;
9 changes: 3 additions & 6 deletions src/components/ebay-infotip/index.marko
Original file line number Diff line number Diff line change
@@ -17,14 +17,16 @@ static var ignoredAttributes = [
];
$ var isModal = input.variant === "modal";
$ var classPrefix = !isModal ? "infotip" : "dialog--mini";
$ var pointer = input.pointer || "bottom";

<span>
<ebay-tooltip-base
open=state.open
key="base"
type=classPrefix
overlayId:scoped="overlay"
offset=input.offset
pointer=input.pointer
placement=input.placement
onBase-expand(isModal ? undefined : "handleExpand")
onBase-collapse(isModal ? undefined : "handleCollapse")>
<span
@@ -58,11 +60,6 @@ $ var pointer = input.pointer || "bottom";
<ebay-tooltip-overlay
type="infotip"
id:scoped="overlay"
styleLeft=input.styleLeft
styleTop=input.styleTop
styleRight=input.styleRight
styleBottom=input.styleBottom
pointer=pointer
heading=input.heading
content=input.content
a11y-close-text=input.a11yCloseButtonText
Loading

0 comments on commit f6ccce5

Please sign in to comment.