diff --git a/packages/common/src/extensions/slickCustomTooltipExtension.ts b/packages/common/src/extensions/slickCustomTooltipExtension.ts index 372e55120..6d4b963fd 100644 --- a/packages/common/src/extensions/slickCustomTooltipExtension.ts +++ b/packages/common/src/extensions/slickCustomTooltipExtension.ts @@ -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', ''); } @@ -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('[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) { diff --git a/packages/common/src/interfaces/customTooltipOption.interface.ts b/packages/common/src/interfaces/customTooltipOption.interface.ts index 5a5e721d0..bd5cc041c 100644 --- a/packages/common/src/interfaces/customTooltipOption.interface.ts +++ b/packages/common/src/interfaces/customTooltipOption.interface.ts @@ -76,13 +76,20 @@ export interface CustomTooltipOption { /** 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
) */ 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; // -- diff --git a/packages/common/src/interfaces/slickGrid.interface.ts b/packages/common/src/interfaces/slickGrid.interface.ts index 55a9f9a9b..6eaba6d84 100644 --- a/packages/common/src/interfaces/slickGrid.interface.ts +++ b/packages/common/src/interfaces/slickGrid.interface.ts @@ -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; @@ -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: @@ -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; @@ -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. @@ -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; @@ -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; @@ -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; @@ -225,13 +225,13 @@ export interface SlickGrid { getPluginByName(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; }; @@ -249,7 +249,7 @@ export interface SlickGrid { getSortColumns(): ColumnSort[]; /** Get Top Panel DOM element */ - getTopPanel(): HTMLElement; + getTopPanel(): HTMLDivElement; /** Get grid unique identifier */ getUID(): string; @@ -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. @@ -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. @@ -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. @@ -541,12 +541,12 @@ 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; } @@ -554,15 +554,15 @@ export interface OnCompositeEditorChangeEventArgs extends SlickGridEventData { r 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 } @@ -570,7 +570,7 @@ export interface OnSetOptionsEventArgs extends SlickGridEventData { optionsBefor 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; } diff --git a/packages/vanilla-bundle/src/salesforce-global-grid-options.ts b/packages/vanilla-bundle/src/salesforce-global-grid-options.ts index 6fdfbf664..b5ad50d1a 100644 --- a/packages/vanilla-bundle/src/salesforce-global-grid-options.ts +++ b/packages/vanilla-bundle/src/salesforce-global-grid-options.ts @@ -31,8 +31,7 @@ export const SalesforceGlobalGridOptions = { enableCellNavigation: true, enableCustomTooltip: true, customTooltip: { - tooltipTextMaxLength: 700, - tooltipDelay: 0, + tooltipTextMaxLength: 650, }, filterTypingDebounce: 250, formatterOptions: {