global clicking on dates

src/agenda/AgendaView.ts

@@ -229,8 +229,6 @@ export default class AgendaView extends View {
     let scrollerHeight
     let scrollbarWidths
 
-    super.updateSize(totalHeight, isAuto, isResize)
-
     // make all axis cells line up, and record the width so newly created axis cells will have it
     this.axisWidth = matchCellWidths(findElements(this.el, '.fc-axis'))
 
@@ -295,6 +293,8 @@ export default class AgendaView extends View {
         this.timeGrid.bottomRuleEl.style.display = ''
       }
     }
+
+    super.updateSize(totalHeight, isAuto, isResize) // children and now-indicator
   }
 
 

src/agenda/TimeGrid.ts

@@ -8,7 +8,7 @@ import UnzonedRange from '../models/UnzonedRange'
 import TimeGridEventRenderer from './TimeGridEventRenderer'
 import TimeGridHelperRenderer from './TimeGridHelperRenderer'
 import TimeGridFillRenderer from './TimeGridFillRenderer'
-import { Duration, createDuration, addDurations, wholeDivideDurations, asRoughMs } from '../datelib/duration'
+import { Duration, createDuration, addDurations, multiplyDuration, wholeDivideDurations, asRoughMs } from '../datelib/duration'
 import { startOfDay, DateMarker, addMs } from '../datelib/marker'
 import { DateFormatter, createFormatter, formatIsoTimeString } from '../datelib/formatting'
 import { Seg } from '../component/DateComponent'
@@ -471,7 +471,7 @@ export default class TimeGrid extends InteractiveDateComponent {
   updateSize(totalHeight, isAuto, isResize) {
     super.updateSize(totalHeight, isAuto, isResize)
 
-    this.slatCoordCache.build()
+    this.buildCoordCaches()
 
     if (isResize) {
       this.updateSegVerticals(this.eventRenderer.getSegs())
@@ -572,6 +572,53 @@ export default class TimeGrid extends InteractiveDateComponent {
   }
 
 
+  /* Hit System
+  ------------------------------------------------------------------------------------------------------------------*/
+
+
+  queryHit(leftOffset, topOffset): Selection {
+    let snapsPerSlot = this.snapsPerSlot
+    let colCoordCache = this.colCoordCache
+    let slatCoordCache = this.slatCoordCache
+
+    if (colCoordCache.isLeftInBounds(leftOffset) && slatCoordCache.isTopInBounds(topOffset)) {
+      let colIndex = colCoordCache.getHorizontalIndex(leftOffset)
+      let slatIndex = slatCoordCache.getVerticalIndex(topOffset)
+
+      if (colIndex != null && slatIndex != null) {
+        let slatTop = slatCoordCache.getTopOffset(slatIndex)
+        let slatHeight = slatCoordCache.getHeight(slatIndex)
+        let partial = (topOffset - slatTop) / slatHeight // floating point number between 0 and 1
+        let localSnapIndex = Math.floor(partial * snapsPerSlot) // the snap # relative to start of slat
+        let snapIndex = slatIndex * snapsPerSlot + localSnapIndex
+
+        let dayDate = this.getCellDate(0, colIndex) // row=0
+        let time = addDurations(
+          this.dateProfile.minTime,
+          multiplyDuration(this.snapDuration, snapIndex)
+        )
+
+        let dateEnv = this.getDateEnv()
+        let start = dateEnv.add(dayDate, time)
+        let end = dateEnv.add(start, this.snapDuration)
+
+        return {
+          range: new UnzonedRange(start, end),
+          isAllDay: false,
+          // el: this.colEls[colIndex]
+        }
+      }
+    }
+  }
+
+
+  buildCoordCaches() {
+    this.colCoordCache.build()
+    this.slatCoordCache.build()
+  }
+
+
+
   /* Event Drag Visualization
   ------------------------------------------------------------------------------------------------------------------*/
 

src/basic/BasicView.ts

@@ -172,8 +172,6 @@ export default class BasicView extends View {
       return
     }
 
-    super.updateSize(totalHeight, isAuto, isResize)
-
     if (this.colWeekNumbersVisible) {
       // Make sure all week number cells running down the side have the same width.
       // Record the width for cells created later.
@@ -224,6 +222,8 @@ export default class BasicView extends View {
       // guarantees the same scrollbar widths
       this.scroller.lockOverflow(scrollbarWidths)
     }
+
+    super.updateSize(totalHeight, isAuto, isResize) // children and now-indicator
   }
 
 

src/basic/DayGrid.ts

@@ -23,6 +23,7 @@ import { addDays } from '../datelib/marker'
 import { createFormatter } from '../datelib/formatting'
 import { Seg } from '../component/DateComponent'
 import { EventStore } from '../reducers/event-store'
+import { Selection } from '../reducers/selection'
 
 const DAY_NUM_FORMAT = createFormatter({ day: 'numeric' })
 const WEEK_NUM_FORMAT = createFormatter({ week: 'numeric' })
@@ -284,6 +285,42 @@ export default class DayGrid extends InteractiveDateComponent {
   }
 
 
+  /* Sizing
+  ------------------------------------------------------------------------------------------------------------------*/
+
+
+  updateSize(totalHeight, isAuto, isResize) {
+    super.updateSize(totalHeight, isAuto, isResize)
+    this.buildCoordCaches()
+  }
+
+
+  /* Hit System
+  ------------------------------------------------------------------------------------------------------------------*/
+
+
+  queryHit(leftOffset, topOffset): Selection {
+    if (this.colCoordCache.isLeftInBounds(leftOffset) && this.rowCoordCache.isTopInBounds(topOffset)) {
+      let col = this.colCoordCache.getHorizontalIndex(leftOffset)
+      let row = this.rowCoordCache.getVerticalIndex(topOffset)
+
+      if (row != null && col != null) {
+        return {
+          range: this.getCellRange(row, col),
+          isAllDay: true,
+          // el: this.getCellEl(row, col)
+        }
+      }
+    }
+  }
+
+
+  buildCoordCaches() {
+    this.colCoordCache.build()
+    this.rowCoordCache.build()
+  }
+
+
   /* Cell System
   ------------------------------------------------------------------------------------------------------------------*/
   // FYI: the first column is the leftmost column, regardless of date

src/common/GlobalContext.ts

@@ -1,7 +1,9 @@
 import { removeExact } from '../util/array'
 import Calendar from '../Calendar'
+import InteractiveDateComponent from '../component/InteractiveDateComponent'
 
-let activeCalendars = []
+let activeCalendars: Calendar[] = []
+let activeComponents: InteractiveDateComponent[] = []
 
 export default {
 
@@ -22,10 +24,32 @@ export default {
     }
   },
 
+  registerComponent(component: InteractiveDateComponent) {
+    activeComponents.push(component)
+  },
+
+  unregisterComponent(component: InteractiveDateComponent) {
+    removeExact(activeComponents, component)
+  },
+
   bind() {
+    document.addEventListener('click', this.documentClick = function(ev) {
+      for (let component of activeComponents) {
+        component.buildCoordCaches()
+        let hit = component.queryHit(ev.pageX, ev.pageY)
+        if (hit) {
+          console.log(
+            hit.range.start.toUTCString(),
+            hit.range.end.toUTCString(),
+            hit.isAllDay
+          )
+        }
+      }
+    })
   },
 
   unbind() {
+    document.removeEventListener('click', this.documentClick)
   }
 
 }

src/component/Component.ts

@@ -12,10 +12,13 @@ export default abstract class Component {
 
   setElement(el: HTMLElement) {
     this.el = el
+    this.bindGlobalHandlers()
   }
 
 
   removeElement() {
+    this.unbindGlobalHandlers()
+
     removeElement(this.el)
     // NOTE: don't null-out this.el in case the View was destroyed within an API callback.
     // We don't null-out the View's other element references upon destroy,
@@ -23,6 +26,14 @@ export default abstract class Component {
   }
 
 
+  bindGlobalHandlers() {
+  }
+
+
+  unbindGlobalHandlers() {
+  }
+
+
   abstract render(state: any, forceFlags: RenderForceFlags)
 
 }

src/component/DateComponent.ts

@@ -5,10 +5,9 @@ import View from '../View'
 import { DateProfile } from '../DateProfileGenerator'
 import { DateMarker, DAY_IDS, addDays, startOfDay, diffDays, diffWholeDays } from '../datelib/marker'
 import { Duration, createDuration, asRoughMs } from '../datelib/duration'
-import { sliceEventStore } from '../reducers/event-rendering'
 import { Selection } from '../reducers/selection'
 import UnzonedRange from '../models/UnzonedRange'
-import { EventRenderRange } from '../reducers/event-rendering'
+import { EventRenderRange, sliceEventStore } from '../reducers/event-rendering'
 import { EventStore } from '../reducers/event-store'
 import { BusinessHourDef, buildBusinessHourEventStore } from '../reducers/business-hours'
 import { DateEnv } from '../datelib/env'

src/component/DayTableMixin.ts

@@ -3,6 +3,7 @@ import { prependToElement, appendToElement } from '../util/dom-manip'
 import Mixin from '../common/Mixin'
 import { DateMarker, DAY_IDS, addDays, diffDays } from '../datelib/marker'
 import { createFormatter } from '../datelib/formatting'
+import UnzonedRange from '../models/UnzonedRange'
 
 export interface DayTableInterface {
   dayDates: DateMarker[]
@@ -15,7 +16,7 @@ export interface DayTableInterface {
   renderBgTrHtml(row)
   bookendCells(trEl: HTMLElement)
   getCellDate(row, col)
-  getCellRange(row, col)
+  getCellRange(row, col): UnzonedRange
   sliceRangeByDay(unzonedRange)
   sliceRangeByRow(unzonedRange)
   renderIntroHtml()
@@ -112,7 +113,7 @@ export default class DayTableMixin extends Mixin implements DayTableInterface {
     let start = this.getCellDate(row, col)
     let end = addDays(start, 1)
 
-    return { start: start, end: end }
+    return new UnzonedRange(start, end)
   }
 
 

src/component/InteractiveDateComponent.ts

@@ -1,4 +1,6 @@
 import DateComponent from './DateComponent'
+import { Selection } from '../reducers/selection'
+import GlobalContext from '../common/GlobalContext'
 
 
 /*
@@ -9,7 +11,26 @@ export default abstract class InteractiveDateComponent extends DateComponent {
   // 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?
-  largeUnit: any // used still ?
+  largeUnit: any
+
+
+  queryHit(leftOffset, topOffset): Selection {
+    return null // this should be abstract
+  }
+
+
+  buildCoordCaches() {
+  }
+
+
+  bindGlobalHandlers() {
+    GlobalContext.registerComponent(this)
+  }
+
+
+  unbindGlobalHandlers() {
+    GlobalContext.unregisterComponent(this)
+  }
 
 
   // Event Drag-n-Drop