better API for third part dragging

demos/external-dragging-dragula.html

@@ -15,26 +15,35 @@
     -----------------------------------------------------------------*/
 
     var containerEl = document.getElementById('external-events-list');
-    var eventEls = Array.prototype.slice.call(
-      containerEl.querySelectorAll('.fc-event')
-    );
-
-    eventEls.forEach(function(eventEl) {
-      eventEl.setAttribute('data-event', JSON.stringify({
-        title: eventEl.innerText.trim(),
-        stick: true
-      }));
-    });
 
     var drake = dragula({
       containers: [ containerEl ],
       copy: true
     });
 
-    FullCalendar.GenericDragging.enable({
-      mirrorSelector: '.gu-mirror'
+    new FullCalendar.ThirdPartyDraggable(containerEl, {
+      itemSelector: '.fc-event',
+      mirrorSelector: '.gu-mirror',
+      eventData: function(eventEl) {
+        return {
+          title: eventEl.innerText.trim()
+        }
+      }
     })
 
+    //// the individual way to do it
+    // var eventEls = Array.prototype.slice.call(
+    //   containerEl.querySelectorAll('.fc-event')
+    // );
+    // eventEls.forEach(function(eventEl) {
+    //   eventEl.setAttribute('data-event', JSON.stringify({
+    //     title: eventEl.innerText.trim()
+    //   }));
+    // });
+    // new FullCalendar.ThirdPartyDraggable({
+    //   mirrorSelector: '.gu-mirror'
+    // })
+
     /* initialize the calendar
     -----------------------------------------------------------------*/
 

src/exports.ts

@@ -111,6 +111,6 @@ export { default as PointerDragging, PointerDragEvent } from './dnd/PointerDragg
 export { default as ElementDragging } from './dnd/ElementDragging'
 
 export { default as Draggable } from './interactions-external/Draggable'
-export { default as GenericDragging } from './interactions-external/generic-dragging' // singleton
+export { default as ThirdPartyDraggable } from './interactions-external/ThirdPartyDraggable'
 
 export { formatDate, formatRange } from './formatting-api'

src/interactions-external/Draggable.ts

@@ -18,23 +18,23 @@ export default class ExternalDraggable {
 
   dragging: FeaturefulElementDragging
 
-  constructor(el: HTMLElement, options: ExternalDraggableSettings = {}) {
+  constructor(el: HTMLElement, settings: ExternalDraggableSettings = {}) {
     let dragging = this.dragging = new FeaturefulElementDragging(el)
 
-    if (options.itemSelector != null) {
-      dragging.pointer.selector = options.itemSelector
+    if (settings.itemSelector != null) {
+      dragging.pointer.selector = settings.itemSelector
     }
-    if (options.delay != null) {
-      dragging.delay = options.delay
+    if (settings.delay != null) {
+      dragging.delay = settings.delay
     }
-    if (options.minDistance != null) {
-      dragging.minDistance = options.minDistance
+    if (settings.minDistance != null) {
+      dragging.minDistance = settings.minDistance
     }
-    if (options.touchScrollAllowed != null) {
-      dragging.touchScrollAllowed = options.touchScrollAllowed
+    if (settings.touchScrollAllowed != null) {
+      dragging.touchScrollAllowed = settings.touchScrollAllowed
     }
 
-    new ExternalElementDragging(dragging, options.eventData)
+    new ExternalElementDragging(dragging, settings.eventData)
   }
 
   destroy() {

src/interactions-external/InferredElementDragging.ts

@@ -1,11 +1,6 @@
 import PointerDragging, { PointerDragEvent } from '../dnd/PointerDragging'
 import ElementDragging from '../dnd/ElementDragging'
 
-export interface InferredElementDraggingSettings {
-  itemSelector?: string
-  mirrorSelector?: string
-}
-
 /*
 Detects when a *THIRD-PARTY* drag-n-drop system interacts with elements.
 The third-party system is responsible for drawing the visuals effects of the drag.
@@ -16,19 +11,16 @@ export default class InferredElementDragging extends ElementDragging {
 
   pointer: PointerDragging
   shouldIgnoreMove: boolean = false
-  mirrorSelector: string
+  mirrorSelector: string = ''
   currentMirrorEl: HTMLElement | null = null
 
-  constructor(options: InferredElementDraggingSettings) {
+  constructor(containerEl: HTMLElement) {
     super()
 
-    let pointer = this.pointer = new PointerDragging(document)
-    pointer.selector = options.itemSelector || '[data-event]'
+    let pointer = this.pointer = new PointerDragging(containerEl)
     pointer.emitter.on('pointerdown', this.handlePointerDown)
     pointer.emitter.on('pointermove', this.handlePointerMove)
     pointer.emitter.on('pointerup', this.handlePointerUp)
-
-    this.mirrorSelector = options.mirrorSelector || ''
   }
 
   destroy() {

src/interactions-external/ThirdPartyDraggable.ts

@@ -0,0 +1,49 @@
+import ExternalElementDragging, { DragMetaGenerator } from './ExternalElementDragging'
+import InferredElementDragging from './InferredElementDragging';
+
+export interface ThirdPartyDraggableSettings {
+  eventData?: DragMetaGenerator
+  itemSelector?: string
+  mirrorSelector?: string
+}
+
+/*
+Bridges third-party drag-n-drop systems with FullCalendar.
+Must be instantiated and destroyed by caller.
+*/
+export default class ThirdPartyDraggable {
+
+  dragging: InferredElementDragging
+
+  constructor(
+    containerOrSettings?: EventTarget | ThirdPartyDraggableSettings,
+    settings: ThirdPartyDraggableSettings = {}
+  ) {
+    let containerEl: EventTarget = document
+
+    if (containerOrSettings instanceof EventTarget) {
+      containerEl = containerOrSettings
+    } else {
+      settings = containerOrSettings || settings
+    }
+
+    let dragging = this.dragging = new InferredElementDragging(containerEl as HTMLElement)
+
+    if (typeof settings.itemSelector === 'string') {
+      dragging.pointer.selector = settings.itemSelector
+    } else if (containerEl === document) {
+      dragging.pointer.selector = '[data-event]'
+    }
+
+    if (typeof settings.mirrorSelector === 'string') {
+      dragging.mirrorSelector = settings.mirrorSelector
+    }
+
+    new ExternalElementDragging(dragging, settings.eventData)
+  }
+
+  destroy() {
+    this.dragging.destroy()
+  }
+
+}

src/interactions-external/generic-dragging.ts

@@ -1,36 +0,0 @@
-import ExternalElementDragging from './ExternalElementDragging'
-import InferredElementDragging, { InferredElementDraggingSettings } from './InferredElementDragging'
-
-/*
-The public API to the system that bridges third-party drag-n-drop systems with FullCalendar.
-This class is instantiated as a singleton.
-*/
-
-export class GenericDragging {
-
-  dragging: InferredElementDragging | null = null
-  externalDragging: ExternalElementDragging | null = null
-  isEnabled: boolean = false
-
-  enable(options?: InferredElementDraggingSettings) {
-    if (!this.isEnabled) {
-      this.isEnabled = true
-
-      new ExternalElementDragging(
-        this.dragging = new InferredElementDragging(options || {})
-      )
-    }
-  }
-
-  disable() {
-    if (this.isEnabled) {
-      this.isEnabled = false
-
-      this.dragging!.destroy()
-      this.dragging = null
-    }
-  }
-
-}
-
-export default new GenericDragging() // singleton