put Grid fill methods into own file

src.json

@@ -21,6 +21,7 @@
     "common/MouseFollower.js",
     "common/ChronoComponent.js",
     "common/Grid.js",
+    "common/Grid.fill.js",
     "common/Grid.events.js",
     "common/DayTableMixin.js",
     "common/DayGrid.js",

src/common/Grid.fill.js

@@ -0,0 +1,107 @@
+
+Grid.mixin({
+
+	/* Fill System (highlight, background events, business hours)
+	--------------------------------------------------------------------------------------------------------------------
+	TODO: remove this system. like we did in TimeGrid
+	*/
+
+
+	elsByFill: null, // a hash of jQuery element sets used for rendering each fill. Keyed by fill name.
+
+
+	initFillInternals: function() {
+		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
+	},
+
+
+	// Unrenders a specific type of fill that is currently rendered on the grid
+	unrenderFill: function(type) {
+		var el = this.elsByFill[type];
+
+		if (el) {
+			el.remove();
+			delete this.elsByFill[type];
+		}
+	},
+
+
+	// 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'];
+		var html = '';
+		var renderedSegs = [];
+		var i;
+
+		if (segs.length) {
+
+			// build a large concatenation of segment HTML
+			for (i = 0; i < segs.length; i++) {
+				html += this.fillSegHtml(type, segs[i]);
+			}
+
+			// Grab individual elements from the combined HTML string. Use each as the default rendering.
+			// Then, compute the 'el' for each segment.
+			$(html).each(function(i, node) {
+				var seg = segs[i];
+				var el = $(node);
+
+				// allow custom filter methods per-type
+				if (segElMethod) {
+					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(_this.fillSegTag)) {
+						seg.el = el;
+						renderedSegs.push(seg);
+					}
+				}
+			});
+		}
+
+		return renderedSegs;
+	},
+
+
+	fillSegTag: 'div', // subclasses can override
+
+
+	// Builds the HTML needed for one fill segment. Generic enough to work with different types.
+	fillSegHtml: function(type, seg) {
+
+		// 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) : {});
+
+		return '<' + this.fillSegTag +
+			(classes.length ? ' class="' + classes.join(' ') + '"' : '') +
+			(css ? ' style="' + css + '"' : '') +
+			' />';
+	},
+
+
+	// Generates an array of classNames for rendering the highlight. Used by the fill system.
+	highlightSegClasses: function() {
+		return [ 'fc-highlight' ];
+	}
+
+});

src/common/Grid.js

@@ -13,8 +13,6 @@ var Grid = FC.Grid = ChronoComponent.extend({
 	start: null,
 	end: null,
 
-	elsByFill: null, // a hash of jQuery element sets used for rendering each fill. Keyed by fill name.
-
 	// derived from options
 	eventTimeFormat: null,
 	displayEventTime: null,
@@ -39,7 +37,7 @@ var Grid = FC.Grid = ChronoComponent.extend({
 
 		ChronoComponent.call(this);
 
-		this.elsByFill = {};
+		this.initFillInternals();
 
 		this.dayClickListener = this.buildDayClickListener();
 		this.daySelectListener = this.buildDaySelectListener();
@@ -548,102 +546,6 @@ var Grid = FC.Grid = ChronoComponent.extend({
 	// Unrenders the emphasis on a date range
 	unrenderHighlight: function() {
 		this.unrenderFill('highlight');
-	},
-
-
-	// Generates an array of classNames for rendering the highlight. Used by the fill system.
-	highlightSegClasses: function() {
-		return [ 'fc-highlight' ];
-	},
-
-
-	/* Fill System (highlight, background events, business hours)
-	--------------------------------------------------------------------------------------------------------------------
-	TODO: remove this system. like we did in TimeGrid
-	*/
-
-
-	// 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
-	},
-
-
-	// Unrenders a specific type of fill that is currently rendered on the grid
-	unrenderFill: function(type) {
-		var el = this.elsByFill[type];
-
-		if (el) {
-			el.remove();
-			delete this.elsByFill[type];
-		}
-	},
-
-
-	// 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'];
-		var html = '';
-		var renderedSegs = [];
-		var i;
-
-		if (segs.length) {
-
-			// build a large concatenation of segment HTML
-			for (i = 0; i < segs.length; i++) {
-				html += this.fillSegHtml(type, segs[i]);
-			}
-
-			// Grab individual elements from the combined HTML string. Use each as the default rendering.
-			// Then, compute the 'el' for each segment.
-			$(html).each(function(i, node) {
-				var seg = segs[i];
-				var el = $(node);
-
-				// allow custom filter methods per-type
-				if (segElMethod) {
-					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(_this.fillSegTag)) {
-						seg.el = el;
-						renderedSegs.push(seg);
-					}
-				}
-			});
-		}
-
-		return renderedSegs;
-	},
-
-
-	fillSegTag: 'div', // subclasses can override
-
-
-	// Builds the HTML needed for one fill segment. Generic enough to work with different types.
-	fillSegHtml: function(type, seg) {
-
-		// 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) : {});
-
-		return '<' + this.fillSegTag +
-			(classes.length ? ' class="' + classes.join(' ') + '"' : '') +
-			(css ? ' style="' + css + '"' : '') +
-			' />';
 	}
 
 });