diff --git a/projects/flosportsinc/ng-grid-list/common/ng-grid-list-drag-drop.directive.ts b/projects/flosportsinc/ng-grid-list/common/ng-grid-list-drag-drop.directive.ts index bb6af979..62465753 100644 --- a/projects/flosportsinc/ng-grid-list/common/ng-grid-list-drag-drop.directive.ts +++ b/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, 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() - private supportsDragImage = () => isPlatformServer(this.platformId) - ? false - : 'setDragImage' in ((window as any).DataTransfer || (window as any).Clipboard).prototype private getTiles = () => Array.from(this._document.querySelectorAll(CLASS_CONTAINER)) private removeTileDragStyling = () => this.getTiles().forEach(this.clearItemOverlayStyle) private preventDefaults(evt: DragEvent) { diff --git a/projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.defaults.ts b/projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.defaults.ts index 54d3f68f..1ee2aed8 100644 --- a/projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.defaults.ts +++ b/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 = [] 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 || {}) + } +} diff --git a/projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.spec.ts b/projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.spec.ts index d4e5cf5a..815b449e 100644 --- a/projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.spec.ts +++ b/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() + }) + }) }) diff --git a/projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.ts b/projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.ts index f17ff0d4..7f5512a5 100644 --- a/projects/flosportsinc/ng-grid-list/common/ng-grid-list.module.ts +++ b/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 { diff --git a/projects/flosportsinc/ng-grid-list/common/ng-grid-list.tokens.ts b/projects/flosportsinc/ng-grid-list/common/ng-grid-list.tokens.ts index 29d042a8..d9dd75fa 100644 --- a/projects/flosportsinc/ng-grid-list/common/ng-grid-list.tokens.ts +++ b/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('fs.grid.list.hover.enabled') export const FLO_GRID_LIST_DRAG_DROP_HOVER_BG_COLOR = new InjectionToken('fs.grid.list.hover.bgcolor') export const FLO_GRID_LIST_DRAG_DROP_HOVER_BG_OPACITY = new InjectionToken('fs.grid.list.hover.bgopacity') - +export const FLO_GRID_LIST_DRAG_DROP_SUPPORTED_FN = new InjectionToken('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('fs.grid export interface IFloGridListBaseItem { readonly id: string } + +export type BooleanResultFn = () => boolean