Adam Shaw 7 سال پیش
والد
کامیت
0dc7e64f7f
3فایلهای تغییر یافته به همراه53 افزوده شده و 47 حذف شده
  1. 21 18
      plugins/generic-dragging/DumbDragListener.ts
  2. 2 0
      plugins/generic-dragging/main.ts
  3. 30 29
      tests/manual/dnd.html

+ 21 - 18
plugins/generic-dragging/DumbDragListener.ts

@@ -1,7 +1,7 @@
 import {
 import {
-  PointerDragListener,
+  PointerDragging,
   PointerDragEvent,
   PointerDragEvent,
-  IntentfulDragListener,
+  ElementDragging,
   EmitterMixin
   EmitterMixin
 } from 'fullcalendar'
 } from 'fullcalendar'
 
 
@@ -12,26 +12,29 @@ import {
 - pointerup
 - pointerup
 - dragend
 - dragend
 */
 */
-export default class DumbDragListener implements IntentfulDragListener {
+export default class DumbDragListener extends ElementDragging {
 
 
   isDragging: boolean
   isDragging: boolean
   emitter: EmitterMixin
   emitter: EmitterMixin
   options: any
   options: any
-  pointerListener: PointerDragListener
+  pointer: PointerDragging
+  currentMirrorEl: HTMLElement
 
 
   constructor(options) {
   constructor(options) {
+    super()
+
     this.options = options
     this.options = options
     this.emitter = new EmitterMixin()
     this.emitter = new EmitterMixin()
 
 
-    let pointerListener = this.pointerListener = new PointerDragListener(document as any)
-    pointerListener.selector = options.itemSelector || '[data-event]' // TODO: better
-    pointerListener.on('pointerdown', this.handlePointerDown)
-    pointerListener.on('pointermove', this.handlePointerMove)
-    pointerListener.on('pointerup', this.handlePointerUp)
+    let pointer = this.pointer = new PointerDragging(document as any)
+    pointer.selector = options.itemSelector || '[data-event]' // TODO: better
+    pointer.emitter.on('pointerdown', this.handlePointerDown)
+    pointer.emitter.on('pointermove', this.handlePointerMove)
+    pointer.emitter.on('pointerup', this.handlePointerUp)
   }
   }
 
 
   destroy() {
   destroy() {
-    this.pointerListener.destroy()
+    this.pointer.destroy()
   }
   }
 
 
   on(name, func) {
   on(name, func) {
@@ -58,21 +61,21 @@ export default class DumbDragListener implements IntentfulDragListener {
     // doesn't support revert animation
     // doesn't support revert animation
   }
   }
 
 
-  enableMirror() {
+  disableMirror() {
     let selector = this.options.mirrorSelector
     let selector = this.options.mirrorSelector
     let mirrorEl = selector ? document.querySelector(selector) as HTMLElement : null
     let mirrorEl = selector ? document.querySelector(selector) as HTMLElement : null
 
 
     if (mirrorEl) {
     if (mirrorEl) {
-      mirrorEl.style.visibility = ''
+      this.currentMirrorEl = mirrorEl
+      mirrorEl.style.visibility = 'hidden'
     }
     }
   }
   }
 
 
-  disableMirror() {
-    let selector = this.options.mirrorSelector
-    let mirrorEl = selector ? document.querySelector(selector) as HTMLElement : null
-
-    if (mirrorEl) {
-      mirrorEl.style.visibility = 'hidden'
+  enableMirror() {
+    // use the reference in case the selector class has already been removed
+    if (this.currentMirrorEl) {
+      this.currentMirrorEl.style.visibility = ''
+      this.currentMirrorEl = null
     }
     }
   }
   }
 
 

+ 2 - 0
plugins/generic-dragging/main.ts

@@ -3,6 +3,8 @@ import DumbDragListener from './DumbDragListener'
 
 
 let externalDragging
 let externalDragging
 
 
+// TODO: protect against multiple enables/disables
+
 window['FullCalendarGenericDragging'] = {
 window['FullCalendarGenericDragging'] = {
 
 
   enable(options) {
   enable(options) {

+ 30 - 29
tests/manual/dnd.html

@@ -7,44 +7,45 @@
 
 
   document.addEventListener('DOMContentLoaded', function() {
   document.addEventListener('DOMContentLoaded', function() {
 
 
-    // var PointerDragListener = FullCalendar.PointerDragListener;
+    // var PointerDragging = FullCalendar.PointerDragging;
 
 
-    // var listener = new PointerDragListener(document.getElementById('box'))
-    // listener.on('down', function(ev) {
+    // var pointer = new PointerDragging(document.getElementById('box'))
+    // pointer.on('down', function(ev) {
     //   console.log('down', ev)
     //   console.log('down', ev)
-    //   listener.cancelTouchScroll()
+    //   pointer.cancelTouchScroll()
     // })
     // })
-    // listener.on('move', function(ev) {
+    // pointer.on('move', function(ev) {
     //   console.log('move', ev)
     //   console.log('move', ev)
     // })
     // })
-    // listener.on('up', function(ev) {
+    // pointer.on('up', function(ev) {
     //   console.log('up', ev)
     //   console.log('up', ev)
     // })
     // })
 
 
-    var IntentfulDragListener = FullCalendar.IntentfulDragListener;
+    // TODO: need to expose
+    // var FeaturefulDragging = FullCalendar.FeaturefulDragging;
 
 
-    var listener = new IntentfulDragListener({
-      containerEl: document.getElementById('box'),
-      selector: 'a',
-      touchDelay: 1000,
-      mouseMinDistance: 20,
-      touchScrollAllowed: false
-    })
-    listener.on('pointerdown', function(ev) {
-      console.log('pointerdown', ev)
-    })
-    listener.on('dragstart', function(ev) {
-      console.log('dragstart', ev)
-    })
-    listener.on('dragmove', function(ev) {
-      console.log('dragmove', ev)
-    })
-    listener.on('dragend', function(ev) {
-      console.log('dragend', ev)
-    })
-    listener.on('pointerup', function(ev) {
-      console.log('pointerup', ev)
-    })
+    // var listener = new FeaturefulDragging({
+    //   containerEl: document.getElementById('box'),
+    //   selector: 'a',
+    //   touchDelay: 1000,
+    //   mouseMinDistance: 20,
+    //   touchScrollAllowed: false
+    // })
+    // listener.on('pointerdown', function(ev) {
+    //   console.log('pointerdown', ev)
+    // })
+    // listener.on('dragstart', function(ev) {
+    //   console.log('dragstart', ev)
+    // })
+    // listener.on('dragmove', function(ev) {
+    //   console.log('dragmove', ev)
+    // })
+    // listener.on('dragend', function(ev) {
+    //   console.log('dragend', ev)
+    // })
+    // listener.on('pointerup', function(ev) {
+    //   console.log('pointerup', ev)
+    // })
   });
   });
 
 
 </script>
 </script>