fixes for jquery-draggable plugin

demos/external-dragging-jquery-ui.html

@@ -19,10 +19,10 @@
     $('#external-events .fc-event').each(function() {
 
       // store data so the calendar knows to render an event upon drop
-      $(this).attr('data-event', JSON.stringify({
+      $(this).data('event', {
         title: $.trim($(this).text()), // use the element's text as the event title
         stick: true // maintain when user navigates (see docs on the renderEvent method)
-      }));
+      });
 
       // make the event draggable using jQuery UI
       $(this).draggable({

karma.config.js

@@ -26,6 +26,7 @@ module.exports = function(config) {
       'dist/fullcalendar.js',
       'dist/fullcalendar.css',
       'dist/gcal.js',
+      'dist/jquery-ui-draggable.js',
       'dist/locale-all.js',
 
       // temporary. needs to go first.

plugins/jquery-ui-draggable/main.ts

@@ -1,5 +1,5 @@
 import * as $ from 'jquery'
-import { Calendar } from 'fullcalendar'
+import { Calendar, ExternalDropping } from 'fullcalendar'
 
 let $document = $(document)
 
@@ -35,3 +35,16 @@ Calendar.on('initialRender', function(calendar) {
     $document.off('dragstart sortstart', handleDragStart)
   })
 })
+
+
+const origGetEmbeddedElData = ExternalDropping.getEmbeddedElData
+
+ExternalDropping.getEmbeddedElData = function(el, name, shouldParseJson = false) {
+  let val = $(el).data(name) // will automatically parse JSON
+
+  if (val != null) {
+    return val
+  }
+
+  return origGetEmbeddedElData.apply(ExternalDropping, arguments)
+}

src/component/interactions/ExternalDropping.ts

@@ -1,5 +1,4 @@
 import * as moment from 'moment'
-import * as exportHooks from '../../exports'
 import { assignTo } from '../../util/object'
 import { elementMatches } from '../../util/dom-manip'
 import { disableCursor, enableCursor } from '../../util/misc'
@@ -17,6 +16,64 @@ export default class ExternalDropping extends Interaction {
   isDragging: boolean = false // jqui-dragging an external element? boolean
 
 
+  static dataAttrPrefix: string = ''
+
+  // Given a jQuery element that might represent a dragged FullCalendar event, returns an intermediate data structure
+  // to be used for Event Object creation.
+  // A defined `.eventProps`, even when empty, indicates that an event should be created.
+  static getDraggedElMeta(el) {
+    let eventProps // properties for creating the event, not related to date/time
+    let startTime // a Duration
+    let duration
+    let stick
+
+    eventProps = ExternalDropping.getEmbeddedElData(el, 'event', true)
+
+    if (eventProps) {
+
+      // something like 1 or true. still signal event creation
+      if (typeof eventProps !== 'object') {
+        eventProps = {}
+      }
+
+      // pluck special-cased date/time properties
+      startTime = eventProps.start
+      if (startTime == null) { startTime = eventProps.time } // accept 'time' as well
+      duration = eventProps.duration
+      stick = eventProps.stick
+      delete eventProps.start
+      delete eventProps.time
+      delete eventProps.duration
+      delete eventProps.stick
+    }
+
+    // fallback to standalone attribute values for each of the date/time properties
+    if (startTime == null) { startTime = ExternalDropping.getEmbeddedElData(el, 'start') }
+    if (startTime == null) { startTime = ExternalDropping.getEmbeddedElData(el, 'time') } // accept 'time' as well
+    if (duration == null) { duration = ExternalDropping.getEmbeddedElData(el, 'duration') }
+    if (stick == null) { stick = ExternalDropping.getEmbeddedElData(el, 'stick', true) }
+
+    // massage into correct data types
+    startTime = startTime != null ? moment.duration(startTime) : null
+    duration = duration != null ? moment.duration(duration) : null
+    stick = Boolean(stick)
+
+    return { eventProps: eventProps, startTime: startTime, duration: duration, stick: stick }
+  }
+
+  static getEmbeddedElData(el, name, shouldParseJson = false) {
+    let prefix = ExternalDropping.dataAttrPrefix
+    let prefixedName = (prefix ? prefix + '-' : '') + name
+
+    let data = el.getAttribute('data-' + prefixedName) || null
+    if (data && shouldParseJson) {
+      data = JSON.parse(data)
+    }
+
+    return data
+  }
+
+
   /*
   component impements:
     - eventRangesToEventFootprints
@@ -70,7 +127,7 @@ export default class ExternalDropping extends Interaction {
   listenToExternalDrag(ev, el, skipBinding) {
     let component = this.component
     let view = this.view
-    let meta = getDraggedElMeta(el) // extra data about event drop, including possible event to create
+    let meta = ExternalDropping.getDraggedElMeta(el) // extra data about event drop, including possible event to create
     let singleEventDef // a null value signals an unsuccessful drag
 
     // listener that tracks mouse movement over date-associated pixel regions
@@ -183,67 +240,3 @@ export default class ExternalDropping extends Interaction {
   }
 
 }
-
-
-/* External-Dragging-Element Data
-----------------------------------------------------------------------------------------------------------------------*/
-
-// Require all HTML5 data-* attributes used by FullCalendar to have this prefix.
-// A value of '' will query attributes like data-event. A value of 'fc' will query attributes like data-fc-event.
-(exportHooks as any).dataAttrPrefix = ''
-
-// Given a jQuery element that might represent a dragged FullCalendar event, returns an intermediate data structure
-// to be used for Event Object creation.
-// A defined `.eventProps`, even when empty, indicates that an event should be created.
-function getDraggedElMeta(el) {
-  let eventProps // properties for creating the event, not related to date/time
-  let startTime // a Duration
-  let duration
-  let stick
-
-  eventProps = getEmbeddedElData(el, 'event', true)
-
-  if (eventProps) {
-
-    // something like 1 or true. still signal event creation
-    if (typeof eventProps !== 'object') {
-      eventProps = {}
-    }
-
-    // pluck special-cased date/time properties
-    startTime = eventProps.start
-    if (startTime == null) { startTime = eventProps.time } // accept 'time' as well
-    duration = eventProps.duration
-    stick = eventProps.stick
-    delete eventProps.start
-    delete eventProps.time
-    delete eventProps.duration
-    delete eventProps.stick
-  }
-
-  // fallback to standalone attribute values for each of the date/time properties
-  if (startTime == null) { startTime = getEmbeddedElData(el, 'start') }
-  if (startTime == null) { startTime = getEmbeddedElData(el, 'time') } // accept 'time' as well
-  if (duration == null) { duration = getEmbeddedElData(el, 'duration') }
-  if (stick == null) { stick = getEmbeddedElData(el, 'stick', true) }
-
-  // massage into correct data types
-  startTime = startTime != null ? moment.duration(startTime) : null
-  duration = duration != null ? moment.duration(duration) : null
-  stick = Boolean(stick)
-
-  return { eventProps: eventProps, startTime: startTime, duration: duration, stick: stick }
-}
-
-
-function getEmbeddedElData(el, name, shouldParseJson = false) {
-  let prefix = (exportHooks as any).dataAttrPrefix
-  let prefixedName = (prefix ? prefix + '-' : '') + name
-
-  let data = el.getAttribute('data-' + prefixedName) || null
-  if (data && shouldParseJson) {
-    data = JSON.parse(data)
-  }
-
-  return data
-}

tests/automated/legacy/external-dnd-advanced.js

@@ -123,7 +123,8 @@ describe('advanced external dnd', function() {
         })
         describe('through the `start` data attribute', function() {
           beforeEach(function() {
-            $('.drag').data('event', true)
+            $('.drag')
+              .data('event', true)
               .data('start', '05:00')
           })
           defineTests()