feat: add pageUp/pageDown/home/end to SlickCellSelection (#1126)

* feat: add pageUp/pageDown/home/end to SlickCellSelection

examples/vite-demo-vanilla-bundle/src/app-routing.ts

@@ -19,6 +19,7 @@ import Example15 from './examples/example15';
 import Example16 from './examples/example16';
 import Example17 from './examples/example17';
 import Example18 from './examples/example18';
+import Example19 from './examples/example19';
 
 export class AppRouting {
   constructor(private config: RouterConfig) {
@@ -43,6 +44,7 @@ export class AppRouting {
       { route: 'example16', name: 'example16', view: './examples/example16.html', viewModel: Example16, title: 'Example16', },
       { route: 'example17', name: 'example17', view: './examples/example17.html', viewModel: Example17, title: 'Example17', },
       { route: 'example18', name: 'example18', view: './examples/example18.html', viewModel: Example18, title: 'Example18', },
+      { route: 'example19', name: 'example19', view: './examples/example19.html', viewModel: Example19, title: 'Example19', },
       { route: '', redirect: 'example01' },
       { route: '**', redirect: 'example01' }
     ];

examples/vite-demo-vanilla-bundle/src/app.html

@@ -89,6 +89,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.delegate="loadRoute('example18')">
             Example18 - Real-Time Trading Platform
           </a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example19')">
+            Example19 - ExcelCopyBuffer with Cell Selection
+          </a>
         </div>
       </div>
     </div>

examples/vite-demo-vanilla-bundle/src/examples/example19.html

@@ -0,0 +1,27 @@
+<h3 class="title is-3">
+  Example 19 - ExcelCopyBuffer with Cell Selection
+  <span class="subtitle">(with Salesforce Theme)</span>
+  <div class="subtitle" style="float: right; margin-top: -20px">
+    <span class="is-size-6">see</span>
+    <a class="is-size-5" target="_blank"
+      href="https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/vite-demo-vanilla-bundle/src/examples/example19.ts">
+      <span class="mdi mdi-link-variant mdi-v-align-sub"></span> code
+    </a>
+  </div>
+</h3>
+
+<h5 class="title is-5 mb-3">
+  Grid - using <code>enableExcelCopyBuffer</code> which uses <code>SlickCellSelectionModel</code>
+</h5>
+<h6 class="title is-6">
+  <button class="button is-small" onclick.delegate="togglePagination()"
+    data-text="toggle-pagination-btn">
+    <span class="icon mdi mdi-swap-vertical"></span>
+    <span>Toggle Pagination</span>
+  </button>
+  <label class="ml-3">Range Selection</label>
+  <span id="selectionRange"></span>
+</h6>
+
+<div class="grid19">
+</div>

examples/vite-demo-vanilla-bundle/src/examples/example19.scss

@@ -0,0 +1,10 @@
+/** override slick-cell to make it look like Excel sheet */
+.grid19 {
+  --slick-border-color: #d4d4d4;
+  --slick-cell-odd-background-color: #fbfbfb;
+  --slick-cell-border-left: 1px solid var(--slick-border-color);
+  --slick-header-menu-display: none;
+  --slick-header-column-height: 20px;
+  --slick-grid-border-color: #d4d4d4;
+  --slick-row-selected-color: #d4ebfd;
+}

examples/vite-demo-vanilla-bundle/src/examples/example19.ts

@@ -0,0 +1,132 @@
+import { CellRange, Column, GridOption, SlickEventHandler, SlickNamespace, } from '@slickgrid-universal/common';
+import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
+import { ExampleGridOptions } from './example-grid-options';
+import '../salesforce-styles.scss';
+import './example19.scss';
+
+const NB_ITEMS = 100;
+declare const Slick: SlickNamespace;
+export default class Example34 {
+  protected _eventHandler: SlickEventHandler;
+  title = 'Example 19: ExcelCopyBuffer with Cell Selection';
+  subTitle = `Cell Selection using "Shift+{key}" where "key" can be any of:
+  <ul>
+    <li>Arrow Up/Down/Left/Right</li>
+    <li>Page Up/Down</li>
+    <li>Home</li>
+    <li>End</li>
+  </ul>`;
+
+  columnDefinitions: Column[] = [];
+  dataset: any[] = [];
+  gridOptions!: GridOption;
+  gridContainerElm: HTMLDivElement;
+  isWithPagination = true;
+  sgb: SlickVanillaGridBundle;
+
+  attached() {
+    this._eventHandler = new Slick.EventHandler();
+
+    // define the grid options & columns and then create the grid itself
+    this.defineGrid();
+
+    // mock some data (different in each dataset)
+    this.dataset = this.getData(NB_ITEMS);
+    this.gridContainerElm = document.querySelector<HTMLDivElement>(`.grid19`) as HTMLDivElement;
+    this.sgb = new Slicker.GridBundle(document.querySelector(`.grid19`) as HTMLDivElement, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
+    document.body.classList.add('salesforce-theme');
+
+    // bind any of the grid events
+    const cellSelectionModel = this.sgb.slickGrid!.getSelectionModel();
+    this._eventHandler.subscribe(cellSelectionModel!.onSelectedRangesChanged, (_e, args: CellRange[]) => {
+      const targetRange = document.querySelector('#selectionRange') as HTMLSpanElement;
+      targetRange.textContent = '';
+
+      for (const slickRange of args) {
+        targetRange.textContent += JSON.stringify(slickRange);
+      }
+    });
+  }
+
+  dispose() {
+    this._eventHandler.unsubscribeAll();
+    this.sgb?.dispose();
+    this.gridContainerElm.remove();
+    document.body.classList.remove('salesforce-theme');
+  }
+
+  /* Define grid Options and Columns */
+  defineGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'selector',
+        name: '',
+        field: 'num',
+        width: 30
+      }
+    ];
+
+    for (let i = 0; i < NB_ITEMS; i++) {
+      this.columnDefinitions.push({
+        id: i,
+        name: i < 26
+          ? String.fromCharCode('A'.charCodeAt(0) + (i % 26))
+          : String.fromCharCode('A'.charCodeAt(0) + ((i / 26) | 0) -1) + String.fromCharCode('A'.charCodeAt(0) + (i % 26)),
+        field: i as any,
+        minWidth: 60,
+        width: 60,
+      });
+    }
+
+    this.gridOptions = {
+      autoResize: {
+        container: '.demo-container',
+      },
+      enableCellNavigation: true,
+      enablePagination: true,
+      pagination: {
+        pageSizes: [5, 10, 15, 20, 25, 50, 75, 100],
+        pageSize: 20
+      },
+      headerRowHeight: 35,
+      rowHeight: 30,
+
+      // when using the ExcelCopyBuffer, you can see what the selection range is
+      enableExcelCopyBuffer: true,
+      // excelCopyBufferOptions: {
+      //   onCopyCells: (e, args: { ranges: SelectedRange[] }) => console.log('onCopyCells', args.ranges),
+      //   onPasteCells: (e, args: { ranges: SelectedRange[] }) => console.log('onPasteCells', args.ranges),
+      //   onCopyCancelled: (e, args: { ranges: SelectedRange[] }) => console.log('onCopyCancelled', args.ranges),
+      // }
+    };
+  }
+
+  getData(itemCount: number) {
+    // mock a dataset
+    const datasetTmp: any[] = [];
+    for (let i = 0; i < itemCount; i++) {
+      const d: any = (datasetTmp[i] = {});
+      d['id'] = i;
+      d['num'] = i;
+    }
+
+    return datasetTmp;
+  }
+
+  generatePhoneNumber(): string {
+    let phone = '';
+    for (let i = 0; i < 10; i++) {
+      phone += Math.round(Math.random() * 9) + '';
+    }
+    return phone;
+  }
+
+  // Toggle the Grid Pagination
+  // IMPORTANT, the Pagination MUST BE CREATED on initial page load before you can start toggling it
+  // Basically you cannot toggle a Pagination that doesn't exist (must created at the time as the grid)
+  togglePagination() {
+    this.isWithPagination = !this.isWithPagination;
+    this.sgb.paginationService!.togglePaginationVisibility(this.isWithPagination);
+    this.sgb.slickGrid!.setSelectedRows([]);
+  }
+}