Skip to content

Commit

Permalink
fix: make it work with AutoTooltip and extra option to skip it
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Oct 18, 2021
1 parent 85067b7 commit 2f7e4c5
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 40 deletions.
16 changes: 10 additions & 6 deletions packages/common/src/extensions/slickCustomTooltipExtension.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,10 +137,10 @@ export class SlickCustomTooltip {
* clear the "title" attribute from the grid div text content so that it won't show also as a 2nd browser tooltip
* note: the reason we can do delete it completely is because we always re-execute the formatter whenever we hover the tooltip and so we have a fresh title attribute each time to use
*/
protected clearTitleAttribute() {
protected clearTitleAttribute(inputTitleElm?: Element | null) {
// the title attribute might be directly on the slick-cell element (e.g. AutoTooltip plugin)
// OR in a child element (most commonly as a custom formatter)
const titleElm = this._cellNodeElm?.hasAttribute('title') ? this._cellNodeElm : this._cellNodeElm?.querySelector('[title]');
const titleElm = inputTitleElm || this._cellNodeElm?.hasAttribute('title') ? this._cellNodeElm : this._cellNodeElm?.querySelector('[title]');
titleElm?.setAttribute('title', '');
}

Expand Down Expand Up @@ -284,15 +284,19 @@ export class SlickCustomTooltip {
const tmpDiv = document.createElement('div');
tmpDiv.innerHTML = this.parseFormatter(formatterOrText, cell, value, columnDef, item);

// the title attribute might be directly on the slick-cell element (e.g. AutoTooltip plugin)
// OR in a child element (most commonly as a custom formatter)
const tmpTitleElm = this._cellNodeElm?.hasAttribute('title') ? this._cellNodeElm : tmpDiv.querySelector('[title]');
let tmpTitleElm;
if (this._cellAddonOptions?.useRegularTooltipFromFormatterOnly) {
tmpTitleElm = tmpDiv.querySelector('[title]');
} else {
tmpTitleElm = this._cellNodeElm?.getAttribute('title') ? this._cellNodeElm : tmpDiv.querySelector<HTMLDivElement>('[title]');
}
const tooltipText = tmpTitleElm?.getAttribute('title') ?? '';
if (tooltipText !== '') {
this.renderTooltipFormatter(formatterOrText, cell, value, columnDef, item, tooltipText);
}

// also clear any "title" attribute to avoid showing a 2nd browser tooltip
this.clearTitleAttribute();
this.clearTitleAttribute(tmpTitleElm);
}

protected renderTooltipFormatter(formatter: Formatter | string | undefined, cell: { row: number; cell: number; }, value: any, columnDef: Column, item: unknown, tooltipText?: string) {
Expand Down
9 changes: 8 additions & 1 deletion packages/common/src/interfaces/customTooltipOption.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,20 @@ export interface CustomTooltipOption<T = any> {
/** defaults to False, when set to True it will skip custom tooltip formatter and instead will parse through the regular cell formatter and try to find a `title` to show regular tooltip */
useRegularTooltip?: boolean;

/**
* defaults to False, optionally force to retrieve the `title` from the Formatter result instead of the cell itself.
* For example, when used in combo with the AutoTooltip plugin we might want to force the tooltip to read the `title` attribute from the formatter result first instead of the cell itself,
* make the cell as a 2nd read, in other words check the formatter prior to the cell which the AutoTooltip might have filled.
*/
useRegularTooltipFromFormatterOnly?: boolean;

/** defaults to false, regular "title" tooltip won't be rendered as html unless specified via this flag (also "\r\n" will be replaced by <br>) */
renderRegularTooltipAsHtml?: boolean;

/** defaults to 700 (characters), when defined the text will be truncated to the max length characters provided */
tooltipTextMaxLength?: number;

/** defaults to undefined, when provided it will delay the tooltip open */
/** no defaults, when provided it will delay the tooltip open */
tooltipDelay?: number;

// --
Expand Down
62 changes: 31 additions & 31 deletions packages/common/src/interfaces/slickGrid.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export interface SlickGrid {
addCellCssStyles(key: string, hash: any): void;

/** Apply a Formatter Result to a Cell DOM Node */
applyFormatResultToCellNode(formatterResult?: FormatterResultObject, cellNode?: HTMLElement, suppressRemove?: boolean): void;
applyFormatResultToCellNode(formatterResult?: FormatterResultObject, cellNode?: HTMLDivElement, suppressRemove?: boolean): void;

/** Proportionally resize a specific column by its name, index or Id */
autosizeColumn(columnOrIndexOrId: string | number, isInit: boolean): void;
Expand Down Expand Up @@ -86,7 +86,7 @@ export interface SlickGrid {
focus(): void;

/** Get the canvas DOM element */
getActiveCanvasNode(): HTMLElement;
getActiveCanvasNode(): HTMLDivElement;

/**
* Returns an object representing the coordinates of the currently active cell:
Expand All @@ -99,16 +99,16 @@ export interface SlickGrid {
getActiveCell(): { row: number; cell: number; };

/** Returns the DOM element containing the currently active cell. If no cell is active, null is returned. */
getActiveCellNode(): HTMLElement;
getActiveCellNode(): HTMLDivElement;

/** Returns an object representing information about the active cell's position. All coordinates are absolute and take into consideration the visibility and scrolling position of all ancestors. */
getActiveCellPosition(): ElementPosition;

/** Get the active Viewport DOM node element */
getActiveViewportNode(): HTMLElement;
getActiveViewportNode(): HTMLDivElement;

/** Get the canvas DOM element */
getCanvases(): HTMLElement;
getCanvases(): HTMLDivElement;

/** Get Grid Canvas Node DOM Element */
getCanvasNode(): HTMLCanvasElement;
Expand Down Expand Up @@ -143,7 +143,7 @@ export interface SlickGrid {
* @param row A row index.
* @param cell A column index.
*/
getCellNode(row: number, cell: number): HTMLElement;
getCellNode(row: number, cell: number): HTMLDivElement;

/**
* Returns an object representing information about a cell's position. All coordinates are absolute and take into consideration the visibility and scrolling position of all ancestors.
Expand All @@ -162,7 +162,7 @@ export interface SlickGrid {
getColumns(): Column[];

/** Get Grid Canvas Node DOM Element */
getContainerNode(): HTMLElement;
getContainerNode(): HTMLDivElement;

/** Returns an array of every data object, unless you're using DataView in which case it returns a DataView object. */
getData<T = SlickDataView>(): T;
Expand All @@ -189,10 +189,10 @@ export interface SlickGrid {
};

/** Get the Footer DOM element */
getFooterRow(): HTMLElement;
getFooterRow(): HTMLDivElement;

/** Get the Footer Row Column DOM element */
getFooterRowColumn(columnIdOrIdx: string | number): HTMLElement;
getFooterRowColumn(columnIdOrIdx: string | number): HTMLDivElement;

/** Get frozen (pinned) row offset */
getFrozenRowOffset(row: number): number;
Expand All @@ -201,19 +201,19 @@ export interface SlickGrid {
getGridPosition(): ElementPosition;

/** Get the Header DOM element */
getHeader(columnDef: Column): HTMLElement;
getHeader(columnDef: Column): HTMLDivElement;

/** Get a specific Header Column DOM element */
getHeaderColumn(columnIdOrIdx: string | number): HTMLElement;
getHeaderColumn(columnIdOrIdx: string | number): HTMLDivElement;

/** Get Header Column Width Difference in pixel */
getHeaderColumnWidthDiff(): number;

/** Get the Header Row DOM element */
getHeaderRow(): HTMLElement;
getHeaderRow(): HTMLDivElement;

/** Get Header Row Column DOM element by its column Id */
getHeaderRowColumn(columnId: string | number): HTMLElement;
getHeaderRowColumn(columnId: string | number): HTMLDivElement;

/** Get the headers width in pixel */
getHeadersWidth(): number;
Expand All @@ -225,13 +225,13 @@ export interface SlickGrid {
getPluginByName<T = keyof SlickPluginList>(name: string): T;

/** Get the Pre-Header Panel DOM node element */
getPreHeaderPanel(): HTMLElement;
getPreHeaderPanel(): HTMLDivElement;

/** Get the Pre-Header Panel Left DOM node element */
getPreHeaderPanelLeft(): HTMLElement;
getPreHeaderPanelLeft(): HTMLDivElement;

/** Get the Pre-Header Panel Right DOM node element */
getPreHeaderPanelRight(): HTMLElement;
getPreHeaderPanelRight(): HTMLDivElement;

/** Get rendered range */
getRenderedRange(viewportTop?: number, viewportLeft?: number): { top: number; bottom: number; leftPx: number; rightPx: number; };
Expand All @@ -249,7 +249,7 @@ export interface SlickGrid {
getSortColumns(): ColumnSort[];

/** Get Top Panel DOM element */
getTopPanel(): HTMLElement;
getTopPanel(): HTMLDivElement;

/** Get grid unique identifier */
getUID(): string;
Expand All @@ -258,10 +258,10 @@ export interface SlickGrid {
getViewport(viewportTop?: number, viewportLeft?: number): { top: number; bottom: number; leftPx: number; rightPx: number; };

/** Get the Viewport DOM node element */
getViewportNode(): HTMLElement;
getViewportNode(): HTMLDivElement;

/** Get all the Viewport node elements */
getViewports(): HTMLElement[];
getViewports(): HTMLDivElement[];

/**
* Accepts a row integer and a cell integer, scrolling the view to the row where row is its row index, and cell is its cell index. Optionally accepts a forceEdit boolean which, if true, will attempt to initiate the edit dialogue for the field in the specified cell.
Expand Down Expand Up @@ -363,7 +363,7 @@ export interface SlickGrid {
scrollTo(yPos: number): void;

/** Sets an active canvas node */
setActiveCanvasNode(element: HTMLElement): void;
setActiveCanvasNode(element: HTMLDivElement): void;

/**
* Sets an active cell.
Expand All @@ -384,7 +384,7 @@ export interface SlickGrid {
setActiveRow(row: number, cell?: number, suppressScrollIntoView?: boolean): void;

/** Sets an active viewport node */
setActiveViewportNode(element: HTMLElement): void;
setActiveViewportNode(element: HTMLDivElement): void;

/**
* Sets CSS classes to specific grid cells by calling removeCellCssStyles(key) followed by addCellCssStyles(key, hash). key is name for this set of styles so you can reference it later - to modify it or remove it, for example. hash is a per-row-index, per-column-name nested hash of CSS classes to apply.
Expand Down Expand Up @@ -541,36 +541,36 @@ export interface OnBeforeAppendCellEventArgs extends SlickGridEventData { row: n
export interface OnBeforeCellEditorDestroyEventArgs extends SlickGridEventData { editor: Editor; }
export interface OnBeforeColumnsResizeEventArgs extends SlickGridEventData { triggeredByColumn: string; }
export interface OnBeforeEditCellEventArgs extends SlickGridEventData { row: number; cell: number; item: any; column: Column; target?: 'grid' | 'composite'; compositeEditorOptions?: CompositeEditorOption; }
export interface OnBeforeHeaderCellDestroyEventArgs extends SlickGridEventData { node: HTMLElement; column: Column; }
export interface OnBeforeHeaderRowCellDestroyEventArgs extends SlickGridEventData { node: HTMLElement; column: Column; }
export interface OnBeforeFooterRowCellDestroyEventArgs extends SlickGridEventData { node: HTMLElement; column: Column; }
export interface OnBeforeHeaderCellDestroyEventArgs extends SlickGridEventData { node: HTMLDivElement; column: Column; }
export interface OnBeforeHeaderRowCellDestroyEventArgs extends SlickGridEventData { node: HTMLDivElement; column: Column; }
export interface OnBeforeFooterRowCellDestroyEventArgs extends SlickGridEventData { node: HTMLDivElement; column: Column; }
export interface OnCellChangeEventArgs extends SlickGridEventData { row: number; cell: number; item: any; column: Column; }
export interface OnCellCssStylesChangedEventArgs extends SlickGridEventData { key: string; hash: string; }
export interface OnColumnsDragEventArgs extends SlickGridEventData { triggeredByColumn: string; resizeHandle: HTMLElement; }
export interface OnColumnsDragEventArgs extends SlickGridEventData { triggeredByColumn: string; resizeHandle: HTMLDivElement; }
export interface OnColumnsReorderedEventArgs extends SlickGridEventData { impactedColumns: Column[]; }
export interface OnColumnsResizedEventArgs extends SlickGridEventData { triggeredByColumn: string; }
export interface OnColumnsResizeDblClickEventArgs extends SlickGridEventData { triggeredByColumn: string; }
export interface OnCompositeEditorChangeEventArgs extends SlickGridEventData { row: number; cell: number; item: any; column: Column; formValues: any; editors: { [columnId: string]: Editor; }; triggeredBy?: 'user' | 'system'; }
export interface OnClickEventArgs extends SlickGridEventData { row: number; cell: number; }
export interface OnDblClickEventArgs extends SlickGridEventData { row: number; cell: number; }
export interface OnFooterContextMenuEventArgs extends SlickGridEventData { column: Column; }
export interface OnFooterRowCellRenderedEventArgs extends SlickGridEventData { node: HTMLElement; column: Column; }
export interface OnHeaderCellRenderedEventArgs extends SlickGridEventData { node: HTMLElement; column: Column; }
export interface OnFooterRowCellRenderedEventArgs extends SlickGridEventData { node: HTMLDivElement; column: Column; }
export interface OnHeaderCellRenderedEventArgs extends SlickGridEventData { node: HTMLDivElement; column: Column; }
export interface OnFooterClickEventArgs extends SlickGridEventData { column: Column; }
export interface OnHeaderClickEventArgs extends SlickGridEventData { column: Column; }
export interface OnHeaderContextMenuEventArgs extends SlickGridEventData { column: Column; }
export interface OnHeaderMouseEventArgs extends SlickGridEventData { column: Column; }
export interface OnHeaderRowCellRenderedEventArgs extends SlickGridEventData { node: HTMLElement; column: Column; }
export interface OnHeaderRowCellRenderedEventArgs extends SlickGridEventData { node: HTMLDivElement; column: Column; }
export interface OnKeyDownEventArgs extends SlickGridEventData { row: number; cell: number; }
export interface OnValidationErrorEventArgs extends SlickGridEventData { row: number; cell: number; validationResults: EditorValidationResult; column: Column; editor: Editor; cellNode: HTMLElement; }
export interface OnValidationErrorEventArgs extends SlickGridEventData { row: number; cell: number; validationResults: EditorValidationResult; column: Column; editor: Editor; cellNode: HTMLDivElement; }
export interface OnRenderedEventArgs extends SlickGridEventData { startRow: number; endRow: number; }
export interface OnSelectedRowsChangedEventArgs extends SlickGridEventData { rows: number[], previousSelectedRows: number[] }
export interface OnSetOptionsEventArgs extends SlickGridEventData { optionsBefore: GridOption, optionsAfter: GridOption }

export interface OnScrollEventArgs extends SlickGridEventData { scrollLeft: number; scrollTop: number; }
export interface OnDragEventArgs extends SlickGridEventData {
count: number; deltaX: number; deltaY: number; offsetX: number; offsetY: number; originalX: number; originalY: number;
available: HTMLElement | HTMLElement[]; drag: HTMLElement; drop: HTMLElement | HTMLElement[]; helper: HTMLElement;
proxy: HTMLElement; target: HTMLElement; mode: string;
available: HTMLDivElement | HTMLDivElement[]; drag: HTMLDivElement; drop: HTMLDivElement | HTMLDivElement[]; helper: HTMLDivElement;
proxy: HTMLDivElement; target: HTMLDivElement; mode: string;
row: number; rows: number[]; startX: number; startY: number;
}
3 changes: 1 addition & 2 deletions packages/vanilla-bundle/src/salesforce-global-grid-options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ export const SalesforceGlobalGridOptions = {
enableCellNavigation: true,
enableCustomTooltip: true,
customTooltip: {
tooltipTextMaxLength: 700,
tooltipDelay: 0,
tooltipTextMaxLength: 650,
},
filterTypingDebounce: 250,
formatterOptions: {
Expand Down

0 comments on commit 2f7e4c5

Please sign in to comment.