feat(plugins): remove jQuery from Grid State plugin (#757)

6pac · May 5, 2023 · aa8dc63 · aa8dc63
1 parent 8c72373
commit aa8dc63
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 69 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0  1,10 @@
 # http://editorconfig.org
 root = true
 
 [*]
 charset = utf-8
 end_of_line = lf
 indent_style = space
 indent_size = 2
 insert_final_newline = false
 trim_trailing_whitespace = true
diff --git a/.eslintrc b/.eslintrc
@@ -13,6  13,8 @@
         "Sortable": true
     },
     "rules": {
         "cypress/no-unnecessary-waiting": "off",
         "cypress/unsafe-to-chain-command": "off",
         "no-prototype-builtins": [0]
     }
 }
diff --git a/cypress/integration/example-0070-plugin-state.spec.js b/cypress/integration/example-0070-plugin-state.spec.js
@@ -0,0  1,114 @@
 
 describe('Example 0070 - Grid State using Local Storage', () => {
   const originalTitles = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
 
   beforeEach(() => {
     cy.restoreLocalStorage();
   });
 
   afterEach(() => {
     cy.saveLocalStorage();
   });
 
   it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseExampleUrl')}/example-0070-plugin-state.html`);
     cy.get('h2   p').should('contain', 'Slick.State');
 
     cy.clearLocalStorage();
     cy.get('[data-test="clear-storage"]').click();
   });
 
   it('should have exact Column Titles in the grid', () => {
     cy.get('.slick-header-columns')
       .children()
       .each(($child, index) => expect($child.text()).to.eq(originalTitles[index]));
   });
 
   it('should sort ascending column "D"', () => {
     cy.get('.slick-header-columns .slick-header-column:nth(3)')
       .click({ force: true });
 
     cy.get('.slick-header-columns')
       .children('.slick-header-column:nth(3)')
       .find('.slick-sort-indicator.slick-sort-indicator-asc')
       .should('be.visible');
   });
 
   it('should drag column "A" to be after column "C" in the grid', () => {
     const expectedTitles = ['A', 'C', 'D', 'B', 'E', 'F', 'G', 'H', 'I', 'J'];
 
     cy.get('.slick-header-columns')
       .children('.slick-header-column:nth(1)')
       .contains('B')
       .drag('.slick-header-column:nth(3)');
 
     cy.get('.slick-header-column:nth(3)').contains('B');
 
     cy.get('.slick-header-columns')
       .children()
       .each(($child, index) => expect($child.text()).to.eq(expectedTitles[index]));
   });
 
   it('should resize 1st column and make it wider', () => {
     cy.get('.slick-header-columns')
       .children('.slick-header-column:nth(1)')
       .should('contain', 'C');
 
     cy.get('.slick-resizable-handle:nth(1)')
       .trigger('mousedown', { which: 1, force: true })
       .trigger('mousemove', 'bottomRight');
 
     cy.get('.slick-header-column:nth(2)')
       .trigger('mousemove', 'bottomRight')
       .trigger('mouseup', 'bottomRight', { which: 1, force: true });
 
     cy.get('.slick-header-column:nth(1)')
       .should(($el) => {
         const expectedWidth = 170; // calculate with a calculated width including a ( /-)5px precision
         expect($el.width()).greaterThan(expectedWidth - 5);
         expect($el.width()).lessThan(expectedWidth   5);
       });
   });
 
   it('should reload the page', () => {
     cy.reload().wait(50);
   });
 
   it('should reload page and expect same columns orders, 2nd column wider and 3rd column sorted ascending', () => {
     const expectedTitles = ['A', 'C', 'D', 'B', 'E', 'F', 'G', 'H', 'I', 'J'];
 
     cy.get('.slick-header-columns')
       .children()
       .each(($child, index) => expect($child.text()).to.eq(expectedTitles[index]));
 
     cy.get('.slick-header-column:nth(1)')
       .should(($el) => {
         const expectedWidth = 170; // calculate with a calculated width including a ( /-)5px precision
         expect($el.width()).greaterThan(expectedWidth - 5);
         expect($el.width()).lessThan(expectedWidth   5);
       });
 
     cy.get('.slick-header-columns')
       .children('.slick-header-column:nth(2)')
       .find('.slick-sort-indicator.slick-sort-indicator-asc')
       .should('be.visible');
   });
 
   it('should clear local storage & reload the page', () => {
     cy.clearLocalStorage();
     cy.get('[data-test="clear-storage"]').click();
 
     cy.reload().wait(50);
   });
 
   it('should expect grid to be reset to default', () => {
     cy.get('.slick-header-columns')
       .children()
       .each(($child, index) => expect($child.text()).to.eq(originalTitles[index]));
 
     cy.get('.slick-header-columns')
       .children('.slick-header-column:nth(2)')
       .find('.slick-sort-indicator.slick-sort-indicator-asc')
       .should('not.exist');
   });
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -35,4  35,18 @@ Cypress.Commands.add("getCell", (row, col, viewport = 'topLeft', { parentSelecto
   const canvasSelectorY = position.y ? `.grid-canvas-${position.y}` : '';
 
   return cy.get(`${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="top:${row * rowHeight}px"] > .slick-cell:nth(${col})`);
-})
 });
 
 let LOCAL_STORAGE_MEMORY = {};
 
 Cypress.Commands.add('saveLocalStorage', () => {
   Object.keys(localStorage).forEach(key => {
     LOCAL_STORAGE_MEMORY[key] = localStorage[key];
   });
 });
 
 Cypress.Commands.add('restoreLocalStorage', () => {
   Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
     localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
   });
 });
diff --git a/examples/example-0070-plugin-state.html b/examples/example-0070-plugin-state.html
@@ -2,6  2,7 @@
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
   <title>SlickGrid example: Plugin: State</title>
   <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
   <link rel="stylesheet" href="../plugins/slick.headerbuttons.css" type="text/css"/>
@@ -38,12  39,12 @@ <h2>About</h2>
       This example demonstrates using the <b>Slick.State</b> plugin persisting grid column width, order, visibility and sort order using Local Storage.
       For this demo, we use Local Storage, but you could technically save this data into a database and reload at any time your previous session.
     </p>
 
     <h2>Options:</h2>
     <button data-test="clear-storage" onclick="clearLocalStorage()">Clear Local Storage & Page Reload</button>
   </div>
 </div>
 
-<script src="../lib/firebugx.js"></script>
-
-<script src="../lib/jquery-3.1.0.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../slick.core.js"></script>
@@ -85,7  86,12 @@ <h2>About</h2>
     }
   }
 
-  $(function () {
   function clearLocalStorage() {
     localStorage.clear();
     window.location.reload();
   }
 
   (function () {
     var dataView = new Slick.Data.DataView();
     var statePersistor = new Slick.State({
       cid: 'sample-grid',
@@ -144,17  150,17 @@ <h2>About</h2>
 
     statePersistor.restore()
       .then(function (state) {
-        grid.setSortColumns(state.sortcols);
         grid.setSortColumns(state.sortcols || []);
         var columns = grid.getColumns();
-        var sortCols = $.map(grid.getSortColumns(), function (col) {
         var sortCols = (grid.getSortColumns() || []).map(function (col) {
           return {
             sortCol: columns[grid.getColumnIndex(col.columnId)],
             sortAsc: col.sortAsc
           };
         });
         sortDataView(sortCols);
       });
-  });
   })();
 </script>
 </body>
 </html>
diff --git a/examples/example-row-detail-selection-and-move.html b/examples/example-row-detail-selection-and-move.html
@@ -116,9  116,7 @@ <h3>Selected Titles:</h3>
       </ul>
     </div>
   </div>
-
-  <script src="../lib/firebugx.js"></script>
-
 
   <script src="../lib/jquery-3.1.0.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
@@ -225,7  223,7 @@ <h3>Selected Titles:</h3>
       return (x == y ? 0 : (x > y ? 1 : -1));
     }
 
-    $(function () {
     (function () {
       // prepare the data
       for (var i = 0; i < 1000; i  ) {
         data[i] = new DataItem(i);
@@ -358,7  356,7 @@ <h3>Selected Titles:</h3>
             return item && item.title || '';
           });
         }
-        $('#selectedTitles').text(selectedTitles.toString());
         document.querySelector('#selectedTitles').textContent = selectedTitles.toString();
       });
 
       grid.onSort.subscribe(function (e, args) {
@@ -380,7  378,7 @@ <h3>Selected Titles:</h3>
       dataView.onSelectedRowIdsChanged.subscribe(function (e, args) {
         console.log('onSelectedRowIdsChanged', args)
       });
-    });
     })();
   </script>
 </body>