make event-rendering-utils a true class

src/common/DayGrid.events.js

@@ -100,7 +100,7 @@ DayGrid.mixin({
 		var isResizableFromEnd = !disableResizing && isAllDay &&
 			seg.isEnd && view.isEventDefResizableFromEnd(eventDef);
 		var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd);
-		var skinCss = cssToStr(this.getEventFootprintSkinCss(seg.footprint));
+		var skinCss = cssToStr(this.eventRenderUtils.getSkinCss(seg.footprint));
 		var timeHtml = '';
 		var timeText;
 		var titleHtml;
@@ -109,7 +109,7 @@ DayGrid.mixin({
 
 		// Only display a timed events time if it is the starting segment
 		if (seg.isStart) {
-			timeText = this.getEventTimeText(seg.footprint);
+			timeText = this.eventRenderUtils.getTimeText(seg.footprint);
 			if (timeText) {
 				timeHtml = '<span class="fc-time">' + htmlEscape(timeText) + '</span>';
 			}

src/common/DayGrid.js

@@ -242,9 +242,9 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 	rangeUpdated: function() {
 		this.updateDayTable();
 
-		// a requirement of SegChronoComponentMixin. TODO: more elegant
 		// needs to go after updateDayTable because computeEventTimeFormat/computeDisplayEventEnd depends on colCnt.
-		this.initEventRenderingUtils();
+		// TODO: easy to forget. use listener.
+		this.eventRenderUtils.rangeUpdated();
 	},
 
 

src/common/EventRenderingUtilsMixin.js

@@ -1,13 +1,7 @@
 
-/*
-Caller must call:
-- initEventRenderingUtils
+var EventRenderUtils = Class.extend({
 
-This mixin can depend on ChronoComponent:
-- opt
-- _getView
-*/
-var EventRenderingUtilsMixin = {
+	component: null,
 
 	// derived from options
 	eventTimeFormat: null,
@@ -15,24 +9,48 @@ var EventRenderingUtilsMixin = {
 	displayEventEnd: null,
 
 
+	/*
+	component defines:
+		- computeEventTimeFormat (optional, defaults to smallTimeFormat)
+		- computeDisplayEventTime (optional, defaults to true)
+		- computeDisplayEventEnd (optional, defaults to false)
+
+	OTHER REQUIREMENTS:
+		- must call rangeUpdated() when component's range is updated
+	*/
+	constructor: function(component) {
+		this.component = component;
+	},
+
+
 	// Updates values that rely on options and also relate to range
-	initEventRenderingUtils: function() {
+	rangeUpdated: function() {
+		var component = this.component;
 		var displayEventTime;
 		var displayEventEnd;
 
 		this.eventTimeFormat =
-			this.opt('eventTimeFormat') ||
-			this.opt('timeFormat') || // deprecated
-			this.computeEventTimeFormat();
-
-		displayEventTime = this.opt('displayEventTime');
+			component.opt('eventTimeFormat') ||
+			component.opt('timeFormat') || // deprecated
+			(component.computeEventTimeFormat ?
+				component.computeEventTimeFormat() :
+				'') ||
+			component.opt('smallTimeFormat');
+
+		displayEventTime = component.opt('displayEventTime');
+		if (displayEventTime == null && component.computeDisplayEventTime) {
+			displayEventTime = component.computeDisplayEventTime(); // might be based off of range
+		}
 		if (displayEventTime == null) {
-			displayEventTime = this.computeDisplayEventTime(); // might be based off of range
+			displayEventTime = true;
 		}
 
-		displayEventEnd = this.opt('displayEventEnd');
+		displayEventEnd = component.opt('displayEventEnd');
+		if (displayEventEnd == null && component.computeDisplayEventEnd) {
+			displayEventEnd = component.computeDisplayEventEnd(); // might be based off of range
+		}
 		if (displayEventEnd == null) {
-			displayEventEnd = this.computeDisplayEventEnd(); // might be based off of range
+			displayEventEnd = true;
 		}
 
 		this.displayEventTime = displayEventTime;
@@ -40,32 +58,13 @@ var EventRenderingUtilsMixin = {
 	},
 
 
-	// Generates the format string used for event time text, if not explicitly defined by 'timeFormat'
-	computeEventTimeFormat: function() {
-		return this.opt('smallTimeFormat');
-	},
-
-
-	// Determines whether events should have their end times displayed, if not explicitly defined by 'displayEventTime'.
-	// Only applies to non-all-day events.
-	computeDisplayEventTime: function() {
-		return true;
-	},
-
-
-	// Determines whether events should have their end times displayed, if not explicitly defined by 'displayEventEnd'
-	computeDisplayEventEnd: function() {
-		return true;
-	},
-
-
 	// Compute the text that should be displayed on an event's element.
 	// `range` can be the Event object itself, or something range-like, with at least a `start`.
 	// If event times are disabled, or the event has no time, will return a blank string.
 	// If not specified, formatStr will default to the eventTimeFormat setting,
 	// and displayEnd will default to the displayEventEnd setting.
-	getEventTimeText: function(eventFootprint, formatStr, displayEnd) {
-		return this._getEventTimeText(
+	getTimeText: function(eventFootprint, formatStr, displayEnd) {
+		return this._getTimeText(
 			eventFootprint.eventInstance.dateProfile.start,
 			eventFootprint.eventInstance.dateProfile.end,
 			eventFootprint.componentFootprint.isAllDay,
@@ -75,8 +74,8 @@ var EventRenderingUtilsMixin = {
 	},
 
 
-	_getEventTimeText: function(start, end, isAllDay, formatStr, displayEnd) {
-		var view = this._getView();
+	_getTimeText: function(start, end, isAllDay, formatStr, displayEnd) {
+		var view = this.component._getView();
 
 		if (formatStr == null) {
 			formatStr = this.eventTimeFormat;
@@ -103,8 +102,8 @@ var EventRenderingUtilsMixin = {
 	},
 
 
-	getBgEventFootprintClasses: function(eventFootprint) {
-		var classNames = this.getEventFootprintClasses(eventFootprint);
+	getBgClasses: function(eventFootprint) {
+		var classNames = this.getClasses(eventFootprint);
 
 		classNames.push('fc-bgevent');
 
@@ -112,7 +111,7 @@ var EventRenderingUtilsMixin = {
 	},
 
 
-	getEventFootprintClasses: function(eventFootprint) {
+	getClasses: function(eventFootprint) {
 		var eventDef = eventFootprint.eventDef;
 
 		return [].concat(
@@ -123,63 +122,62 @@ var EventRenderingUtilsMixin = {
 
 
 	// Utility for generating event skin-related CSS properties
-	getEventFootprintSkinCss: function(eventFootprint) {
+	getSkinCss: function(eventFootprint) {
 		return {
-			'background-color': this.getEventFootprintBackgroundColor(eventFootprint),
-			'border-color': this.getEventFootprintBorderColor(eventFootprint),
-			color: this.getEventFootprintTextColor(eventFootprint)
+			'background-color': this.getBgColor(eventFootprint),
+			'border-color': this.getBorderColor(eventFootprint),
+			color: this.getTextColor(eventFootprint)
 		};
 	},
 
 
 	// Queries for caller-specified color, then falls back to default
-	getEventFootprintBackgroundColor: function(eventFootprint) {
+	getBgColor: function(eventFootprint) {
 		return eventFootprint.eventDef.backgroundColor ||
 			eventFootprint.eventDef.color ||
-			this.getEventFootprintDefaultBackgroundColor(eventFootprint);
+			this.getDefaultBgColor(eventFootprint);
 	},
 
 
-	getEventFootprintDefaultBackgroundColor: function(eventFootprint) {
+	getDefaultBgColor: function(eventFootprint) {
 		var source = eventFootprint.eventDef.source;
 
 		return source.backgroundColor ||
 			source.color ||
-			this.opt('eventBackgroundColor') ||
-			this.opt('eventColor');
+			this.component.opt('eventBackgroundColor') ||
+			this.component.opt('eventColor');
 	},
 
 
 	// Queries for caller-specified color, then falls back to default
-	getEventFootprintBorderColor: function(eventFootprint) {
+	getBorderColor: function(eventFootprint) {
 		return eventFootprint.eventDef.borderColor ||
 			eventFootprint.eventDef.color ||
-			this.getEventFootprintDefaultBorderColor(eventFootprint);
+			this.getDefaultBorderColor(eventFootprint);
 	},
 
 
-	getEventFootprintDefaultBorderColor: function(eventFootprint) {
+	getDefaultBorderColor: function(eventFootprint) {
 		var source = eventFootprint.eventDef.source;
 
 		return source.borderColor ||
 			source.color ||
-			this.opt('eventBorderColor') ||
-			this.opt('eventColor');
+			this.component.opt('eventBorderColor') ||
+			this.component.opt('eventColor');
 	},
 
 
 	// Queries for caller-specified color, then falls back to default
-	getEventFootprintTextColor: function(eventFootprint) {
+	getTextColor: function(eventFootprint) {
 		return eventFootprint.eventDef.textColor ||
-			this.getEventFootprintDefaultTextColor(eventFootprint);
+			this.getDefaultTextColor(eventFootprint);
 	},
 
 
-	getEventFootprintDefaultTextColor: function(eventFootprint) {
+	getDefaultTextColor: function(eventFootprint) {
 		var source = eventFootprint.eventDef.source;
 
-		return source.textColor ||
-			this.opt('eventTextColor');
+		return source.textColor || this.component.opt('eventTextColor');
 	}
 
-};
+});

src/common/SegChronoComponentMixin.js

@@ -5,7 +5,7 @@ Caller must:
 - implement componentFootprintToSegs
 - implement renderFgSegs
 - implement unrenderFgSegs
-- implement renderFill (FillSystemMixin)
+- implement renderFill
 
 This mixin can depend on ChronoComponent:
 - opt
@@ -14,15 +14,15 @@ This mixin can depend on ChronoComponent:
 - eventRangesToEventFootprints
 - eventFootprintsToSegs
 */
-var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, {
+var SegChronoComponentMixin = {
 
 	segs: null, // the *event* segments currently rendered in the grid. TODO: rename to `eventSegs`
+	eventRenderUtils: null,
 	fillSystem: null,
 
 
 	initSegChronoComponent: function() {
-		//this.initEventRenderingUtils(); // needs to happen after dates
-
+		this.eventRenderUtils = new EventRenderUtils(this);
 		this.fillSystem = new FillSystem(this);
 	},
 
@@ -171,7 +171,7 @@ var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, {
 	// 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.getBgEventFootprintClasses(seg.footprint);
+		return this.eventRenderUtils.getBgClasses(seg.footprint);
 	},
 
 
@@ -179,7 +179,7 @@ var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, {
 	// NEEDED BY FILL SYSTEM,  FillSystem::buildSegHtml :(
 	bgEventSegCss: function(seg) {
 		return {
-			'background-color': this.getEventFootprintSkinCss(seg.footprint)['background-color']
+			'background-color': this.eventRenderUtils.getSkinCss(seg.footprint)['background-color']
 		};
 	},
 
@@ -274,7 +274,7 @@ var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, {
 			'fc-event',
 			seg.isStart ? 'fc-start' : 'fc-not-start',
 			seg.isEnd ? 'fc-end' : 'fc-not-end'
-		].concat(this.getEventFootprintClasses(seg.footprint));
+		].concat(this.eventRenderUtils.getClasses(seg.footprint));
 
 		if (isDraggable) {
 			classes.push('fc-draggable');
@@ -371,4 +371,4 @@ var SegChronoComponentMixin = $.extend({}, EventRenderingUtilsMixin, {
 		// subclasses must implement
 	}
 
-});
+};

src/common/TimeGrid.events.js

@@ -247,6 +247,7 @@ TimeGrid.mixin({
 	fgSegHtml: function(seg, disableResizing) {
 		var view = this.view;
 		var calendar = view.calendar;
+		var eventRenderUtils = this.eventRenderUtils;
 		var componentFootprint = seg.footprint.componentFootprint;
 		var isAllDay = componentFootprint.isAllDay;
 		var eventDef = seg.footprint.eventDef;
@@ -254,7 +255,7 @@ TimeGrid.mixin({
 		var isResizableFromStart = !disableResizing && seg.isStart && view.isEventDefResizableFromStart(eventDef);
 		var isResizableFromEnd = !disableResizing && seg.isEnd && view.isEventDefResizableFromEnd(eventDef);
 		var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd);
-		var skinCss = cssToStr(this.getEventFootprintSkinCss(seg.footprint));
+		var skinCss = cssToStr(this.eventRenderUtils.getSkinCss(seg.footprint));
 		var timeText;
 		var fullTimeText; // more verbose time text. for the print stylesheet
 		var startTimeText; // just the start time text
@@ -269,16 +270,16 @@ TimeGrid.mixin({
 			if (seg.isStart || seg.isEnd) {
 				var zonedStart = calendar.msToMoment(seg.startMs);
 				var zonedEnd = calendar.msToMoment(seg.endMs);
-				timeText = this._getEventTimeText(zonedStart, zonedEnd, isAllDay);
-				fullTimeText = this._getEventTimeText(zonedStart, zonedEnd, isAllDay, 'LT');
-				startTimeText = this._getEventTimeText(zonedStart, zonedEnd, isAllDay, null, false); // displayEnd=false
+				timeText = eventRenderUtils._getTimeText(zonedStart, zonedEnd, isAllDay);
+				fullTimeText = eventRenderUtils._getTimeText(zonedStart, zonedEnd, isAllDay, 'LT');
+				startTimeText = eventRenderUtils._getTimeText(zonedStart, zonedEnd, isAllDay, null, false); // displayEnd=false
 			}
 		}
 		else {
 			// Display the normal time text for the *event's* times
-			timeText = this.getEventTimeText(seg.footprint);
-			fullTimeText = this.getEventTimeText(seg.footprint, 'LT');
-			startTimeText = this.getEventTimeText(seg.footprint, null, false); // displayEnd=false
+			timeText = eventRenderUtils.getTimeText(seg.footprint);
+			fullTimeText = eventRenderUtils.getTimeText(seg.footprint, 'LT');
+			startTimeText = eventRenderUtils.getTimeText(seg.footprint, null, false); // displayEnd=false
 		}
 
 		return '<a class="' + classes.join(' ') + '"' +

src/common/TimeGrid.js

@@ -269,9 +269,9 @@ var TimeGrid = FC.TimeGrid = ChronoComponent.extend(CoordChronoComponentMixin, S
 
 		this.updateDayTable();
 
-		// a requirement of SegChronoComponentMixin. TODO: more elegant
 		// needs to go after updateDayTable because computeEventTimeFormat/computeDisplayEventEnd depends on colCnt.
-		this.initEventRenderingUtils();
+		// TODO: easy to forget. use listener.
+		this.eventRenderUtils.rangeUpdated();
 
 		this.dayRanges = this.dayDates.map(function(dayDate) {
 			return new UnzonedRange(

src/list/ListView.js

@@ -85,8 +85,9 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 		this.dayDates = dayDates;
 		this.dayRanges = dayRanges;
 
-		// a requirement of SegChronoComponentMixin. TODO: more elegant
-		this.initEventRenderingUtils();
+		// a requirement of SegChronoComponentMixin.
+		// TODO: easy to forget. use listener.
+		this.eventRenderUtils.rangeUpdated();
 	},
 
 
@@ -269,8 +270,8 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 		var eventDef = eventFootprint.eventDef;
 		var componentFootprint = eventFootprint.componentFootprint;
 		var url = eventDef.url;
-		var classes = [ 'fc-list-item' ].concat(this.getEventFootprintClasses(seg.footprint));
-		var bgColor = this.getEventFootprintBackgroundColor(seg.footprint);
+		var classes = [ 'fc-list-item' ].concat(this.eventRenderUtils.getClasses(seg.footprint));
+		var bgColor = this.eventRenderUtils.getBgColor(seg.footprint);
 		var timeHtml;
 
 		if (componentFootprint.isAllDay) {
@@ -279,7 +280,7 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 		// if the event appears to span more than one day
 		else if (this.isMultiDayRange(componentFootprint.unzonedRange)) {
 			if (seg.isStart || seg.isEnd) { // outer segment that probably lasts part of the day
-				timeHtml = htmlEscape(this._getEventTimeText(
+				timeHtml = htmlEscape(this.eventRenderUtils._getTimeText(
 					calendar.msToMoment(seg.startMs),
 					calendar.msToMoment(seg.endMs),
 					componentFootprint.isAllDay
@@ -291,7 +292,7 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 		}
 		else {
 			// Display the normal time text for the *event's* times
-			timeHtml = htmlEscape(this.getEventTimeText(eventFootprint));
+			timeHtml = htmlEscape(this.eventRenderUtils.getTimeText(eventFootprint));
 		}
 
 		if (url) {
@@ -299,7 +300,7 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 		}
 
 		return '<tr class="' + classes.join(' ') + '">' +
-			(this.displayEventTime ?
+			(this.eventRenderUtils.displayEventTime ?
 				'<td class="fc-list-item-time ' + theme.getClass('widgetContent') + '">' +
 					(timeHtml || '') +
 				'</td>' :