feat(plugins): move Row Detail View plugin to universal

- create it as a separate package

README.md

@@ -64,6 +64,7 @@ Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about +15,00
 | [@slickgrid-universal/text-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/text-export) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/text-export.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/text-export) | Export to Text File Service (csv/txt) | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/text-export/CHANGELOG.md) |
 | [@slickgrid-universal/graphql](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/graphql) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/graphql.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/graphql) | GraphQL Query Service (support Filter/Sort/Pagination) | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/graphql/CHANGELOG.md) |
 | [@slickgrid-universal/odata](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/odata) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/odata.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/odata) | OData Query Service (support Filter/Sort/Pagination) | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/odata/CHANGELOG.md) |
+| [@slickgrid-universal/row-detail-view-plugin](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/row-detail-view-plugin) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/row-detail-view-plugin.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/row-detail-view-plugin) | Row Detail View (plugin) | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/row-detail-view-plugin/CHANGELOG.md) |
 | [@slickgrid-universal/rxjs-observable](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/rxjs-observable) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/rxjs-observable.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/rxjs-observable) | RxJS Observable Service Wrapper | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/rxjs-observable/CHANGELOG.md) |
 | [@slickgrid-universal/vanilla-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-bundle) | [![npm](https://img.shields.io/npm/v/@slickgrid-universal/vanilla-bundle.svg?color=forest)](https://www.npmjs.com/package/@slickgrid-universal/vanilla-bundle) | Vanilla TypeScript/ES6 implementation | [changelog](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/vanilla-bundle/CHANGELOG.md) 
 

packages/common/src/enums/slickPluginList.enum.ts

@@ -1,4 +1,4 @@
-import { SlickEditorLock } from '../interfaces/index';
+import { SlickEditorLock, SlickRowDetailView } from '../interfaces/index';
 import {
   SlickAutoTooltip,
   SlickCellExternalCopyManager,
@@ -12,7 +12,6 @@ import {
   SlickGroupItemMetadataProvider,
   SlickHeaderButtons,
   SlickHeaderMenu,
-  SlickRowDetailView,
   SlickRowMoveManager,
   SlickRowSelectionModel,
 } from '../plugins/index';

packages/common/src/interfaces/index.ts

@@ -147,6 +147,7 @@ export * from './slickNamespace.interface';
 export * from './slickRange.interface';
 export * from './slickRemoteModel.interface';
 export * from './slickResizer.interface';
+export * from './slickRowDetailView.interface';
 export * from './sorter.interface';
 export * from './textExportOption.interface';
 export * from './treeDataOption.interface';

packages/common/src/interfaces/rowDetailView.interface.ts

@@ -1,5 +1,4 @@
-import { RowDetailViewOption, SlickEventData, SlickGrid } from './index';
-import { SlickRowDetailView } from '../plugins/slickRowDetailView';
+import { RowDetailViewOption, SlickEventData, SlickGrid, SlickRowDetailView } from './index';
 
 export interface RowDetailView extends RowDetailViewOption {
   // --

packages/common/src/interfaces/slickGrid.interface.ts

@@ -245,7 +245,7 @@ export interface SlickGrid {
   getSelectedRows(): number[];
 
   /** Returns the current SelectionModel. See here for more information about SelectionModels. */
-  getSelectionModel(): SlickCellSelectionModel | SlickRowSelectionModel;
+  getSelectionModel<T = SlickCellSelectionModel | SlickRowSelectionModel>(): T | undefined;
 
   /** Get sorted columns **/
   getSortColumns(): ColumnSort[];

packages/common/src/interfaces/slickNamespace.interface.ts

@@ -27,6 +27,7 @@ import {
   SlickRange,
   SlickRemoteModel,
   SlickResizer,
+  SlickRowDetailView,
 } from './index';
 import { SlickGridMenu, } from '../controls/index';
 import {
@@ -42,7 +43,6 @@ import {
   SlickGroupItemMetadataProvider,
   SlickHeaderButtons,
   SlickHeaderMenu,
-  SlickRowDetailView,
   SlickRowMoveManager,
   SlickRowSelectionModel,
 } from '../plugins/index';

packages/common/src/interfaces/slickRowDetailView.interface.ts

@@ -0,0 +1,80 @@
+import { Column, GridOption, RowDetailViewOption, SlickEvent, SlickGrid, } from './index';
+import { ContainerService } from '../services/container.service';
+import { UsabilityOverrideFn } from '../enums';
+
+/** A plugin to add row detail panel. */
+export interface SlickRowDetailView {
+  pluginName: 'RowDetailView';
+
+  /** Initialize the SlickGrid 3rd party plugin */
+  init(grid: SlickGrid, containerService?: ContainerService): void;
+
+  /** @deprecated @use `dispose` Destroy (dispose) the SlickGrid 3rd party plugin */
+  destroy(): void;
+
+  /** Destroy (dispose) the SlickGrid 3rd party plugin */
+  dispose(): void;
+
+  /** Create the plugin */
+  create(columnDefinitions: Column[], gridOptions: GridOption): SlickRowDetailView | null;
+
+  /** Collapse all of the open items */
+  collapseAll(): void;
+
+  /** Colapse an Item so it is not longer seen */
+  collapseDetailView(item: any, isMultipleCollapsing: boolean): void;
+
+  /** Expand a row given the dataview item that is to be expanded */
+  expandDetailView(item: any): void;
+
+  /** Override the logic for showing (or not) the expand icon (use case example: only every 2nd row is expandable) */
+  expandableOverride(overrideFn: UsabilityOverrideFn): void;
+
+  /** Get the Column Definition of the first column dedicated to toggling the Row Detail View */
+  getColumnDefinition(): Column;
+
+  /** Get the row expandable Override function */
+  getExpandableOverride(): UsabilityOverrideFn;
+
+  /** return the currently expanded rows */
+  getExpandedRows(): Array<number | string>;
+
+  /** Takes in the item we are filtering and if it is an expanded row returns it's parents row to filter on */
+  getFilterItem(item: any): any;
+
+  /** Get current plugin options */
+  getOptions(): RowDetailViewOption;
+
+  /** Resize the Row Detail View */
+  resizeDetailView(item: any): void;
+
+  /** Saves the current state of the detail view */
+  saveDetailView(item: any): void;
+
+  /**
+   * Change plugin options
+   * @options An object with configuration options.
+   */
+  setOptions(options: RowDetailViewOption): void;
+
+  // --
+  // Events
+
+  /** Fired when the async response finished */
+  onAsyncEndUpdate?: SlickEvent<{ item: any; grid: SlickGrid; }>;
+
+  /** This event must be used with the "notify" by the end user once the Asynchronous Server call returns the item detail */
+  onAsyncResponse?: SlickEvent<{ item: any; detailView?: any }>;
+
+  /** Fired after the row detail gets toggled */
+  onAfterRowDetailToggle?: SlickEvent<{ item: any; expandedRows: Array<number | string>; grid: SlickGrid; }>;
+
+  /** Fired before the row detail gets toggled */
+  onBeforeRowDetailToggle?: SlickEvent<{ item: any; grid: SlickGrid; }>;
+
+  /** Fired after the row detail gets toggled */
+  onRowBackToViewportRange?: SlickEvent<{ item: any; rowId: number | string; rowIndex: number; expandedRows: Array<number | string>; rowIdsOutOfViewport: Array<number | string>; grid: SlickGrid; }>;
+
+  /** Fired after a row becomes out of viewport range (user can't see the row anymore) */
+  onRowOutOfViewportRange?: SlickEvent<{ item: any; rowId: number | string; rowIndex: number; expandedRows: Array<number | string>; rowIdsOutOfViewport: Array<number | string>; grid: SlickGrid; }>;
+}

packages/common/src/plugins/index.ts

@@ -11,6 +11,5 @@ export * from './slickDraggableGrouping';
 export * from './slickGroupItemMetadataProvider';
 export * from './slickHeaderButtons';
 export * from './slickHeaderMenu';
-export * from './slickRowDetailView';
 export * from './slickRowMoveManager';
 export * from './slickRowSelectionModel';

packages/common/src/plugins/menuBaseClass.ts

@@ -16,7 +16,6 @@ import {
 } from '../interfaces/index';
 import { BindingEventService } from '../services/bindingEvent.service';
 import { ExtensionUtility } from '../extensions/extensionUtility';
-import { getHtmlElementOffset, windowScrollPosition } from '../services/domUtilities';
 import { PubSubService } from '../services/pubSub.service';
 import { SharedService } from '../services/shared.service';
 import { hasData, toSentenceCase } from '../services/utilities';
@@ -109,29 +108,6 @@ export class MenuBaseClass<M extends CellMenu | ContextMenu | GridMenu | HeaderM
   // protected functions
   // ------------------
 
-  protected calculateAvailableSpaceBottom(element: HTMLElement) {
-    let availableSpace = 0;
-    const windowHeight = window.innerHeight ?? 0;
-    const pageScrollTop = windowScrollPosition()?.top ?? 0;
-    const elmOffset = getHtmlElementOffset(element);
-    if (elmOffset) {
-      const elementOffsetTop = elmOffset.top ?? 0;
-      availableSpace = windowHeight - (elementOffsetTop - pageScrollTop);
-    }
-    return availableSpace;
-  }
-
-  protected calculateAvailableSpaceTop(element: HTMLElement) {
-    let availableSpace = 0;
-    const pageScrollTop = windowScrollPosition()?.top ?? 0;
-    const elmOffset = getHtmlElementOffset(element);
-    if (elmOffset) {
-      const elementOffsetTop = elmOffset.top ?? 0;
-      availableSpace = elementOffsetTop - pageScrollTop;
-    }
-    return availableSpace;
-  }
-
   /** Construct the Command/Options Items section. */
   protected populateCommandOrOptionItems(
     itemType: MenuType,

packages/common/src/plugins/menuFromCellBaseClass.ts

@@ -10,7 +10,7 @@ import {
   MenuOptionItemCallbackArgs,
 } from '../interfaces/index';
 import { ExtensionUtility } from '../extensions/extensionUtility';
-import { findWidthOrDefault, getHtmlElementOffset, } from '../services/domUtilities';
+import { calculateAvailableSpace, findWidthOrDefault, getHtmlElementOffset, } from '../services/domUtilities';
 import { PubSubService } from '../services/pubSub.service';
 import { SharedService } from '../services/shared.service';
 import { ExtendableItemTypes, ExtractMenuType, MenuBaseClass, MenuType } from './menuBaseClass';
@@ -259,8 +259,8 @@ export class MenuFromCellBaseClass<M extends CellMenu | ContextMenu> extends Men
       // without necessary toggling it's position just yet, we just want to know the future position for calculation
       if ((this._addonOptions as CellMenu | ContextMenu).autoAdjustDrop || (this._addonOptions as CellMenu | ContextMenu).alignDropDirection) {
         // since we reposition menu below slick cell, we need to take it in consideration and do our calculation from that element
-        const spaceBottom = this.calculateAvailableSpaceBottom(parentElm);
-        const spaceTop = this.calculateAvailableSpaceTop(parentElm);
+        const spaceBottom = calculateAvailableSpace(parentElm).bottom;
+        const spaceTop = calculateAvailableSpace(parentElm).top;
         const spaceBottomRemaining = spaceBottom + dropOffset - rowHeight;
         const spaceTopRemaining = spaceTop - dropOffset + rowHeight;
         const dropPosition = ((spaceBottomRemaining < menuHeight) && (spaceTopRemaining > spaceBottomRemaining)) ? 'top' : 'bottom';

packages/common/src/plugins/slickCellExternalCopyManager.ts

@@ -198,7 +198,7 @@ export class SlickCellExternalCopyManager {
       clippedRange[j++] = clipRow !== '' ? clipRow.split('\t') : [''];
     }
     const selectedCell = this._grid.getActiveCell();
-    const ranges = this._grid.getSelectionModel().getSelectedRanges();
+    const ranges = this._grid.getSelectionModel()?.getSelectedRanges();
     const selectedRange = ranges?.length ? ranges[0] : null;   // pick only one selection
     let activeRow: number;
     let activeCell: number;
@@ -297,7 +297,7 @@ export class SlickCellExternalCopyManager {
           toRow: activeRow + this._clipCommand.h - 1
         };
         this.markCopySelection([bRange]);
-        this._grid.getSelectionModel().setSelectedRanges([bRange]);
+        this._grid.getSelectionModel()?.setSelectedRanges([bRange]);
         this.onPasteCells.notify({ ranges: [bRange] });
       },
 
@@ -335,7 +335,7 @@ export class SlickCellExternalCopyManager {
         };
 
         this.markCopySelection([bRange]);
-        this._grid.getSelectionModel().setSelectedRanges([bRange]);
+        this._grid.getSelectionModel()?.setSelectedRanges([bRange]);
         this.onPasteCells.notify({ ranges: [bRange] });
         if (typeof this._addonOptions.onPasteCells === 'function') {
           this._addonOptions.onPasteCells(new Slick.EventData(), { ranges: [bRange] });
@@ -379,7 +379,7 @@ export class SlickCellExternalCopyManager {
         if (typeof this._onCopyInit === 'function') {
           this._onCopyInit.call(this);
         }
-        ranges = this._grid.getSelectionModel().getSelectedRanges();
+        ranges = this._grid.getSelectionModel()?.getSelectedRanges() ?? [];
         if (ranges.length !== 0) {
           this._copiedRanges = ranges;
           this.markCopySelection(ranges);

packages/common/src/plugins/slickContextMenu.ts

@@ -404,9 +404,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass<ContextMenu> {
         // create fake <textarea> (positioned outside of the screen) to copy into clipboard & delete it from the DOM once we're done
         const tmpElem = document.createElement('textarea') as HTMLTextAreaElement;
         if (tmpElem && document.body) {
-          tmpElem.style.position = 'absolute';
-          tmpElem.style.left = '-1000px';
-          tmpElem.style.top = '-1000px';
+          tmpElem.style.opacity = '0';
           tmpElem.value = finalTextToCopy;
           document.body.appendChild(tmpElem);
           tmpElem.select();

packages/common/src/plugins/slickDraggableGrouping.ts

@@ -4,6 +4,7 @@ import {
   DOMMouseEvent,
   DraggableGrouping,
   DraggableGroupingOption,
+  EventSubscription,
   GetSlickEventType,
   GridOption,
   GroupingGetterFunction,
@@ -72,14 +73,15 @@ export class SlickDraggableGrouping {
   protected _addonOptions!: DraggableGroupingOption;
   protected _bindEventService: BindingEventService;
   protected _droppableInstance: any;
+  protected dropboxElm!: HTMLDivElement;
+  protected dropboxPlaceholderElm!: HTMLDivElement;
   protected _sortableInstance: any;
   protected _eventHandler!: SlickEventHandler;
   protected _grid?: SlickGrid;
   protected _gridColumns: Column[] = [];
   protected _gridUid = '';
-  protected dropboxElm!: HTMLDivElement;
-  protected dropboxPlaceholderElm!: HTMLDivElement;
   protected groupToggler!: HTMLDivElement;
+  protected _subscriptions: EventSubscription[] = [];
   protected _defaults = {
     dropPlaceHolderText: 'Drop a column header here to group by the column',
     hideToggleAllButton: false,
@@ -177,8 +179,10 @@ export class SlickDraggableGrouping {
         this.dropboxElm.appendChild(this.groupToggler);
 
         // when calling Expand/Collapse All Groups from Context Menu, we also need to inform this plugin as well of the action
-        this.pubSubService.subscribe('onContextMenuCollapseAllGroups', () => this.toggleGroupToggler(groupTogglerIconElm, true, false));
-        this.pubSubService.subscribe('onContextMenuExpandAllGroups', () => this.toggleGroupToggler(groupTogglerIconElm, false, false));
+        this._subscriptions.push(
+          this.pubSubService.subscribe('onContextMenuCollapseAllGroups', () => this.toggleGroupToggler(groupTogglerIconElm, true, false)),
+          this.pubSubService.subscribe('onContextMenuExpandAllGroups', () => this.toggleGroupToggler(groupTogglerIconElm, false, false)),
+        );
       }
 
       this.dropboxPlaceholderElm = document.createElement('div');
@@ -215,7 +219,7 @@ export class SlickDraggableGrouping {
       });
 
       // when calling Clear All Groups from Context Menu, we also need to inform this plugin as well of the action
-      this.pubSubService.subscribe('onContextMenuClearGrouping', () => this.clearDroppedGroups());
+      this._subscriptions.push(this.pubSubService.subscribe('onContextMenuClearGrouping', () => this.clearDroppedGroups()));
 
       for (const col of this._gridColumns) {
         const columnId = col.field;
@@ -234,6 +238,7 @@ export class SlickDraggableGrouping {
   dispose() {
     this.onGroupChanged.unsubscribe();
     this._eventHandler.unsubscribeAll();
+    this.pubSubService.unsubscribeAll(this._subscriptions);
     emptyElement(document.querySelector('.slick-preheader-panel'));
   }