feat(plugins): convert copy manager plugins to vanillaJS

plugins/slick.cellcopymanager.js

@@ -1,6 +1,6 @@
-(function ($) {
+(function (window) {
   // register namespace
-  $.extend(true, window, {
+  Slick.Utils.extend(true, window, {
     "Slick": {
       "CellCopyManager": CellCopyManager
     }
@@ -21,7 +21,7 @@
       _grid.onKeyDown.unsubscribe(handleKeyDown);
     }
 
-    function handleKeyDown(e, args) {
+    function handleKeyDown(e) {
       var ranges;
       if (!_grid.getEditorLock().isActive()) {
         if (e.which == Slick.keyCode.ESCAPE) {
@@ -75,7 +75,7 @@
       _grid.removeCellCssStyles("copy-manager");
     }
 
-    $.extend(this, {
+    Slick.Utils.extend(this, {
       "init": init,
       "destroy": destroy,
       "pluginName": "CellCopyManager",
@@ -87,4 +87,4 @@
       "onPasteCells": new Slick.Event()
     });
   }
-})(jQuery);
+})(window);

plugins/slick.cellexternalcopymanager.js

@@ -1,6 +1,6 @@
-(function ($) {
+(function (window) {
   // register namespace
-  $.extend(true, window, {
+  Slick.Utils.extend(true, window, {
     "Slick": {
       "CellExternalCopyManager": CellExternalCopyManager
     }
@@ -59,8 +59,10 @@
       }
       // we give focus on the grid when a selection is done on it.
       // without this, if the user selects a range of cell without giving focus on a particular cell, the grid doesn't get the focus and key stroke handles (ctrl+c) don't work
-      cellSelectionModel.onSelectedRangesChanged.subscribe(function(e, args){
-        _grid.focus();
+      cellSelectionModel.onSelectedRangesChanged.subscribe(() => {
+        if (!_grid.getEditorLock().isActive()) {
+          _grid.focus();
+        }
       });
     }
 
@@ -78,54 +80,57 @@
       return columnDef.name;
     }
 
-    function getDataItemValueForColumn(item, columnDef, e) {
-      if (_options.dataItemColumnValueExtractor) {
-        var val = _options.dataItemColumnValueExtractor(item, columnDef);
-
-        if (val) { return val; }
+    function getDataItemValueForColumn(item, columnDef, event) {
+      if (typeof _options.dataItemColumnValueExtractor === 'function') {
+        const val = _options.dataItemColumnValueExtractor(item, columnDef);
+        if (val) {
+          return val;
+        }
       }
 
-      var retVal = '';
+      let retVal = '';
 
       // if a custom getter is not defined, we call serializeValue of the editor to serialize
-      if (columnDef.editor){
-        var editorArgs = {
-          'container':$("<p>"),  // a dummy container
-          'column':columnDef,
-          'position':{'top':0, 'left':0},  // a dummy position required by some editors
-          'grid':_grid,
-          'event':e
-        };
-        var editor = new columnDef.editor(editorArgs);
+      if (columnDef && columnDef.editor) {
+        const tmpP = document.createElement('p');
+        const editor = new columnDef.editor({
+          container: tmpP,  // a dummy container
+          column: columnDef,
+          event,
+          position: { top: 0, left: 0 },  // a dummy position required by some editors
+          grid: _grid,
+        });
         editor.loadValue(item);
         retVal = editor.serializeValue();
         editor.destroy();
+        tmpP.remove();
       } else {
-        retVal = item[columnDef.field];
+        retVal = item[columnDef.field || ''];
       }
 
       return retVal;
     }
 
     function setDataItemValueForColumn(item, columnDef, value) {
       if (columnDef.denyPaste) { return null; }
-      
+
       if (_options.dataItemColumnValueSetter) {
         return _options.dataItemColumnValueSetter(item, columnDef, value);
       }
 
       // if a custom setter is not defined, we call applyValue of the editor to unserialize
-      if (columnDef.editor){
-        var editorArgs = {
-          'container':$("body"),  // a dummy container
-          'column':columnDef,
-          'position':{'top':0, 'left':0},  // a dummy position required by some editors
-          'grid':_grid
-        };
-        var editor = new columnDef.editor(editorArgs);
+      if (columnDef.editor) {
+        const tmpDiv = document.createElement('div');
+        const editor = new columnDef.editor({
+          container: tmpDiv, // a dummy container
+          column: columnDef,
+          position: { top: 0, left: 0 },  // a dummy position required by some editors
+          grid: _grid
+        });
         editor.loadValue(item);
         editor.applyValue(item, value);
         editor.destroy();
+        tmpDiv.remove();
       } else {
         item[columnDef.field] = value;
       }
@@ -455,7 +460,7 @@
       _options.includeHeaderWhenCopying = includeHeaderWhenCopying;
     }
 
-    $.extend(this, {
+    Slick.Utils.extend(this, {
       "init": init,
       "destroy": destroy,
       "pluginName": "CellExternalCopyManager",
@@ -469,4 +474,4 @@
       "setIncludeHeaderWhenCopying" : setIncludeHeaderWhenCopying
     });
   }
-})(jQuery);
+})(window);

slick.editors.js

@@ -4,7 +4,7 @@
  * @namespace Slick
  */
 
-(function () {
+(function (window) {
 
   const utils = Slick.Utils;
 
@@ -333,18 +333,20 @@
 
     this.destroy = function () {
       scope.hide();
-      flatpickrInstance.destroy();
+      if (flatpickrInstance) {
+        flatpickrInstance.destroy();
+      }
       input.remove();
     };
 
     this.show = function () {
-      if (!args.compositeEditorOptions) {
+      if (!args.compositeEditorOptions && flatpickrInstance) {
         flatpickrInstance.open();
       }
     };
 
     this.hide = function () {
-      if (!args.compositeEditorOptions) {
+      if (!args.compositeEditorOptions && flatpickrInstance) {
         flatpickrInstance.close();
       }
     };
@@ -358,7 +360,9 @@
       input.value = defaultValue;
       input.defaultValue = defaultValue;
       input.select();
-      flatpickrInstance.setDate(defaultValue);
+      if (flatpickrInstance) {
+        flatpickrInstance.setDate(defaultValue);
+      }
     };
 
     this.serializeValue = function () {
@@ -776,7 +780,7 @@
   }
 
   // exports
-  utils.extend(true, window, {
+  Slick.Utils.extend(true, window, {
     "Slick": {
       "Editors": {
         "Text": TextEditor,
@@ -790,4 +794,4 @@
       }
     }
   });
-})();
+})(window);