remove HitDragging::on, straighten out EventTarget/HTMLElement

src/common/GlobalContext.ts

@@ -40,7 +40,7 @@ export class GlobalContext { // TODO: rename file to something better
   }
 
   bind() {
-    let pointer = this.pointer = new PointerDragging(document as any)
+    let pointer = this.pointer = new PointerDragging(document)
     pointer.shouldIgnoreMove = true
     pointer.emitter.on('pointerup', this.onPointerUp)
   }

src/dnd/FeaturefulElementDragging.ts

@@ -57,7 +57,7 @@ export default class FeaturefulElementDragging extends ElementDragging {
       this.origY = ev.pageY
 
       this.emitter.trigger('pointerdown', ev)
-      this.mirror.start(ev.subjectEl, ev.pageX, ev.pageY)
+      this.mirror.start(ev.subjectEl as HTMLElement, ev.pageX, ev.pageY)
 
       // if moving is being ignored, don't fire any initial drag events
       if (!this.pointer.shouldIgnoreMove) {

src/dnd/PointerDragging.ts

@@ -7,7 +7,7 @@ import { default as EmitterMixin } from '../common/EmitterMixin'
 export interface PointerDragEvent {
   origEvent: UIEvent
   isTouch: boolean
-  subjectEl: HTMLElement
+  subjectEl: EventTarget
   pageX: number
   pageY: number
 }
@@ -26,7 +26,7 @@ emits:
 */
 export default class PointerDragging {
 
-  containerEl: HTMLElement
+  containerEl: EventTarget
   subjectEl: HTMLElement | null = null
   downEl: HTMLElement | null = null
   emitter: EmitterMixin
@@ -41,7 +41,7 @@ export default class PointerDragging {
   isTouchDragging: boolean = false
   wasTouchScroll: boolean = false
 
-  constructor(containerEl: HTMLElement) {
+  constructor(containerEl: EventTarget) {
     this.containerEl = containerEl
     this.emitter = new EmitterMixin()
     containerEl.addEventListener('mousedown', this.handleMouseDown)
@@ -85,7 +85,7 @@ export default class PointerDragging {
     if (this.selector) {
       return elementClosest(ev.target as HTMLElement, this.selector)
     } else {
-      return this.containerEl
+      return this.containerEl as HTMLElement
     }
   }
 
@@ -197,7 +197,7 @@ export default class PointerDragging {
 // Event Normalization
 // ----------------------------------------------------------------------------------------------------
 
-function createEventFromMouse(ev: MouseEvent, subjectEl: HTMLElement): PointerDragEvent {
+function createEventFromMouse(ev: MouseEvent, subjectEl: EventTarget): PointerDragEvent {
   return {
     origEvent: ev,
     isTouch: false,
@@ -207,7 +207,7 @@ function createEventFromMouse(ev: MouseEvent, subjectEl: HTMLElement): PointerDr
   }
 }
 
-function createEventFromTouch(ev: TouchEvent, subjectEl: HTMLElement): PointerDragEvent {
+function createEventFromTouch(ev: TouchEvent, subjectEl: EventTarget): PointerDragEvent {
   let touches = ev.touches
   let pageX
   let pageY

src/interactions-external/DumbElementDragging.ts

@@ -19,7 +19,7 @@ export default class DumbElementDragging extends ElementDragging {
 
     this.options = options
 
-    let pointer = this.pointer = new PointerDragging(document as any)
+    let pointer = this.pointer = new PointerDragging(document)
     pointer.selector = options.itemSelector || '[data-event]' // TODO: better
     pointer.emitter.on('pointerdown', this.handlePointerDown)
     pointer.emitter.on('pointermove', this.handlePointerMove)

src/interactions-external/ExternalElementDragging.ts

@@ -20,10 +20,10 @@ export default class ExternalElementDragging {
   constructor(dragging: ElementDragging, rawEventCreationData?) {
     let hitDragging = this.hitDragging = new HitDragging(dragging, globalContext.componentHash)
     hitDragging.dieIfNoInitial = false
-    hitDragging.on('dragstart', this.onDragStart)
-    hitDragging.on('hitover', this.onHitOver)
-    hitDragging.on('hitout', this.onHitOut)
-    hitDragging.on('dragend', this.onDragEnd)
+    hitDragging.emitter.on('dragstart', this.onDragStart)
+    hitDragging.emitter.on('hitover', this.onHitOver)
+    hitDragging.emitter.on('hitout', this.onHitOut)
+    hitDragging.emitter.on('dragend', this.onDragEnd)
 
     dragging.setMirrorIsVisible(true)
 

src/interactions/DateClicking.ts

@@ -13,8 +13,8 @@ export default class DateClicking {
     this.component = component
     this.dragging = new FeaturefulElementDragging(component.el)
     this.hitDragging = new HitDragging(this.dragging, component)
-    this.hitDragging.on('pointerdown', this.onPointerDown)
-    this.hitDragging.on('dragend', this.onDragEnd)
+    this.hitDragging.emitter.on('pointerdown', this.onPointerDown)
+    this.hitDragging.emitter.on('dragend', this.onDragEnd)
   }
 
   destroy() {

src/interactions/DateSelecting.ts

@@ -24,10 +24,10 @@ export default class DateSelecting {
     this.dragging.touchScrollAllowed = false
 
     let hitDragging = this.hitDragging = new HitDragging(this.dragging, component)
-    hitDragging.on('pointerdown', this.onPointerDown)
-    hitDragging.on('dragstart', this.onDragStart)
-    hitDragging.on('hitover', this.onHitOver)
-    hitDragging.on('hitout', this.onHitOut)
+    hitDragging.emitter.on('pointerdown', this.onPointerDown)
+    hitDragging.emitter.on('dragstart', this.onDragStart)
+    hitDragging.emitter.on('hitover', this.onHitOver)
+    hitDragging.emitter.on('hitout', this.onHitOut)
   }
 
   destroy() {

src/interactions/EventDragging.ts

@@ -26,11 +26,11 @@ export default class EventDragging {
 
     let hitDragging = this.hitDragging = new HitDragging(this.dragging, globalContext.componentHash)
     hitDragging.subjectCenter = true
-    hitDragging.on('pointerdown', this.onPointerDown)
-    hitDragging.on('dragstart', this.onDragStart)
-    hitDragging.on('hitover', this.onHitOver)
-    hitDragging.on('hitout', this.onHitOut)
-    hitDragging.on('dragend', this.onDragEnd)
+    hitDragging.emitter.on('pointerdown', this.onPointerDown)
+    hitDragging.emitter.on('dragstart', this.onDragStart)
+    hitDragging.emitter.on('hitover', this.onHitOver)
+    hitDragging.emitter.on('hitout', this.onHitOut)
+    hitDragging.emitter.on('dragend', this.onDragEnd)
   }
 
   destroy() {
@@ -49,7 +49,7 @@ export default class EventDragging {
 
     dragging.setIgnoreMove(
       !this.component.isValidSegInteraction(origTarget) ||
-      elementClosest(origTarget, '.fc-resizer')
+      Boolean(elementClosest(origTarget, '.fc-resizer'))
     )
   }
 

src/interactions/EventResizing.ts

@@ -22,11 +22,11 @@ export default class EventDragging {
     this.dragging.touchScrollAllowed = false
 
     let hitDragging = this.hitDragging = new HitDragging(this.dragging, component)
-    hitDragging.on('pointerdown', this.onPointerDown)
-    hitDragging.on('dragstart', this.onDragStart)
-    hitDragging.on('hitover', this.onHitOver)
-    hitDragging.on('hitout', this.onHitOut)
-    hitDragging.on('dragend', this.onDragEnd)
+    hitDragging.emitter.on('pointerdown', this.onPointerDown)
+    hitDragging.emitter.on('dragstart', this.onDragStart)
+    hitDragging.emitter.on('hitover', this.onHitOver)
+    hitDragging.emitter.on('hitout', this.onHitOut)
+    hitDragging.emitter.on('dragend', this.onDragEnd)
   }
 
   destroy() {
@@ -56,7 +56,7 @@ export default class EventDragging {
     let mutation = computeMutation(
       initialHit,
       hit,
-      ev.subjectEl.classList.contains('.fc-start-resizer'),
+      (ev.subjectEl as HTMLElement).classList.contains('.fc-start-resizer'),
       eventInstance.range
     )
 
@@ -113,7 +113,7 @@ export default class EventDragging {
   }
 
   querySeg(ev: PointerDragEvent): Seg {
-    return elementClosest(ev.subjectEl, this.component.segSelector).fcSeg
+    return (elementClosest(ev.subjectEl as HTMLElement, this.component.segSelector) as any).fcSeg
   }
 
 }

src/interactions/HitDragging.ts

@@ -27,16 +27,18 @@ export default class HitDragging {
   droppableHash: DateComponentHash
   dragging: ElementDragging
   emitter: EmitterMixin
+
+  // options that can be set by caller
+  subjectCenter: boolean = false
+  dieIfNoInitial: boolean = true
+
+  // internal state
   initialHit: Hit
   movingHit: Hit
   finalHit: Hit // won't ever be populated if shouldIgnoreMove
   coordAdjust: any
-  dieIfNoInitial: boolean = true
   isIgnoringMove: boolean = false
 
-  // options
-  subjectCenter: boolean = false
-
   constructor(dragging: ElementDragging, droppable: DateComponent | DateComponentHash) {
 
     if (droppable instanceof DateComponent) {
@@ -45,21 +47,17 @@ export default class HitDragging {
       this.droppableHash = droppable
     }
 
-    dragging.emitter.on('pointerdown', this.onPointerDown)
-    dragging.emitter.on('dragstart', this.onDragStart)
-    dragging.emitter.on('dragmove', this.onDragMove)
-    dragging.emitter.on('pointerup', this.onPointerUp)
-    dragging.emitter.on('dragend', this.onDragEnd)
+    dragging.emitter.on('pointerdown', this.handlePointerDown)
+    dragging.emitter.on('dragstart', this.handleDragStart)
+    dragging.emitter.on('dragmove', this.handleDragMove)
+    dragging.emitter.on('pointerup', this.handlePointerUp)
+    dragging.emitter.on('dragend', this.handleDragEnd)
 
     this.dragging = dragging
     this.emitter = new EmitterMixin()
   }
 
-  on(name, handler) {
-    this.emitter.on(name, handler)
-  }
-
-  onPointerDown = (ev: PointerDragEvent) => {
+  handlePointerDown = (ev: PointerDragEvent) => {
     this.initialHit = null
     this.movingHit = null
     this.finalHit = null
@@ -87,7 +85,7 @@ export default class HitDragging {
     let subjectEl = ev.subjectEl
     let subjectRect
 
-    if (subjectEl !== (document as any)) {
+    if (subjectEl !== document) {
       subjectRect = computeRect(subjectEl)
       adjustedPoint = constrainPoint(adjustedPoint, subjectRect)
     }
@@ -108,27 +106,27 @@ export default class HitDragging {
     }
   }
 
-  onDragStart = (ev: PointerDragEvent) => {
+  handleDragStart = (ev: PointerDragEvent) => {
     if (!this.isIgnoringMove) {
       this.emitter.trigger('dragstart', ev)
       this.handleMove(ev)
     }
   }
 
-  onDragMove = (ev: PointerDragEvent) => {
+  handleDragMove = (ev: PointerDragEvent) => {
     if (!this.isIgnoringMove) {
       this.emitter.trigger('dragmove', ev)
       this.handleMove(ev)
     }
   }
 
-  onPointerUp = (ev: PointerDragEvent) => {
-    if (!this.isIgnoringMove) { // cancelled in onPointerDown?
+  handlePointerUp = (ev: PointerDragEvent) => {
+    if (!this.isIgnoringMove) { // cancelled in handlePointerDown?
       this.emitter.trigger('pointerup', ev)
     }
   }
 
-  onDragEnd = (ev: PointerDragEvent) => {
+  handleDragEnd = (ev: PointerDragEvent) => {
     this.finalHit = this.movingHit
     this.movingHit = null
     this.emitter.trigger('dragend', ev)

src/util/dom-manip.ts

@@ -137,11 +137,11 @@ const closestMethod = Element.prototype.closest || function(selector) {
   return null
 }
 
-export function elementClosest(el: HTMLElement, selector: string) {
+export function elementClosest(el: HTMLElement, selector: string): HTMLElement {
   return closestMethod.call(el, selector)
 }
 
-export function elementMatches(el: HTMLElement, selector: string) {
+export function elementMatches(el: HTMLElement, selector: string): HTMLElement {
   return matchesMethod.call(el, selector)
 }