Skip to content

Commit

Permalink
feat: BREAKING CHANGE - replace jQueryUI with SortableJS (#695)
Browse files Browse the repository at this point in the history
* feat(grid)!: replace jQueryUI by SortableJS and slick.interactions
- replace jQueryUI by SortableJS
- replace `jquery.event.drag-2.3.0.js` & `jquery.mousewheel.js` by `slick.interactions.js`
- add script to minify JS/CSS files
- add script to bump version in package.json, this will probably be replaced by external lib in the short term
  • Loading branch information
ghiscoding authored Sep 22, 2022
1 parent af513e2 commit 386cd58
Show file tree
Hide file tree
Showing 127 changed files with 4,844 additions and 46,908 deletions.
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,7 @@ npm run serve # run a local http server on port 8080
npm run cypress # open Cypress tool
```
Once the Cypress UI is open, you can then click on "Run all Specs" to execute all E2E browser tests.

### SlickGrid 3.x drops jQueryUI

Great news we no longer require [jQueryUI](https://jqueryui.com/) in SlickGrid 3.x, we removed all associated code and replaced it with [SortableJS](https://sortablejs.github.io/Sortable/) which is a lot more modern. Please read [SlickGrid 3.0 - Annoucement & Migration](https://github.com/6pac/SlickGrid/wiki/Major-version-3.0----Removal-of-jQueryUI-requirement-(replaced-by-SortableJS)) Wiki for more info.
7 changes: 4 additions & 3 deletions controls/slick.gridmenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -375,6 +375,7 @@
}

function showGridMenu(e) {
var targetEvent = e.touches ? e.touches[0] : e;
e.preventDefault();

// empty both the picker list & the command list
Expand Down Expand Up @@ -465,8 +466,8 @@
var gridMenuIconWidth = (_options.gridMenu && _options.gridMenu.menuWidth) || _defaults.menuWidth;
var contentMinWidth = (_options.gridMenu && _options.gridMenu.contentMinWidth) ? _options.gridMenu.contentMinWidth : _defaults.contentMinWidth;
var currentMenuWidth = (contentMinWidth > menuWidth) ? contentMinWidth : (menuWidth + gridMenuIconWidth);
var nextPositionTop = (useClickToRepositionMenu && e.pageY > 0) ? e.pageY : menuIconOffset.top + 10;
var nextPositionLeft = (useClickToRepositionMenu && e.pageX > 0) ? e.pageX : menuIconOffset.left + 10;
var nextPositionTop = (useClickToRepositionMenu && targetEvent.pageY > 0) ? targetEvent.pageY : menuIconOffset.top + 10;
var nextPositionLeft = (useClickToRepositionMenu && targetEvent.pageX > 0) ? targetEvent.pageX : menuIconOffset.left + 10;
var menuMarginBottom = (_options.gridMenu && _options.gridMenu.marginBottom !== undefined) ? _options.gridMenu.marginBottom : _defaults.marginBottom;

$menu
Expand All @@ -481,7 +482,7 @@
if (_options.gridMenu && _options.gridMenu.height !== undefined) {
$menu.css("height", _options.gridMenu.height);
} else {
$menu.css("max-height", $(window).height() - e.clientY - menuMarginBottom);
$menu.css("max-height", $(window).height() - targetEvent.clientY - menuMarginBottom);
}

$menu.show();
Expand Down
2 changes: 1 addition & 1 deletion controls/slick.pager.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

.slick-pager .ui-icon-container {
display: inline-block;
margin: 2px;
margin: 0px;
border-color: gray;
}

Expand Down
15 changes: 10 additions & 5 deletions controls/slick.pager.js
Original file line number Diff line number Diff line change
Expand Up @@ -136,25 +136,25 @@
var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
var icon_suffix = "' /></span>";

$(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
$(icon_prefix + "ui-icon-lightbulb slick-icon-lightbulb" + icon_suffix)
.click(function () {
$(".slick-pager-settings-expanded").toggle();
})
.appendTo($settings);

$(icon_prefix + "ui-icon-seek-first" + icon_suffix)
$(icon_prefix + "ui-icon-seek-first slick-icon-seek-first" + icon_suffix)
.click(gotoFirst)
.appendTo($nav);

$(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
$(icon_prefix + "ui-icon-seek-prev slick-icon-seek-prev" + icon_suffix)
.click(gotoPrev)
.appendTo($nav);

$(icon_prefix + "ui-icon-seek-next" + icon_suffix)
$(icon_prefix + "ui-icon-seek-next slick-icon-seek-next" + icon_suffix)
.click(gotoNext)
.appendTo($nav);

$(icon_prefix + "ui-icon-seek-end" + icon_suffix)
$(icon_prefix + "ui-icon-seek-end slick-icon-seek-end" + icon_suffix)
.click(gotoLast)
.appendTo($nav);

Expand All @@ -171,17 +171,22 @@
var state = getNavState();

$container.find(".slick-pager-nav span").removeClass("ui-state-disabled");
$container.find(".slick-pager-nav span").removeClass("slick-icon-state-disabled");
if (!state.canGotoFirst) {
$container.find(".ui-icon-seek-first").addClass("ui-state-disabled");
$container.find(".slick-icon-seek-first").addClass("slick-icon-state-disabled");
}
if (!state.canGotoLast) {
$container.find(".ui-icon-seek-end").addClass("ui-state-disabled");
$container.find(".slick-icon-seek-end").addClass("slick-icon-state-disabled");
}
if (!state.canGotoNext) {
$container.find(".ui-icon-seek-next").addClass("ui-state-disabled");
$container.find(".slick-icon-seek-next").addClass("slick-icon-state-disabled");
}
if (!state.canGotoPrev) {
$container.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
$container.find(".slick-icon-seek-prev").addClass("slick-icon-state-disabled");
}

if (pagingInfo.pageSize === 0) {
Expand Down
17 changes: 9 additions & 8 deletions cypress/integration/example-auto-scroll-when-dragging.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,22 +30,23 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {
});

it('should select border shown in cell selection model, and hidden in row selection model when dragging', { scrollBehavior: false }, function () {
cy.getCell(0, 1, '', { parentSelector: "#myGrid" })
cy.getCell(0, 1, '', { parentSelector: "#myGrid", rowHeight: cellHeight })
.as('cell1')
.dragStart();

cy.get('#myGrid .slick-range-decorator').should('be.exist').and('have.css', 'border-color').and('not.equal', 'none');
cy.get('@cell1')
.drag(0, 5)
.dragCell(0, 5)
.dragEnd('#myGrid');
cy.get('#myGrid .slick-range-decorator').should('not.be.exist');
cy.get('#myGrid .slick-cell.selected').should('have.length', 6);

cy.getCell(0, 1, '', { parentSelector: "#myGrid2" })
cy.getCell(0, 1, '', { parentSelector: "#myGrid2", rowHeight: cellHeight })
.as('cell2')
.dragStart();
cy.get('#myGrid2 .slick-range-decorator').should('be.exist').and('have.css', 'border-style').and('equal', 'none');
cy.get('@cell2')
.drag(5, 1)
.dragCell(5, 1)
.dragEnd('#myGrid2');
cy.get('#myGrid2 .slick-range-decorator').should('not.be.exist');
cy.get('#myGrid2 .slick-row:nth-child(-n+6)')
Expand Down Expand Up @@ -90,10 +91,10 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {

function getIntervalUntilRow16Displayed(selector, px) {
const viewportSelector = (selector + ' .slick-viewport:first');
cy.getCell(0, 1, '', { parentSelector: selector })
cy.getCell(0, 1, '', { parentSelector: selector, rowHeight: cellHeight })
.dragStart();
return cy.get(viewportSelector).invoke('scrollTop').then(scrollBefore => {
cy.dragOutside('bottom', 0, px, { parentSelector: selector });
cy.dragOutside('bottom', 0, px, { parentSelector: selector, rowHeight: cellHeight });

const start = performance.now();
cy.get(selector + ' .slick-row:not(.slick-group) >.cell-unselectable')
Expand Down Expand Up @@ -274,10 +275,10 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {
});

function testDragInGrouping(selector) {
cy.getCell(7, 0, 'bottomRight', { parentSelector: selector })
cy.getCell(7, 0, 'bottomRight', { parentSelector: selector, rowHeight: cellHeight })
.dragStart();
cy.get(selector + ' .slick-viewport:last').as('viewport').invoke('scrollTop').then(scrollBefore => {
cy.dragOutside('bottom', 400, 300, { parentSelector: selector });
cy.dragOutside('bottom', 400, 300, { parentSelector: selector, rowHeight: cellHeight });
cy.get('@viewport').invoke('scrollTop').then(scrollAfter => {
expect(scrollBefore).to.be.lessThan(scrollAfter);
cy.dragEnd(selector);
Expand Down
45 changes: 45 additions & 0 deletions cypress/integration/example-colspan.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/// <reference types='cypress' />
describe('Example - Column Span & Header Grouping', { retries: 1 }, () => {
// NOTE: everywhere there's a * 2 is because we have a top+bottom (frozen rows) containers even after Unfreeze Columns/Rows
const GRID_ROW_HEIGHT = 25;
const fullTitles = ['Title', 'Duration', '% Complete', 'Start', 'Finish', 'Effort Driven'];
for (let i = 0; i < 30; i++) {
fullTitles.push(`Mock${i}`);
}

it('should display Example title', () => {
cy.visit(`${Cypress.config('baseExampleUrl')}/example-colspan.html`);
cy.get('h2').contains('Demonstrates');
});

it('should have exact column titles', () => {
cy.get('#myGrid')
.find('.slick-header-columns')
.children()
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
});

it('should expect 1st row to be 1 column spanned to the entire width', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('not.exist');
});

it('should expect 2nd row to be 4 columns and not be spanned', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 1');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', '5 days');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).contains(/(true|false)/);
});

it('should expect 3rd row to be 1 column spanned to the entire width', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task 2');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('not.exist');
});

it('should expect 4th row to be 4 columns and not be spanned', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', '5 days');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).contains(/(true|false)/);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
cy.get('[data-editorid=duration] input')
.type('9');

cy.get('[data-editorid=percent] input')
cy.get('[data-editorid=percent] input[type=text]')
.type('44');

cy.get('[data-editorid=start] input')
Expand Down
Loading

0 comments on commit 386cd58

Please sign in to comment.