feat(plugins): replace AutoTooltips Extension by plugin

- use the code from the AutoTooltips SlickGrid Plugin code and implement it directly in the lib instead of having an extension that calls the plugin which is a bridge.

examples/webpack-demo-vanilla-bundle/src/examples/example04.ts

@@ -342,6 +342,7 @@ export class Example4 {
       autoResize: {
         container: '.demo-container',
       },
+      enableAutoTooltip: true,
       enableAutoSizeColumns: true,
       enableAutoResize: true,
       enableCellNavigation: true,

packages/common/src/enums/slickPluginList.enum.ts

@@ -1,5 +1,4 @@
 import {
-  SlickAutoTooltips,
   SlickCellExternalCopyManager,
   SlickCellMenu,
   SlickCellRangeDecorator,
@@ -16,9 +15,10 @@ import {
   SlickRowMoveManager,
   SlickRowSelectionModel,
 } from '../interfaces/index';
+import { AutoTooltipsPlugin } from '../plugins/index';
 
 export type SlickPluginList =
-  SlickAutoTooltips |
+  AutoTooltipsPlugin |
   SlickCellExternalCopyManager |
   SlickCellMenu |
   SlickCellRangeDecorator |

packages/common/src/extensions/index.ts

@@ -1,4 +1,3 @@
-export * from './autoTooltipExtension';
 export * from './cellExternalCopyManagerExtension';
 export * from './cellMenuExtension';
 export * from './checkboxSelectorExtension';

packages/common/src/interfaces/autoTooltipOption.interface.ts

@@ -6,7 +6,7 @@ export interface AutoTooltipOption {
   enableForHeaderCells: boolean;
 
   /** what is the maximum tooltip length in pixels (only type the number) */
-  maxToolTipLength: number;
+  maxToolTipLength?: number;
 
   /** Allow preventing custom tooltips from being overwritten by auto tooltips */
   replaceExisting?: boolean;

packages/common/src/interfaces/index.ts

@@ -126,7 +126,6 @@ export * from './searchColumnFilter.interface';
 export * from './selectOption.interface';
 export * from './servicePagination.interface';
 export * from './singleColumnSort.interface';
-export * from './slickAutoTooltips.interface';
 export * from './slickCellExternalCopyManager.interface';
 export * from './slickCellMenu.interface';
 export * from './slickCellRangeDecorator.interface';

packages/common/src/interfaces/slickNamespace.interface.ts

@@ -15,7 +15,7 @@ import {
   RowDetailViewOption,
   RowMoveManagerOption,
   RowSelectionModelOption,
-  SlickAutoTooltips,
+  // SlickAutoTooltips,
   SlickCellExternalCopyManager,
   SlickCellMenu,
   SlickCellRangeDecorator,
@@ -44,6 +44,7 @@ import {
   SlickRowSelectionModel,
 } from './index';
 import { CompositeEditorOption } from './compositeEditorOption.interface';
+import { AutoTooltipsPlugin } from '../plugins/index';
 
 /**
  * Slick Grid class interface of the entire library and it's multiple controls/plugins.
@@ -109,7 +110,7 @@ export interface SlickNamespace {
   // -------------------------------
 
   /** AutoTooltips is a 3rd party plugin (addon) to show/hide tooltips when columns are too narrow to fit content. */
-  AutoTooltips: new (options?: AutoTooltipOption) => SlickAutoTooltips;
+  AutoTooltips: new (options?: AutoTooltipOption) => AutoTooltipsPlugin;
 
   /** Cell External Copy Manager is a 3rd party plugin (addon) which is an Excel like copy cell range addon */
   CellExternalCopyManager: new (options?: ExcelCopyBufferOption) => SlickCellExternalCopyManager;

packages/common/src/plugins/__tests__/autoTooltips.plugin.spec.ts

@@ -0,0 +1,57 @@
+import { GridOption, SlickGrid, SlickNamespace } from '../../interfaces/index';
+import { SharedService } from '../../services/shared.service';
+import { AutoTooltipsPlugin } from '../autoTooltips.plugin';
+
+declare const Slick: SlickNamespace;
+
+const gridStub = {
+  getOptions: jest.fn(),
+  registerPlugin: jest.fn(),
+  onHeaderMouseEnter: new Slick.Event(),
+  onMouseEnter: new Slick.Event(),
+} as unknown as SlickGrid;
+
+const mockAddon = jest.fn().mockImplementation(() => ({
+  init: jest.fn(),
+  destroy: jest.fn()
+}));
+
+describe('AutoTooltip Plugin', () => {
+  jest.mock('slickgrid/plugins/slick.autotooltips', () => mockAddon);
+  Slick.AutoTooltips = mockAddon;
+
+  let plugin: AutoTooltipsPlugin;
+  let sharedService: SharedService;
+
+  beforeEach(() => {
+    sharedService = new SharedService();
+    plugin = new AutoTooltipsPlugin();
+  });
+
+  it('should create the plugin', () => {
+    expect(plugin).toBeTruthy();
+    expect(plugin.eventHandler).toBeTruthy();
+  });
+
+  it('should use default options when instantiating the plugin without passing any arguments', () => {
+    plugin.init(gridStub);
+
+    expect(plugin.options).toEqual({
+      enableForCells: true,
+      enableForHeaderCells: false,
+      maxToolTipLength: undefined,
+      replaceExisting: true
+    });
+  });
+
+  // describe('registered addon', () => {
+  //   beforeEach(() => {
+  //     jest.spyOn(SharedService.prototype, 'slickGrid', 'get').mockReturnValue(gridStub);
+  //     jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
+  //   });
+
+  //   it('should ', () => {
+
+  //   });
+  // });
+});

packages/common/src/plugins/autoTooltips.plugin.ts

@@ -0,0 +1,99 @@
+import {
+  AutoTooltipOption,
+  Column,
+  GetSlickEventType,
+  SlickEventHandler,
+  SlickGrid,
+  SlickNamespace,
+} from '../interfaces/index';
+
+// using external SlickGrid JS libraries
+declare const Slick: SlickNamespace;
+
+export class AutoTooltipsPlugin {
+  private _eventHandler!: SlickEventHandler;
+  private _grid!: SlickGrid;
+  private _options?: AutoTooltipOption;
+  private _defaults = {
+    enableForCells: true,
+    enableForHeaderCells: false,
+    maxToolTipLength: undefined,
+    replaceExisting: true
+  } as AutoTooltipOption;
+  pluginName: 'AutoTooltips' = 'AutoTooltips';
+
+  /** Constructor of the SlickGrid 3rd party plugin, it can optionally receive options */
+  constructor(options?: AutoTooltipOption) {
+    this._eventHandler = new Slick.EventHandler();
+    this._options = options;
+  }
+
+  get eventHandler(): SlickEventHandler {
+    return this._eventHandler;
+  }
+
+  get options(): AutoTooltipOption {
+    return this._options as AutoTooltipOption;
+  }
+
+  /** Initialize plugin. */
+  init(grid: SlickGrid) {
+    this._options = { ...this._defaults, ...this._options };
+    this._grid = grid;
+    if (this._options.enableForCells) {
+      const onMouseEnterHandler = this._grid.onMouseEnter;
+      (this._eventHandler as SlickEventHandler<GetSlickEventType<typeof onMouseEnterHandler>>).subscribe(onMouseEnterHandler, this.handleMouseEnter.bind(this));
+    }
+    if (this._options.enableForHeaderCells) {
+      const onHeaderMouseEnterHandler = this._grid.onHeaderMouseEnter;
+      (this._eventHandler as SlickEventHandler<GetSlickEventType<typeof onHeaderMouseEnterHandler>>).subscribe(onHeaderMouseEnterHandler, this.handleHeaderMouseEnter.bind(this));
+    }
+  }
+
+  /** Destroy (dispose) the SlickGrid 3rd party plugin */
+  destroy() {
+    this._eventHandler?.unsubscribeAll();
+  }
+
+  // --
+  // private functions
+  // ------------------
+
+  /**
+   * Handle mouse entering grid cell to add/remove tooltip.
+   * @param {Object} event - The event
+   */
+  private handleMouseEnter(event: Event) {
+    const cell = this._grid.getCellFromEvent(event);
+    if (cell) {
+      let node: HTMLElement | null = this._grid.getCellNode(cell.row, cell.cell);
+      let text;
+      if (this._options && node && (!node.title || this._options?.replaceExisting)) {
+        if (node.clientWidth < node.scrollWidth) {
+          text = node.textContent?.trim() ?? '';
+          if (this._options?.maxToolTipLength && text.length > this._options?.maxToolTipLength) {
+            text = text.substr(0, this._options.maxToolTipLength - 3) + '...';
+          }
+        } else {
+          text = '';
+        }
+        node.title = text;
+      }
+      node = null;
+    }
+  }
+
+  /**
+   * Handle mouse entering header cell to add/remove tooltip.
+   * @param {Object} event - The event
+   * @param {Object} args.column - The column definition
+   */
+  private handleHeaderMouseEnter(event: Event, args: { column: Column; }) {
+    const column = args.column;
+    let node = (event.target as HTMLDivElement).querySelector<HTMLDivElement>('.slick-header-column');
+    if (node && !column?.toolTip) {
+      node.title = (node.clientWidth < node.scrollWidth) ? column.name ?? '' : '';
+    }
+    node = null;
+  }
+}

packages/common/src/plugins/index.ts

@@ -0,0 +1 @@
+export * from './autoTooltips.plugin';