fix(extensions): import jQuery mousewheel only with frozen (#450)

- when jQuery mousewheel is imported, SlickGrid attaches a scroll handler which prevent scrolling to work as normal, this however should only be used with frozen grids since it creates other issues like seen in Row Detail were it doesn't behave correctly
- NOTE that this is more of a patch and a SlickGrid grid option flag would be better to handle that, possibly create a flag in future SlickGrid version
- ref Angular-Slickgrid issue [#618](ghiscoding/Angular-Slickgrid#618)

src/aurelia-slickgrid/custom-elements/__tests__/aurelia-slickgrid-constructor.spec.ts

@@ -398,6 +398,15 @@ describe('Aurelia-Slickgrid Custom Component instantiated via Constructor', () =
     expect(spy).toHaveBeenNthCalledWith(5, 'onAfterGridDestroyed', true);
   });
 
+  it('should load jQuery mousewheel when using a frozen grid', () => {
+    const loadSpy = jest.spyOn(customElement, 'loadJqueryMousewheelDynamically');
+    customElement.gridOptions.frozenRow = 3;
+
+    customElement.attached();
+
+    expect(loadSpy).toHaveBeenCalled();
+  });
+
   describe('initialization method', () => {
     describe('columns definitions changed', () => {
       it('should expect "translateColumnHeaders" being called when "enableTranslate" is set', () => {

src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.ts

@@ -3,7 +3,6 @@
 import * as $ from 'jquery';
 import 'jquery-ui-dist/jquery-ui';
 import 'slickgrid/lib/jquery.event.drag-2.3.0';
-import 'slickgrid/lib/jquery.mousewheel';
 import 'slickgrid/slick.core';
 import 'slickgrid/slick.dataview';
 import 'slickgrid/slick.grid';
@@ -61,6 +60,7 @@ import { SlickgridEventAggregator } from './slickgridEventAggregator';
 
 // using external non-typed js libraries
 declare const Slick: any;
+declare function require(name: string);
 
 const DEFAULT_AURELIA_EVENT_PREFIX = 'asg';
 const DEFAULT_SLICKGRID_EVENT_PREFIX = 'sg';
@@ -177,6 +177,10 @@ export class AureliaSlickgridCustomElement {
   }
 
   initialization() {
+    if (this.gridOptions && this.gridOptions.frozenRow >= 0) {
+      this.loadJqueryMousewheelDynamically();
+    }
+
     this.dispatchCustomEvent(`${DEFAULT_AURELIA_EVENT_PREFIX}-on-before-grid-create`);
     this.globalEa.publish('onBeforeGridCreate', true);
 
@@ -775,6 +779,15 @@ export class AureliaSlickgridCustomElement {
     return options;
   }
 
+
+  /**
+   *  load jQuery mousewheel only when using a frozen grid (this will make the mousewheel work on any side of the frozen container).
+   * DO NOT USE with Row Detail
+   */
+  loadJqueryMousewheelDynamically() {
+    require('slickgrid/lib/jquery.mousewheel');
+  }
+
   /**
    * On a Pagination changed, we will trigger a Grid State changed with the new pagination info
    * Also if we use Row Selection or the Checkbox Selector, we need to reset any selection