feat(resizer): add new method "pauseResizer" (#183)

* feat(resizer): add new method "pauseResizer"
- also return the window event when calling the event aggregator "asg:onBeforeResize"

* refactor(test): fix Resizer Service failing test

src/aurelia-slickgrid/services/__tests__/resizer.service.spec.ts

@@ -100,7 +100,7 @@ describe('Resizer Service', () => {
     expect(serviceCalculateSpy).toReturnWith(dimensionResult);
     expect(lastDimensions).toEqual(dimensionResult);
     expect(eaSpy).toHaveBeenCalledTimes(2);
-    expect(eaSpy).toHaveBeenNthCalledWith(1, `${aureliaEventPrefix}:onBeforeResize`, true);
+    expect(eaSpy).toHaveBeenNthCalledWith(1, `${aureliaEventPrefix}:onBeforeResize`, expect.any(Object));
     expect(eaSpy).toHaveBeenNthCalledWith(2, `${aureliaEventPrefix}:onAfterResize`, dimensionResult);
   });
 
@@ -193,4 +193,18 @@ describe('Resizer Service', () => {
     expect(serviceCalculateSpy).toHaveBeenCalled();
     expect(gridAutosizeSpy).toHaveBeenCalled();
   });
+
+  it('should stop resizing when user called "pauseResizer" with true', () => {
+    service.bindAutoResizeDataGrid();
+    Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 450 });
+    window.dispatchEvent(DOM.createCustomEvent(`resize`, { bubbles: true }));
+
+    service.pauseResizer(true);
+    const spy = jest.spyOn(service, 'resizeGrid');
+
+    Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 550 });
+    window.dispatchEvent(DOM.createCustomEvent(`resize`, { bubbles: true }));
+
+    expect(spy).not.toHaveBeenCalled();
+  });
 });

src/aurelia-slickgrid/services/resizer.service.ts

@@ -23,6 +23,7 @@ export class ResizerService {
   private _fixedWidth: number | null;
   private _grid: any;
   private _lastDimensions: GridDimension;
+  private _resizePaused = false;
   private _timer: any;
   aureliaEventPrefix: string;
 
@@ -64,9 +65,11 @@ export class ResizerService {
 
     // -- 2nd attach a trigger on the Window DOM element, so that it happens also when resizing after first load
     // -- attach auto-resize to Window object only if it exist
-    $(window).on(`resize.grid.${this._gridUid}`, () => {
-      this.ea.publish(`${this.aureliaEventPrefix}:onBeforeResize`, true);
-      this.resizeGrid(0, newSizes);
+    $(window).on(`resize.grid.${this._gridUid}`, (event: Event) => {
+      this.ea.publish(`${this.aureliaEventPrefix}:onBeforeResize`, event);
+      if (!this._resizePaused) {
+        this.resizeGrid(0, newSizes);
+      }
     });
   }
 
@@ -170,6 +173,11 @@ export class ResizerService {
     }
   }
 
+  /** Provide the possibility to pause the resizer for some time, until user decides to re-enabled it later if he wish to. */
+  pauseResizer(isResizePaused: boolean) {
+    this._resizePaused = isResizePaused;
+  }
+
   /** Resize the datagrid to fit the browser height & width */
   resizeGrid(delay = 10, newSizes?: GridDimension): Promise<GridDimension> {
     if (!this._grid || !this._gridOptions) {

src/examples/slickgrid/example2.html

@@ -3,6 +3,11 @@ <h2>${title}</h2>
   <div class="subtitle"
        innerhtml.bind="subTitle"></div>
 
+  <button class="btn btn-default btn-sm"
+          click.delegate="togglePauseResizer()">
+    Pause auto-resize: <b>${resizerPaused}</b>
+  </button>
+
   <aurelia-slickgrid grid-id="grid1"
                      column-definitions.bind="columnDefinitions"
                      grid-options.bind="gridOptions"

src/examples/slickgrid/example2.ts

@@ -33,13 +33,15 @@ export class Example2 {
         Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag.
         Note that it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExportOptions" or the column definition)
       </li>
+      <li>This example also has auto-resize enabled, and we also demo how you can pause the resizer if you wish to</li>
     </ul>
   `;
 
   aureliaGrid: AureliaGridInstance;
   gridOptions: GridOption;
   columnDefinitions: Column[];
   dataset: any[];
+  resizerPaused = false;
 
   constructor() {
     // define the grid options & columns and then create the grid itself
@@ -131,6 +133,11 @@ export class Example2 {
     return phone;
   }
 
+  togglePauseResizer() {
+    this.resizerPaused = !this.resizerPaused;
+    this.aureliaGrid.resizerService.pauseResizer(this.resizerPaused);
+  }
+
   toggleCompletedProperty(item) {
     // toggle property
     if (typeof item === 'object') {