take power away from fillrenderer

src.json

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

src/common/DayGrid.js

@@ -398,19 +398,7 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(DayTableMixin, {
 
 
 	businessHourRendererClass: BusinessHourRenderer.extend({
-
-		isWholeDay: true,
-
-
-		renderSegs: function(segs) {
-			this.component.fillRenderer.render('businessHours', segs, 'bgevent');
-		},
-
-
-		unrender: function() {
-			this.component.fillRenderer.unrender('businessHours');
-		}
-
+		isWholeDay: true // TODO: config param on component?
 	}),
 
 
@@ -418,27 +406,27 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(DayTableMixin, {
 	------------------------------------------------------------------------------------------------------------------*/
 
 
-	fillRendererClass: StandardFillRenderer.extend({
+	fillRendererClass: FillRenderer.extend({ // TODO: move to separate file?
 
 		fillSegTag: 'td', // override the default tag name
 		dayGrid: null,
 
 
 		constructor: function(dayGrid) {
-			StandardFillRenderer.call(this, dayGrid);
+			FillRenderer.call(this, dayGrid);
 
 			this.dayGrid = dayGrid;
 		},
 
 
-		attachSegEls: function(type, segs, className) {
+		attachSegEls: function(type, segs) {
 			var nodes = [];
 			var i, seg;
 			var skeletonEl;
 
 			for (i = 0; i < segs.length; i++) {
 				seg = segs[i];
-				skeletonEl = this.renderFillRow(type, seg, className);
+				skeletonEl = this.renderFillRow(type, seg);
 				this.dayGrid.rowEls.eq(seg.row).append(skeletonEl);
 				nodes.push(skeletonEl[0]);
 			}
@@ -448,14 +436,20 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(DayTableMixin, {
 
 
 		// Generates the HTML needed for one row of a fill. Requires the seg's el to be rendered.
-		renderFillRow: function(type, seg, className) {
+		renderFillRow: function(type, seg) {
 			var colCnt = this.dayGrid.colCnt;
 			var startCol = seg.leftCol;
 			var endCol = seg.rightCol + 1;
+			var className;
 			var skeletonEl;
 			var trEl;
 
-			className = className || type.toLowerCase();
+			if (type === 'businessHours') {
+				className = 'bgevent';
+			}
+			else {
+				className = type.toLowerCase();
+			}
 
 			skeletonEl = $(
 				'<div class="fc-' + className + '-skeleton">' +

src/common/TimeGrid.js

@@ -6,6 +6,7 @@
 var TimeGrid = FC.TimeGrid = ChronoComponent.extend(DayTableMixin, {
 
 	eventRendererClass: TimeGridEventRenderer,
+	businessHourRendererClass: BusinessHourRenderer,
 	helperRendererClass: TimeGridHelperRenderer,
 	fillRendererClass: TimeGridFillRenderer,
 
@@ -617,27 +618,6 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(DayTableMixin, {
 	},
 
 
-	/* Business Hours
-	------------------------------------------------------------------------------------------------------------------*/
-
-
-	businessHourRendererClass: BusinessHourRenderer.extend({
-
-		isWholeDay: false,
-
-
-		renderSegs: function(segs) {
-			this.component.fillRenderer.render('businessHours', segs);
-		},
-
-
-		unrender: function() {
-			this.component.fillRenderer.unrender('businessHours');
-		}
-
-	}),
-
-
 	/* Selection
 	------------------------------------------------------------------------------------------------------------------*/
 

src/common/TimeGridFillRenderer.js

@@ -1,5 +1,5 @@
 
-var TimeGridFillRenderer = StandardFillRenderer.extend({
+var TimeGridFillRenderer = FillRenderer.extend({
 
 	timeGrid: null,
 
@@ -11,7 +11,7 @@ var TimeGridFillRenderer = StandardFillRenderer.extend({
 	},
 
 
-	attachSegEls: function(type, segs, className) {
+	attachSegEls: function(type, segs) {
 		var timeGrid = this.timeGrid;
 		var containerEls;
 

src/component/BusinessHourRenderer.js

@@ -2,7 +2,9 @@
 var BusinessHourRenderer = Class.extend({
 
 	isWholeDay: false, // subclasses can config
+
 	component: null,
+	fillRenderer: null,
 
 
 	/*
@@ -12,6 +14,7 @@ var BusinessHourRenderer = Class.extend({
 	*/
 	constructor: function(component) {
 		this.component = component;
+		this.fillRenderer = component.fillRenderer;
 	},
 
 
@@ -29,12 +32,20 @@ var BusinessHourRenderer = Class.extend({
 
 
 	renderSegs: function(segs) {
-		// subclasses must implement
+		if (this.fillRenderer) {
+			this.fillRenderer.render('businessHours', segs, {
+				getClasses: function(seg) {
+					return [ 'fc-nonbusiness', 'fc-bgevent' ];
+				}
+			});
+		}
 	},
 
 
 	unrender: function() {
-		// subclasses must implement
+		if (this.fillRenderer) {
+			this.fillRenderer.unrender('businessHours');
+		}
 	},
 
 

src/component/ChronoComponent.js

@@ -58,10 +58,14 @@ var ChronoComponent = Model.extend({
 			this.eventRenderer = new this.eventRendererClass(this);
 		}
 
+		// NOTE: this.eventRenderer needs to already be assigned!
+		// TODO: make ordering not matter
 		if (this.helperRendererClass) {
 			this.helperRenderer = new this.helperRendererClass(this);
 		}
 
+		// NOTE: this.fillRenderer needs to already be assigned!
+		// TODO: make ordering not matter
 		if (this.businessHourRendererClass) {
 			this.businessHourRenderer = new this.businessHourRendererClass(this);
 		}
@@ -608,7 +612,15 @@ var ChronoComponent = Model.extend({
 	// Renders an emphasis on the given date range. Given a span (unzoned start/end and other misc data)
 	renderHighlight: function(componentFootprint) {
 		if (this.fillRenderer) {
-			this.fillRenderer.render('highlight', this.componentFootprintToSegs(componentFootprint));
+			this.fillRenderer.render(
+				'highlight',
+				this.componentFootprintToSegs(componentFootprint),
+				{
+					getClasses: function() {
+						return [ 'fc-highlight' ];
+					}
+				}
+			);
 		}
 
 		this.callChildren('renderHighlight', componentFootprint);

src/component/EventRenderer.js

@@ -106,8 +106,22 @@ var EventRenderer = Class.extend({
 
 
 	renderBgSegs: function(segs) {
+		var _this = this;
+
 		if (this.fillRenderer) {
-			this.fillRenderer.render('bgEvent', segs);
+			this.fillRenderer.render('bgEvent', segs, {
+				getClasses: function(seg) {
+					return _this.getBgClasses(seg.footprint);
+				},
+				getCss: function(seg) {
+					return {
+						'background-color': _this.getBgColor(seg.footprint)
+					};
+				},
+				filterEl: function(seg, el) {
+					return _this.filterEventRenderEl(seg.footprint, el);
+				}
+			});
 		}
 		else {
 			return false; // signal failure if no fillRenderer

src/component/FillRenderer.js

@@ -10,10 +10,10 @@ var FillRenderer = Class.extend({ // use for highlight, background events, busin
 	},
 
 
-	render: function(type, segs, className) {
-		segs = this.buildSegEls(type, segs); // assignes `.el` to each seg. returns successfully rendered segs
+	render: function(type, segs, props) {
+		segs = this.buildSegEls(type, segs, props); // assignes `.el` to each seg. returns successfully rendered segs
 
-		this.reportEls(type, this.attachSegEls(type, segs, className));
+		this.reportEls(type, this.attachSegEls(type, segs));
 
 		return segs;
 	},
@@ -32,9 +32,8 @@ var FillRenderer = Class.extend({ // use for highlight, background events, busin
 
 	// 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) {
+	buildSegEls: function(type, segs, props) {
 		var _this = this;
-		var segElMethod = this[type + 'SegEl'];
 		var html = '';
 		var renderedSegs = [];
 		var i;
@@ -43,7 +42,7 @@ var FillRenderer = Class.extend({ // use for highlight, background events, busin
 
 			// build a large concatenation of segment HTML
 			for (i = 0; i < segs.length; i++) {
-				html += this.buildSegHtml(type, segs[i]);
+				html += this.buildSegHtml(type, segs[i], props);
 			}
 
 			// Grab individual elements from the combined HTML string. Use each as the default rendering.
@@ -53,8 +52,8 @@ var FillRenderer = Class.extend({ // use for highlight, background events, busin
 				var el = $(node);
 
 				// allow custom filter methods per-type
-				if (segElMethod) {
-					el = segElMethod.call(_this, seg, el);
+				if (props.filterEl) {
+					el = props.filterEl(seg, el);
 				}
 
 				if (el) { // custom filters did not cancel the render
@@ -74,13 +73,10 @@ var FillRenderer = Class.extend({ // use for highlight, background events, busin
 
 
 	// Builds the HTML needed for one fill segment. Generic enough to work with different types.
-	buildSegHtml: function(type, seg) {
+	buildSegHtml: function(type, seg, props) {
 		// custom hooks per-type
-		var classesMethod = this[type + 'SegClasses'];
-		var cssMethod = this[type + 'SegCss'];
-
-		var classes = classesMethod ? classesMethod.call(this, seg) : [];
-		var css = cssToStr(cssMethod ? cssMethod.call(this, seg) : {});
+		var classes = props.getClasses ? props.getClasses(seg) : [];
+		var css = cssToStr(props.getCss ? props.getCss(seg) : {});
 
 		return '<' + this.fillSegTag +
 			(classes.length ? ' class="' + classes.join(' ') + '"' : '') +
@@ -90,7 +86,7 @@ var FillRenderer = Class.extend({ // use for highlight, background events, busin
 
 
 	// Should return wrapping DOM structure
-	attachSegEls: function(type, segs, className) {
+	attachSegEls: function(type, segs) {
 		// subclasses must implement
 	},
 

src/component/StandardFillRenderer.js

@@ -1,49 +0,0 @@
-
-/*
-subclasses MUST implement attachSegEls
-*/
-var StandardFillRenderer = FillRenderer.extend({
-
-	eventRenderer: null,
-
-
-	constructor: function(component) {
-		FillRenderer.call(this);
-
-		this.eventRenderer = component.eventRenderer;
-	},
-
-
-	// 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' ];
-	}
-
-});