valid interaction starting

src/View.ts

@@ -7,7 +7,6 @@ import UnzonedRange from './models/UnzonedRange'
 import { DateMarker, addDays, addMs, diffWholeDays } from './datelib/marker'
 import { createDuration } from './datelib/duration'
 import { createFormatter } from './datelib/formatting'
-import { EventInstance } from './reducers/event-store'
 import { default as EmitterMixin, EmitterInterface } from './common/EmitterMixin'
 
 

src/common/GlobalContext.ts

@@ -33,22 +33,22 @@ export default {
   },
 
   bind() {
-    this.dateSelector = new DateSelecting(componentHash)
+    this.dateSelecting = new DateSelecting(componentHash)
   },
 
   unbind() {
-    this.dateSelector.destroy()
+    this.dateSelecting.destroy()
   },
 
   bindComponent(component: InteractiveDateComponent) {
     listenerHash[component.uid] = {
-      dateClicker: new DateClicking(component)
+      dateClicking: new DateClicking(component)
     }
   },
 
   unbindComponent(component: InteractiveDateComponent) {
     let listeners = listenerHash[component.uid]
-    listeners.dateClicker.destroy()
+    listeners.dateClicking.destroy()
     delete listenerHash[component.uid]
   }
 

src/component/InteractiveDateComponent.ts

@@ -1,3 +1,4 @@
+import { elementClosest } from '../util/dom-manip'
 import DateComponent from './DateComponent'
 import { Selection } from '../reducers/selection'
 import GlobalContext from '../common/GlobalContext'
@@ -8,6 +9,9 @@ export type InteractiveDateComponentHash = {
 
 export default abstract class InteractiveDateComponent extends DateComponent {
 
+  // self-config, overridable by subclasses
+  segSelector: string = '.fc-event-container > *' // what constitutes an event element?
+
   // if defined, holds the unit identified (ex: "year" or "month") that determines the level of granularity
   // of the date areas. if not defined, assumes to be day and time granularity.
   // TODO: port isTimeScale into same system?
@@ -33,6 +37,20 @@ export default abstract class InteractiveDateComponent extends DateComponent {
   }
 
 
+  isValidSegInteraction(evTarget: HTMLElement) {
+    return !elementClosest(evTarget, '.fc-helper') &&
+      !this.dragState &&
+      !this.eventResizeState
+  }
+
+
+  isValidDateInteraction(evTarget: HTMLElement) {
+    return !elementClosest(evTarget, this.segSelector) &&
+      !elementClosest(evTarget, '.fc-more') && // a "more.." link
+      !elementClosest(evTarget, 'a[data-goto]') // a clickable nav link
+  }
+
+
   // Event Drag-n-Drop
   // ---------------------------------------------------------------------------------------------------------------
 

src/dnd/PointerDragListener.ts

@@ -21,6 +21,7 @@ export default class PointerDragListener {
   selector: string
   ignoreMove: any
   subjectEl: HTMLElement
+  downEl: HTMLElement
   emitter: EmitterMixin
 
   isDragging: boolean = false
@@ -55,9 +56,10 @@ export default class PointerDragListener {
     }
   }
 
-  maybeStart(ev) {
+  maybeStart(ev: UIEvent) {
     if ((this.subjectEl = this.queryValidSubjectEl(ev))) {
       this.isDragging = true // do this first so cancelTouchScroll will work
+      this.downEl = ev.target as HTMLElement
       return true
     }
   }
@@ -67,6 +69,7 @@ export default class PointerDragListener {
     this.isDragging = false
     this.isTouchScroll = false
     this.subjectEl = null
+    this.downEl = null
   }
 
   onTouchScroll = () => {

src/interactions/DateClicking.ts

@@ -18,11 +18,16 @@ export default class DateClicking {
   }
 
   onDragEnd = (ev: PointerDragEvent) => {
-    if (!this.hitListener.dragListener.pointerListener.isTouchScroll) {
+    let { component } = this
+    let pointerListener = this.hitListener.dragListener.pointerListener
+
+    if (
+      !pointerListener.isTouchScroll &&
+      component.isValidDateInteraction(pointerListener.downEl)
+    ) {
       let { initialHit, finalHit } = this.hitListener
 
       if (initialHit && finalHit && isHitsEqual(initialHit, finalHit)) {
-        let component = initialHit.component
         component.getCalendar().triggerDayClick(initialHit, component.view, ev.origEvent)
       }
     }

src/interactions/DateSelecting.ts

@@ -10,7 +10,6 @@ export default class DateSelecting {
 
   componentHash: InteractiveDateComponentHash
   pointerListener: PointerDragListener
-  pointerDownEl: HTMLElement
   hitListener: HitDragListener
   dragComponent: InteractiveDateComponent
   dragSelection: Selection
@@ -28,10 +27,18 @@ export default class DateSelecting {
     this.pointerListener.on('pointerup', this.onPointerUp)
   }
 
+  destroy() {
+    this.pointerListener.destroy()
+  }
+
   onPointerDown = (ev: PointerDragEvent) => {
     let component = this.queryComponent(ev)
 
-    if (component && component.opt('selectable')) {
+    if (
+      component &&
+      component.opt('selectable') &&
+      component.isValidDateInteraction(ev.origEvent.target as HTMLElement)
+    ) {
 
       this.hitListener = new HitDragListener({
         containerEl: component.el,
@@ -47,8 +54,6 @@ export default class DateSelecting {
       this.hitListener.on('hitout', this.onHitOut)
       this.hitListener.dragListener.pointerListener.simulateStart(ev)
     }
-
-    this.pointerDownEl = ev.origEvent.target as any // TODO: better
   }
 
   queryComponent(ev: PointerDragEvent): InteractiveDateComponent {
@@ -106,7 +111,6 @@ export default class DateSelecting {
 
     this.dragComponent = null
     this.dragSelection = null
-    this.pointerDownEl = null
   }
 
   maybeUnfocus(ev: PointerDragEvent) {
@@ -115,7 +119,7 @@ export default class DateSelecting {
       let unselectAuto = view.opt('unselectAuto')
       let unselectCancel = view.opt('unselectCancel')
 
-      if (unselectAuto && (!unselectCancel || !elementClosest(this.pointerDownEl, unselectCancel))) {
+      if (unselectAuto && (!unselectCancel || !elementClosest(this.pointerListener.downEl, unselectCancel))) {
         this.clearActiveSelection(ev)
       }
     }

src/list/ListView.ts

@@ -15,7 +15,8 @@ export default class ListView extends View {
 
   // initialized after the class
   eventRendererClass: any
-  eventPointingClass: any
+
+  segSelector: any = '.fc-list-item' // which elements accept event actions
 
   scroller: Scroller
   contentEl: HTMLElement