get helper working again

demos/gcal.html

@@ -30,10 +30,11 @@
       // US Holidays
       events: 'en.usa#[email protected]',
 
-      eventClick: function(event) {
+      eventClick: function(arg) {
         // opens events in a popup window
-        window.open(event.url, 'gcalevent', 'width=700,height=600');
-        return false;
+        window.open(arg.event.url, 'gcalevent', 'width=700,height=600');
+
+        arg.jsEvent.preventDefault() // don't navigate in main tab
       },
 
       loading: function(bool) {

src/agenda/TimeGrid.ts

@@ -658,12 +658,10 @@ export default class TimeGrid extends DateComponent {
 
   // Renders a visual indication of a selection. Overrides the default, which was to simply render a highlight.
   renderDateSelection(selection: DateSpan) {
-    let segs = this.selectionToSegs(selection)
-
-    if (this.opt('selectHelper')) { // this setting signals that a mock helper event should be rendered
-      this.helperRenderer.renderEventSegs(segs)
+    if (this.opt('selectHelper')) {
+      this.helperRenderer.renderEventSegs(this.selectionToSegs(selection, true))
     } else {
-      this.renderHighlightSegs(segs)
+      this.renderHighlightSegs(this.selectionToSegs(selection, false))
     }
   }
 

src/component/DateComponent.ts

@@ -19,6 +19,7 @@ import { Hit } from '../interactions/HitDragging'
 import { computeVisibleDayRange } from '../util/misc'
 import { DateRange, rangeContainsMarker } from '../datelib/date-range'
 import EventApi from '../api/EventApi'
+import { parseEventDef, createEventInstance } from '../structs/event'
 
 
 export interface DateComponentRenderState {
@@ -154,12 +155,8 @@ export default abstract class DateComponent extends Component {
       this.computeBusinessHoursSize()
     }
 
-    // don't worry about updating the resize of the helper
     if (force || flags.dateSelection || flags.eventDrag || flags.eventResize) {
       this.computeHighlightSize()
-    }
-
-    if (force || flags.eventDrag || flags.eventResize) {
       this.computeHelperSize()
     }
 
@@ -173,9 +170,6 @@ export default abstract class DateComponent extends Component {
 
     if (force || flags.dateSelection || flags.eventDrag || flags.eventResize) {
       this.assignHighlightSize()
-    }
-
-    if (force || flags.eventDrag || flags.eventResize) {
       this.assignHelperSize()
     }
 
@@ -771,7 +765,7 @@ export default abstract class DateComponent extends Component {
 
   // Renders a visual indication of the selection
   renderDateSelection(selection: DateSpan) {
-    this.renderHighlightSegs(this.selectionToSegs(selection))
+    this.renderHighlightSegs(this.selectionToSegs(selection, false))
   }
 
 
@@ -859,8 +853,23 @@ export default abstract class DateComponent extends Component {
   }
 
 
-  selectionToSegs(selection: DateSpan): Seg[] {
-    return this.rangeToSegs(selection.range, selection.isAllDay)
+  selectionToSegs(selection: DateSpan, fabricateEvents: boolean): Seg[] {
+    let segs = this.rangeToSegs(selection.range, selection.isAllDay)
+
+    if (fabricateEvents) {
+      let def = parseEventDef({ editable: false }, '', selection.isAllDay, true)
+      let eventRange = {
+        eventDef: def,
+        eventInstance: createEventInstance(def.defId, selection.range),
+        range: selection.range
+      }
+
+      for (let seg of segs) {
+        seg.eventRange = eventRange
+      }
+    }
+
+    return segs
   }
 
 

src/component/renderers/EventRenderer.ts

@@ -6,6 +6,7 @@ import { compareByFieldSpecs } from '../../util/misc'
 import { EventRenderRange } from '../event-rendering'
 import { Seg } from '../DateComponent'
 import EventApi from '../../api/EventApi'
+import { EventDef } from '../../structs/event'
 
 
 export default class EventRenderer {
@@ -447,39 +448,59 @@ export default class EventRenderer {
 
 
   // Computes if the given event is allowed to be dragged by the user
-  isEventDefDraggable(eventDef) {
-    return this.isEventDefStartEditable(eventDef)
-  }
+  isEventDefDraggable(eventDef: EventDef): boolean {
+    let val = eventDef.startEditable
+
+    if (val == null) {
+      let source = this.view.calendar.state.eventSources[eventDef.sourceId]
+      val = source ? source.startEditable : null
 
+      if (val == null) {
+        val = this.opt('eventStartEditable')
 
-  isEventDefStartEditable(eventDef) {
-    return true // TODO
+        if (val == null) {
+          val = this.opt('editable')
+        }
+      }
+    }
+
+    return val
   }
 
 
-  isEventDefGenerallyEditable(eventDef) { // NOT USED YET
-    return false // TODO
+  // Computes if the given event is allowed to be resized AT ALL
+  isEventDefResizable(eventDef): boolean {
+    let val = eventDef.durationEditable
+
+    if (val == null) {
+      let source = this.view.calendar.state.eventSources[eventDef.sourceId]
+      val = source ? source.durationEditable : null
+
+      if (val == null) {
+        val = this.opt('eventDurationEditable')
+
+        if (val == null) {
+          val = this.opt('editable')
+        }
+      }
+    }
+
+    return val
   }
 
 
   // Computes if the given event is allowed to be resized from its starting edge
-  isEventDefResizableFromStart(eventDef) {
+  isEventDefResizableFromStart(eventDef): boolean {
     return this.opt('eventResizableFromStart') && this.isEventDefResizable(eventDef)
   }
 
 
   // Computes if the given event is allowed to be resized from its ending edge
-  isEventDefResizableFromEnd(eventDef) {
+  isEventDefResizableFromEnd(eventDef): boolean {
     return this.isEventDefResizable(eventDef)
   }
 
 
-  // Computes if the given event is allowed to be resized by the user at all
-  isEventDefResizable(eventDef) {
-    return true // TODO
-  }
-
-
   computeFgSize() {
   }
 

src/structs/event-source.ts

@@ -63,7 +63,6 @@ export interface EventSource {
   fetchRange: DateRange | null
   allDayDefault: boolean | null
   eventDataTransform: EventInputTransformer
-  editable: boolean | null
   startEditable: boolean | null
   durationEditable: boolean | null
   overlap: any
@@ -97,7 +96,6 @@ export interface EventSourceDef {
 const SIMPLE_SOURCE_PROPS = {
   allDayDefault: Boolean,
   eventDataTransform: Function,
-  editable: Boolean,
   startEditable: Boolean,
   durationEditable: Boolean,
   overlap: null,
@@ -153,11 +151,22 @@ function parseEventSourceProps(raw: ExtendedEventSourceInput, meta: object, sour
   props.sourceDefId = sourceDefId
   props.meta = meta
 
-  if (typeof raw.color === 'string') {
-    if (!props.backgroundColor) {
+  // TODO: consolidate with event struct
+  if ('editable' in raw) {
+    if (props.startEditable === null) {
+      props.startEditable = raw.editable
+    }
+    if (props.durationEditable === null) {
+      props.durationEditable = raw.editable
+    }
+  }
+
+  // TODO: consolidate with event struct
+  if ('color' in raw) {
+    if (props.backgroundColor === null) {
       props.backgroundColor = raw.color
     }
-    if (!props.borderColor) {
+    if (props.borderColor === null) {
       props.borderColor = raw.color
     }
   }

src/structs/event.ts

@@ -50,7 +50,6 @@ export interface EventDef {
   isAllDay: boolean
   title: string
   url: string
-  editable: boolean | null
   startEditable: boolean | null
   durationEditable: boolean | null
   constraint: any
@@ -89,7 +88,6 @@ const NON_DATE_PROPS = {
   groupId: String,
   title: String,
   url: String,
-  editable: Boolean,
   startEditable: Boolean,
   durationEditable: Boolean,
   constraint: null,
@@ -126,11 +124,21 @@ export function parseEventDef(raw: EventNonDateInput, sourceId: string, isAllDay
     delete leftovers.id
   }
 
+  if ('editable' in leftovers) {
+    if (props.startEditable === null) {
+      props.startEditable = leftovers.editable
+    }
+    if (props.durationEditable === null) {
+      props.durationEditable = leftovers.editable
+    }
+    delete leftovers.editable
+  }
+
   if ('color' in leftovers) {
-    if (!props.backgroundColor) {
+    if (props.backgroundColor === null) {
       props.backgroundColor = leftovers.color
     }
-    if (!props.borderColor) {
+    if (props.borderColor === null) {
       props.borderColor = leftovers.color
     }
     delete leftovers.color