From fe40d6eb660823b0fffff8d678b01d9efd4fe701 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Wed, 3 May 2023 23:31:30 -0400
Subject: [PATCH] feat(plugins): remove jQuery from CheckboxSelectColumn
 plugins

---
 .../example-checkbox-row-select.spec.js       | 100 +++++++++++
 examples/example-checkbox-row-select.html     |  16 +-
 plugins/slick.checkboxselectcolumn.js         | 161 ++++++++++--------
 3 files changed, 198 insertions(+), 79 deletions(-)
 create mode 100644 cypress/integration/example-checkbox-row-select.spec.js

diff --git a/cypress/integration/example-checkbox-row-select.spec.js b/cypress/integration/example-checkbox-row-select.spec.js
new file mode 100644
index 00000000..7e32b9ac
--- /dev/null
+++ b/cypress/integration/example-checkbox-row-select.spec.js
@@ -0,0 +1,100 @@
+/// <reference types="cypress" />
+
+describe('Example - Checkbox Row Select', () => {
+  const titles = ['', 'A', 'B', 'C', 'D', 'E'];
+  const GRID_ROW_HEIGHT = 25;
+
+  describe('Grid 1', () => {
+    it('should display Example title', () => {
+      cy.visit(`${Cypress.config('baseExampleUrl')}/example-checkbox-row-select.html`);
+      cy.get('h2').contains('Demonstrates');
+      cy.get('h2 + ul > li').first().contains('Checkbox row select column');
+    });
+
+    it('should have exact Column Titles in the grid', () => {
+      cy.get('#myGrid')
+        .find('.slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(titles[index]));
+    });
+
+    it('should be able to select 5th row of first grid by clicking "Select row 5" button', () => {
+      cy.get('#selectRow5')
+        .click();
+
+      cy.get('#myGrid')
+        .find('.slick-cell-checkboxsel input:checked')
+        .should('have.length', 1);
+
+      // the entire row (all 6x cells) should be selected
+      cy.get('#myGrid')
+        .find('.slick-cell.selected')
+        .should('have.length', 6);
+    });
+
+    it('should be able to select first 2 rows and now expect 3 rows selected', () => {
+      cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) input[type=checkbox]`).click();
+      cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) input[type=checkbox]`).click();
+
+      cy.get('#myGrid')
+        .find('.slick-cell-checkboxsel input:checked')
+        .should('have.length', 3);
+    });
+
+    it('should be able to unselect 5th row of first grid by clicking "Unselect row 5" button', () => {
+      cy.get('#unselectRow5')
+        .click();
+
+      cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) input[type=checkbox]`)
+        .should('not.be.checked');
+
+      cy.get('#myGrid')
+        .find('.slick-cell-checkboxsel input:checked')
+        .should('have.length', 2);
+    });
+
+    it('should be able to unselect all rows by clicking "Unselect all rows" button', () => {
+      cy.get('#unselectAllRows')
+        .click();
+
+      cy.get('#myGrid')
+        .find('.slick-cell-checkboxsel input:checked')
+        .should('have.length', 0);
+    });
+
+    it('should be able select all rows by clicking on the Select All checkbox', () => {
+      cy.get('#myGrid [data-id=_checkbox_selector]')
+        .click();
+
+      cy.get('#myGrid')
+        .find('.slick-cell-checkboxsel input:checked')
+        .should('have.length.greaterThan', 10);
+    });
+
+    it('should be able to unselect all rows by clicking "Unselect all rows" button', () => {
+      cy.get('#unselectAllRows')
+        .click();
+
+      cy.get('#myGrid')
+        .find('.slick-cell-checkboxsel input:checked')
+        .should('have.length', 0);
+    });
+
+    it('should be able to click on "toggle show/hide Select All" button and expect Select All checkbox to be toggled', () => {
+      cy.get('#myGrid [data-id=_checkbox_selector] input[type=checkbox]')
+        .should('exist');
+
+      cy.get('[data-test="toggle-select-all"]')
+        .click();
+
+      cy.get('#myGrid [data-id=_checkbox_selector] input[type=checkbox]')
+        .should('not.exist');
+
+      cy.get('[data-test="toggle-select-all"]')
+        .click();
+
+      cy.get('#myGrid [data-id=_checkbox_selector] input[type=checkbox]')
+        .should('exist');
+    });
+  });
+});
\ No newline at end of file
diff --git a/examples/example-checkbox-row-select.html b/examples/example-checkbox-row-select.html
index 6d9f69c9..d67014fe 100644
--- a/examples/example-checkbox-row-select.html
+++ b/examples/example-checkbox-row-select.html
@@ -57,7 +57,7 @@ <h2>Demonstrates:</h2>
     <ul>
       <li>Checkbox row select column</li>
       <p>
-        <button onclick="toggleHideSelectAllCheckbox()">Toggle show/hide "Select All" checkbox</button>
+        <button data-test="toggle-select-all" onclick="toggleHideSelectAllCheckbox()">Toggle show/hide "Select All" checkbox</button>
       </p>
       
       <p>
@@ -72,9 +72,6 @@ <h2>View Source:</h2>
   </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>
@@ -114,7 +111,7 @@ <h2>View Source:</h2>
     checkboxSelector2.setOptions({ hideSelectAllCheckbox: isSelectAllCheckbox2Hidden });
   }
 
-  $(function () {
+  (function () {
     for (var i = 0; i < 100; i++) {
       var d = (data[i] = {});
       d[0] = "Row " + i;
@@ -161,7 +158,7 @@ <h2>View Source:</h2>
         var x = args.rows;
     });
     
-    $("#selectRow5").click(function() {
+    document.querySelector("#selectRow5").addEventListener('click', function() {
         var rowIndex = 5; // use row 5 for this example
         var selectedRowsIndexes = grid.getSelectedRows();
         if (selectedRowsIndexes.indexOf(rowIndex) < 0) {
@@ -170,7 +167,7 @@ <h2>View Source:</h2>
         }
     });
 
-    $("#unselectRow5").click(function() {
+    document.querySelector("#unselectRow5").addEventListener('click', function() {
         var rowIndex = 5; // use row 5 for this example
         var selectedRowsIndexes = grid.getSelectedRows();
         var rowIndexInArr = selectedRowsIndexes.indexOf(rowIndex);
@@ -180,11 +177,10 @@ <h2>View Source:</h2>
         }
     });
 
-    $("#unselectAllRows").click(function() {
+    document.querySelector("#unselectAllRows").addEventListener('click', function() {
         grid.setSelectedRows([]);
     });
-    
-  })
+  })()
 </script>
 </body>
 </html>
diff --git a/plugins/slick.checkboxselectcolumn.js b/plugins/slick.checkboxselectcolumn.js
index 52e6a32b..bbf54e29 100644
--- a/plugins/slick.checkboxselectcolumn.js
+++ b/plugins/slick.checkboxselectcolumn.js
@@ -1,21 +1,21 @@
-(function ($) {
+(function (window) {
   // register namespace
-  $.extend(true, window, {
+  Slick.Utils.extend(true, window, {
     "Slick": {
       "CheckboxSelectColumn": CheckboxSelectColumn
     }
   });
 
-
   function CheckboxSelectColumn(options) {
-    var _dataView;
-    var _grid;
-    var _isUsingDataView = false;
-    var _selectableOverride = null;
-    var _selectAll_UID = createUID();
-    var _handler = new Slick.EventHandler();
-    var _selectedRowsLookup = {};
-    var _defaults = {
+    let _dataView;
+    let _grid;
+    let _isUsingDataView = false;
+    let _selectableOverride = null;
+    let _headerRowNode;
+    let _selectAll_UID = createUID();
+    let _handler = new Slick.EventHandler();
+    let _selectedRowsLookup = {};
+    let _defaults = {
       columnId: "_checkbox_selector",
       cssClass: null,
       hideSelectAllCheckbox: false,
@@ -25,9 +25,10 @@
       hideInColumnTitleRow: false,
       hideInFilterHeaderRow: true
     };
-    var _isSelectAllChecked = false;
+    let _isSelectAllChecked = false;
 
-    var _options = $.extend(true, {}, _defaults, options);
+    let _bindingEventService = new Slick.BindingEventService();
+    let _options = Slick.Utils.extend(true, {}, _defaults, options);
 
     // user could override the checkbox icon logic from within the options or after instantiating the plugin
     if (typeof _options.selectableOverride === 'function') {
@@ -61,6 +62,7 @@
 
     function destroy() {
       _handler.unsubscribeAll();
+      _bindingEventService.unbindAll();
     }
 
     function getOptions() {
@@ -68,7 +70,7 @@
     }
 
     function setOptions(options) {
-      _options = $.extend(true, {}, _options, options);
+      _options = Slick.Utils.extend(true, {}, _options, options);
 
       if (_options.hideSelectAllCheckbox) {
         hideSelectAllFromColumnHeaderTitleRow();
@@ -82,9 +84,14 @@
         }
 
         if (!_options.hideInFilterHeaderRow) {
-          var selectAllContainer = $("#filter-checkbox-selectall-container");
-          selectAllContainer.show();
-          selectAllContainer.find('input[type="checkbox"]').prop("checked", _isSelectAllChecked);
+          let selectAllContainerElm = _headerRowNode.querySelector("#filter-checkbox-selectall-container");
+          if (selectAllContainerElm) {
+            selectAllContainerElm.style.display = 'flex';
+            const selectAllInputElm = selectAllContainerElm.querySelector('input[type="checkbox"]');
+            if (selectAllInputElm) {
+              selectAllInputElm.checked = _isSelectAllChecked;
+            }
+          }
         } else {
           hideSelectAllFromColumnHeaderFilterRow();
         }
@@ -96,29 +103,32 @@
     }
 
     function hideSelectAllFromColumnHeaderFilterRow() {
-      $("#filter-checkbox-selectall-container").hide();
+      const selectAllContainerElm = _headerRowNode && _headerRowNode.querySelector('#filter-checkbox-selectall-container');
+      if (selectAllContainerElm) {
+        selectAllContainerElm.style.display = 'none';
+      }
     }
 
     function handleSelectedRowsChanged() {
-      var selectedRows = _grid.getSelectedRows();
-      var lookup = {}, row, i, k;
-      var disabledCount = 0;
+      let selectedRows = _grid.getSelectedRows();
+      let lookup = {}, row, i, k;
+      let disabledCount = 0;
       if (typeof _selectableOverride === 'function') {
         for (k = 0; k < _grid.getDataLength(); k++) {
           // If we are allowed to select the row
-          var dataItem = _grid.getDataItem(k);
+          let dataItem = _grid.getDataItem(k);
           if (!checkSelectableOverride(i, dataItem, _grid)) {
             disabledCount++;
           }
         }
       }
 
-      var removeList = [];
+      let removeList = [];
       for (i = 0; i < selectedRows.length; i++) {
         row = selectedRows[i];
 
         // If we are allowed to select the row
-        var rowItem = _grid.getDataItem(row);
+        let rowItem = _grid.getDataItem(row);
         if (checkSelectableOverride(i, rowItem, _grid)) {
           lookup[row] = true;
           if (lookup[row] !== _selectedRowsLookup[row]) {
@@ -142,15 +152,17 @@
           renderSelectAllCheckbox(_isSelectAllChecked);
         }
         if (!_options.hideInFilterHeaderRow) {
-          var selectAllElm = $("#header-filter-selector" + _selectAll_UID);
-          selectAllElm.prop("checked", _isSelectAllChecked);
+          const selectAllElm = _headerRowNode && _headerRowNode.querySelector(`#header-filter-selector${_selectAll_UID}`);
+          if (selectAllElm) {
+            selectAllElm.checked = _isSelectAllChecked;
+          }
         }
       }
 
       // Remove items that shouln't of been selected in the first place (Got here Ctrl + click)
       if (removeList.length > 0) {
         for (i = 0; i < removeList.length; i++) {
-          var remIdx = selectedRows.indexOf(removeList[i]);
+          let remIdx = selectedRows.indexOf(removeList[i]);
           selectedRows.splice(remIdx, 1);
         }
         _grid.setSelectedRows(selectedRows, "click.cleanup");
@@ -158,17 +170,17 @@
     }
 
     function handleDataViewSelectedIdsChanged() {
-      var selectedIds = _dataView.getAllSelectedFilteredIds();
-      var filteredItems = _dataView.getFilteredItems();
-      var disabledCount = 0;
+      let selectedIds = _dataView.getAllSelectedFilteredIds();
+      let filteredItems = _dataView.getFilteredItems();
+      let disabledCount = 0;
 
       if (typeof _selectableOverride === 'function' && selectedIds.length > 0) {
-        for (var k = 0; k < _dataView.getItemCount(); k++) {
+        for (let k = 0; k < _dataView.getItemCount(); k++) {
           // If we are allowed to select the row
-          var dataItem = _dataView.getItemByIdx(k);
-          var idProperty = _dataView.getIdPropertyName();
-          var dataItemId = dataItem[idProperty];
-          var foundItemIdx = filteredItems.findIndex(function (item) {
+          let dataItem = _dataView.getItemByIdx(k);
+          let idProperty = _dataView.getIdPropertyName();
+          let dataItemId = dataItem[idProperty];
+          let foundItemIdx = filteredItems.findIndex(function (item) {
             return item[idProperty] === dataItemId;
           });
           if (foundItemIdx >= 0 && !checkSelectableOverride(k, dataItem, _grid)) {
@@ -182,8 +194,10 @@
         renderSelectAllCheckbox(_isSelectAllChecked);
       }
       if (!_options.hideInFilterHeaderRow) {
-        var selectAllElm = $("#header-filter-selector" + _selectAll_UID);
-        selectAllElm.prop("checked", _isSelectAllChecked);
+        const selectAllElm = _headerRowNode && _headerRowNode.querySelector(`#header-filter-selector${_selectAll_UID}`);
+        if (selectAllElm) {
+          selectAllElm.checked = _isSelectAllChecked;
+        }
       }
     }
 
@@ -202,7 +216,7 @@
 
     function handleClick(e, args) {
       // clicking on a row select checkbox
-      if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":checkbox")) {
+      if (_grid.getColumns()[args.cell].id === _options.columnId && e.target.type === 'checkbox') {
         // if editing, try to commit
         if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
           e.preventDefault();
@@ -217,15 +231,14 @@
     }
 
     function toggleRowSelection(row) {
-      var dataContext = _grid.getDataItem(row);
+      let dataContext = _grid.getDataItem(row);
       if (!checkSelectableOverride(row, dataContext, _grid)) {
         return;
       }
 
       if (_selectedRowsLookup[row]) {
-        _grid.setSelectedRows($.grep(_grid.getSelectedRows(), function (n) {
-          return n != row;
-        }), "click.toggle");
+        const newSelectedRows = _grid.getSelectedRows().filter((n) => n !== row);
+        _grid.setSelectedRows(newSelectedRows, 'click.toggle');
       } else {
         _grid.setSelectedRows(_grid.getSelectedRows().concat(row), "click.toggle");
       }
@@ -233,7 +246,7 @@
     }
 
     function selectRows(rowArray) {
-      var i, l = rowArray.length, addRows = [];
+      let i, l = rowArray.length, addRows = [];
       for (i = 0; i < l; i++) {
         if (!_selectedRowsLookup[rowArray[i]]) {
           addRows[addRows.length] = rowArray[i];
@@ -243,19 +256,18 @@
     }
 
     function deSelectRows(rowArray) {
-      var i, l = rowArray.length, removeRows = [];
+      let i, l = rowArray.length, removeRows = [];
       for (i = 0; i < l; i++) {
         if (_selectedRowsLookup[rowArray[i]]) {
           removeRows[removeRows.length] = rowArray[i];
         }
       }
-      _grid.setSelectedRows($.grep(_grid.getSelectedRows(), function (n) {
-        return removeRows.indexOf(n) < 0;
-      }), "SlickCheckboxSelectColumn.deSelectRows");
+
+      _grid.setSelectedRows(_grid.getSelectedRows().filter((n) => removeRows.indexOf(n) < 0), 'SlickCheckboxSelectColumn.deSelectRows');
     }
 
     function handleHeaderClick(e, args) {
-      if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) {
+      if (args.column.id == _options.columnId && e.target.type === 'checkbox') {
         // if editing, try to commit
         if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
           e.preventDefault();
@@ -263,14 +275,14 @@
           return;
         }
 
-        var isAllSelected = $(e.target).is(":checked") || false;
-        var caller = isAllSelected ? 'click.selectAll' : 'click.unselectAll';
-        var rows = [];
+        let isAllSelected = e.target.checked;
+        let caller = isAllSelected ? 'click.selectAll' : 'click.unselectAll';
+        let rows = [];
 
         if (isAllSelected) {
-          for (var i = 0; i < _grid.getDataLength(); i++) {
+          for (let i = 0; i < _grid.getDataLength(); i++) {
             // Get the row and check it's a selectable row before pushing it onto the stack
-            var rowItem = _grid.getDataItem(i);
+            let rowItem = _grid.getDataItem(i);
             if (!rowItem.__group && !rowItem.__groupTotals && checkSelectableOverride(i, rowItem, _grid)) {
               rows.push(i);
             }
@@ -278,11 +290,11 @@
           isAllSelected = true;
         }
         if (_isUsingDataView && _dataView && _options.applySelectOnAllPages) {
-          var ids = [];
-          var filteredItems = _dataView.getFilteredItems();
-          for (var j = 0; j < filteredItems.length; j++) {
+          let ids = [];
+          let filteredItems = _dataView.getFilteredItems();
+          for (let j = 0; j < filteredItems.length; j++) {
             // Get the row and check it's a selectable ID (it could be in a different page) before pushing it onto the stack
-            var dataviewRowItem = filteredItems[j];
+            let dataviewRowItem = filteredItems[j];
             if (checkSelectableOverride(j, dataviewRowItem, _grid)) {
               ids.push(dataviewRowItem[_dataView.getIdPropertyName()]);
             }
@@ -295,13 +307,13 @@
       }
     }
 
-    var _checkboxColumnCellIndex = null;
+    let _checkboxColumnCellIndex = null;
 
     function getCheckboxColumnCellIndex() {
       if (_checkboxColumnCellIndex === null) {
         _checkboxColumnCellIndex = 0;
-        var colArr = _grid.getColumns();
-        for (var i = 0; i < colArr.length; i++) {
+        let colArr = _grid.getColumns();
+        for (let i = 0; i < colArr.length; i++) {
           if (colArr[i].id == _options.columnId) {
             _checkboxColumnCellIndex = i;
           }
@@ -328,12 +340,23 @@
     function addCheckboxToFilterHeaderRow(grid) {
       _handler.subscribe(grid.onHeaderRowCellRendered, function (e, args) {
         if (args.column.field === "sel") {
-          $(args.node).empty();
-          $("<span id='filter-checkbox-selectall-container'><input id='header-filter-selector" + _selectAll_UID + "' type='checkbox'><label for='header-filter-selector" + _selectAll_UID + "'></label></span>")
-            .appendTo(args.node)
-            .on('click', function (evnt) {
-              handleHeaderClick(evnt, args);
-            });
+          Slick.Utils.emptyElement(args.node);
+          const spanElm = document.createElement('span');
+          spanElm.id = 'filter-checkbox-selectall-container';
+
+          const inputElm = document.createElement('input');
+          inputElm.type = 'checkbox';
+          inputElm.id = `header-filter-selector${_selectAll_UID}`;
+
+          const labelElm = document.createElement('label');
+          labelElm.htmlFor = `header-filter-selector${_selectAll_UID}`;
+
+          spanElm.appendChild(inputElm);
+          spanElm.appendChild(labelElm);
+          args.node.appendChild(spanElm);
+          _headerRowNode = args.node;
+
+          _bindingEventService.bind(spanElm, 'click', ((e) => handleHeaderClick(e, args)));
         }
       });
     }
@@ -343,7 +366,7 @@
     }
 
     function checkboxSelectionFormatter(row, cell, value, columnDef, dataContext, grid) {
-      var UID = createUID() + row;
+      let UID = createUID() + row;
 
       if (dataContext) {
         if (!checkSelectableOverride(row, dataContext, grid)) {
@@ -382,7 +405,7 @@
     }
 
 
-    $.extend(this, {
+    Slick.Utils.extend(this, {
       "init": init,
       "destroy": destroy,
       "pluginName": "CheckboxSelectColumn",
@@ -395,4 +418,4 @@
       "setOptions": setOptions,
     });
   }
-})(jQuery);
\ No newline at end of file
+})(window);
\ No newline at end of file