@gravatar-com/hovercards
Version:
Add profile hovercards to Gravatar images.
281 lines • 11 kB
TypeScript
/// <reference types="node" />
import type { Placement } from './assign-position';
export interface VerifiedAccount {
type: string;
label: string;
icon: string;
url: string;
isHidden: boolean;
}
export type ContactInfo = Partial<{
home_phone: string;
work_phone: string;
cell_phone: string;
email: string;
contact_form: string;
calendar: string;
calendly: string;
}>;
export interface PaymentLink {
label: string;
url: string;
}
export interface CryptoWallet {
label: string;
address: string;
}
export type Payments = Partial<{
links: PaymentLink[];
crypto_wallets: CryptoWallet[];
}>;
export interface ProfileData {
hash: string;
avatarUrl: string;
profileUrl: string;
displayName: string;
location?: string;
description?: string;
jobTitle?: string;
company?: string;
headerImage?: string;
hideDefaultHeaderImage?: boolean;
backgroundColor?: string;
verifiedAccounts?: VerifiedAccount[];
contactInfo?: ContactInfo;
payments?: Payments;
}
export interface CreateHovercardOptions {
additionalClass?: string;
myHash?: string;
i18n?: Record<string, string>;
}
export type CreateHovercard = (profileData: ProfileData, options?: CreateHovercardOptions) => HTMLDivElement;
export interface CreateHovercardSkeletonOptions {
additionalClass?: string;
}
export type CreateHovercardSkeleton = (options?: CreateHovercardSkeletonOptions) => HTMLDivElement;
export interface CreateHovercardErrorOptions {
avatarAlt?: string;
additionalClass?: string;
additionalMessage?: string;
}
export type CreateHovercardError = (avatarUrl: string, message: string, options?: CreateHovercardErrorOptions) => HTMLDivElement;
export type Attach = (target: HTMLElement, options?: {
dataAttributeName?: string;
ignoreSelector?: string;
}) => void;
export type Detach = () => void;
export type OnQueryHovercardRef = (ref: HTMLElement) => HTMLElement;
export type OnFetchProfileStart = (hash: string) => void;
export type OnFetchProfileSuccess = (hash: string, profileData: ProfileData) => void;
export type FetchProfileError = {
code: number;
message: string;
};
export type OnFetchProfileFailure = (hash: string, error: FetchProfileError) => void;
export type OnHovercardShown = (hash: string, hovercard: HTMLDivElement) => void;
export type OnHovercardHidden = (hash: string, hovercard: HTMLDivElement) => void;
export type OnCanShowHovercard = (hash: string) => boolean;
export type Options = Partial<{
placement: Placement;
offset: number;
autoFlip: boolean;
autoShift: boolean;
hideOnTargetClick: boolean;
delayToShow: number;
delayToHide: number;
additionalClass: string;
myHash: string;
i18n: Record<string, string>;
onQueryHovercardRef: OnQueryHovercardRef;
onFetchProfileStart: OnFetchProfileStart;
onFetchProfileSuccess: OnFetchProfileSuccess;
onFetchProfileFailure: OnFetchProfileFailure;
onHovercardShown: OnHovercardShown;
onHovercardHidden: OnHovercardHidden;
onCanShowHovercard: OnCanShowHovercard;
}>;
interface HovercardRef {
id: string;
hash: string;
params: string;
ref: HTMLElement;
onEnter: (e: MouseEvent) => void;
onLeave: (e: MouseEvent) => void;
onClick: (e: MouseEvent) => void;
}
export default class Hovercards {
_placement: Placement;
_offset: number;
_autoFlip: boolean;
_autoShift: boolean;
_hideOnTargetClick: boolean;
_delayToShow: number;
_delayToHide: number;
_additionalClass: string;
_myHash: string;
_onQueryHovercardRef: OnQueryHovercardRef;
_onFetchProfileStart: OnFetchProfileStart;
_onFetchProfileSuccess: OnFetchProfileSuccess;
_onFetchProfileFailure: OnFetchProfileFailure;
_onHovercardShown: OnHovercardShown;
_onHovercardHidden: OnHovercardHidden;
_canShowHovercard: OnCanShowHovercard;
_i18n: Record<string, string>;
_hovercardRefs: HovercardRef[];
_showHovercardTimeoutIds: Map<string, NodeJS.Timeout>;
_hideHovercardTimeoutIds: Map<string, NodeJS.Timeout>;
_cachedProfiles: Map<string, ProfileData>;
constructor({ placement, offset, autoFlip, autoShift, hideOnTargetClick, delayToShow, delayToHide, additionalClass, myHash, onQueryHovercardRef, onFetchProfileStart, onFetchProfileSuccess, onFetchProfileFailure, onHovercardShown, onHovercardHidden, onCanShowHovercard, i18n, }?: Options);
/**
* Queries hovercard refs on or within the target element.
*
* @param {HTMLElement} target - The element to query.
* @param {string} dataAttributeName - Data attribute name associated with Gravatar hashes.
* @param {string} [ignoreSelector] - The selector to ignore certain elements.
* @return {HovercardRef[]} - The queried hovercard refs.
* @private
*/
_queryHovercardRefs(target: HTMLElement, dataAttributeName: string, ignoreSelector?: string): HovercardRef[];
/**
* Creates a hovercard element with the provided profile data.
*
* @param {ProfileData} profileData - The profile data to populate the hovercard.
* @param {Object} [options] - Optional parameters for the hovercard.
* @param {string} [options.additionalClass] - Additional CSS class for the hovercard.
* @param {string} [options.myHash] - The hash of the current user.
* @param {Object} [options.i18n] - The i18n object.
* @return {HTMLDivElement} - The created hovercard element.
*/
static createHovercard: CreateHovercard;
/**
* Creates a hovercard drawer.
*
* @param {string} name - The drawer name.
* @param {string} titleText - The title shown at the drawer's header.
* @param {string} content - The drawer inner content.
* @return {string} - The drawer HTML string.
* @private
*/
private static _createDrawer;
/**
* Opens a hovercard drawer.
*
* @param {HTMLElement} target - The target drawer.
* @param {HTMLElement} container - The container context to search for the drawer.
* @return {void}
* @private
*/
private static _openDrawer;
/**
* Closes a hovercard drawer.
*
* @param {HTMLElement} target - The drawer selector.
* @param {HTMLElement} container - The container context to search for the drawer.
* @return {void}
* @private
*/
private static _closeDrawer;
/**
* Creates the contact drawer content.
*
* @param {Record< string, any >[]} contactsData - The user's contact data.
* @param {Object} [options] - Optional parameters for the contact drawer.
* @param {Record<string, string>} [options.i18n] - The i18n object.
* @return {string} - The contact drawer content.
* @private
*/
private static _createContactDrawerContent;
/**
* Creates the send money drawer content.
*
* @param {Payments} payments - The user's payment data.
* @return {string} - The send money drawer content.
* @private
*/
private static _createSendMoneyDrawerContent;
/**
* Creates a skeleton hovercard element.
*
* @param {Object} [options] - Optional parameters for the skeleton hovercard.
* @param {string} [options.additionalClass] - Additional CSS class for the skeleton hovercard.
* @return {HTMLDivElement} - The created skeleton hovercard element.
*/
static createHovercardSkeleton: CreateHovercardSkeleton;
/**
* Creates an error hovercard element.
*
* @param {string} avatarUrl - The URL of the avatar image.
* @param {string} message - The error message to display.
* @param {Object} [options] - Optional parameters for the error hovercard.
* @param {string} [options.avatarAlt] - The alt text for the avatar image.
* @param {string} [options.additionalClass] - Additional CSS class for the error hovercard.
* @param {string} [options.additionalMessage] - Additional message to display in the error hovercard.
* @return {HTMLDivElement} - The created error hovercard element.
*/
static createHovercardError: CreateHovercardError;
/**
* Waits for a specified delay and fetches the user's profile data,
* then shows the hovercard relative to the ref element.
*
* @param {HovercardRef} hovercardRef - The hovercard ref object.
* @return {void}
* @private
*/
_showHovercard({ id, hash, params, ref }: HovercardRef): void;
/**
* Waits for a specified delay and hides the hovercard.
*
* @param {string} id - The ID associated with the hovercard.
* @param {number} [delay] - The delay in milliseconds before hiding the hovercard.
* @return {void}
* @private
*/
_hideHovercard(id: string, delay?: number): void;
/**
* Handles the mouseenter event for hovercard refs.
*
* @param {MouseEvent} e - The mouseenter event object.
* @param {HovercardRef} hovercardRef - The hovercard ref object.
* @return {void}
* @private
*/
_handleMouseEnter(e: MouseEvent, hovercardRef: HovercardRef): void;
/**
* Handles the mouseleave event for hovercard refs.
*
* @param {MouseEvent} e - The mouseleave event object.
* @param {HovercardRef} hovercardRef - The hovercard ref object.
* @param {string} hovercardRef.id - The ID associated with the hovercard.
* @return {void}
* @private
*/
_handleMouseLeave(e: MouseEvent, { id }: HovercardRef): void;
/**
* Handles the click event for hovercard refs.
*
* @param {HovercardRef} hovercardRef - The hovercard ref object.
* @param {string} hovercardRef.id - The ID associated with the hovercard.
* @return {void}
* @private
*/
_handleMouseClick({ id }: HovercardRef): void;
/**
* Attaches event listeners on or within the target element.
*
* @param {HTMLElement} target - The target element to set.
* @param {Object} [options={}] - The optional parameters.
* @param {string} options.dataAttributeName - Data attribute name associated with Gravatar hashes.
* @param {string} options.ignoreSelector - The selector to ignore certain elements.
* @return {void}
*/
attach: Attach;
/**
* Removes event listeners from hovercard refs and resets the stored list of these refs.
*
* @return {void}
*/
detach: Detach;
}
export {};
//# sourceMappingURL=core.d.ts.map