Skip to content
This repository has been archived by the owner on Oct 18, 2024. It is now read-only.

Commit

Permalink
feat: implemente tooltip component
Browse files Browse the repository at this point in the history
  • Loading branch information
@Raspincel
Raspincel committed Dec 19, 2023
1 parent 759189e commit 2456a33
Show file tree
Hide file tree
Showing 8 changed files with 115 additions and 127 deletions.
67 changes: 0 additions & 67 deletions src/web-components/dropdown/index.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,78 +142,11 @@ export const dropdownStyle = css`
white-space: nowrap;
}
.superviz-who-is-online__tooltip {
background-color: rgb(var(--sv-gray-600));
padding: 8px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
position: absolute;
top: 52px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
border-radius: 2px;
cursor: default;
display: none;
transition: opacity 0.2s ease-in-out display 0s;
}
.tooltip-left {
left: 29px;
top: 60px;
z-index: 10;
}
.superviz-who-is-online__tooltip-arrow {
width: 13px;
height: 13px;
position: absolute;
top: 0px;
left: 50%;
transform: rotate(45deg) translateX(-50%);
background-color: rgb(var(--sv-gray-600));
border-top-left-radius: 3px;
}
.dropdown-content:hover + .superviz-who-is-online__tooltip {
opacity: 1;
display: block;
}
.tooltip-name,
.tooltip-action {
margin: 0;
font-family: roboto;
white-space: nowrap;
text-align: center;
}
.tooltip-name {
color: white;
font-size: 14px;
}
.tooltip-action {
color: rgb(var(--sv-gray-400));
font-size: 12px;
}
@media (max-width: 780px) {
.menu--top-left,
.menu--top-center,
.menu--top-right {
bottom: 36px;
}
.superviz-who-is-online__tooltip {
top: 44px;
}
.tooltip-left {
top: 52px;
left: 25px;
}
}
`;
93 changes: 59 additions & 34 deletions src/web-components/dropdown/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,19 @@ export class Dropdown extends WebComponentsBaseElement {
declare icons?: string[];
declare name?: string;
declare onHoverData: { name: string; action: string };
declare shiftTooltipLeft: boolean;

private dropdownContent: HTMLElement;
private originalPosition: Positions;
private menu: HTMLElement = undefined;
private host: HTMLElement;
declare tooltipOnLeft: boolean;
declare dropdown: HTMLElement;
private dropdownResizeObserver: ResizeObserver;

// true when the dropdown is hovered (pass to tooltip element)
declare showTooltip: boolean;
// true if the tooltip should be shown when hovering (use in this element)
declare canShowTooltip: boolean;

static properties = {
open: { type: Boolean },
Expand All @@ -44,10 +51,31 @@ export class Dropdown extends WebComponentsBaseElement {
icons: { type: Array },
name: { type: String },
onHoverData: { type: Object },
tooltipOnLeft: { type: Boolean },
showTooltip: { type: Boolean },
dropdown: { type: Object },
canShowTooltip: { type: Boolean },
drodpdownSizes: { type: Object },
shiftTooltipLeft: { type: Boolean },
};

constructor() {
super();
this.showTooltip = false;
}

disconnectedCallback(): void {
super.disconnectedCallback();
document.removeEventListener('click', this.onClickOutDropdown);
const dropdown = this.shadowRoot.querySelector('.dropdown');
dropdown.removeEventListener('mouseenter', () => {
this.showTooltip = true;
});
dropdown.removeEventListener('mouseleave', () => {
this.showTooltip = false;
});
this.dropdownResizeObserver.disconnect();
}

protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
if (!changedProperties.has('open')) return;

Expand All @@ -63,7 +91,6 @@ export class Dropdown extends WebComponentsBaseElement {
}

document.removeEventListener('click', this.onClickOutDropdown);
// this.close();
}

private onClickOutDropdown = (event: Event) => {
Expand Down Expand Up @@ -322,11 +349,11 @@ export class Dropdown extends WebComponentsBaseElement {
};

const intersectionObserver = new IntersectionObserver(this.adjustPosition, options);
const resizeObserver = new ResizeObserver(this.adjustPosition);
this.dropdownResizeObserver = new ResizeObserver(this.adjustPosition);
const target = this.menu;

intersectionObserver.observe(target);
resizeObserver.observe(this.scrollableParent ?? document.body);
this.dropdownResizeObserver.observe(this.scrollableParent ?? document.body);
}
}

Expand Down Expand Up @@ -388,21 +415,35 @@ export class Dropdown extends WebComponentsBaseElement {
setTimeout(() => this.adjustPosition());
}

private onHover() {
if (!this.showTooltip) return html``;
private get supervizIcons() {
return this.icons?.map((icon) => {
return html`<superviz-icon allowSetSize=${true} name="${icon}" size="sm"></superviz-icon>`;
});
}

const classList = {
'superviz-who-is-online__tooltip': true,
'tooltip-left': this.tooltipOnLeft,
};
private get listOptions() {
return this.options.map((option, index) => {
const liClasses = {
text: true,
'text-bold': true,
active: option?.[this.returnTo] && this.active === option?.[this.returnTo],
};

return html` <div class=${classMap(classList)}>
<p class="tooltip-name">${this.onHoverData.name}</p>
<p class="tooltip-action">${this.onHoverData.action}</p>
<div class="superviz-who-is-online__tooltip-arrow"></div>
</div>`;
return html`<li @click=${() => this.callbackSelected(option)} class=${classMap(liClasses)}>
${this.supervizIcons?.at(index)} <span class="option-label">${option[this.label]}</span>
</li>`;
});
}

private tooltip = () => {
if (!this.canShowTooltip) return '';

return html` <superviz-tooltip
tooltipData=${JSON.stringify(this.onHoverData)}
?shiftTooltipLeft=${this.shiftTooltipLeft}
></superviz-tooltip>`;
};

protected render() {
const menuClasses = {
menu: true,
Expand All @@ -418,34 +459,18 @@ export class Dropdown extends WebComponentsBaseElement {
'who-is-online-dropdown': this.name,
};

const icons = this.icons?.map((icon) => {
return html`<superviz-icon allowSetSize=${true} name="${icon}" size="sm"></superviz-icon>`;
});

const options = this.options.map((option, index) => {
const liClasses = {
text: true,
'text-bold': true,
active: option?.[this.returnTo] && this.active === option?.[this.returnTo],
};

return html`<li @click=${() => this.callbackSelected(option)} class=${classMap(liClasses)}>
${icons?.at(index)} <span class="option-label">${option[this.label]}</span>
</li>`;
});

return html`
<div class="dropdown">
<div class="dropdown-content" @click=${this.toggle}>
<slot name="dropdown"></slot>
</div>
${this.onHover()}
${this.tooltip()}
</div>
<div class="dropdown-list">
<div class=${classMap(menuClasses)}>
${this.renderHeader}
<ul class="items">
${options}
${this.listOptions}
</ul>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/web-components/dropdown/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { number } from 'yargs';

export enum PositionsEnum {
'BOTTOM-LEFT' = 'bottom-left',
'BOTTOM-CENTER' = 'bottom-center',
Expand Down
1 change: 1 addition & 0 deletions src/web-components/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export { HelloWorld } from './hello-world';
export { Icon } from './icon';
export { Dropdown } from './dropdown';
export { Tooltip } from './tooltip';
export * from './modal';
export * from './comments';
export * from './who-is-online';
12 changes: 10 additions & 2 deletions src/web-components/tooltip/index.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const dropdownStyle = css`
.superviz-who-is-online__tooltip {
--host-heigth: 0px;
--host-width: 0px;
--vertical-offset: 12px;
background-color: rgb(var(--sv-gray-600));
padding: 8px;
Expand All @@ -20,6 +21,7 @@ export const dropdownStyle = css`
display: none;
transition: opacity 0.2s ease-in-out display 0s;
overflow-x: clip;
z-index: 100;
}
.tooltip-extras {
Expand Down Expand Up @@ -63,11 +65,11 @@ export const dropdownStyle = css`
.tooltip-top {
top: auto;
bottom: calc(var(--host-heigth) + 12px);
bottom: calc(var(--host-heigth) + var(--vertical-offset));
}
.tooltip-bottom {
top: calc(var(--host-heigth) + 12px);
top: calc(var(--host-heigth) + var(--vertical-offset));
bottom: auto;
}
Expand Down Expand Up @@ -110,6 +112,12 @@ export const dropdownStyle = css`
border-radius: 0;
}
.shift-left {
left: 0;
transform: translateX(-22%);
--vertical-offset: 2px;
}
@media (max-width: 780px) {
.tooltip-extras {
top: 52px;
Expand Down
44 changes: 32 additions & 12 deletions src/web-components/tooltip/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export class Tooltip extends WebComponentsBaseElement {
declare showTooltip: boolean;
declare tooltipVerticalPosition: Positions;
declare tooltipHorizontalPosition: Positions;
declare shiftTooltipLeft: boolean;

declare hostSizes: { height: number; width: number };

Expand All @@ -32,6 +33,7 @@ export class Tooltip extends WebComponentsBaseElement {
tooltipVerticalPosition: { type: String },
tooltipHorizontalPosition: { type: String },
hostSizes: { type: Object },
shiftTooltipLeft: { type: Boolean },
};

constructor() {
Expand All @@ -42,21 +44,39 @@ export class Tooltip extends WebComponentsBaseElement {

protected firstUpdated(
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,
): void {}
): void {
const { host } = this.getRootNode() as unknown as { host: HTMLElement };

protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
if (changedProperties.has('dropdown')) {
//
}
host.addEventListener('mouseenter', () => {
this.showTooltip = true;
});

host.addEventListener('mouseleave', () => {
this.showTooltip = false;
});

this.tooltipVerticalPosition = PositionsEnum['TOOLTIP-BOTTOM'];
this.tooltipHorizontalPosition = PositionsEnum['TOOLTIP-CENTER'];
}

disconnectedCallback(): void {
super.disconnectedCallback();
const { host } = this.getRootNode() as unknown as { host: HTMLElement };
host.removeEventListener('mouseenter', () => {
this.showTooltip = true;
});

host.removeEventListener('mouseleave', () => {
this.showTooltip = false;
});
}

protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
if (changedProperties.has('showTooltip') && this.showTooltip) {
const { height, width } = (this.getRootNode() as any).host.getBoundingClientRect();
if (this.hostSizes?.height !== height || this.hostSizes?.width !== width) {
this.hostSizes = { height, width };
}

this.tooltipVerticalPosition = PositionsEnum['TOOLTIP-BOTTOM'];
this.tooltipHorizontalPosition = PositionsEnum['TOOLTIP-CENTER'];
}
}

Expand Down Expand Up @@ -116,18 +136,18 @@ export class Tooltip extends WebComponentsBaseElement {
'superviz-who-is-online__tooltip': true,
'tooltip-extras': this.tooltipOnLeft,
'show-tooltip': this.showTooltip,
'shift-left': this.shiftTooltipLeft,
};

classList[verticalPosition] = true;
classList[horizontalPosition] = true;

console.error(horizontalPosition);

return html`<div
class=${classMap(classList)}
style="--host-heigth: ${this.hostSizes?.height}px; --host-width: ${this.hostSizes?.width}px;"
>
<p class="tooltip-name">${this.tooltipData.name}</p>
<p class="tooltip-action">${this.tooltipData.action}</p>
<p class="tooltip-name">${this.tooltipData?.name}</p>
<p class="tooltip-action">${this.tooltipData?.action}</p>
<div class="superviz-who-is-online__tooltip-arrow"></div>
</div>`;
}
Expand Down
Loading

0 comments on commit 2456a33

Please sign in to comment.