move away from FillSystem delegate, to subclassing

src/common/DayGrid.js

@@ -442,7 +442,9 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 	------------------------------------------------------------------------------------------------------------------*/
 
 
-	fillSegTag: 'td', // override the default tag name
+	fillSystemClass: SegChronoComponentMixin.fillSystemClass.extend({
+		fillSegTag: 'td' // override the default tag name
+	}),
 
 
 	// Renders a set of rectangles over the given segments of days.

src/common/FillSystem.js

@@ -1,19 +1,11 @@
 
 var FillSystem = Class.extend({ // use for highlight, background events, business hours
 
-	delegate: null,
+	fillSegTag: 'div',
 	elsByFill: null, // a hash of jQuery element sets used for rendering each fill. Keyed by fill name.
 
 
-	/*
-	delegate defines:
-		- fillSegTag (optional, defaults to 'div')
-		- *SegEl
-		- *SegClasses
-		- *SegCss
-	*/
-	constructor: function(delegate) {
-		this.delegate = delegate;
+	constructor: function() {
 		this.elsByFill = {};
 	},
 
@@ -42,8 +34,8 @@ var FillSystem = Class.extend({ // use for highlight, background events, busines
 	// Renders and assigns an `el` property for each fill segment. Generic enough to work with different types.
 	// Only returns segments that successfully rendered.
 	buildSegEls: function(type, segs) {
-		var delegate = this.delegate;
-		var segElMethod = delegate[type + 'SegEl'];
+		var _this = this;
+		var segElMethod = this[type + 'SegEl'];
 		var html = '';
 		var renderedSegs = [];
 		var i;
@@ -63,14 +55,14 @@ var FillSystem = Class.extend({ // use for highlight, background events, busines
 
 				// allow custom filter methods per-type
 				if (segElMethod) {
-					el = segElMethod.call(delegate, seg, el);
+					el = segElMethod.call(_this, 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(delegate.fillSegTag || 'div')) {
+					if (el.is(_this.fillSegTag)) {
 						seg.el = el;
 						renderedSegs.push(seg);
 					}
@@ -84,16 +76,14 @@ var FillSystem = Class.extend({ // use for highlight, background events, busines
 
 	// Builds the HTML needed for one fill segment. Generic enough to work with different types.
 	buildSegHtml: function(type, seg) {
-		var delegate = this.delegate;
-
 		// custom hooks per-type
-		var classesMethod = delegate[type + 'SegClasses'];
-		var cssMethod = delegate[type + 'SegCss'];
+		var classesMethod = this[type + 'SegClasses'];
+		var cssMethod = this[type + 'SegCss'];
 
-		var classes = classesMethod ? classesMethod.call(delegate, seg) : [];
-		var css = cssToStr(cssMethod ? cssMethod.call(delegate, seg) : {});
+		var classes = classesMethod ? classesMethod.call(this, seg) : [];
+		var css = cssToStr(cssMethod ? cssMethod.call(this, seg) : {});
 
-		return '<' + (delegate.fillSegTag || 'div') +
+		return '<' + this.fillSegTag +
 			(classes.length ? ' class="' + classes.join(' ') + '"' : '') +
 			(css ? ' style="' + css + '"' : '') +
 			' />';

src/common/SegChronoComponentMixin.js

@@ -22,7 +22,7 @@ var SegChronoComponentMixin = {
 
 	initSegChronoComponent: function() {
 		this.eventRenderUtils = new EventRenderUtils(this);
-		this.fillSystem = new FillSystem(this);
+		this.fillSystem = new this.fillSystemClass(this);
 	},
 
 
@@ -78,11 +78,6 @@ var SegChronoComponentMixin = {
 	},
 
 
-	renderFill: function() {
-		// must implement
-	},
-
-
 	// Foreground Segment Rendering
 	// ---------------------------------------------------------------------------------------------------------------
 
@@ -161,29 +156,6 @@ var SegChronoComponentMixin = {
 	},
 
 
-	// Renders a background event element, given the default rendering. Called by the fill system.
-	// NEEDED BY FILL SYSTEM, FillSystem::buildSegEls :(
-	bgEventSegEl: function(seg, el) {
-		return this.eventRenderUtils.filterEventRenderEl(seg.footprint, el);
-	},
-
-
-	// Generates an array of classNames to be used for the default rendering of a background event.
-	// NEEDED BY FILL SYSTEM, FillSystem::buildSegHtml :(
-	bgEventSegClasses: function(seg) {
-		return this.eventRenderUtils.getBgClasses(seg.footprint);
-	},
-
-
-	// Generates a semicolon-separated CSS string to be used for the default rendering of a background event.
-	// NEEDED BY FILL SYSTEM,  FillSystem::buildSegHtml :(
-	bgEventSegCss: function(seg) {
-		return {
-			'background-color': this.eventRenderUtils.getSkinCss(seg.footprint)['background-color']
-		};
-	},
-
-
 	/* Business Hours
 	------------------------------------------------------------------------------------------------------------------*/
 
@@ -233,13 +205,6 @@ var SegChronoComponentMixin = {
 	},
 
 
-	// Generates an array of classNames to be used for the rendering business hours overlay.
-	// NEEDED BY FILL SYSTEM, FillSystem::buildSegHtml :(
-	businessHoursSegClasses: function(seg) {
-		return [ 'fc-nonbusiness', 'fc-bgevent' ];
-	},
-
-
 	/* Implement Highlight
 	------------------------------------------------------------------------------------------------------------------*/
 
@@ -256,13 +221,61 @@ var SegChronoComponentMixin = {
 	},
 
 
-	// Generates an array of classNames for rendering the highlight.
-	// USED BY THE FILL SYSTEM, FillSystem::buildSegHtml
-	highlightSegClasses: function() {
-		return [ 'fc-highlight' ];
+	/* Fill System
+	------------------------------------------------------------------------------------------------------------------*/
+
+
+	renderFill: function() {
+		// must implement
 	},
 
 
+	fillSystemClass: FillSystem.extend({
+
+		eventRenderUtils: null,
+
+
+		constructor: function(component) {
+			FillSystem.call(this);
+			this.eventRenderUtils = component.eventRenderUtils;
+		},
+
+
+		// 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);
+		},
+
+
+		// Generates an array of classNames to be used for the default rendering of a background event.
+		bgEventSegClasses: function(seg) {
+			return this.eventRenderUtils.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.eventRenderUtils.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, FillSystem::buildSegHtml
+		highlightSegClasses: function() {
+			return [ 'fc-highlight' ];
+		}
+
+	}),
+
+
 	/* Utils
 	------------------------------------------------------------------------------------------------------------------*/