feat(resizer): change onGridBeforeResize to return event, issue #215

src/app/examples/grid-formatter.component.html

@@ -2,6 +2,10 @@
     <h2>{{title}}</h2>
     <div class="subtitle" [innerHTML]="subTitle"></div>
 
+    <button class="btn btn-default btn-sm" (click)="togglePauseResizer()">
+      Pause auto-resize: <b>{{resizerPaused}}</b>
+    </button>
+
     <angular-slickgrid gridId="grid2"
               [columnDefinitions]="columnDefinitions"
               [gridOptions]="gridOptions"

src/app/examples/grid-formatter.component.ts

@@ -29,13 +29,15 @@ export class GridFormatterComponent implements OnInit {
         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>
   `;
 
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
   angularGrid: AngularGridInstance;
+  resizerPaused = false;
 
   angularGridReady(angularGrid: AngularGridInstance) {
     this.angularGrid = angularGrid;
@@ -115,6 +117,11 @@ export class GridFormatterComponent implements OnInit {
     return phone;
   }
 
+  togglePauseResizer() {
+    this.resizerPaused = !this.resizerPaused;
+    this.angularGrid.resizerService.pauseResizer(this.resizerPaused);
+  }
+
   toggleCompletedProperty(item) {
     // toggle property
     if (typeof item === 'object') {

src/app/modules/angular-slickgrid/services/__tests__/resizer.service.spec.ts

@@ -95,7 +95,7 @@ describe('Resizer Service', () => {
     expect(window.innerHeight).not.toEqual(previousHeight);
     expect(serviceCalculateSpy).toReturnWith(dimensionResult);
     expect(lastDimensions).toEqual(dimensionResult);
-    expect(subjectBeforeSpy).toHaveBeenCalledWith(true);
+    expect(subjectBeforeSpy).toHaveBeenCalledWith(expect.any(Object));
     expect(subjectAfterSpy).toHaveBeenCalledWith(dimensionResult);
   });
 
@@ -187,4 +187,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(new Event('resize'));
+
+    service.pauseResizer(true);
+    const spy = jest.spyOn(service, 'resizeGrid');
+
+    Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 550 });
+    window.dispatchEvent(new Event('resize'));
+
+    expect(spy).not.toHaveBeenCalled();
+  });
 });

src/app/modules/angular-slickgrid/services/resizer.service.ts

@@ -23,8 +23,9 @@ export class ResizerService {
   private _grid: any;
   private _lastDimensions: GridDimension;
   private _timer: any;
+  private _resizePaused = false;
   onGridAfterResize = new Subject<GridDimension>();
-  onGridBeforeResize = new Subject<boolean>();
+  onGridBeforeResize = new Subject<Event>();
 
   /** Getter for the Grid Options pulled through the Grid Object */
   private get _gridOptions(): GridOption {
@@ -59,9 +60,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.onGridBeforeResize.next(true);
-      this.resizeGrid(0, newSizes);
+    $(window).on(`resize.grid.${this._gridUid}`, (event: Event) => {
+      this.onGridBeforeResize.next(event);
+      if (!this._resizePaused) {
+        this.resizeGrid(0, newSizes);
+      }
     });
   }
 
@@ -164,6 +167,11 @@ export class ResizerService {
     return this._lastDimensions;
   }
 
+  /** 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) {