move SegChronoComponentMixin into ChronoComponent

src.json

@@ -36,7 +36,6 @@
     "component/StandardFillRenderer.js",
     "component/HelperRenderer.js",
     "component/ChronoComponent.js",
-    "component/SegChronoComponentMixin.js",
     "common/DayGridEventRenderer.js",
     "common/DayGridHelperRenderer.js",
     "common/DayGrid.js",

src/common/DayGrid.js

@@ -2,8 +2,9 @@
 /* A component that renders a grid of whole-days that runs horizontally. There can be multiple rows, one per week.
 ----------------------------------------------------------------------------------------------------------------------*/
 
-var DayGrid = FC.DayGrid = ChronoComponent.extend(SegChronoComponentMixin, DayTableMixin, {
+var DayGrid = FC.DayGrid = ChronoComponent.extend(DayTableMixin, {
 
+	helperRendererClass: DayGridHelperRenderer,
 	dateClickingClass: DateClicking,
 	dateSelectingClass: DateSelecting,
 	eventRendererClass: DayGridEventRenderer,
@@ -29,12 +30,6 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(SegChronoComponentMixin, DayTa
 		this.view = view; // do first, for opt calls during initialization
 
 		ChronoComponent.apply(this, arguments);
-
-		// a requirement for SegChronoComponentMixin. TODO: more elegant
-		this.initSegChronoComponent();
-
-		// must happen after eventRender initialized in initSegChronoComponent
-		this.helperRenderer = new DayGridHelperRenderer(this);
 	},
 
 
@@ -329,7 +324,7 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(SegChronoComponentMixin, DayTa
 			return eventFootprint.componentFootprint.isAllDay;
 		});
 
-		return SegChronoComponentMixin.renderBgEventFootprints.call(this, allDayEventFootprints);
+		return ChronoComponent.prototype.renderBgEventFootprints.call(this, allDayEventFootprints);
 	},
 
 
@@ -343,7 +338,7 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(SegChronoComponentMixin, DayTa
 
 	// Retrieves all rendered segment objects currently rendered on the grid
 	getEventSegs: function() {
-		return SegChronoComponentMixin.getEventSegs.call(this) // get the segments from the super-method
+		return ChronoComponent.prototype.getEventSegs.call(this) // get the segments from the super-method
 			.concat(this.popoverSegs || []); // append the segments from the "more..." popover
 	},
 

src/common/TimeGrid.js

@@ -3,9 +3,10 @@
 ----------------------------------------------------------------------------------------------------------------------*/
 // We mixin DayTable, even though there is only a single row of days
 
-var TimeGrid = FC.TimeGrid = ChronoComponent.extend(SegChronoComponentMixin, DayTableMixin, {
+var TimeGrid = FC.TimeGrid = ChronoComponent.extend(DayTableMixin, {
 
 	eventRendererClass: TimeGridEventRenderer,
+	helperRendererClass: TimeGridHelperRenderer,
 	fillRendererClass: StandardFillRenderer, // still ABSTRACT, but that's okay. used for utils.
 
 	dateClickingClass: DateClicking,
@@ -53,12 +54,6 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(SegChronoComponentMixin, Day
 
 		ChronoComponent.apply(this, arguments); // call the super-constructor
 
-		// a requirement for SegChronoComponentMixin
-		this.initSegChronoComponent();
-
-		// must happen after eventRender initialized in initSegChronoComponent
-		this.helperRenderer = new TimeGridHelperRenderer(this);
-
 		this.processOptions();
 	},
 

src/component/ChronoComponent.js

@@ -7,6 +7,10 @@ var ChronoComponent = Model.extend({
 	isRTL: false, // frequently accessed options
 	nextDayThreshold: null, // "
 
+	eventRendererClass: null,
+	helperRendererClass: null,
+	businessHourRendererClass: null,
+	fillRendererClass: null,
 	dateClickingClass: null,
 	dateSelectingClass: null,
 	eventPointingClass: null,
@@ -14,6 +18,10 @@ var ChronoComponent = Model.extend({
 	eventResizingClass: null,
 	externalDroppingClass: null,
 
+	eventRenderer: null,
+	helperRenderer: null,
+	businessHourRenderer: null,
+	fillRenderer: null,
 	dateClicking: null,
 	dateSelecting: null,
 	eventPointing: null,
@@ -21,6 +29,9 @@ var ChronoComponent = Model.extend({
 	eventResizing: null,
 	externalDropping: null,
 
+	bgSegs: null,
+	fgSegs: null,
+
 	// self-config, overridable by subclasses
 	segSelector: '.fc-event-container > *', // what constitutes an event element?
 
@@ -39,6 +50,46 @@ var ChronoComponent = Model.extend({
 
 		this.nextDayThreshold = moment.duration(this.opt('nextDayThreshold'));
 		this.isRTL = this.opt('isRTL');
+
+		if (this.eventRendererClass) {
+			this.eventRenderer = new this.eventRendererClass(this);
+		}
+
+		if (this.helperRendererClass) {
+			this.helperRenderer = new this.helperRendererClass(this);
+		}
+
+		if (this.businessHourRendererClass) {
+			this.businessHourRenderer = new this.businessHourRendererClass(this);
+		}
+
+		if (this.fillRendererClass) {
+			this.fillRenderer = new this.fillRendererClass(this);
+		}
+
+		if (this.dateSelectingClass) {
+			this.dateClicking = new this.dateClickingClass(this);
+		}
+
+		if (this.dateSelectingClass) {
+			this.dateSelecting = new this.dateSelectingClass(this);
+		}
+
+		if (this.eventPointingClass) {
+			this.eventPointing = new this.eventPointingClass(this);
+		}
+
+		if (this.eventDraggingClass) {
+			this.eventDragging = new this.eventDraggingClass(this);
+		}
+
+		if (this.eventResizingClass) {
+			this.eventResizing = new this.eventResizingClass(this);
+		}
+
+		if (this.externalDroppingClass) {
+			this.externalDropping = new this.externalDroppingClass(this);
+		}
 	},
 
 
@@ -78,36 +129,17 @@ var ChronoComponent = Model.extend({
 	// and renders all the non-date-related content inside.
 	setElement: function(el) {
 		this.el = el;
+		this.bindGlobalHandlers();
 
-		if (this.dateSelectingClass) {
-			(this.dateClicking = new this.dateClickingClass(this))
-				.bindToEl(this.el);
-		}
-
-		if (this.dateSelectingClass) {
-			(this.dateSelecting = new this.dateSelectingClass(this))
-				.bindToEl(this.el);
-		}
-
-		if (this.eventPointingClass) {
-			this.eventPointing = new this.eventPointingClass(this);
-		}
-
-		if (this.eventDraggingClass) {
-			this.eventDragging = new this.eventDraggingClass(this);
-		}
-
-		if (this.eventResizingClass) {
-			this.eventResizing = new this.eventResizingClass(this);
+		if (this.dateClicking) {
+			this.dateClicking.bindToEl(this.el);
 		}
 
-		if (this.externalDroppingClass) {
-			this.externalDropping = new this.externalDroppingClass(this);
+		if (this.dateSelecting) {
+			this.dateSelecting.bindToEl(this.el);
 		}
 
-		this.bindGlobalHandlers();
 		this.bindAllSegHandlersToEl(this.el);
-
 		this.renderSkeleton();
 	},
 
@@ -201,12 +233,20 @@ var ChronoComponent = Model.extend({
 
 	// Renders business-hours onto the view. Assumes updateSize has already been called.
 	renderBusinessHours: function() {
+		if (this.businessHourRenderer) {
+			this.businessHourRenderer.render(); // TODO: eventually pass-in eventFootprints
+		}
+
 		this.callChildren('renderBusinessHours');
 	},
 
 
 	// Unrenders previously-rendered business-hours
 	unrenderBusinessHours: function() {
+		if (this.businessHourRenderer) {
+			this.businessHourRenderer.unrender();
+		}
+
 		this.callChildren('unrenderBusinessHours');
 	},
 
@@ -253,32 +293,87 @@ var ChronoComponent = Model.extend({
 	},
 
 
-	renderFgEventFootprints: function(segs) {
-		this.callChildren('renderFgEventFootprints', segs);
+	renderFgEventFootprints: function(eventFootprints) {
+		var segs = this.eventFootprintsToSegs(eventFootprints);
+
+		this.fgSegs = this.renderFgEventSegs(segs) || segs;
+
+		this.callChildren('renderFgEventFootprints', eventFootprints);
 	},
 
 
-	renderBgEventFootprints: function(segs) {
-		this.callChildren('renderBgEventFootprints', segs);
+	renderBgEventFootprints: function(eventFootprints) {
+		var segs = this.eventFootprintsToSegs(eventFootprints);
+
+		this.bgSegs = this.renderBgEventSegs(segs) || segs;
+
+		this.callChildren('renderBgEventFootprints', eventFootprints);
 	},
 
 
 	// Removes event elements from the view.
 	unrenderFgEventFootprints: function() {
+		this.unrenderFgEventSegs();
+		this.fgSegs = null;
+
 		this.callChildren('unrenderFgEventFootprints');
 	},
 
 
 	// Removes event elements from the view.
 	unrenderBgEventFootprints: function() {
+		this.unrenderBgEventSegs();
+		this.bgSegs = null;
+
 		this.callChildren('unrenderBgEventFootprints');
 	},
 
 
+	// Renders foreground event segments onto the grid. May return a subset of segs that were rendered.
+	renderFgEventSegs: function(segs) {
+		if (this.eventRenderer) {
+			return this.eventRenderer.renderFgSegs(segs);
+		}
+
+		return [];
+	},
+
+
+	// Unrenders all currently rendered foreground segments
+	unrenderFgEventSegs: function() {
+		this.endInteractions(); // TODO: called too frequently
+
+		if (this.eventRenderer) {
+			this.eventRenderer.unrenderFgSegs();
+		}
+	},
+
+
+	// Renders the given background event segments onto the grid.
+	// Returns a subset of the segs that were actually rendered.
+	renderBgEventSegs: function(segs) {
+		this.endInteractions(); // TODO: called too frequently
+
+		if (this.fillRenderer) {
+			return this.fillRenderer.render('bgEvent', segs);
+		}
+
+		return [];
+	},
+
+
+	// Unrenders all the currently rendered background event segments
+	unrenderBgEventSegs: function() {
+		if (this.fillRenderer) {
+			this.fillRenderer.unrender('bgEvent');
+		}
+	},
+
+
 	// Retrieves all segment objects that are rendered in the view
 	getEventSegs: function() {
+		var segs = (this.bgSegs || []).concat(this.fgSegs || []);
 		var children = this.children;
-		var segs = [];
 		var i;
 
 		for (i = 0; i < children.length; i++) {
@@ -540,13 +635,27 @@ var ChronoComponent = Model.extend({
 	},
 
 
+	// Highlight
+	// ---------------------------------------------------------------------------------------------------------------
+
+
 	// 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.callChildren('renderHighlight', componentFootprint);
 	},
 
 
 	// Unrenders the emphasis on a date range
 	unrenderHighlight: function() {
+		if (this.fillRenderer) {
+			this.fillRenderer.unrender('highlight');
+		}
+
+		this.callChildren('unrenderHighlight');
 	},
 
 
@@ -842,6 +951,62 @@ var ChronoComponent = Model.extend({
 	},
 
 
+	/* Converting componentFootprint/eventFootprint -> segs
+	------------------------------------------------------------------------------------------------------------------*/
+
+
+	eventFootprintsToSegs: function(eventFootprints) {
+		var segs = [];
+		var i;
+
+		for (i = 0; i < eventFootprints.length; i++) {
+			segs.push.apply(segs,
+				this.eventFootprintToSegs(eventFootprints[i])
+			);
+		}
+
+		return segs;
+	},
+
+
+	// Given an event's span (unzoned start/end and other misc data), and the event itself,
+	// slices into segments and attaches event-derived properties to them.
+	// eventSpan - { start, end, isStart, isEnd, otherthings... }
+	// constraintRange allow additional clipping. optional. eventually remove this.
+	eventFootprintToSegs: function(eventFootprint, constraintRange) {
+		var unzonedRange = eventFootprint.componentFootprint.unzonedRange;
+		var segs;
+		var i, seg;
+
+		if (constraintRange) {
+			unzonedRange = unzonedRange.intersect(constraintRange);
+		}
+
+		segs = this.componentFootprintToSegs(eventFootprint.componentFootprint);
+
+		for (i = 0; i < segs.length; i++) {
+			seg = segs[i];
+
+			if (!unzonedRange.isStart) {
+				seg.isStart = false;
+			}
+			if (!unzonedRange.isEnd) {
+				seg.isEnd = false;
+			}
+
+			seg.footprint = eventFootprint;
+			// TODO: rename to seg.eventFootprint
+		}
+
+		return segs;
+	},
+
+
+	componentFootprintToSegs: function(componentFootprint) {
+		return [];
+	},
+
+
 	// Date Utils
 	// ---------------------------------------------------------------------------------------------------------------
 

src/component/SegChronoComponentMixin.js

@@ -1,203 +0,0 @@
-
-/*
-Caller must:
-- call initSegChronoComponent
-- implement componentFootprintToSegs
-
-This mixin can depend on ChronoComponent:
-- opt
-- _getView
-- eventRangesToEventFootprints
-- eventFootprintsToSegs
-*/
-var SegChronoComponentMixin = {
-
-	eventRendererClass: EventRenderer,
-	businessHourRendererClass: null,
-	fillRendererClass: null, // subclasses MUST provide this
-
-	eventRenderer: null,
-	businessHourRenderer: null,
-	fillRenderer: null,
-
-	bgSegs: null,
-	fgSegs: null,
-
-
-	initSegChronoComponent: function() {
-		this.eventRenderer = new this.eventRendererClass(this);
-
-		if (this.businessHourRendererClass) {
-			this.businessHourRenderer = new this.businessHourRendererClass(this);
-		}
-
-		if (this.fillRendererClass) {
-			this.fillRenderer = new this.fillRendererClass(this);
-		}
-	},
-
-
-	// Event Rendering
-	// ---------------------------------------------------------------------------------------------------------------
-
-
-	renderFgEventFootprints: function(eventFootprints) {
-		var segs = this.eventFootprintsToSegs(eventFootprints);
-
-		this.fgSegs = this.renderFgEventSegs(segs) || segs;
-	},
-
-
-	renderBgEventFootprints: function(eventFootprints) {
-		var segs = this.eventFootprintsToSegs(eventFootprints);
-
-		this.bgSegs = this.renderBgEventSegs(segs) || segs;
-	},
-
-
-	unrenderFgEventFootprints: function() {
-		this.unrenderFgEventSegs();
-		this.fgSegs = null;
-	},
-
-
-	unrenderBgEventFootprints: function() {
-		this.unrenderBgEventSegs();
-		this.bgSegs = null;
-	},
-
-
-	// Renders foreground event segments onto the grid. May return a subset of segs that were rendered.
-	renderFgEventSegs: function(segs) {
-		return this.eventRenderer.renderFgSegs(segs);
-	},
-
-
-	// Unrenders all currently rendered foreground segments
-	unrenderFgEventSegs: function() {
-		this.endInteractions(); // TODO: called too frequently
-
-		this.eventRenderer.unrenderFgSegs();
-	},
-
-
-	// Renders the given background event segments onto the grid.
-	// Returns a subset of the segs that were actually rendered.
-	renderBgEventSegs: function(segs) {
-		this.endInteractions(); // TODO: called too frequently
-
-		if (this.fillRenderer) {
-			return this.fillRenderer.render('bgEvent', segs);
-		}
-
-		return [];
-	},
-
-
-	// Unrenders all the currently rendered background event segments
-	unrenderBgEventSegs: function() {
-		if (this.fillRenderer) {
-			this.fillRenderer.unrender('bgEvent');
-		}
-	},
-
-
-	getEventSegs: function() {
-		return (this.bgSegs || []).concat(this.fgSegs || []);
-	},
-
-
-	/* Business Hours
-	------------------------------------------------------------------------------------------------------------------*/
-
-
-	renderBusinessHours: function() {
-		if (this.businessHourRenderer) {
-			this.businessHourRenderer.render(); // TODO: eventually pass-in eventFootprints
-		}
-	},
-
-
-	unrenderBusinessHours: function() {
-		if (this.businessHourRenderer) {
-			this.businessHourRenderer.unrender();
-		}
-	},
-
-
-	/* Implement Highlight
-	------------------------------------------------------------------------------------------------------------------*/
-
-
-	// 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));
-		}
-	},
-
-
-	// Unrenders the emphasis on a date range
-	unrenderHighlight: function() {
-		if (this.fillRenderer) {
-			this.fillRenderer.unrender('highlight');
-		}
-	},
-
-
-	/* Converting componentFootprint/eventFootprint -> segs
-	------------------------------------------------------------------------------------------------------------------*/
-
-
-	eventFootprintsToSegs: function(eventFootprints) {
-		var segs = [];
-		var i;
-
-		for (i = 0; i < eventFootprints.length; i++) {
-			segs.push.apply(segs,
-				this.eventFootprintToSegs(eventFootprints[i])
-			);
-		}
-
-		return segs;
-	},
-
-
-	// Given an event's span (unzoned start/end and other misc data), and the event itself,
-	// slices into segments and attaches event-derived properties to them.
-	// eventSpan - { start, end, isStart, isEnd, otherthings... }
-	// constraintRange allow additional clipping. optional. eventually remove this.
-	eventFootprintToSegs: function(eventFootprint, constraintRange) {
-		var unzonedRange = eventFootprint.componentFootprint.unzonedRange;
-		var segs;
-		var i, seg;
-
-		if (constraintRange) {
-			unzonedRange = unzonedRange.intersect(constraintRange);
-		}
-
-		segs = this.componentFootprintToSegs(eventFootprint.componentFootprint);
-
-		for (i = 0; i < segs.length; i++) {
-			seg = segs[i];
-
-			if (!unzonedRange.isStart) {
-				seg.isStart = false;
-			}
-			if (!unzonedRange.isEnd) {
-				seg.isEnd = false;
-			}
-
-			seg.footprint = eventFootprint;
-			// TODO: rename to seg.eventFootprint
-		}
-
-		return segs;
-	},
-
-
-	componentFootprintToSegs: function(componentFootprint) {
-		// subclasses must implement
-	}
-
-};

src/list/ListView.js

@@ -2,9 +2,10 @@
 /*
 Responsible for the scroller, and forwarding event-related actions into the "grid".
 */
-var ListView = View.extend(SegChronoComponentMixin, {
+var ListView = View.extend({
 
 	segSelector: '.fc-list-item', // which elements accept event actions
+	//eventRendererClass is below
 	//eventPointingClass is below
 
 	scroller: null,
@@ -15,10 +16,6 @@ var ListView = View.extend(SegChronoComponentMixin, {
 
 
 	initialize: function() {
-
-		// a requirement for SegChronoComponentMixin
-		this.initSegChronoComponent();
-
 		this.scroller = new Scroller({
 			overflowX: 'hidden',
 			overflowY: 'auto'
@@ -77,7 +74,6 @@ var ListView = View.extend(SegChronoComponentMixin, {
 		this.dayDates = dayDates;
 		this.dayRanges = dayRanges;
 
-		// a requirement of SegChronoComponentMixin.
 		// TODO: easy to forget. use listener.
 		this.eventRenderer.rangeUpdated();
 	},
@@ -122,7 +118,7 @@ var ListView = View.extend(SegChronoComponentMixin, {
 	},
 
 
-	eventRendererClass: SegChronoComponentMixin.eventRendererClass.extend({
+	eventRendererClass: EventRenderer.extend({
 
 		// like "4:00am"
 		computeEventTimeFormat: function() {