HelperRenderer system

src.json

@@ -32,12 +32,15 @@
     "component/interaction/ExternalDropping.js",
     "component/interaction/EventPointing.js",
     "component/EventRenderer.js",
+    "component/HelperRenderer.js",
     "component/ChronoComponent.js",
     "component/CoordChronoComponentMixin.js",
     "component/SegChronoComponentMixin.js",
+    "common/DayGridHelperRenderer.js",
     "common/DayGrid.events.js",
     "common/DayGrid.js",
     "common/DayGrid.limit.js",
+    "common/TimeGridHelperRenderer.js",
     "common/TimeGrid.events.js",
     "common/TimeGrid.js",
     "common/View.js",

src/common/DayGrid.js

@@ -7,13 +7,13 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 	eventRendererClass: DayGridEventRenderer,
 
 	view: null, // TODO: make more general and/or remove
+	helperRenderer: null,
 
 	numbersVisible: false, // should render a row for day/week numbers? set by outside view. TODO: make internal
 	bottomCoordPadding: 0, // hack for extending the hit area for the last row of the coordinate grid
 
 	rowEls: null, // set of fake row elements
 	cellEls: null, // set of whole-day elements comprising the row's background
-	helperEls: null, // set of cell skeleton elements for rendering the mock event "helper"
 
 	rowCoordCache: null,
 	colCoordCache: null,
@@ -26,6 +26,9 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 
 		// a requirement for SegChronoComponentMixin. TODO: more elegant
 		this.initSegChronoComponent();
+
+		// must happen after eventRender initialized in initSegChronoComponent
+		this.helperRenderer = new DayGridHelperRenderer(this);
 	},
 
 
@@ -355,7 +358,7 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 
 		// if a segment from the same calendar but another component is being dragged, render a helper event
 		if (seg && seg.component !== this) {
-			return this.renderHelperEventFootprints(eventFootprints, seg); // returns mock event elements
+			return this.helperRenderer.renderFootprints(eventFootprints, seg); // returns mock event elements
 		}
 	},
 
@@ -363,7 +366,7 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 	// Unrenders any visual indication of a hovering event
 	unrenderDrag: function() {
 		this.unrenderHighlight();
-		this.unrenderHelper();
+		this.helperRenderer.unrender();
 	},
 
 
@@ -379,64 +382,14 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 			this.renderHighlight(eventFootprints[i].componentFootprint);
 		}
 
-		return this.renderHelperEventFootprints(eventFootprints, seg); // returns mock event elements
+		return this.helperRenderer.renderFootprints(eventFootprints, seg); // returns mock event elements
 	},
 
 
 	// Unrenders a visual indication of an event being resized
 	unrenderEventResize: function() {
 		this.unrenderHighlight();
-		this.unrenderHelper();
-	},
-
-
-	/* Event Helper
-	------------------------------------------------------------------------------------------------------------------*/
-
-
-	// Renders a mock "helper" event. `sourceSeg` is the associated internal segment object. It can be null.
-	renderHelperEventFootprintEls: function(eventFootprints, sourceSeg) {
-		var helperNodes = [];
-		var segs = this.eventFootprintsToSegs(eventFootprints);
-		var rowStructs;
-
-		segs = this.eventRenderer.renderFgSegEls(segs); // assigns each seg's el and returns a subset of segs that were rendered
-		rowStructs = this.eventRenderer.renderSegRows(segs);
-
-		// inject each new event skeleton into each associated row
-		this.rowEls.each(function(row, rowNode) {
-			var rowEl = $(rowNode); // the .fc-row
-			var skeletonEl = $('<div class="fc-helper-skeleton"><table/></div>'); // will be absolutely positioned
-			var skeletonTop;
-
-			// If there is an original segment, match the top position. Otherwise, put it at the row's top level
-			if (sourceSeg && sourceSeg.row === row) {
-				skeletonTop = sourceSeg.el.position().top;
-			}
-			else {
-				skeletonTop = rowEl.find('.fc-content-skeleton tbody').position().top;
-			}
-
-			skeletonEl.css('top', skeletonTop)
-				.find('table')
-					.append(rowStructs[row].tbodyEl);
-
-			rowEl.append(skeletonEl);
-			helperNodes.push(skeletonEl[0]);
-		});
-
-		return ( // must return the elements rendered
-			this.helperEls = $(helperNodes) // array -> jQuery set
-		);
-	},
-
-
-	// Unrenders any visual indication of a mock helper event
-	unrenderHelper: function() {
-		if (this.helperEls) {
-			this.helperEls.remove();
-			this.helperEls = null;
-		}
+		this.helperRenderer.unrender();
 	},
 
 

src/common/DayGridHelperRenderer.js

@@ -0,0 +1,52 @@
+
+var DayGridHelperRenderer = HelperRenderer.extend({
+
+	helperEls: null, // set of cell skeleton elements for rendering the mock event "helper"
+
+
+	// Renders a mock "helper" event. `sourceSeg` is the associated internal segment object. It can be null.
+	renderFootprintEls: function(eventFootprints, sourceSeg) {
+		var segs = this.component.eventFootprintsToSegs(eventFootprints);
+		var helperNodes = [];
+		var rowStructs;
+
+		segs = this.eventRenderer.renderFgSegEls(segs); // assigns each seg's el and returns a subset of segs that were rendered
+		rowStructs = this.eventRenderer.renderSegRows(segs);
+
+		// inject each new event skeleton into each associated row
+		this.component.rowEls.each(function(row, rowNode) {
+			var rowEl = $(rowNode); // the .fc-row
+			var skeletonEl = $('<div class="fc-helper-skeleton"><table/></div>'); // will be absolutely positioned
+			var skeletonTop;
+
+			// If there is an original segment, match the top position. Otherwise, put it at the row's top level
+			if (sourceSeg && sourceSeg.row === row) {
+				skeletonTop = sourceSeg.el.position().top;
+			}
+			else {
+				skeletonTop = rowEl.find('.fc-content-skeleton tbody').position().top;
+			}
+
+			skeletonEl.css('top', skeletonTop)
+				.find('table')
+					.append(rowStructs[row].tbodyEl);
+
+			rowEl.append(skeletonEl);
+			helperNodes.push(skeletonEl[0]);
+		});
+
+		return ( // must return the elements rendered
+			this.helperEls = $(helperNodes) // array -> jQuery set
+		);
+	},
+
+
+	// Unrenders any visual indication of a mock helper event
+	unrender: function() {
+		if (this.helperEls) {
+			this.helperEls.remove();
+			this.helperEls = null;
+		}
+	}
+
+});

src/common/TimeGrid.js

@@ -8,6 +8,7 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 	eventRendererClass: TimeGridEventRenderer,
 
 	view: null, // TODO: make more general and/or remove
+	helperRenderer: null,
 
 	dayRanges: null, // UnzonedRange[], of start-end of each day
 	slotDuration: null, // duration of a "slot", a distinct time segment on given day, visualized by lines
@@ -49,6 +50,9 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 		// a requirement for SegChronoComponentMixin
 		this.initSegChronoComponent();
 
+		// must happen after eventRender initialized in initSegChronoComponent
+		this.helperRenderer = new TimeGridHelperRenderer(this);
+
 		this.processOptions();
 	},
 
@@ -622,7 +626,7 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 
 			// returns mock event elements
 			// signal that a helper has been rendered
-			return this.renderHelperEventFootprints(eventFootprints);
+			return this.helperRenderer.renderFootprints(eventFootprints);
 		}
 		else { // otherwise, just render a highlight
 
@@ -635,7 +639,7 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 
 	// Unrenders any visual indication of an event being dragged
 	unrenderDrag: function() {
-		this.unrenderHelper();
+		this.helperRenderer.unrender();
 		this.unrenderHighlight();
 	},
 
@@ -646,67 +650,13 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 
 	// Renders a visual indication of an event being resized
 	renderEventResize: function(eventFootprints, seg) {
-		return this.renderHelperEventFootprints(eventFootprints, seg); // returns mock event elements
+		return this.helperRenderer.renderFootprints(eventFootprints, seg); // returns mock event elements
 	},
 
 
 	// Unrenders any visual indication of an event being resized
 	unrenderEventResize: function() {
-		this.unrenderHelper();
-	},
-
-
-	/* Event Helper
-	------------------------------------------------------------------------------------------------------------------*/
-
-
-	// Renders a mock "helper" event. `sourceSeg` is the original segment object and might be null (an external drag)
-	renderHelperEventFootprintEls: function(eventFootprints, sourceSeg) {
-		var segs = this.eventFootprintsToSegs(eventFootprints);
-
-		return this.renderHelperSegs( // returns mock event elements
-			segs,
-			sourceSeg
-		);
-	},
-
-
-	// Unrenders any mock helper event
-	unrenderHelper: function() {
-		this.unrenderHelperSegs();
-	},
-
-
-	renderHelperSegs: function(segs, sourceSeg) {
-		var helperEls = [];
-		var i, seg;
-		var sourceEl;
-
-		segs = this.eventRenderer.renderFgSegsIntoContainers(segs, this.helperContainerEls);
-
-		// Try to make the segment that is in the same row as sourceSeg look the same
-		for (i = 0; i < segs.length; i++) {
-			seg = segs[i];
-			if (sourceSeg && sourceSeg.col === seg.col) {
-				sourceEl = sourceSeg.el;
-				seg.el.css({
-					left: sourceEl.css('left'),
-					right: sourceEl.css('right'),
-					'margin-left': sourceEl.css('margin-left'),
-					'margin-right': sourceEl.css('margin-right')
-				});
-			}
-			helperEls.push(seg.el[0]);
-		}
-
-		this.helperSegs = segs;
-
-		return $(helperEls); // must return rendered helpers
-	},
-
-
-	unrenderHelperSegs: function() {
-		this.unrenderNamedSegs('helperSegs');
+		this.helperRenderer.unrender();
 	},
 
 
@@ -746,7 +696,7 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 	// Renders a visual indication of a selection. Overrides the default, which was to simply render a highlight.
 	renderSelectionFootprint: function(componentFootprint) {
 		if (this.opt('selectHelper')) { // this setting signals that a mock helper event should be rendered
-			this.renderHelperEventFootprints([
+			this.helperRenderer.renderFootprints([
 				this.fabricateEventFootprint(componentFootprint)
 			]);
 		}
@@ -758,7 +708,7 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 
 	// Unrenders any visual indication of a selection
 	unrenderSelection: function() {
-		this.unrenderHelper();
+		this.helperRenderer.unrender();
 		this.unrenderHighlight();
 	},
 

src/common/TimeGridHelperRenderer.js

@@ -0,0 +1,57 @@
+
+var TimeGridHelperRenderer = HelperRenderer.extend({
+
+	helperEls: null,
+
+
+	// Renders a mock "helper" event. `sourceSeg` is the original segment object and might be null (an external drag)
+	renderFootprintEls: function(eventFootprints, sourceSeg) {
+		var segs = this.component.eventFootprintsToSegs(eventFootprints);
+
+		return this.renderHelperSegs( // returns mock event elements
+			segs,
+			sourceSeg
+		);
+	},
+
+
+	renderHelperSegs: function(segs, sourceSeg) {
+		var helperNodes = [];
+		var i, seg;
+		var sourceEl;
+
+		segs = this.eventRenderer.renderFgSegsIntoContainers(
+			segs,
+			this.component.helperContainerEls
+		);
+
+		// Try to make the segment that is in the same row as sourceSeg look the same
+		for (i = 0; i < segs.length; i++) {
+			seg = segs[i];
+			if (sourceSeg && sourceSeg.col === seg.col) {
+				sourceEl = sourceSeg.el;
+				seg.el.css({
+					left: sourceEl.css('left'),
+					right: sourceEl.css('right'),
+					'margin-left': sourceEl.css('margin-left'),
+					'margin-right': sourceEl.css('margin-right')
+				});
+			}
+			helperNodes.push(seg.el[0]);
+		}
+
+		return ( // must return the elements rendered
+			this.helperEls = $(helperNodes) // array -> jQuery set
+		);
+	},
+
+
+	// Unrenders any mock helper event
+	unrender: function() {
+		if (this.helperEls) {
+			this.helperEls.remove();
+			this.helperEls = null;
+		}
+	}
+
+});

src/component/CoordChronoComponentMixin.js

@@ -229,44 +229,6 @@ var CoordChronoComponentMixin = {
 	},
 
 
-	/* Event Helper
-	------------------------------------------------------------------------------------------------------------------*/
-	// TODO: should probably move this to Grid.events, like we did event dragging / resizing
-
-
-	renderHelperEventFootprints: function(eventFootprints, sourceSeg) {
-		return this.renderHelperEventFootprintEls(eventFootprints, sourceSeg)
-			.addClass('fc-helper');
-	},
-
-
-	renderHelperEventFootprintEls: function(eventFootprints, sourceSeg) {
-		// Subclasses must implement.
-		// Must return all mock event elements.
-	},
-
-
-	// Unrenders a mock event
-	// TODO: have this in ChronoComponent
-	unrenderHelper: function() {
-		// subclasses must implement
-	},
-
-
-	fabricateEventFootprint: function(componentFootprint) {
-		var view = this._getView();
-		var calendar = view.calendar;
-		var eventDateProfile = calendar.footprintToDateProfile(componentFootprint);
-		var dummyEvent = new SingleEventDef(new EventSource(calendar));
-		var dummyInstance;
-
-		dummyEvent.dateProfile = eventDateProfile;
-		dummyInstance = dummyEvent.buildInstance();
-
-		return new EventFootprint(componentFootprint, dummyEvent, dummyInstance);
-	},
-
-
 	// Event Resizing
 	// ---------------------------------------------------------------------------------------------------------------
 	// TODO: why not move this to ChronoComponent

src/component/HelperRenderer.js

@@ -0,0 +1,46 @@
+
+var HelperRenderer = Class.extend({
+
+	view: null,
+	component: null,
+	eventRenderer: null,
+
+
+	constructor: function(component) {
+		this.view = component._getView();
+		this.component = component;
+		this.eventRenderer = component.eventRenderer;
+	},
+
+
+	renderFootprints: function(eventFootprints, sourceSeg) {
+		return this.renderFootprintEls(eventFootprints, sourceSeg)
+			.addClass('fc-helper');
+	},
+
+
+	renderFootprintEls: function(eventFootprints, sourceSeg) {
+		// Subclasses must implement.
+		// Must return all mock event elements.
+	},
+
+
+	// Unrenders a mock event
+	unrender: function() {
+		// subclasses must implement
+	},
+
+
+	fabricateEventFootprint: function(componentFootprint) {
+		var calendar = this.view.calendar;
+		var eventDateProfile = calendar.footprintToDateProfile(componentFootprint);
+		var dummyEvent = new SingleEventDef(new EventSource(calendar));
+		var dummyInstance;
+
+		dummyEvent.dateProfile = eventDateProfile;
+		dummyInstance = dummyEvent.buildInstance();
+
+		return new EventFootprint(componentFootprint, dummyEvent, dummyInstance);
+	}
+
+});