rewrite fill system as a standalone object

src/common/DayGrid.js

@@ -91,7 +91,7 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 
 
 	unrenderBusinessHours: function() {
-		this.unrenderFill('businessHours');
+		this.fillSystem.unrender('businessHours');
 	},
 
 
@@ -452,7 +452,7 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 		var i, seg;
 		var skeletonEl;
 
-		segs = this.renderFillSegEls(type, segs); // assignes `.el` to each seg. returns successfully rendered segs
+		segs = this.fillSystem.buildSegEls(type, segs); // assignes `.el` to each seg. returns successfully rendered segs
 
 		for (i = 0; i < segs.length; i++) {
 			seg = segs[i];
@@ -461,12 +461,7 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 			nodes.push(skeletonEl[0]);
 		}
 
-		if (this.elsByFill[type]) {
-			this.elsByFill[type] = this.elsByFill[type].add(nodes);
-		}
-		else {
-			this.elsByFill[type] = $(nodes);
-		}
+		this.fillSystem.reportEls(type, nodes);
 
 		return segs;
 	},

src/common/FillSystemMixin.js

@@ -1,29 +1,35 @@
 
-/*
-Caller must:
-- call initFillSystem
-- implement renderFill
-*/
-var FillSystemMixin = { // use for highlight, background events, business hours
+var FillSystem = Class.extend({ // use for highlight, background events, business hours
 
+	component: null,
 	elsByFill: null, // a hash of jQuery element sets used for rendering each fill. Keyed by fill name.
 
 
-	initFillSystem: function() {
+	/*
+	component defines:
+		- fillSegTag (optional, defaults to 'div')
+		- *SegEl
+		- *SegClasses
+		- *SegCss
+	*/
+	constructor: function(component) {
+		this.component = component;
 		this.elsByFill = {};
 	},
 
 
-	// Renders a set of rectangles over the given segments of time.
-	// MUST RETURN a subset of segs, the segs that were actually rendered.
-	// Responsible for populating this.elsByFill. TODO: better API for expressing this requirement
-	renderFill: function(type, segs) {
-		// subclasses must implement
+	reportEls: function(type, nodes) {
+		if (this.elsByFill[type]) {
+			this.elsByFill[type] = this.elsByFill[type].add(nodes);
+		}
+		else {
+			this.elsByFill[type] = $(nodes);
+		}
 	},
 
 
 	// Unrenders a specific type of fill that is currently rendered on the grid
-	unrenderFill: function(type) {
+	unrender: function(type) {
 		var el = this.elsByFill[type];
 
 		if (el) {
@@ -35,11 +41,9 @@ var FillSystemMixin = { // use for highlight, background events, business hours
 
 	// Renders and assigns an `el` property for each fill segment. Generic enough to work with different types.
 	// Only returns segments that successfully rendered.
-	// To be harnessed by renderFill (implemented by subclasses).
-	// Analagous to renderFgSegEls.
-	renderFillSegEls: function(type, segs) {
-		var _this = this;
-		var segElMethod = this[type + 'SegEl'];
+	buildSegEls: function(type, segs) {
+		var component = this.component;
+		var segElMethod = component[type + 'SegEl'];
 		var html = '';
 		var renderedSegs = [];
 		var i;
@@ -48,7 +52,7 @@ var FillSystemMixin = { // use for highlight, background events, business hours
 
 			// build a large concatenation of segment HTML
 			for (i = 0; i < segs.length; i++) {
-				html += this.fillSegHtml(type, segs[i]);
+				html += this.buildSegHtml(type, segs[i]);
 			}
 
 			// Grab individual elements from the combined HTML string. Use each as the default rendering.
@@ -59,14 +63,14 @@ var FillSystemMixin = { // use for highlight, background events, business hours
 
 				// allow custom filter methods per-type
 				if (segElMethod) {
-					el = segElMethod.call(_this, seg, el);
+					el = segElMethod.call(component, seg, el);
 				}
 
 				if (el) { // custom filters did not cancel the render
 					el = $(el); // allow custom filter to return raw DOM node
 
 					// correct element type? (would be bad if a non-TD were inserted into a table for example)
-					if (el.is(_this.fillSegTag)) {
+					if (el.is(component.fillSegTag || 'div')) {
 						seg.el = el;
 						renderedSegs.push(seg);
 					}
@@ -78,23 +82,21 @@ var FillSystemMixin = { // use for highlight, background events, business hours
 	},
 
 
-	fillSegTag: 'div', // subclasses can override
-
-
 	// Builds the HTML needed for one fill segment. Generic enough to work with different types.
-	fillSegHtml: function(type, seg) {
+	buildSegHtml: function(type, seg) {
+		var component = this.component;
 
 		// custom hooks per-type
-		var classesMethod = this[type + 'SegClasses'];
-		var cssMethod = this[type + 'SegCss'];
+		var classesMethod = component[type + 'SegClasses'];
+		var cssMethod = component[type + 'SegCss'];
 
-		var classes = classesMethod ? classesMethod.call(this, seg) : [];
-		var css = cssToStr(cssMethod ? cssMethod.call(this, seg) : {});
+		var classes = classesMethod ? classesMethod.call(component, seg) : [];
+		var css = cssToStr(cssMethod ? cssMethod.call(component, seg) : {});
 
-		return '<' + this.fillSegTag +
+		return '<' + (component.fillSegTag || 'div') +
 			(classes.length ? ' class="' + classes.join(' ') + '"' : '') +
 			(css ? ' style="' + css + '"' : '') +
 			' />';
 	}
 
-};
+});

src/common/SegChronoComponentMixin.js

@@ -14,14 +14,16 @@ This mixin can depend on ChronoComponent:
 - eventRangesToEventFootprints
 - eventFootprintsToSegs
 */
-var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, FillSystemMixin, {
+var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, {
 
 	segs: null, // the *event* segments currently rendered in the grid. TODO: rename to `eventSegs`
+	fillSystem: null,
 
 
 	initSegChronoComponent: function() {
 		//this.initEventRenderingUtils(); // needs to happen after dates
-		this.initFillSystem();
+
+		this.fillSystem = new FillSystem(this);
 	},
 
 
@@ -77,6 +79,10 @@ var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, FillSystemM
 	},
 
 
+	renderFill: function() {
+	},
+
+
 	// Foreground Segment Rendering
 	// ---------------------------------------------------------------------------------------------------------------
 
@@ -151,26 +157,26 @@ var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, FillSystemM
 
 	// Unrenders all the currently rendered background event segments
 	unrenderBgSegs: function() {
-		this.unrenderFill('bgEvent');
+		this.fillSystem.unrender('bgEvent');
 	},
 
 
 	// Renders a background event element, given the default rendering. Called by the fill system.
-	// NEEDED BY FILL SYSTEM, renderFillSegEls :(
+	// NEEDED BY FILL SYSTEM, FillSystem::buildSegEls :(
 	bgEventSegEl: function(seg, el) {
 		return this.filterEventRenderEl(seg.footprint, el);
 	},
 
 
 	// Generates an array of classNames to be used for the default rendering of a background event.
-	// NEEDED BY FILL SYSTEM, fillSegHtml :(
+	// NEEDED BY FILL SYSTEM, FillSystem::buildSegHtml :(
 	bgEventSegClasses: function(seg) {
 		return this.getBgEventFootprintClasses(seg.footprint);
 	},
 
 
 	// Generates a semicolon-separated CSS string to be used for the default rendering of a background event.
-	// NEEDED BY FILL SYSTEM,  fillSegHtml :(
+	// NEEDED BY FILL SYSTEM,  FillSystem::buildSegHtml :(
 	bgEventSegCss: function(seg) {
 		return {
 			'background-color': this.getEventFootprintSkinCss(seg.footprint)['background-color']
@@ -228,7 +234,7 @@ var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, FillSystemM
 
 
 	// Generates an array of classNames to be used for the rendering business hours overlay.
-	// NEEDED BY FILL SYSTEM, fillSegHtml :(
+	// NEEDED BY FILL SYSTEM, FillSystem::buildSegHtml :(
 	businessHoursSegClasses: function(seg) {
 		return [ 'fc-nonbusiness', 'fc-bgevent' ];
 	},
@@ -246,12 +252,12 @@ var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, FillSystemM
 
 	// Unrenders the emphasis on a date range
 	unrenderHighlight: function() {
-		this.unrenderFill('highlight');
+		this.fillSystem.unrender('highlight');
 	},
 
 
 	// Generates an array of classNames for rendering the highlight.
-	// USED BY THE FILL SYSTEM, fillSegHtml
+	// USED BY THE FILL SYSTEM, FillSystem::buildSegHtml
 	highlightSegClasses: function() {
 		return [ 'fc-highlight' ];
 	},

src/common/TimeGrid.events.js

@@ -119,7 +119,7 @@ TimeGrid.mixin({
 
 
 	renderBgSegs: function(segs) {
-		segs = this.renderFillSegEls('bgEvent', segs); // TODO: old fill system
+		segs = this.fillSystem.buildSegEls('bgEvent', segs);
 		this.updateSegVerticals(segs);
 		this.attachSegsByCol(this.groupSegsByCol(segs), this.bgContainerEls);
 		this.bgSegs = segs;
@@ -137,7 +137,7 @@ TimeGrid.mixin({
 
 
 	renderHighlightSegs: function(segs) {
-		segs = this.renderFillSegEls('highlight', segs); // TODO: instead of calling renderFill directly
+		segs = this.fillSystem.buildSegEls('highlight', segs);
 		this.updateSegVerticals(segs);
 		this.attachSegsByCol(this.groupSegsByCol(segs), this.highlightContainerEls);
 		this.highlightSegs = segs;
@@ -154,7 +154,7 @@ TimeGrid.mixin({
 
 
 	renderBusinessSegs: function(segs) {
-		segs = this.renderFillSegEls('businessHours', segs); // TODO: instead of calling renderFill directly
+		segs = this.fillSystem.buildSegEls('businessHours', segs);
 		this.updateSegVerticals(segs);
 		this.attachSegsByCol(this.groupSegsByCol(segs), this.businessContainerEls);
 		this.businessSegs = segs;