fix(grid-list): supportsDragImage undefined failure case (#230)

projects/flosportsinc/ng-grid-list/common/ng-grid-list-drag-drop.directive.ts

@@ -1,4 +1,4 @@
-import { IFloGridListBaseItem, FLO_GRID_LIST_GUID_GEN } from './ng-grid-list.tokens'
+import { IFloGridListBaseItem, FLO_GRID_LIST_GUID_GEN, FLO_GRID_LIST_DRAG_DROP_SUPPORTED_FN, BooleanResultFn } from './ng-grid-list.tokens'
 import { FloGridListViewComponent } from './grid/grid.component'
 import { maybe } from 'typescript-monads'
 import { DOCUMENT, isPlatformServer } from '@angular/common'
@@ -25,7 +25,8 @@ export class FloGridListDragDropDirective<TItem extends IFloGridListBaseItem, TE
   constructor(public elmRef: ElementRef<TElement>, private rd: Renderer2,
     @Inject(PLATFORM_ID) private platformId: string,
     @Inject(DOCUMENT) private doc: any,
-    @Inject(FLO_GRID_LIST_GUID_GEN) private guid: any) { }
+    @Inject(FLO_GRID_LIST_GUID_GEN) private guid: any,
+    @Inject(FLO_GRID_LIST_DRAG_DROP_SUPPORTED_FN) private readonly supportsDragImage: BooleanResultFn) { }
 
   private _floGridListDragDrop = false
   private _document = this.doc as HTMLDocument
@@ -51,9 +52,6 @@ export class FloGridListDragDropDirective<TItem extends IFloGridListBaseItem, TE
 
   @Output() floGridListDragDropDragoverChange = new Subject<DragEvent>()
 
-  private supportsDragImage = () => isPlatformServer(this.platformId)
-    ? false
-    : 'setDragImage' in ((window as any).DataTransfer || (window as any).Clipboard).prototype
   private getTiles = () => Array.from(this._document.querySelectorAll<HTMLDivElement>(CLASS_CONTAINER))
   private removeTileDragStyling = () => this.getTiles().forEach(this.clearItemOverlayStyle)
   private preventDefaults(evt: DragEvent) {

projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.defaults.ts

@@ -1,3 +1,5 @@
+import { isPlatformServer } from '@angular/common'
+
 export const DEFAULT_FLO_GRID_LIST_ITEMS: ReadonlyArray<any> = []
 export const DEFAULT_FLO_GRID_LIST_DEFAULT_VIEWCOUNT = 1
 export const DEFAULT_FLO_GRID_LIST_MIN_VIEWCOUNT = 1
@@ -30,5 +32,12 @@ export const DEFAULT_FLO_GRID_LIST_OVERLAY_NG_STYLE = {
 }
 
 export const DEFAULT_FLO_GRID_LIST_AUTO_FILL_FROM_LIST_ON_LOAD = false
-
 export const DEFAULT_FLO_GRID_LIST_ASPECT_RATIO = .5625 // 16/9 <=> 9/16 => .5625
+
+export function DEFAULT_FLO_GRID_LIST_DRAG_DROP_SUPPORTED(platformId: string) {
+  return function supportsDragImage() {
+    return isPlatformServer(platformId)
+      ? false
+      : 'setDragImage' in (((window as any).DataTransfer || ((window as any).Clipboard) || {}).prototype || {})
+  }
+}

projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.spec.ts

@@ -1,12 +1,14 @@
 import { FloGridListModule } from './ng-grid-list.module'
-import { DEFAULT_FLO_GRID_LIST_DEFAULT_VIEWCOUNT } from './ng-grid-list.module.defaults'
+import { DEFAULT_FLO_GRID_LIST_DEFAULT_VIEWCOUNT, DEFAULT_FLO_GRID_LIST_DRAG_DROP_SUPPORTED } from './ng-grid-list.module.defaults'
 import { TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { NgModule, Component } from '@angular/core'
 import {
   FLO_GRID_LIST_COUNT, FLO_GRID_LIST_MIN_COUNT, FLO_GRID_LIST_MAX_COUNT,
-  FLO_GRID_LIST_OVERLAY_ENABLED, FLO_GRID_LIST_OVERLAY_THROTTLE, FLO_GRID_LIST_OVERLAY_FADEOUT,
-  FLO_GRID_LIST_OVERLAY_START
+  FLO_GRID_LIST_OVERLAY_ENABLED, FLO_GRID_LIST_OVERLAY_THROTTLE,
+  FLO_GRID_LIST_OVERLAY_FADEOUT,
+  FLO_GRID_LIST_OVERLAY_START,
+  FLO_GRID_LIST_DRAG_DROP_SUPPORTED_FN
 } from './ng-grid-list.tokens'
 
 interface TItem {
@@ -129,4 +131,20 @@ describe(FloGridListModule.name, () => {
 
     fixture.debugElement.query(By.css('#setViewCount9')).nativeElement.click()
   })
+
+  describe('drag drop support', () => {
+    it('should detect platform browser', done => {
+      const sut = TestBed.get(FLO_GRID_LIST_DRAG_DROP_SUPPORTED_FN)()
+
+      expect(sut).toEqual(true)
+      done()
+    })
+
+    it('should detect platform server', done => {
+      const sut = DEFAULT_FLO_GRID_LIST_DRAG_DROP_SUPPORTED('server')()
+
+      expect(sut).toEqual(false)
+      done()
+    })
+  })
 })

projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.ts

@@ -1,6 +1,6 @@
 import { FloGridListComponent, FloGridListItemDirective } from './list/grid-list.component'
 import { FloGridListViewComponent, IViewItem, ITrackByFn } from './grid/grid.component'
-import { NgModule, ModuleWithProviders } from '@angular/core'
+import { NgModule, ModuleWithProviders, PLATFORM_ID } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { FloGridListDragDropDirective } from './ng-grid-list-drag-drop.directive'
 import { FloGridListModuleConfiguration } from './ng-grid-list.config.interfaces'
@@ -25,7 +25,8 @@ import {
   FLO_GRID_LIST_SELECT_FROM_LOWER_INDICES_FIRST,
   FLO_GRID_LIST_DRAG_DROP_HOVER_BG_ENABLED,
   FLO_GRID_LIST_DRAG_DROP_HOVER_BG_COLOR,
-  FLO_GRID_LIST_DRAG_DROP_HOVER_BG_OPACITY
+  FLO_GRID_LIST_DRAG_DROP_HOVER_BG_OPACITY,
+  FLO_GRID_LIST_DRAG_DROP_SUPPORTED_FN
 } from './ng-grid-list.tokens'
 import {
   DEFAULT_FLO_GRID_LIST_MIN_VIEWCOUNT,
@@ -51,7 +52,8 @@ import {
   DEFAULT_FLO_GRID_LIST_SELECT_FROM_LOWER_INDICES_FIRST,
   DEFAULT_FLO_GRID_LIST_DRAG_DROP_HOVER_BG_ENABLED,
   DEFAULT_FLO_GRID_LIST_DRAG_DROP_HOVER_BG_COLOR,
-  DEFAULT_FLO_GRID_LIST_DRAG_DROP_HOVER_BG_OPACITY
+  DEFAULT_FLO_GRID_LIST_DRAG_DROP_HOVER_BG_OPACITY,
+  DEFAULT_FLO_GRID_LIST_DRAG_DROP_SUPPORTED
 } from './ng-grid-list.module.defaults'
 
 export function defaultFloGridListGuidGenerator() {
@@ -122,7 +124,8 @@ export function defaultFloGridListTrackByFn() {
     { provide: FLO_GRID_LIST_FILL_TO_FIT, useValue: DEFAULT_FLO_GRID_LIST_FILL_TO_FIT },
     { provide: FLO_GRID_LIST_DRAG_DROP_HOVER_BG_ENABLED, useValue: DEFAULT_FLO_GRID_LIST_DRAG_DROP_HOVER_BG_ENABLED },
     { provide: FLO_GRID_LIST_DRAG_DROP_HOVER_BG_COLOR, useValue: DEFAULT_FLO_GRID_LIST_DRAG_DROP_HOVER_BG_COLOR },
-    { provide: FLO_GRID_LIST_DRAG_DROP_HOVER_BG_OPACITY, useValue: DEFAULT_FLO_GRID_LIST_DRAG_DROP_HOVER_BG_OPACITY }
+    { provide: FLO_GRID_LIST_DRAG_DROP_HOVER_BG_OPACITY, useValue: DEFAULT_FLO_GRID_LIST_DRAG_DROP_HOVER_BG_OPACITY },
+    { provide: FLO_GRID_LIST_DRAG_DROP_SUPPORTED_FN, useFactory: DEFAULT_FLO_GRID_LIST_DRAG_DROP_SUPPORTED, deps: [PLATFORM_ID] }
   ]
 })
 export class FloGridListModule {

projects/flosportsinc/ng-grid-list/common/ng-grid-list.tokens.ts

@@ -29,7 +29,7 @@ export const FLO_GRID_LIST_DRAG_DROP_FROM_LISTS_ENABLED = new InjectionToken<boo
 export const FLO_GRID_LIST_DRAG_DROP_HOVER_BG_ENABLED = new InjectionToken<boolean>('fs.grid.list.hover.enabled')
 export const FLO_GRID_LIST_DRAG_DROP_HOVER_BG_COLOR = new InjectionToken<string>('fs.grid.list.hover.bgcolor')
 export const FLO_GRID_LIST_DRAG_DROP_HOVER_BG_OPACITY = new InjectionToken<string>('fs.grid.list.hover.bgopacity')
-
+export const FLO_GRID_LIST_DRAG_DROP_SUPPORTED_FN = new InjectionToken<BooleanResultFn>('fs.grid.list.dragdrop.supported')
 
 export const FLO_GRID_LIST_AUTO_FILL_FROM_LIST_ON_LOAD = new InjectionToken('fs.grid.list.lst.autofill')
 export const FLO_GRID_LIST_ASPECT_RATIO = new InjectionToken('fs.grid.list.lst.aspect')
@@ -38,3 +38,5 @@ export const FLO_GRID_LIST_TRACK_BY_FN = new InjectionToken<ITrackByFn>('fs.grid
 export interface IFloGridListBaseItem {
   readonly id: string
 }
+
+export type BooleanResultFn = () => boolean