more subclassing approach, for EventRenderUtils too

src/common/DayGrid.events.js

@@ -7,6 +7,31 @@ DayGrid.mixin({
 	rowStructs: null, // an array of objects, each holding information about a row's foreground event-rendering
 
 
+	eventRenderUtilsClass: SegChronoComponentMixin.eventRenderUtilsClass.extend({
+
+		dayGrid: null,
+
+
+		constructor: function(dayGrid) {
+			SegChronoComponentMixin.eventRenderUtilsClass.call(this, dayGrid);
+			this.dayGrid = dayGrid;
+		},
+
+
+		// Computes a default event time formatting string if `timeFormat` is not explicitly defined
+		computeEventTimeFormat: function() {
+			return this.opt('extraSmallTimeFormat'); // like "6p" or "6:30p"
+		},
+
+
+		// Computes a default `displayEventEnd` value if one is not expliclty defined
+		computeDisplayEventEnd: function() {
+			return this.dayGrid.colCnt === 1; // we'll likely have space if there's only one day
+		}
+
+	}),
+
+
 	// Unrenders all events currently rendered on the grid
 	unrenderEvents: function() {
 		this.removeSegPopover(); // removes the "more.." events popover

src/common/DayGrid.js

@@ -86,7 +86,8 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 
 	renderBusinessHours: function() {
 		var segs = this.buildBusinessHourSegs(true); // wholeDay=true
-		this.renderFill('businessHours', segs, 'bgevent');
+
+		this.fillSystem.render('businessHours', segs, 'bgevent');
 	},
 
 
@@ -219,22 +220,6 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 	},
 
 
-	/* Options
-	------------------------------------------------------------------------------------------------------------------*/
-
-
-	// Computes a default event time formatting string if `timeFormat` is not explicitly defined
-	computeEventTimeFormat: function() {
-		return this.opt('extraSmallTimeFormat'); // like "6p" or "6:30p"
-	},
-
-
-	// Computes a default `displayEventEnd` value if one is not expliclty defined
-	computeDisplayEventEnd: function() {
-		return this.colCnt == 1; // we'll likely have space if there's only one day
-	},
-
-
 	/* Dates
 	------------------------------------------------------------------------------------------------------------------*/
 
@@ -443,64 +428,66 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 
 
 	fillSystemClass: SegChronoComponentMixin.fillSystemClass.extend({
-		fillSegTag: 'td' // override the default tag name
-	}),
 
+		fillSegTag: 'td', // override the default tag name
+		dayGrid: null,
 
-	// Renders a set of rectangles over the given segments of days.
-	// Only returns segments that successfully rendered.
-	renderFill: function(type, segs, className) {
-		var nodes = [];
-		var i, seg;
-		var skeletonEl;
 
-		segs = this.fillSystem.buildSegEls(type, segs); // assignes `.el` to each seg. returns successfully rendered segs
+		constructor: function(dayGrid) {
+			SegChronoComponentMixin.fillSystemClass.call(this, dayGrid);
+			this.dayGrid = dayGrid;
+		},
 
-		for (i = 0; i < segs.length; i++) {
-			seg = segs[i];
-			skeletonEl = this.renderFillRow(type, seg, className);
-			this.rowEls.eq(seg.row).append(skeletonEl);
-			nodes.push(skeletonEl[0]);
-		}
 
-		this.fillSystem.reportEls(type, nodes);
+		attachSegEls: function(type, segs, className) {
+			var nodes = [];
+			var i, seg;
+			var skeletonEl;
 
-		return segs;
-	},
+			for (i = 0; i < segs.length; i++) {
+				seg = segs[i];
+				skeletonEl = this.renderFillRow(type, seg, className);
+				this.dayGrid.rowEls.eq(seg.row).append(skeletonEl);
+				nodes.push(skeletonEl[0]);
+			}
 
+			return nodes;
+		},
 
-	// Generates the HTML needed for one row of a fill. Requires the seg's el to be rendered.
-	renderFillRow: function(type, seg, className) {
-		var colCnt = this.colCnt;
-		var startCol = seg.leftCol;
-		var endCol = seg.rightCol + 1;
-		var skeletonEl;
-		var trEl;
 
-		className = className || type.toLowerCase();
+		// Generates the HTML needed for one row of a fill. Requires the seg's el to be rendered.
+		renderFillRow: function(type, seg, className) {
+			var colCnt = this.dayGrid.colCnt;
+			var startCol = seg.leftCol;
+			var endCol = seg.rightCol + 1;
+			var skeletonEl;
+			var trEl;
 
-		skeletonEl = $(
-			'<div class="fc-' + className + '-skeleton">' +
-				'<table><tr/></table>' +
-			'</div>'
-		);
-		trEl = skeletonEl.find('tr');
+			className = className || type.toLowerCase();
 
-		if (startCol > 0) {
-			trEl.append('<td colspan="' + startCol + '"/>');
-		}
+			skeletonEl = $(
+				'<div class="fc-' + className + '-skeleton">' +
+					'<table><tr/></table>' +
+				'</div>'
+			);
+			trEl = skeletonEl.find('tr');
 
-		trEl.append(
-			seg.el.attr('colspan', endCol - startCol)
-		);
+			if (startCol > 0) {
+				trEl.append('<td colspan="' + startCol + '"/>');
+			}
 
-		if (endCol < colCnt) {
-			trEl.append('<td colspan="' + (colCnt - endCol) + '"/>');
-		}
+			trEl.append(
+				seg.el.attr('colspan', endCol - startCol)
+			);
 
-		this.bookendCells(trEl);
+			if (endCol < colCnt) {
+				trEl.append('<td colspan="' + (colCnt - endCol) + '"/>');
+			}
+
+			this.dayGrid.bookendCells(trEl);
 
-		return skeletonEl;
-	}
+			return skeletonEl;
+		}
+	})
 
 });

src/common/EventRenderUtils.js

@@ -1,7 +1,7 @@
 
 var EventRenderUtils = Class.extend({
 
-	delegate: null,
+	view: null,
 
 	// derived from options
 	eventTimeFormat: null,
@@ -9,50 +9,34 @@ var EventRenderUtils = Class.extend({
 	displayEventEnd: null,
 
 
-	/*
-	delegate defines:
-		- opt
-		- _getView
-		- computeEventTimeFormat (optional, defaults to smallTimeFormat)
-		- computeDisplayEventTime (optional, defaults to true)
-		- computeDisplayEventEnd (optional, defaults to false)
+	constructor: function(component) {
+		this.view = component._getView();
+	},
+
 
-	OTHER REQUIREMENTS:
-		- must call rangeUpdated() when delegate's range is updated
-	*/
-	constructor: function(delegate) {
-		this.delegate = delegate;
+	opt: function(name) {
+		return this.view.opt(name);
 	},
 
 
 	// Updates values that rely on options and also relate to range
 	rangeUpdated: function() {
-		var delegate = this.delegate;
 		var displayEventTime;
 		var displayEventEnd;
 
 		this.eventTimeFormat =
-			delegate.opt('eventTimeFormat') ||
-			delegate.opt('timeFormat') || // deprecated
-			(delegate.computeEventTimeFormat ?
-				delegate.computeEventTimeFormat() :
-				'') ||
-			delegate.opt('smallTimeFormat');
-
-		displayEventTime = delegate.opt('displayEventTime');
-		if (displayEventTime == null && delegate.computeDisplayEventTime) {
-			displayEventTime = delegate.computeDisplayEventTime(); // might be based off of range
-		}
+			this.opt('eventTimeFormat') ||
+			this.opt('timeFormat') || // deprecated
+			this.computeEventTimeFormat();
+
+		displayEventTime = this.opt('displayEventTime');
 		if (displayEventTime == null) {
-			displayEventTime = true;
+			displayEventTime = this.computeDisplayEventTime(); // might be based off of range
 		}
 
-		displayEventEnd = delegate.opt('displayEventEnd');
-		if (displayEventEnd == null && delegate.computeDisplayEventEnd) {
-			displayEventEnd = delegate.computeDisplayEventEnd(); // might be based off of range
-		}
+		displayEventEnd = this.opt('displayEventEnd');
 		if (displayEventEnd == null) {
-			displayEventEnd = true;
+			displayEventEnd = this.computeDisplayEventEnd(); // might be based off of range
 		}
 
 		this.displayEventTime = displayEventTime;
@@ -65,9 +49,9 @@ var EventRenderUtils = Class.extend({
 	filterEventRenderEl: function(eventFootprint, el) { // TODO: move this to EventRenderUtils!!!
 		var legacy = eventFootprint.getEventLegacy();
 
-		var custom = this.delegate.publiclyTrigger('eventRender', {
+		var custom = this.view.publiclyTrigger('eventRender', {
 			context: legacy,
-			args: [ legacy, el, this.delegate._getView() ]
+			args: [ legacy, el, this.view ]
 		});
 
 		if (custom === false) { // means don't render at all
@@ -98,8 +82,6 @@ var EventRenderUtils = Class.extend({
 
 
 	_getTimeText: function(start, end, isAllDay, formatStr, displayEnd) {
-		var view = this.delegate._getView();
-
 		if (formatStr == null) {
 			formatStr = this.eventTimeFormat;
 		}
@@ -110,7 +92,7 @@ var EventRenderUtils = Class.extend({
 
 		if (this.displayEventTime && !isAllDay) {
 			if (displayEnd && end) {
-				return view.formatRange(
+				return this.view.formatRange(
 					{ start: start, end: end },
 					false, // allDay
 					formatStr
@@ -125,6 +107,21 @@ var EventRenderUtils = Class.extend({
 	},
 
 
+	computeEventTimeFormat: function() {
+		return this.opt('smallTimeFormat');
+	},
+
+
+	computeDisplayEventTime: function() {
+		return true;
+	},
+
+
+	computeDisplayEventEnd: function() {
+		return true;
+	},
+
+
 	getBgClasses: function(eventFootprint) {
 		var classNames = this.getClasses(eventFootprint);
 
@@ -167,8 +164,8 @@ var EventRenderUtils = Class.extend({
 
 		return source.backgroundColor ||
 			source.color ||
-			this.delegate.opt('eventBackgroundColor') ||
-			this.delegate.opt('eventColor');
+			this.opt('eventBackgroundColor') ||
+			this.opt('eventColor');
 	},
 
 
@@ -185,8 +182,8 @@ var EventRenderUtils = Class.extend({
 
 		return source.borderColor ||
 			source.color ||
-			this.delegate.opt('eventBorderColor') ||
-			this.delegate.opt('eventColor');
+			this.opt('eventBorderColor') ||
+			this.opt('eventColor');
 	},
 
 
@@ -200,7 +197,7 @@ var EventRenderUtils = Class.extend({
 	getDefaultTextColor: function(eventFootprint) {
 		var source = eventFootprint.eventDef.source;
 
-		return source.textColor || this.delegate.opt('eventTextColor');
+		return source.textColor || this.opt('eventTextColor');
 	}
 
 });

src/common/FillSystem.js

@@ -10,13 +10,12 @@ var FillSystem = Class.extend({ // use for highlight, background events, busines
 	},
 
 
-	reportEls: function(type, nodes) {
-		if (this.elsByFill[type]) {
-			this.elsByFill[type] = this.elsByFill[type].add(nodes);
-		}
-		else {
-			this.elsByFill[type] = $(nodes);
-		}
+	render: function(type, segs, className) {
+		segs = this.buildSegEls(type, segs); // assignes `.el` to each seg. returns successfully rendered segs
+
+		this.reportEls(type, this.attachSegEls(type, segs, className));
+
+		return segs;
 	},
 
 
@@ -87,6 +86,22 @@ var FillSystem = Class.extend({ // use for highlight, background events, busines
 			(classes.length ? ' class="' + classes.join(' ') + '"' : '') +
 			(css ? ' style="' + css + '"' : '') +
 			' />';
+	},
+
+
+	// Should return wrapping DOM structure
+	attachSegEls: function(type, segs, className) {
+		// subclasses must implement
+	},
+
+
+	reportEls: function(type, nodes) {
+		if (this.elsByFill[type]) {
+			this.elsByFill[type] = this.elsByFill[type].add(nodes);
+		}
+		else {
+			this.elsByFill[type] = $(nodes);
+		}
 	}
 
 });

src/common/SegChronoComponentMixin.js

@@ -5,7 +5,6 @@ Caller must:
 - implement componentFootprintToSegs
 - implement renderFgSegs
 - implement unrenderFgSegs
-- implement renderFill
 
 This mixin can depend on ChronoComponent:
 - opt
@@ -21,7 +20,7 @@ var SegChronoComponentMixin = {
 
 
 	initSegChronoComponent: function() {
-		this.eventRenderUtils = new EventRenderUtils(this);
+		this.eventRenderUtils = new this.eventRenderUtilsClass(this);
 		this.fillSystem = new this.fillSystemClass(this);
 	},
 
@@ -146,7 +145,7 @@ var SegChronoComponentMixin = {
 	// Renders the given background event segments onto the grid.
 	// Returns a subset of the segs that were actually rendered.
 	renderBgSegs: function(segs) {
-		return this.renderFill('bgEvent', segs);
+		return this.fillSystem.render('bgEvent', segs);
 	},
 
 
@@ -211,7 +210,7 @@ var SegChronoComponentMixin = {
 
 	// Renders an emphasis on the given date range. Given a span (unzoned start/end and other misc data)
 	renderHighlight: function(componentFootprint) {
-		this.renderFill('highlight', this.componentFootprintToSegs(componentFootprint));
+		this.fillSystem.render('highlight', this.componentFootprintToSegs(componentFootprint));
 	},
 
 
@@ -225,11 +224,6 @@ var SegChronoComponentMixin = {
 	------------------------------------------------------------------------------------------------------------------*/
 
 
-	renderFill: function() {
-		// must implement
-	},
-
-
 	fillSystemClass: FillSystem.extend({
 
 		eventRenderUtils: null,
@@ -241,6 +235,11 @@ var SegChronoComponentMixin = {
 		},
 
 
+		attachSegEls: function(segs) {
+			// subclasses must implement
+		},
+
+
 		// Renders a background event element, given the default rendering. Called by the fill system.
 		bgEventSegEl: function(seg, el) {
 			return this.eventRenderUtils.filterEventRenderEl(seg.footprint, el);
@@ -276,10 +275,13 @@ var SegChronoComponentMixin = {
 	}),
 
 
-	/* Utils
+	/* Event Rendering Utils
 	------------------------------------------------------------------------------------------------------------------*/
 
 
+	eventRenderUtilsClass: EventRenderUtils,
+
+
 	// Generic utility for generating the HTML classNames for an event segment's element
 	getSegClasses: function(seg, isDraggable, isResizable) {
 		var view = this._getView();

src/common/TimeGrid.events.js

@@ -22,6 +22,22 @@ TimeGrid.mixin({
 	businessSegs: null,
 
 
+	eventRenderUtilsClass: SegChronoComponentMixin.eventRenderUtilsClass.extend({
+
+		// Computes a default event time formatting string if `timeFormat` is not explicitly defined
+		computeEventTimeFormat: function() {
+			return this.opt('noMeridiemTimeFormat'); // like "6:30" (no AM/PM)
+		},
+
+
+		// Computes a default `displayEventEnd` value if one is not expliclty defined
+		computeDisplayEventEnd: function() {
+			return true;
+		}
+
+	}),
+
+
 	// Renders the DOM that the view's content will live in
 	renderContentSkeleton: function() {
 		var cellHtml = '';

src/common/TimeGrid.js

@@ -180,18 +180,6 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 	},
 
 
-	// Computes a default event time formatting string if `timeFormat` is not explicitly defined
-	computeEventTimeFormat: function() {
-		return this.opt('noMeridiemTimeFormat'); // like "6:30" (no AM/PM)
-	},
-
-
-	// Computes a default `displayEventEnd` value if one is not expliclty defined
-	computeDisplayEventEnd: function() {
-		return true;
-	},
-
-
 	/* Hit System
 	------------------------------------------------------------------------------------------------------------------*/
 

src/list/ListView.js

@@ -140,10 +140,14 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 	},
 
 
-	// like "4:00am"
-	computeEventTimeFormat: function() {
-		return this.opt('mediumTimeFormat');
-	},
+	eventRenderUtilsClass: SegChronoComponentMixin.eventRenderUtilsClass.extend({
+
+		// like "4:00am"
+		computeEventTimeFormat: function() {
+			return this.opt('mediumTimeFormat');
+		}
+
+	}),
 
 
 	// for events with a url, the whole <tr> should be clickable,