Skip to content

Commit

Permalink
feat(plugins): move external Context Menu into Slickgrid-Universal
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Sep 9, 2021
1 parent ffc51e8 commit 2170bb4
Show file tree
Hide file tree
Showing 20 changed files with 2,670 additions and 1,688 deletions.
6 changes: 3 additions & 3 deletions packages/common/src/controls/__tests__/columnPickerControl.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ describe('ColumnPickerControl', () => {
const inputElm = control.menuElement.querySelector('input[type="checkbox"]');
inputElm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false }));

expect(control.menuElement.style.visibility).toBe('visible');
expect(control.menuElement.style.display).toBe('block');
expect(setSelectionSpy).toHaveBeenCalledWith(mockRowSelection);
expect(control.getAllColumns()).toEqual(columnsMock);
expect(control.getVisibleColumns()).toEqual(columnsMock);
Expand All @@ -121,12 +121,12 @@ describe('ColumnPickerControl', () => {
const eventData = { ...new Slick.EventData(), preventDefault: jest.fn() };
gridStub.onHeaderContextMenu.notify({ column: columnsMock[1], grid: gridStub }, eventData, gridStub);

expect(control.menuElement.style.visibility).toBe('visible');
expect(control.menuElement.style.display).toBe('block');

const bodyElm = document.body;
bodyElm.dispatchEvent(new Event('mousedown', { bubbles: true }));

expect(control.menuElement.style.visibility).toBe('hidden');
expect(control.menuElement.style.display).toBe('none');
});

it('should query an input checkbox change event and expect "readjustFrozenColumnIndexWhenNeeded" method to be called when the grid is detected to be a frozen grid', () => {
Expand Down
30 changes: 15 additions & 15 deletions packages/common/src/controls/__tests__/gridMenuControl.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ describe('GridMenuControl', () => {
const inputElm = control.menuElement.querySelector('input[type="checkbox"]');
inputElm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false }));

expect(control.menuElement.style.visibility).toBe('visible');
expect(control.menuElement.style.display).toBe('block');
expect(setSelectionSpy).toHaveBeenCalledWith(mockRowSelection);
expect(control.getAllColumns()).toEqual(columnsMock);
expect(control.getVisibleColumns()).toEqual(columnsMock);
Expand All @@ -232,13 +232,13 @@ describe('GridMenuControl', () => {
buttonElm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false }));
const headerRowElm = document.querySelector('.slick-headerrow') as HTMLDivElement;

expect(control.menuElement.style.visibility).toBe('visible');
expect(control.menuElement.style.display).toBe('block');
expect(headerRowElm.style.width).toBe(`calc(100% - 16px)`)

const bodyElm = document.body;
bodyElm.dispatchEvent(new Event('mousedown', { bubbles: true }));

expect(control.menuElement.style.visibility).toBe('hidden');
expect(control.menuElement.style.display).toBe('none');
});

it('should query an input checkbox change event and expect "readjustFrozenColumnIndexWhenNeeded" method to be called when the grid is detected to be a frozen grid', () => {
Expand Down Expand Up @@ -362,7 +362,7 @@ describe('GridMenuControl', () => {
control.showGridMenu(spanEvent, { alignDropSide: 'left' });
const gridMenuElm = document.querySelector('.slick-gridmenu') as HTMLDivElement;

expect(gridMenuElm.style.visibility).toBe('visible');
expect(gridMenuElm.style.display).toBe('block');
});

it('should open the Grid Menu and expect "Forcefit" to be checked when "hideForceFitButton" is false', () => {
Expand Down Expand Up @@ -504,7 +504,7 @@ describe('GridMenuControl', () => {
const forceFitElm = control.menuElement.querySelector<HTMLInputElement>('#slickgrid_124343-gridmenu-colpicker-forcefit');
const inputSyncElm = control.menuElement.querySelector<HTMLInputElement>('#slickgrid_124343-gridmenu-colpicker-syncresize');

expect(control.menuElement.style.visibility).toBe('hidden');
expect(control.menuElement.style.display).toBe('none');
expect(forceFitElm).toBeFalsy();
expect(inputSyncElm).toBeFalsy();
});
Expand All @@ -521,7 +521,7 @@ describe('GridMenuControl', () => {
const forceFitElm = control.menuElement.querySelector<HTMLInputElement>('#slickgrid_124343-gridmenu-colpicker-forcefit');
const inputSyncElm = control.menuElement.querySelector<HTMLInputElement>('#slickgrid_124343-gridmenu-colpicker-syncresize');

expect(control.menuElement.style.visibility).toBe('hidden');
expect(control.menuElement.style.display).toBe('none');
expect(forceFitElm).toBeFalsy();
expect(inputSyncElm).toBeFalsy();
expect(pubSubSpy).toHaveBeenCalledWith('gridMenu:onBeforeMenuShow', {
Expand All @@ -543,7 +543,7 @@ describe('GridMenuControl', () => {
const forceFitElm = control.menuElement.querySelector<HTMLInputElement>('#slickgrid_124343-gridmenu-colpicker-forcefit');
const inputSyncElm = control.menuElement.querySelector<HTMLInputElement>('#slickgrid_124343-gridmenu-colpicker-syncresize');

expect(control.menuElement.style.visibility).toBe('visible');
expect(control.menuElement.style.display).toBe('block');
expect(forceFitElm).toBeTruthy();
expect(inputSyncElm).toBeTruthy();
});
Expand All @@ -558,10 +558,10 @@ describe('GridMenuControl', () => {
buttonElm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false }));

expect(onAfterSpy).toHaveBeenCalled();
expect(control.menuElement.style.visibility).toBe('visible');
expect(control.menuElement.style.display).toBe('block');

control.hideMenu(new Event('click', { bubbles: true, cancelable: true, composed: false }) as DOMEvent<HTMLDivElement>);
expect(control.menuElement.style.visibility).toBe('hidden');
expect(control.menuElement.style.display).toBe('none');
expect(pubSubSpy).toHaveBeenCalledWith('gridMenu:onAfterMenuShow', {
grid: gridStub,
menu: document.querySelector('.slick-gridmenu'),
Expand All @@ -583,12 +583,12 @@ describe('GridMenuControl', () => {
const forceFitElm = control.menuElement.querySelector<HTMLInputElement>('#slickgrid_124343-gridmenu-colpicker-forcefit');
const inputSyncElm = control.menuElement.querySelector<HTMLInputElement>('#slickgrid_124343-gridmenu-colpicker-syncresize');

expect(control.menuElement.style.visibility).toBe('visible');
expect(control.menuElement.style.display).toBe('block');
expect(forceFitElm).toBeTruthy();
expect(inputSyncElm).toBeTruthy();

control.hideMenu(new Event('click', { bubbles: true, cancelable: true, composed: false }) as DOMEvent<HTMLDivElement>);
expect(control.menuElement.style.visibility).toBe('visible');
expect(control.menuElement.style.display).toBe('block');
expect(pubSubSpy).toHaveBeenCalledWith('gridMenu:onMenuClose', {
grid: gridStub,
menu: document.querySelector('.slick-gridmenu'),
Expand All @@ -610,12 +610,12 @@ describe('GridMenuControl', () => {
const forceFitElm = control.menuElement.querySelector<HTMLInputElement>('#slickgrid_124343-gridmenu-colpicker-forcefit');
const inputSyncElm = control.menuElement.querySelector<HTMLInputElement>('#slickgrid_124343-gridmenu-colpicker-syncresize');

expect(control.menuElement.style.visibility).toBe('visible');
expect(control.menuElement.style.display).toBe('block');
expect(forceFitElm).toBeTruthy();
expect(inputSyncElm).toBeTruthy();

control.hideMenu(new Event('click', { bubbles: true, cancelable: true, composed: false }) as DOMEvent<HTMLDivElement>);
expect(control.menuElement.style.visibility).toBe('hidden');
expect(control.menuElement.style.display).toBe('none');
expect(autosizeSpy).not.toHaveBeenCalled();
});

Expand All @@ -637,13 +637,13 @@ describe('GridMenuControl', () => {
pickerField1Elm.checked = false;
pickerField1Elm.dispatchEvent(new Event('click', { bubbles: true, cancelable: true, composed: false }));

expect(control.menuElement.style.visibility).toBe('visible');
expect(control.menuElement.style.display).toBe('block');
expect(forceFitElm).toBeTruthy();
expect(inputSyncElm).toBeTruthy();
expect(pickerField1Elm.checked).toBeFalse();

control.hideMenu(new Event('click', { bubbles: true, cancelable: true, composed: false }) as DOMEvent<HTMLDivElement>);
expect(control.menuElement.style.visibility).toBe('hidden');
expect(control.menuElement.style.display).toBe('none');
expect(autosizeSpy).toHaveBeenCalled();
});

Expand Down
20 changes: 10 additions & 10 deletions packages/common/src/controls/columnPicker.control.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {
Column,
ColumnPickerOption,
DOMEvent,
DOMMouseEvent,
GetSlickEventType,
GridOption,
SlickEventHandler,
Expand Down Expand Up @@ -104,7 +104,7 @@ export class ColumnPickerControl {

this._menuElm = document.createElement('div');
this._menuElm.className = `slick-columnpicker ${this._gridUid}`;
this._menuElm.style.visibility = 'hidden';
this._menuElm.style.display = 'none';

const closePickerButtonElm = document.createElement('button');
closePickerButtonElm.className = 'close';
Expand Down Expand Up @@ -192,14 +192,14 @@ export class ColumnPickerControl {
// ------------------

/** Mouse down handler when clicking anywhere in the DOM body */
protected handleBodyMouseDown(e: DOMEvent<HTMLDivElement>) {
protected handleBodyMouseDown(e: DOMMouseEvent<HTMLDivElement>) {
if ((this._menuElm !== e.target && !this._menuElm.contains(e.target)) || e.target.className === 'close') {
this._menuElm.style.visibility = 'hidden';
this._menuElm.style.display = 'none';
}
}

/** Mouse header context handler when doing a right+click on any of the header column title */
protected handleHeaderContextMenu(e: DOMEvent<HTMLDivElement>) {
protected handleHeaderContextMenu(e: DOMMouseEvent<HTMLDivElement>) {
e.preventDefault();
emptyElement(this._listElm);
updateColumnPickerOrder.call(this);
Expand All @@ -209,11 +209,11 @@ export class ColumnPickerControl {
this.repositionMenu(e);
}

protected repositionMenu(e: DOMEvent<HTMLDivElement>) {
this._menuElm.style.top = `${(e as any).pageY - 10}px`;
this._menuElm.style.left = `${(e as any).pageX - 10}px`;
this._menuElm.style.maxHeight = `${document.body.clientHeight - (e as any).pageY - 10}px`;
this._menuElm.style.visibility = 'visible';
protected repositionMenu(event: DOMMouseEvent<HTMLDivElement>) {
this._menuElm.style.top = `${event.pageY - 10}px`;
this._menuElm.style.left = `${event.pageX - 10}px`;
this._menuElm.style.maxHeight = `${document.body.clientHeight - event.pageY - 10}px`;
this._menuElm.style.display = 'block';
this._menuElm.appendChild(this._listElm);
}

Expand Down
11 changes: 6 additions & 5 deletions packages/common/src/controls/gridMenu.control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export class GridMenuControl {
this._bindEventService.unbindAll();
const gridMenuElm = document.querySelector<HTMLDivElement>(`div.slick-gridmenu.${this._gridUid}`);
if (gridMenuElm) {
gridMenuElm.style.visibility = 'hidden';
this._gridMenuElm.style.display = 'none';
}
this._gridMenuButtonElm?.remove();
this._gridMenuElm?.remove();
Expand Down Expand Up @@ -244,7 +244,7 @@ export class GridMenuControl {

this._gridMenuElm = document.createElement('div');
this._gridMenuElm.classList.add('slick-gridmenu', this._gridUid);
this._gridMenuElm.style.visibility = 'hidden';
this._gridMenuElm.style.display = 'none';

const closePickerButtonElm = document.createElement('button');
closePickerButtonElm.className = 'close';
Expand Down Expand Up @@ -299,7 +299,7 @@ export class GridMenuControl {
* @returns
*/
hideMenu(event: Event) {
if (this._gridMenuElm?.style?.visibility === 'visible') {
if (this._gridMenuElm?.style?.display === 'block') {
const callbackArgs = {
grid: this.grid,
menu: this._gridMenuElm,
Expand All @@ -313,7 +313,7 @@ export class GridMenuControl {
return;
}

this._gridMenuElm.style.visibility = 'hidden';
this._gridMenuElm.style.display = 'none';
this._isMenuOpen = false;

// we also want to resize the columns if the user decided to hide certain column(s)
Expand Down Expand Up @@ -438,6 +438,7 @@ export class GridMenuControl {
if (!buttonElm) {
buttonElm = (e.target as HTMLElement).parentElement as HTMLButtonElement; // external grid menu might fall in this last case if wrapped in a span/div
}
this._gridMenuElm.style.display = 'block';
const menuIconOffset = getHtmlElementOffset(buttonElm as HTMLButtonElement);
const buttonComptStyle = getComputedStyle(buttonElm as HTMLButtonElement);
const buttonWidth = parseInt(buttonComptStyle?.width ?? this._defaults?.menuWidth, 10);
Expand Down Expand Up @@ -466,7 +467,7 @@ export class GridMenuControl {
this._gridMenuElm.style.maxHeight = `${window.innerHeight - e.clientY - menuMarginBottom}px`;
}

this._gridMenuElm.style.visibility = 'visible';
this._gridMenuElm.style.display = 'block';
this._gridMenuElm.appendChild(this._listElm);
this._isMenuOpen = true;
}
Expand Down
Loading

0 comments on commit 2170bb4

Please sign in to comment.