feat(plugins): remove jQuery from range decorator selection model (#754)

* feat(plugins): remove jQuery from range decorator selection model
6pac · May 4, 2023 · 6724f1d · 6724f1d
1 parent c4671be
commit 6724f1d
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 89 deletions.
diff --git a/examples/example-auto-scroll-when-dragging.html b/examples/example-auto-scroll-when-dragging.html
@@ -94,9 +94,6 @@ <h2>Demonstrates:</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>
@@ -173,7 +170,7 @@ <h2>Demonstrates:</h2>
     dataView.setItems(data);
   }
 
-  $(function () {
+  (function () {
     var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
     loadData(groupItemMetadataProvider);
     grid = new Slick.Grid("#myGrid", dataView, columns, options);
@@ -194,23 +191,23 @@ <h2>Demonstrates:</h2>
       grid2.invalidateRows(args.rows);
       grid2.render();
     });
-  })
+  })()
 
   function setDefaultOption() {
-    $('#isAutoScroll').prop('checked', true);
-    $('#minIntervalToShowNextCell').val('30');
-    $('#maxIntervalToShowNextCell').val('600');
-    $('#accelerateInterval').val('5');
+    document.querySelector('#isAutoScroll').checked =  true;
+    document.querySelector('#minIntervalToShowNextCell').value = '30';
+    document.querySelector('#maxIntervalToShowNextCell').value = '600';
+    document.querySelector('#accelerateInterval') .value  ='5';
     setOptions();
   }
 
   function setOptions() {
     grid.setSelectionModel(new Slick.CellSelectionModel({
       cellRangeSelector: new Slick.CellRangeSelector({
-        autoScroll: $('#isAutoScroll').is(":checked"),
-        minIntervalToShowNextCell: Number($('#minIntervalToShowNextCell').val()),
-        maxIntervalToShowNextCell: Number($('#maxIntervalToShowNextCell').val()),
-        accelerateInterval: Number($('#accelerateInterval').val())
+        autoScroll: document.querySelector('#isAutoScroll').checked,
+        minIntervalToShowNextCell: Number(document.querySelector('#minIntervalToShowNextCell').value),
+        maxIntervalToShowNextCell: Number(document.querySelector('#maxIntervalToShowNextCell').value),
+        accelerateInterval: Number(document.querySelector('#accelerateInterval').value)
       })
     }));
 
@@ -219,10 +216,10 @@ <h2>Demonstrates:</h2>
         selectionCss: {
           "border": "none"
         },
-        autoScroll: $('#isAutoScroll').is(":checked"),
-        minIntervalToShowNextCell: Number($('#minIntervalToShowNextCell').val()),
-        maxIntervalToShowNextCell: Number($('#maxIntervalToShowNextCell').val()),
-        accelerateInterval: Number($('#accelerateInterval').val())
+        autoScroll: document.querySelector('#isAutoScroll').checked,
+        minIntervalToShowNextCell: Number(document.querySelector('#minIntervalToShowNextCell').value),
+        maxIntervalToShowNextCell: Number(document.querySelector('#maxIntervalToShowNextCell').value),
+        accelerateInterval: Number(document.querySelector('#accelerateInterval').value)
       })
   }));
   }

diff --git a/plugins/slick.cellrangedecorator.js b/plugins/slick.cellrangedecorator.js
@@ -1,6 +1,6 @@
-(function ($) {
+(function (window) {
   // register namespace
-  $.extend(true, window, {
+  Slick.Utils.extend(true, window, {
     "Slick": {
       "CellRangeDecorator": CellRangeDecorator
     }
@@ -25,35 +25,33 @@
         "zIndex": "9999",
         "border": "2px dashed red"
       },
-      offset: {
-        top: -1,
-        left: -1,
-        height: -2,
-        width: -2
-      }
+      offset: { top: -1, left: -1, height: -2, width: -2 }
     };
 
-    options = $.extend(true, {}, _defaults, options);
-
+    options = Slick.Utils.extend(true, {}, _defaults, options);
 
     function show(range) {
       if (!_elem) {
-        _elem = $("<div></div>", {css: options.selectionCss})
-          .addClass(options.selectionCssClass)
-          .css("position", "absolute")
-          .appendTo(grid.getActiveCanvasNode());
+        _elem = document.createElement('div')
+        _elem.className = options.selectionCssClass;
+        Object.keys(options.selectionCss).forEach((cssStyleKey) => {
+          _elem.style[cssStyleKey] = options.selectionCss[cssStyleKey];
+        });
+        _elem.style.position = 'absolute';
+        const canvasNode = grid.getActiveCanvasNode();
+        if (canvasNode) {
+          canvasNode.appendChild(_elem);
+        }
       }
 
       var from = grid.getCellNodeBox(range.fromRow, range.fromCell);
       var to = grid.getCellNodeBox(range.toRow, range.toCell);
 
       if (from && to && options && options.offset) {
-        _elem.css({
-          top: from.top + options.offset.top,
-          left: from.left + options.offset.left,
-          height: to.bottom - from.top + options.offset.height,
-          width: to.right - from.left + options.offset.width
-        });
+        _elem.style.top = `${from.top + options.offset.top}px`;
+        _elem.style.left = `${from.left + options.offset.left}px`;
+        _elem.style.height = `${to.bottom - from.top + options.offset.height}px`;
+        _elem.style.width = `${to.right - from.left + options.offset.width}px`;
       }
 
       return _elem;
@@ -70,11 +68,11 @@
       }
     }
 
-    $.extend(this, {
+    Slick.Utils.extend(this, {
       "pluginName": "CellRangeDecorator",
       "show": show,
       "hide": hide,
       "destroy": destroy
     });
   }
-})(jQuery);
+})(window);
diff --git a/plugins/slick.cellrangeselector.js b/plugins/slick.cellrangeselector.js
@@ -1,6 +1,6 @@
-(function ($) {
+(function (window) {
   // register namespace
-  $.extend(true, window, {
+  Slick.Utils.extend(true, window, {
     "Slick": {
       "CellRangeSelector": CellRangeSelector
     }
@@ -11,7 +11,7 @@
     var _currentlySelectedRange;
     var _canvas;
     var _gridOptions;
-    var _$activeCanvas;
+    var _activeCanvas;
     var _dragging;
     var _decorator;
     var _self = this;
@@ -33,7 +33,7 @@
     var _isBottomCanvas;
 
     // autoScroll related variables
-    var _$activeViewport;
+    var _activeViewport;
     var _viewportWidth;
     var _viewportHeight;
     var _draggingMouseOffset;
@@ -52,7 +52,7 @@
         throw new Error('Slick.Draggable is undefined, make sure to import "slick.interactions.js"');
       }
 
-      options = $.extend(true, {}, _defaults, options);
+      options = Slick.Utils.extend(true, {}, _defaults, options);
       _decorator = options.cellDecorator || new Slick.CellRangeDecorator(grid, options);
       _grid = grid;
       _canvas = _grid.getCanvasNode();
@@ -67,8 +67,8 @@
 
     function destroy() {
       _handler.unsubscribeAll();
-      _$activeCanvas = null;
-      _$activeViewport = null;
+      _activeCanvas = null;
+      _activeViewport = null;
       _canvas = null;
       if (_decorator && _decorator.destroy) {
         _decorator.destroy();
@@ -84,35 +84,41 @@
       _scrollLeft = args.scrollLeft;
     }
 
-    function handleDragInit(e, dd) {
+    function handleDragInit(e) {
       // Set the active canvas node because the decorator needs to append its
       // box to the correct canvas
-      _$activeCanvas = $(_grid.getActiveCanvasNode(e));
-      _$activeViewport = $(_grid.getActiveViewportNode(e));
+      _activeCanvas = _grid.getActiveCanvasNode(e);
+      _activeViewport = _grid.getActiveViewportNode(e);
 
       var scrollbarDimensions = _grid.getDisplayedScrollbarDimensions()
-      _viewportWidth = _$activeViewport.width() - scrollbarDimensions.width;
-      _viewportHeight = _$activeViewport.height() - scrollbarDimensions.height;
+      _viewportWidth = _activeViewport.offsetWidth - scrollbarDimensions.width;
+      _viewportHeight = _activeViewport.offsetHeight - scrollbarDimensions.height;
+
       _moveDistanceForOneCell = {
         x: _grid.getAbsoluteColumnMinWidth() / 2,
         y: _grid.getOptions().rowHeight / 2
       }
       _isRowMoveRegistered = hasRowMoveManager();
 
-      var c = _$activeCanvas.offset();
-
       _rowOffset = 0;
       _columnOffset = 0;
-      _isBottomCanvas = _$activeCanvas.hasClass('grid-canvas-bottom');
+      _isBottomCanvas = _activeCanvas.classList.contains('grid-canvas-bottom');
 
       if (_gridOptions.frozenRow > -1 && _isBottomCanvas) {
-        _rowOffset = (_gridOptions.frozenBottom) ? $('.'+_grid.getUID()+' .grid-canvas-bottom').height() : $('.'+_grid.getUID()+' .grid-canvas-top').height();
+        const canvasSelector = `.${_grid.getUID()} .grid-canvas-${_gridOptions.frozenBottom ? 'bottom' : 'top'}`;
+        const canvasElm = document.querySelector(canvasSelector);
+        if (canvasElm) {
+          _rowOffset = canvasElm.clientHeight || 0;
+        }
       }
 
-      _isRightCanvas = _$activeCanvas.hasClass('grid-canvas-right');
+      _isRightCanvas = _activeCanvas.classList.contains('grid-canvas-right');
 
       if (_gridOptions.frozenColumn > -1 && _isRightCanvas) {
-        _columnOffset = $('.'+_grid.getUID()+' .grid-canvas-left').width();
+        const canvasLeftElm = document.querySelector(`.${_grid.getUID()} .grid-canvas-left`);
+        if (canvasLeftElm) {
+          _columnOffset = canvasLeftElm.clientWidth || 0;
+        }
       }
 
       // prevent the grid from cancelling drag'n'drop by default
@@ -134,12 +140,14 @@
 
       _grid.focus();
 
-      var startX = dd.startX - $(_canvas).offset().left;
+      let canvasOffset = Slick.Utils.offset(_canvas);
+
+      let startX = dd.startX - (canvasOffset.left || 0);
       if (_gridOptions.frozenColumn >= 0 && _isRightCanvas) {
         startX += _scrollLeft;
       }
 
-      var startY = dd.startY - $(_canvas).offset().top;
+      let startY = dd.startY - (canvasOffset.top || 0);
       if (_gridOptions.frozenRow >= 0 && _isBottomCanvas) {
         startY += _scrollTop;
       }
@@ -172,14 +180,14 @@
 
     function getMouseOffsetViewport(e, dd) {
       var targetEvent = e.touches ? e.touches[0] : e;
-      var viewportLeft = _$activeViewport.scrollLeft();
-      var viewportTop = _$activeViewport.scrollTop();
+      var viewportLeft = _activeViewport.scrollLeft;
+      var viewportTop = _activeViewport.scrollTop;
       var viewportRight = viewportLeft + _viewportWidth;
       var viewportBottom = viewportTop + _viewportHeight;
 
-      var viewportOffset = _$activeViewport.offset();
-      var viewportOffsetLeft = viewportOffset.left;
-      var viewportOffsetTop = viewportOffset.top;
+      var viewportOffset = Slick.Utils.offset(_activeViewport);
+      var viewportOffsetLeft = viewportOffset.left || 0;
+      var viewportOffsetTop = viewportOffset.top || 0;
       var viewportOffsetRight = viewportOffsetLeft + _viewportWidth;
       var viewportOffsetBottom = viewportOffsetTop + _viewportHeight;
 
@@ -293,10 +301,11 @@
     }
 
     function handleDragTo(e, dd) {
-      var targetEvent = e.touches ? e.touches[0] : e;
-      var end = _grid.getCellFromPoint(
-        targetEvent.pageX - _$activeCanvas.offset().left + _columnOffset,
-        targetEvent.pageY - _$activeCanvas.offset().top + _rowOffset
+      let targetEvent = e.touches ? e.touches[0] : e;
+      let canvasOffset = Slick.Utils.offset(_activeCanvas);
+      let end = _grid.getCellFromPoint(
+        targetEvent.pageX - (canvasOffset && canvasOffset.left || 0) + _columnOffset,
+        targetEvent.pageY - (canvasOffset && canvasOffset.top || 0) + _rowOffset
       );
 
       // ... frozen column(s),
@@ -366,7 +375,7 @@
       return _currentlySelectedRange;
     }
 
-    $.extend(this, {
+    Slick.Utils.extend(this, {
       "init": init,
       "destroy": destroy,
       "pluginName": "CellRangeSelector",
@@ -379,4 +388,4 @@
       "onCellRangeSelecting": new Slick.Event()
     });
   }
-})(jQuery);
+})(window);
diff --git a/plugins/slick.cellselectionmodel.js b/plugins/slick.cellselectionmodel.js
@@ -1,14 +1,13 @@
-(function ($) {
+(function (window) {
   // register namespace
-  $.extend(true, window, {
+  Slick.Utils.extend(true, window, {
     "Slick": {
       "CellSelectionModel": CellSelectionModel
     }
   });
 
   function CellSelectionModel(options) {
     var _grid;
-    var _canvas;
     var _ranges = [];
     var _self = this;
     var _selector;
@@ -29,9 +28,8 @@
     };
 
     function init(grid) {
-      _options = $.extend(true, {}, _defaults, options);
+      _options = Slick.Utils.extend(true, {}, _defaults, options);
       _grid = grid;
-      _canvas = _grid.getCanvasNode();
       _grid.onActiveCellChanged.subscribe(handleActiveCellChange);
       _grid.onKeyDown.subscribe(handleKeyDown);
       grid.registerPlugin(_selector);
@@ -45,7 +43,6 @@
       _selector.onCellRangeSelected.unsubscribe(handleCellRangeSelected);
       _selector.onBeforeCellRangeSelected.unsubscribe(handleBeforeCellRangeSelected);
       _grid.unregisterPlugin(_selector);
-      _canvas = null;
       if (_selector && _selector.destroy) {
         _selector.destroy();
       }
@@ -106,7 +103,7 @@
       setSelectedRanges(getSelectedRanges());
     }
 
-    function handleBeforeCellRangeSelected(e, args) {
+    function handleBeforeCellRangeSelected(e) {
       if (_grid.getEditorLock().isActive()) {
         e.stopPropagation();
         return false;
@@ -189,7 +186,7 @@
       }
     }
 
-    $.extend(this, {
+    Slick.Utils.extend(this, {
       "getSelectedRanges": getSelectedRanges,
       "setSelectedRanges": setSelectedRanges,
 
@@ -202,4 +199,4 @@
       "onSelectedRangesChanged": new Slick.Event()
     });
   }
-})(jQuery);
+})(window);