From 4da0a201aaa866447a0c76e3b9c16503e2ed6af9 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Mon, 24 May 2021 23:13:02 -0400 Subject: [PATCH] feat(services): convert jQuery to native elements --- .../groupingAndColspan.service.spec.ts | 14 ++++-- .../services/groupingAndColspan.service.ts | 50 +++++++++++-------- 2 files changed, 41 insertions(+), 23 deletions(-) diff --git a/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts b/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts index bb3ae65b5..709b005bf 100644 --- a/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts +++ b/packages/common/src/services/__tests__/groupingAndColspan.service.spec.ts @@ -130,6 +130,12 @@ describe('GroupingAndColspanService', () => { let mockColumns: Column[]; beforeEach(() => { + const mockParentPreHeaderElm = document.createElement('div'); + const mockPreHeaderPanelElm = document.createElement('div'); + mockPreHeaderPanelElm.className = 'slick-header-columns'; + mockPreHeaderPanelElm.style.left = '-1000px'; + mockPreHeaderPanelElm.style.width = '2815px'; + mockParentPreHeaderElm.appendChild(mockPreHeaderPanelElm); mockColumns = [ { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' }, { id: 'duration', name: 'Duration', field: 'duration', width: 100, columnGroup: 'Common Factor' }, @@ -139,7 +145,9 @@ describe('GroupingAndColspanService', () => { gridStub.getColumns = jest.fn(); jest.spyOn(gridStub, 'getPluginByName').mockReturnValue(resizerPluginStub); jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns); - jest.spyOn(gridStub, 'getPreHeaderPanel').mockReturnValue(`
` as unknown as HTMLElement); + jest.spyOn(gridStub, 'getPreHeaderPanel').mockReturnValue(mockPreHeaderPanelElm); + jest.spyOn(gridStub, 'getPreHeaderPanelLeft').mockReturnValue(document.createElement('div')); + jest.spyOn(gridStub, 'getPreHeaderPanelRight').mockReturnValue(document.createElement('div')); }); afterEach(() => { @@ -331,8 +339,8 @@ describe('GroupingAndColspanService', () => { const frozenColumns = 2; gridOptionMock.frozenColumn = frozenColumns; const headerGroupSpy = jest.spyOn(service, 'renderHeaderGroups'); - const preHeaderLeftSpy = jest.spyOn(gridStub, 'getPreHeaderPanelLeft'); - const preHeaderRightSpy = jest.spyOn(gridStub, 'getPreHeaderPanelRight'); + const preHeaderLeftSpy = jest.spyOn(gridStub, 'getPreHeaderPanelLeft').mockReturnValue(document.createElement('div')); + const preHeaderRightSpy = jest.spyOn(gridStub, 'getPreHeaderPanelRight').mockReturnValue(document.createElement('div')); const divHeaderColumns = document.getElementsByClassName('slick-header-columns'); service.init(gridStub); diff --git a/packages/common/src/services/groupingAndColspan.service.ts b/packages/common/src/services/groupingAndColspan.service.ts index 23f40db71..7546041b5 100644 --- a/packages/common/src/services/groupingAndColspan.service.ts +++ b/packages/common/src/services/groupingAndColspan.service.ts @@ -13,6 +13,7 @@ import { ExtensionName } from '../enums/index'; import { ExtensionUtility } from '../extensions/extensionUtility'; import { ExtensionService } from '../services/extension.service'; import { PubSubService } from './pubSub.service'; +import { emptyElement } from './utilities'; // using external non-typed js libraries declare const Slick: SlickNamespace; @@ -21,7 +22,7 @@ export class GroupingAndColspanService { private _eventHandler: SlickEventHandler; private _grid!: SlickGrid; - constructor(private extensionUtility: ExtensionUtility, private extensionService: ExtensionService, private pubSubService: PubSubService,) { + constructor(private readonly extensionUtility: ExtensionUtility, private readonly extensionService: ExtensionService, private readonly pubSubService: PubSubService,) { this._eventHandler = new Slick.EventHandler(); } @@ -120,30 +121,33 @@ export class GroupingAndColspanService { renderPreHeaderRowGroupingTitles() { if (this._gridOptions && this._gridOptions.frozenColumn !== undefined && this._gridOptions.frozenColumn >= 0) { // Add column groups to left panel - let $preHeaderPanel = $(this._grid.getPreHeaderPanelLeft()); - this.renderHeaderGroups($preHeaderPanel, 0, this._gridOptions.frozenColumn + 1); + let preHeaderPanelElm = this._grid.getPreHeaderPanelLeft(); + this.renderHeaderGroups(preHeaderPanelElm, 0, this._gridOptions.frozenColumn + 1); // Add column groups to right panel - $preHeaderPanel = $(this._grid.getPreHeaderPanelRight()); - this.renderHeaderGroups($preHeaderPanel, this._gridOptions?.frozenColumn + 1, this._columnDefinitions.length); + preHeaderPanelElm = this._grid.getPreHeaderPanelRight(); + this.renderHeaderGroups(preHeaderPanelElm, this._gridOptions?.frozenColumn + 1, this._columnDefinitions.length); } else { // regular grid (not a frozen grid) - const $preHeaderPanel = $(this._grid.getPreHeaderPanel()); - this.renderHeaderGroups($preHeaderPanel, 0, this._columnDefinitions.length); + const preHeaderPanelElm = this._grid.getPreHeaderPanel(); + this.renderHeaderGroups(preHeaderPanelElm, 0, this._columnDefinitions.length); } } - renderHeaderGroups(preHeaderPanel: any, start: number, end: number) { - preHeaderPanel.empty() - .addClass('slick-header-columns') - .css('left', '-1000px') - .width(this._grid.getHeadersWidth()); - preHeaderPanel.parent().addClass('slick-header'); + renderHeaderGroups(preHeaderPanel: HTMLElement, start: number, end: number) { + emptyElement(preHeaderPanel); + preHeaderPanel.className = 'slick-header-columns'; + preHeaderPanel.style.left = '-1000px'; + preHeaderPanel.style.width = `${this._grid.getHeadersWidth()}px`; + + if (preHeaderPanel.parentElement) { + preHeaderPanel.parentElement.classList.add('slick-header'); + } const headerColumnWidthDiff = this._grid.getHeaderColumnWidthDiff(); let colDef; - let header; + let headerElm: HTMLDivElement | null = null; let lastColumnGroup = ''; let widthTotal = 0; const frozenHeaderWidthCalcDifferential = this._gridOptions?.frozenHeaderWidthCalcDifferential ?? 0; @@ -154,15 +158,21 @@ export class GroupingAndColspanService { if (colDef) { if (lastColumnGroup === colDef.columnGroup && i > 0) { widthTotal += colDef.width || 0; - if (header && header.width) { - header.width(widthTotal - headerColumnWidthDiff - frozenHeaderWidthCalcDifferential); // remove possible frozen border + if (headerElm?.style) { + headerElm.style.width = `${widthTotal - headerColumnWidthDiff - frozenHeaderWidthCalcDifferential}px`; // remove possible frozen border } } else { widthTotal = colDef.width || 0; - header = $(`
`) - .html(`${colDef.columnGroup || ''}`) - .width(widthTotal - headerColumnWidthDiff) - .appendTo(preHeaderPanel); + headerElm = document.createElement('div'); + headerElm.className = `ui-state-default slick-header-column ${isFrozenGrid ? 'frozen' : ''}`; + headerElm.style.width = `${widthTotal - headerColumnWidthDiff}px`; + + const spanColumnNameElm = document.createElement('span'); + spanColumnNameElm.className = 'slick-column-name'; + spanColumnNameElm.textContent = colDef.columnGroup || ''; + + headerElm.appendChild(spanColumnNameElm); + preHeaderPanel.appendChild(headerElm); } lastColumnGroup = colDef.columnGroup || ''; }