event selection and showEvents/hideEvents, move to eventDef

src/common/Grid.events.js

@@ -257,9 +257,9 @@ Grid.mixin({
 
 	handleSegTouchStart: function(seg, ev) {
 		var view = this.view;
-		var event = seg.event; // TODO: kill, but retrofit isEventSelected first
+		var event = seg.event;
 		var eventDef = seg.footprint.eventDef;
-		var isSelected = view.isEventSelected(event);
+		var isSelected = view.isEventDefSelected(eventDef);
 		var isDraggable = view.isEventDefDraggable(eventDef);
 		var isResizable = view.isEventDefResizable(eventDef);
 		var isResizing = false;
@@ -317,6 +317,8 @@ Grid.mixin({
 		var eventManager = calendar.eventManager;
 		var el = seg.el;
 		var event = seg.event; // is a legacy event
+		var eventDef = seg.footprint.eventDef;
+		var eventInstance = seg.footprint.eventInstance; // null for inverse-background events
 		var isDragging;
 		var mouseFollower; // A clone of the original element that will move with the mouse
 		var eventDefMutation;
@@ -345,14 +347,18 @@ Grid.mixin({
 				mouseFollower.start(ev);
 			},
 			dragStart: function(ev) {
-				if (dragListener.isTouch && !view.isEventSelected(event)) {
+				if (
+					dragListener.isTouch &&
+					!view.isEventDefSelected(eventDef) &&
+					eventInstance
+				) {
 					// if not previously selected, will fire after a delay. then, select the event
-					view.selectEvent(event);
+					view.selectEventInstance(eventInstance);
 				}
 				isDragging = true;
 				_this.handleSegMouseout(seg, ev); // ensure a mouseout on the manipulated event has been reported
 				_this.segDragStart(seg, ev);
-				view.hideEvent(event); // hide all event segments. our mouseFollower will take over
+				view.hideEventsWithId(eventDef.id); // hide all event segments. our mouseFollower will take over
 			},
 			hitOver: function(hit, isOrig, origHit) {
 				var isAllowed = true;
@@ -442,7 +448,7 @@ Grid.mixin({
 						view.reportEventDrop(event, eventDefMutation, el, ev);
 					}
 					else {
-						view.showEvent(event);
+						view.showEventsWithId(eventDef.id);
 					}
 				});
 				_this.segDragListener = null;
@@ -460,6 +466,8 @@ Grid.mixin({
 		var _this = this;
 		var view = this.view;
 		var event = seg.event;
+		var eventDef = seg.footprint.eventDef;
+		var eventInstance = seg.footprint.eventInstance; // null for inverse-background events
 
 		if (this.segDragListener) {
 			return this.segDragListener;
@@ -467,9 +475,13 @@ Grid.mixin({
 
 		var dragListener = this.segDragListener = new DragListener({
 			dragStart: function(ev) {
-				if (dragListener.isTouch && !view.isEventSelected(event)) {
+				if (
+					dragListener.isTouch &&
+					!view.isEventDefSelected(eventDef) &&
+					eventInstance
+				) {
 					// if not previously selected, will fire after a delay. then, select the event
-					view.selectEvent(event);
+					view.selectEventInstance(eventInstance);
 				}
 			},
 			interactionEnd: function(ev) {
@@ -699,6 +711,7 @@ Grid.mixin({
 		var eventManager = calendar.eventManager;
 		var el = seg.el;
 		var event = seg.event; // legacy event
+		var eventDef = seg.footprint.eventDef;
 		var isDragging;
 		var resizeMutation; // zoned event date properties. falsy if invalid resize
 
@@ -750,7 +763,7 @@ Grid.mixin({
 				}
 
 				if (resizeMutation) {
-					view.hideEvent(event);
+					view.hideEventsWithId(eventDef.id);
 
 					_this.renderEventResize(
 						_this.eventRangesToEventFootprints(
@@ -762,7 +775,7 @@ Grid.mixin({
 			},
 			hitOut: function() { // called before mouse moves to a different hit OR moved out of all hits
 				resizeMutation = null;
-				view.showEvent(event); // for when out-of-bounds. show original
+				view.showEventsWithId(eventDef.id); // for when out-of-bounds. show original
 			},
 			hitDone: function() { // resets the rendering to show the original event
 				_this.unrenderEventResize();
@@ -778,7 +791,7 @@ Grid.mixin({
 					view.reportEventResize(event, resizeMutation, el, ev);
 				}
 				else {
-					view.showEvent(event);
+					view.showEventsWithId(eventDef.id);
 				}
 				_this.segResizeListener = null;
 			}
@@ -929,7 +942,7 @@ Grid.mixin({
 		}
 
 		// event is currently selected? attach a className.
-		if (view.isEventSelected(seg.event)) {
+		if (view.isEventDefSelected(seg.footprint.eventDef)) {
 			classes.push('fc-selected');
 		}
 

src/common/View.js

@@ -21,7 +21,7 @@ var View = FC.View = ChronoComponent.extend({
 	queuedScroll: null,
 
 	isSelected: false, // boolean whether a range of time is user-selected or not
-	selectedEvent: null, // TODO: move away from legacy event!
+	selectedEventInstance: null,
 
 	eventOrderSpecs: null, // criteria for ordering events when they have same date/time
 
@@ -650,12 +650,17 @@ var View = FC.View = ChronoComponent.extend({
 
 	// Signals that all events have been rendered
 	onEventsRender: function() {
+		var _this = this;
+
 		this.applyScreenState();
 
-		this.renderedEventSegEach(function(seg) {
-			var legacy = seg.footprint.getEventLegacy();
+		this.getEventSegs().forEach(function(seg) {
+			var legacy;
 
-			this.publiclyTrigger('eventAfterRender', legacy, legacy, seg.el);
+			if (seg.el) { // necessary?
+				legacy = seg.footprint.getEventLegacy();
+				_this.publiclyTrigger('eventAfterRender', legacy, legacy, seg.el);
+			}
 		});
 
 		this.publiclyTrigger('eventAfterAllRender');
@@ -664,12 +669,17 @@ var View = FC.View = ChronoComponent.extend({
 
 	// Signals that all event elements are about to be removed
 	onBeforeEventsUnrender: function() {
+		var _this = this;
+
 		this.applyScreenState();
 
-		this.renderedEventSegEach(function(seg) {
-			var legacy = seg.footprint.getEventLegacy();
+		this.getEventSegs().forEach(function(seg) {
+			var legacy;
 
-			this.publiclyTrigger('eventDestroy', legacy, legacy, seg.el);
+			if (seg.el) { // necessary?
+				legacy = seg.footprint.getEventLegacy();
+				_this.publiclyTrigger('eventDestroy', legacy, legacy, seg.el);
+			}
 		});
 	},
 
@@ -687,40 +697,28 @@ var View = FC.View = ChronoComponent.extend({
 
 
 	// Hides all rendered event segments linked to the given event
-	showEvent: function(event) {
-		this.renderedEventSegEach(function(seg) {
-			seg.el.css('visibility', '');
-		}, event);
+	showEventsWithId: function(eventDefId) {
+		this.getEventSegs().forEach(function(seg) {
+			if (
+				seg.footprint.eventDef.id === eventDefId &&
+				seg.el // necessary?
+			) {
+				seg.el.css('visibility', '');
+			}
+		});
 	},
 
 
 	// Shows all rendered event segments linked to the given event
-	hideEvent: function(event) {
-		this.renderedEventSegEach(function(seg) {
-			seg.el.css('visibility', 'hidden');
-		}, event);
-	},
-
-
-	// Iterates through event segments that have been rendered (have an el). Goes through all by default.
-	// If the optional `event` argument is specified, only iterates through segments linked to that event.
-	// The `this` value of the callback function will be the view.
-	renderedEventSegEach: function(func, event) {
-		var segs = this.getEventSegs();
-		var i;
-
-		for (i = 0; i < segs.length; i++) {
+	hideEventsWithId: function(eventDefId) {
+		this.getEventSegs().forEach(function(seg) {
 			if (
-				!event || // no specified event means should match ALL events
-				event._id === segs[i].event._id || // the exact instance
-				(event.id != null && event.id == segs[i].event.id) // a related instance
-				// ^ do a soft comparison because id not normalized to string
+				seg.footprint.eventDef.id === eventDefId &&
+				seg.el // necessary?
 			) {
-				if (segs[i].el) {
-					func.call(this, segs[i]);
-				}
+				seg.el.css('visibility', 'hidden');
 			}
-		}
+		});
 	},
 
 
@@ -874,31 +872,45 @@ var View = FC.View = ChronoComponent.extend({
 	------------------------------------------------------------------------------------------------------------------*/
 
 
-	selectEvent: function(event) {
-		if (!this.selectedEvent || this.selectedEvent !== event) {
-			this.unselectEvent();
-			this.renderedEventSegEach(function(seg) {
-				seg.el.addClass('fc-selected');
-			}, event);
-			this.selectedEvent = event;
+	selectEventInstance: function(eventInstance) {
+		if (
+			!this.selectedEventInstance ||
+			this.selectedEventInstance !== eventInstance
+		) {
+			this.unselectEventInstance();
+
+			this.getEventSegs().forEach(function(seg) {
+				if (
+					seg.footprint.eventInstance === eventInstance &&
+					seg.el // necessary?
+				) {
+					seg.el.addClass('fc-selected');
+				}
+			});
+
+			this.selectedEventInstance = eventInstance;
 		}
 	},
 
 
-	unselectEvent: function() {
-		if (this.selectedEvent) {
-			this.renderedEventSegEach(function(seg) {
-				seg.el.removeClass('fc-selected');
-			}, this.selectedEvent);
-			this.selectedEvent = null;
+	unselectEventInstance: function() {
+		if (this.selectedEventInstance) {
+
+			this.getEventSegs().forEach(function(seg) {
+				if (seg.el) { // necessary?
+					seg.el.removeClass('fc-selected');
+				}
+			});
+
+			this.selectedEventInstance = null;
 		}
 	},
 
 
-	isEventSelected: function(event) {
-		// event references might change on refetchEvents(), while selectedEvent doesn't,
+	isEventDefSelected: function(eventDef) {
+		// event references might change on refetchEvents(), while selectedEventInstance doesn't,
 		// so compare IDs
-		return this.selectedEvent && this.selectedEvent._id === event._id;
+		return this.selectedEventInstance && this.selectedEventInstance.def.id === eventDef.id;
 	},
 
 
@@ -936,9 +948,9 @@ var View = FC.View = ChronoComponent.extend({
 
 
 	processEventUnselect: function(ev) {
-		if (this.selectedEvent) {
+		if (this.selectedEventInstance) {
 			if (!$(ev.target).closest('.fc-selected').length) {
-				this.unselectEvent();
+				this.unselectEventInstance();
 			}
 		}
 	},