feat(plugins): remove jQuery from header buttons/menus plugins (#748)

6pac · May 1, 2023 · 58701c4 · 58701c4
1 parent aac6eec
commit 58701c4
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 144 deletions.
diff --git a/cypress/integration/example-plugin-headerbuttons.spec.js b/cypress/integration/example-plugin-headerbuttons.spec.js
@@ -122,14 +122,47 @@ describe('Example - Header Button', () => {
       .invoke('show');
 
     cy.get('.slick-header-column:nth(0)')
-      .should('have.css', 'width', '140px');
+      .should($el => expect(parseInt(`${$el.width()}`, 10)).to.eq(140));
 
     cy.get('.slick-header-columns')
       .children('.slick-header-column:nth(0)')
       .find('.slick-header-button')
       .should('have.length', 4);
   });
 
+  it('should click on first "Red Tag Day" header button and expect an alert with that text when clicked', (done) => {
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.on('window:alert', (text) => {
+      expect(text).to.eq('command: Red Tag Day');
+      done();
+    });
+
+    // header buttons are displayed in inverse mode by default, 
+    // so we need to start at the end
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(0)')
+      .find('.slick-header-button:nth(3)')
+      .click();
+  });
+
+  it('should click on second "Write a comment!" header button and expect an alert with that text when clicked', (done) => {
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.on('window:alert', (text) => {
+      expect(text).to.eq('Write a comment!');
+      done();
+    });
+
+    // header buttons are displayed in inverse mode by default
+    cy.get('.slick-header-columns')
+      .children('.slick-header-column:nth(0)')
+      .find('.slick-header-button:nth(2)')
+      .click();
+  });
+
   it('should go on the 2nd column "Hover me!" and expect the header button to appear only when doing hover over it', () => {
     cy.get('.slick-header-columns')
       .children('.slick-header-column:nth(1)')

diff --git a/examples/example-plugin-headerbuttons.html b/examples/example-plugin-headerbuttons.html
@@ -44,7 +44,6 @@ <h2>View Source:</h2>
 
   <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>
@@ -161,33 +160,33 @@ <h2>View Source:</h2>
 
 
 
-    $(function () {
-      grid = new Slick.Grid("#myGrid", data, columns, options);
+  (function () {
+    grid = new Slick.Grid("#myGrid", data, columns, options);
 
-      var headerButtonsPlugin = new Slick.Plugins.HeaderButtons();
+    var headerButtonsPlugin = new Slick.Plugins.HeaderButtons();
 
-      headerButtonsPlugin.onCommand.subscribe(function (e, args) {
-        var column = args.column;
-        var button = args.button;
-        var command = args.command;
+    headerButtonsPlugin.onCommand.subscribe(function (e, args) {
+      var column = args.column;
+      var button = args.button;
+      var command = args.command;
 
-        if (command == "toggle-highlight") {
-          if (button.cssClass == "icon-highlight-on") {
-            delete columnsWithHighlightingById[column.id];
-            button.cssClass = "icon-highlight-off";
-            button.tooltip = "Highlight negative numbers."
-          } else {
-            columnsWithHighlightingById[column.id] = true;
-            button.cssClass = "icon-highlight-on";
-            button.tooltip = "Remove highlight."
-          }
-
-          grid.invalidate();
+      if (command == "toggle-highlight") {
+        if (button.cssClass == "icon-highlight-on") {
+          delete columnsWithHighlightingById[column.id];
+          button.cssClass = "icon-highlight-off";
+          button.tooltip = "Highlight negative numbers."
+        } else {
+          columnsWithHighlightingById[column.id] = true;
+          button.cssClass = "icon-highlight-on";
+          button.tooltip = "Remove highlight."
         }
-      });
 
-      grid.registerPlugin(headerButtonsPlugin);
+        grid.invalidate();
+      }
     });
+
+    grid.registerPlugin(headerButtonsPlugin);
+  })();
   </script>
 </body>
 

diff --git a/plugins/slick.headerbuttons.js b/plugins/slick.headerbuttons.js
@@ -1,6 +1,6 @@
-(function ($) {
+(function (window) {
   // register namespace
-  $.extend(true, window, {
+  Slick.Utils.extend(true, window, {
     "Slick": {
       "Plugins": {
         "HeaderButtons": HeaderButtons
@@ -78,13 +78,14 @@
     var _grid;
     var _self = this;
     var _handler = new Slick.EventHandler();
+    var _bindingEventService = new Slick.BindingEventService();
     var _defaults = {
       buttonCssClass: "slick-header-button"
     };
 
 
     function init(grid) {
-      options = $.extend(true, {}, _defaults, options);
+      options = Slick.Utils.extend(true, {}, _defaults, options);
       _grid = grid;
       _handler
         .subscribe(_grid.onHeaderCellRendered, handleHeaderCellRendered)
@@ -97,6 +98,7 @@
 
     function destroy() {
       _handler.unsubscribeAll();
+      _bindingEventService.unbindAll();
     }
 
 
@@ -124,42 +126,35 @@
             button.disabled = isItemUsable ? false : true;
           }
 
-          var btn = $("<div></div>")
-            .addClass(options.buttonCssClass)
-            .data("column", column)
-            .data("button", button);
+          const btn = document.createElement('div');
+          btn.className = options.buttonCssClass;
 
           if (button.disabled) {
-            btn.addClass("slick-header-button-disabled");
+            btn.classList.add("slick-header-button-disabled");
           }
 
           if (button.showOnHover) {
-            btn.addClass("slick-header-button-hidden");
+            btn.classList.add("slick-header-button-hidden");
           }
 
           if (button.image) {
-            btn.css("backgroundImage", "url(" + button.image + ")");
+            btn.style.backgroundImage = "url(" + button.image + ")";
           }
 
           if (button.cssClass) {
-            btn.addClass(button.cssClass);
+            btn.classList.add(button.cssClass);
           }
 
           if (button.tooltip) {
-            btn.attr("title", button.tooltip);
-          }
-
-          if (button.command) {
-            btn.data("command", button.command);
+            btn.title = button.tooltip;
           }
 
           if (button.handler) {
-            btn.on("click", button.handler);
+            _bindingEventService.bind(btn, 'click', button.handler);
           }
 
-          btn
-            .on("click", handleButtonClick)
-            .appendTo(args.node);
+          _bindingEventService.bind(btn, 'click', handleButtonClick.bind(this, button, args.column));
+          args.node.appendChild(btn);
         }
       }
     }
@@ -172,17 +167,17 @@
         // Removing buttons via jQuery will also clean up any event handlers and data.
         // NOTE: If you attach event handlers directly or using a different framework,
         //       you must also clean them up here to avoid memory leaks.
-        $(args.node).find("." + options.buttonCssClass).remove();
+        const buttonCssClass = (options.buttonCssClass || '').replace(/(\s+)/g, '.');
+        if (buttonCssClass) {
+          args.node.querySelectorAll(`.${buttonCssClass}`).forEach(elm => elm.remove());
+        }
       }
     }
 
 
-    function handleButtonClick(e) {
-      var command = $(this).data("command");
-      var columnDef = $(this).data("column");
-      var button = $(this).data("button");
-
-      var callbackArgs = {
+    function handleButtonClick(button, columnDef, e) {
+      const command = button.command || '';
+      const callbackArgs = {
         "grid": _grid,
         "column": columnDef,
         "button": button
@@ -222,12 +217,12 @@
       return true;
     }
 
-    $.extend(this, {
+    Slick.Utils.extend(this, {
       "init": init,
       "destroy": destroy,
       "pluginName": "HeaderButtons",
 
       "onCommand": new Slick.Event()
     });
   }
-})(jQuery);
+})(window);