Skip to content

Commit

Permalink
feat(services): convert jQuery to native elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed May 25, 2021
1 parent 177b68f commit fc2132f
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 26 deletions.
14 changes: 11 additions & 3 deletions src/app/modules/angular-slickgrid/services/__tests__/groupingAndColspan.service.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,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' },
Expand All @@ -163,7 +169,9 @@ describe('GroupingAndColspanService', () => {
];
gridStub.getColumns = jest.fn();
jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
jest.spyOn(gridStub, 'getPreHeaderPanel').mockReturnValue(`<div style="width: 2815px; left: -1000px;" class="slick-header-columns"></div>`);
jest.spyOn(gridStub, 'getPreHeaderPanel').mockReturnValue(mockPreHeaderPanelElm);
jest.spyOn(gridStub, 'getPreHeaderPanelLeft').mockReturnValue(document.createElement('div'));
jest.spyOn(gridStub, 'getPreHeaderPanelRight').mockReturnValue(document.createElement('div'));
});

it('should call the "renderPreHeaderRowGroupingTitles" on initial load even when there are no column definitions', () => {
Expand Down Expand Up @@ -350,8 +358,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, dataViewStub);
Expand Down
54 changes: 31 additions & 23 deletions src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Column, GridOption, SlickEventHandler, ExtensionName } from './../model
import { ExtensionUtility } from '../extensions/extensionUtility';
import { ExtensionService } from './extension.service';
import { ResizerService } from './resizer.service';
import { unsubscribeAllObservables } from './utilities';
import { emptyElement, unsubscribeAllObservables } from './utilities';
import { SharedService } from './shared.service';

// using external non-typed js libraries
Expand Down Expand Up @@ -101,56 +101,64 @@ 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 && this._gridOptions.frozenHeaderWidthCalcDifferential || 0;
const isFrozenGrid = (this._gridOptions && (this._gridOptions.frozenColumn !== undefined && this._gridOptions.frozenColumn >= 0));
const frozenHeaderWidthCalcDifferential = this._gridOptions?.frozenHeaderWidthCalcDifferential ?? 0;
const isFrozenGrid = (this._gridOptions?.frozenColumn !== undefined && this._gridOptions.frozenColumn >= 0);

for (let i = start; i < end; i++) {
colDef = this._columnDefinitions[i];
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 = $(`<div class="ui-state-default slick-header-column ${isFrozenGrid ? 'frozen' : ''}" />`)
.html(`<span class="slick-column-name">${colDef.columnGroup || ''}</span>`)
.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 || '';
}
}
}


/** Translate Column Group texts and re-render them afterward. */
translateGroupingAndColSpan() {
const currentColumnDefinitions = this._grid.getColumns();
Expand Down

0 comments on commit fc2132f

Please sign in to comment.