StandardFillRenderer, fillRenderer

src.json

@@ -33,6 +33,7 @@
     "component/EventRenderer.js",
     "component/BusinessHourRenderer.js",
     "component/FillRenderer.js",
+    "component/StandardFillRenderer.js",
     "component/HelperRenderer.js",
     "component/ChronoComponent.js",
     "component/CoordChronoComponentMixin.js",

src/common/DayGrid.js

@@ -402,12 +402,12 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 
 
 		renderSegs: function(segs) {
-			this.component.fillSystem.render('businessHours', segs, 'bgevent');
+			this.component.fillRenderer.render('businessHours', segs, 'bgevent');
 		},
 
 
 		unrender: function() {
-			this.component.fillSystem.unrender('businessHours');
+			this.component.fillRenderer.unrender('businessHours');
 		}
 
 	}),
@@ -417,14 +417,15 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 	------------------------------------------------------------------------------------------------------------------*/
 
 
-	fillSystemClass: SegChronoComponentMixin.fillSystemClass.extend({
+	fillRendererClass: StandardFillRenderer.extend({
 
 		fillSegTag: 'td', // override the default tag name
 		dayGrid: null,
 
 
 		constructor: function(dayGrid) {
-			SegChronoComponentMixin.fillSystemClass.call(this, dayGrid);
+			StandardFillRenderer.call(this, dayGrid);
+
 			this.dayGrid = dayGrid;
 		},
 

src/common/TimeGrid.js

@@ -6,6 +6,7 @@
 var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, SegChronoComponentMixin, DayTableMixin, {
 
 	eventRendererClass: TimeGridEventRenderer,
+	fillRendererClass: StandardFillRenderer, // still ABSTRACT, but that's okay. used for utils.
 
 	view: null, // TODO: make more general and/or remove
 	helperRenderer: null,
@@ -588,7 +589,7 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 
 
 	renderBgEventSegs: function(segs) {
-		segs = this.fillSystem.buildSegEls('bgEvent', segs);
+		segs = this.fillRenderer.buildSegEls('bgEvent', segs);
 
 		this.updateSegVerticals(segs);
 		this.attachSegsByCol(this.groupSegsByCol(segs), this.bgContainerEls);
@@ -659,7 +660,7 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 		renderSegs: function(segs) {
 			var component = this.component;
 
-			segs = component.fillSystem.buildSegEls('businessHours', segs);
+			segs = component.fillRenderer.buildSegEls('businessHours', segs);
 
 			component.updateSegVerticals(segs);
 			component.attachSegsByCol(
@@ -717,9 +718,11 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 
 
 	renderHighlightSegs: function(segs) {
-		segs = this.fillSystem.buildSegEls('highlight', segs);
+		segs = this.fillRenderer.buildSegEls('highlight', segs);
+
 		this.updateSegVerticals(segs);
 		this.attachSegsByCol(this.groupSegsByCol(segs), this.highlightContainerEls);
+
 		this.highlightSegs = segs;
 	},
 

src/component/SegChronoComponentMixin.js

@@ -14,10 +14,11 @@ var SegChronoComponentMixin = {
 
 	eventRendererClass: EventRenderer,
 	businessHourRendererClass: null,
+	fillRendererClass: null, // subclasses MUST provide this
 
 	eventRenderer: null,
 	businessHourRenderer: null,
-	fillSystem: null,
+	fillRenderer: null,
 
 	bgSegs: null,
 	fgSegs: null,
@@ -30,7 +31,9 @@ var SegChronoComponentMixin = {
 			this.businessHourRenderer = new this.businessHourRendererClass(this);
 		}
 
-		this.fillSystem = new this.fillSystemClass(this);
+		if (this.fillRendererClass) {
+			this.fillRenderer = new this.fillRendererClass(this);
+		}
 	},
 
 
@@ -83,13 +86,19 @@ var SegChronoComponentMixin = {
 	renderBgEventSegs: function(segs) {
 		this.endInteractions(); // TODO: called too frequently
 
-		return this.fillSystem.render('bgEvent', segs);
+		if (this.fillRenderer) {
+			return this.fillRenderer.render('bgEvent', segs);
+		}
+
+		return [];
 	},
 
 
 	// Unrenders all the currently rendered background event segments
 	unrenderBgEventSegs: function() {
-		this.fillSystem.unrender('bgEvent');
+		if (this.fillRenderer) {
+			this.fillRenderer.unrender('bgEvent');
+		}
 	},
 
 
@@ -122,70 +131,18 @@ var SegChronoComponentMixin = {
 
 	// Renders an emphasis on the given date range. Given a span (unzoned start/end and other misc data)
 	renderHighlight: function(componentFootprint) {
-		this.fillSystem.render('highlight', this.componentFootprintToSegs(componentFootprint));
+		if (this.fillRenderer) {
+			this.fillRenderer.render('highlight', this.componentFootprintToSegs(componentFootprint));
+		}
 	},
 
 
 	// Unrenders the emphasis on a date range
 	unrenderHighlight: function() {
-		this.fillSystem.unrender('highlight');
-	},
-
-
-	/* Fill System
-	------------------------------------------------------------------------------------------------------------------*/
-
-
-	fillSystemClass: FillRenderer.extend({
-
-		eventRenderer: null,
-
-
-		constructor: function(component) {
-			FillRenderer.call(this);
-
-			this.eventRenderer = component.eventRenderer;
-		},
-
-
-		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.eventRenderer.filterEventRenderEl(seg.footprint, el);
-		},
-
-
-		// Generates an array of classNames to be used for the default rendering of a background event.
-		bgEventSegClasses: function(seg) {
-			return this.eventRenderer.getBgClasses(seg.footprint);
-		},
-
-
-		// Generates a semicolon-separated CSS string to be used for the default rendering of a background event.
-		bgEventSegCss: function(seg) {
-			return {
-				'background-color': this.eventRenderer.getSkinCss(seg.footprint)['background-color']
-			};
-		},
-
-
-		// Generates an array of classNames to be used for the rendering business hours overlay.
-		businessHoursSegClasses: function(seg) {
-			return [ 'fc-nonbusiness', 'fc-bgevent' ];
-		},
-
-
-		// Generates an array of classNames for rendering the highlight.
-		// USED BY THE FILL SYSTEM, FillRenderer::buildSegHtml
-		highlightSegClasses: function() {
-			return [ 'fc-highlight' ];
+		if (this.fillRenderer) {
+			this.fillRenderer.unrender('highlight');
 		}
-
-	}),
+	},
 
 
 	/* Converting componentFootprint/eventFootprint -> segs