move renderFgSegEls/fgSegHtml/getSegClasses into EventRenderUtils

src/common/DayGrid.events.js

@@ -27,7 +27,66 @@ DayGrid.mixin({
 		// Computes a default `displayEventEnd` value if one is not expliclty defined
 		computeDisplayEventEnd: function() {
 			return this.dayGrid.colCnt === 1; // we'll likely have space if there's only one day
-		}
+		},
+
+
+		// Builds the HTML to be used for the default element for an individual segment
+		fgSegHtml: function(seg, disableResizing) {
+			var view = this.view;
+			var eventDef = seg.footprint.eventDef;
+			var isAllDay = seg.footprint.componentFootprint.isAllDay;
+			var isDraggable = view.isEventDefDraggable(eventDef);
+			var isResizableFromStart = !disableResizing && isAllDay &&
+				seg.isStart && view.isEventDefResizableFromStart(eventDef);
+			var isResizableFromEnd = !disableResizing && isAllDay &&
+				seg.isEnd && view.isEventDefResizableFromEnd(eventDef);
+			var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd);
+			var skinCss = cssToStr(this.getSkinCss(seg.footprint));
+			var timeHtml = '';
+			var timeText;
+			var titleHtml;
+
+			classes.unshift('fc-day-grid-event', 'fc-h-event');
+
+			// Only display a timed events time if it is the starting segment
+			if (seg.isStart) {
+				timeText = this.getTimeText(seg.footprint);
+				if (timeText) {
+					timeHtml = '<span class="fc-time">' + htmlEscape(timeText) + '</span>';
+				}
+			}
+
+			titleHtml =
+				'<span class="fc-title">' +
+					(htmlEscape(eventDef.title || '') || '&nbsp;') + // we always want one line of height
+				'</span>';
+
+			return '<a class="' + classes.join(' ') + '"' +
+					(eventDef.url ?
+						' href="' + htmlEscape(eventDef.url) + '"' :
+						''
+						) +
+					(skinCss ?
+						' style="' + skinCss + '"' :
+						''
+						) +
+				'>' +
+					'<div class="fc-content">' +
+						(this.isRTL ?
+							titleHtml + ' ' + timeHtml : // put a natural space in between
+							timeHtml + ' ' + titleHtml   //
+							) +
+					'</div>' +
+					(isResizableFromStart ?
+						'<div class="fc-resizer fc-start-resizer" />' :
+						''
+						) +
+					(isResizableFromEnd ?
+						'<div class="fc-resizer fc-end-resizer" />' :
+						''
+						) +
+				'</a>';
+		},
 
 	}),
 
@@ -65,7 +124,7 @@ DayGrid.mixin({
 
 		// render an `.el` on each seg
 		// returns a subset of the segs. segs that were actually rendered
-		segs = this.renderFgSegEls(segs);
+		segs = this.eventRenderUtils.renderFgSegEls(segs);
 
 		rowStructs = this.rowStructs = this.renderSegRows(segs);
 
@@ -114,65 +173,6 @@ DayGrid.mixin({
 	},
 
 
-	// Builds the HTML to be used for the default element for an individual segment
-	fgSegHtml: function(seg, disableResizing) {
-		var view = this.view;
-		var eventDef = seg.footprint.eventDef;
-		var isAllDay = seg.footprint.componentFootprint.isAllDay;
-		var isDraggable = view.isEventDefDraggable(eventDef);
-		var isResizableFromStart = !disableResizing && isAllDay &&
-			seg.isStart && view.isEventDefResizableFromStart(eventDef);
-		var isResizableFromEnd = !disableResizing && isAllDay &&
-			seg.isEnd && view.isEventDefResizableFromEnd(eventDef);
-		var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd);
-		var skinCss = cssToStr(this.eventRenderUtils.getSkinCss(seg.footprint));
-		var timeHtml = '';
-		var timeText;
-		var titleHtml;
-
-		classes.unshift('fc-day-grid-event', 'fc-h-event');
-
-		// Only display a timed events time if it is the starting segment
-		if (seg.isStart) {
-			timeText = this.eventRenderUtils.getTimeText(seg.footprint);
-			if (timeText) {
-				timeHtml = '<span class="fc-time">' + htmlEscape(timeText) + '</span>';
-			}
-		}
-
-		titleHtml =
-			'<span class="fc-title">' +
-				(htmlEscape(eventDef.title || '') || '&nbsp;') + // we always want one line of height
-			'</span>';
-		
-		return '<a class="' + classes.join(' ') + '"' +
-				(eventDef.url ?
-					' href="' + htmlEscape(eventDef.url) + '"' :
-					''
-					) +
-				(skinCss ?
-					' style="' + skinCss + '"' :
-					''
-					) +
-			'>' +
-				'<div class="fc-content">' +
-					(this.isRTL ?
-						titleHtml + ' ' + timeHtml : // put a natural space in between
-						timeHtml + ' ' + titleHtml   //
-						) +
-				'</div>' +
-				(isResizableFromStart ?
-					'<div class="fc-resizer fc-start-resizer" />' :
-					''
-					) +
-				(isResizableFromEnd ?
-					'<div class="fc-resizer fc-end-resizer" />' :
-					''
-					) +
-			'</a>';
-	},
-
-
 	// Given a row # and an array of segments all in the same row, render a <tbody> element, a skeleton that contains
 	// the segments. Returns object with a bunch of internal data about how the render was calculated.
 	// NOTE: modifies rowSegs

src/common/DayGrid.js

@@ -383,7 +383,7 @@ var DayGrid = FC.DayGrid = ChronoComponent.extend(CoordChronoComponentMixin, Seg
 		var segs = this.eventFootprintsToSegs(eventFootprints);
 		var rowStructs;
 
-		segs = this.renderFgSegEls(segs); // assigns each seg's el and returns a subset of segs that were rendered
+		segs = this.eventRenderUtils.renderFgSegEls(segs); // assigns each seg's el and returns a subset of segs that were rendered
 		rowStructs = this.renderSegRows(segs);
 
 		// inject each new event skeleton into each associated row

src/common/DayGrid.limit.js

@@ -315,7 +315,7 @@ DayGrid.mixin({
 		var i;
 
 		// render each seg's `el` and only return the visible segs
-		segs = this.renderFgSegEls(segs, true); // disableResizing=true
+		segs = this.eventRenderUtils.renderFgSegEls(segs, true); // disableResizing=true
 		this.popoverSegs = segs;
 
 		for (i = 0; i < segs.length; i++) {

src/common/EventRenderUtils.js

@@ -44,6 +44,75 @@ var EventRenderUtils = Class.extend({
 	},
 
 
+	// Renders and assigns an `el` property for each foreground event segment.
+	// Only returns segments that successfully rendered.
+	// A utility that subclasses may use.
+	renderFgSegEls: function(segs, disableResizing) {
+		var _this = this;
+		var hasEventRenderHandlers = this.view.hasPublicHandlers('eventRender');
+		var html = '';
+		var renderedSegs = [];
+		var i;
+
+		if (segs.length) { // don't build an empty html string
+
+			// build a large concatenation of event segment HTML
+			for (i = 0; i < segs.length; i++) {
+				html += this.fgSegHtml(segs[i], disableResizing);
+			}
+
+			// Grab individual elements from the combined HTML string. Use each as the default rendering.
+			// Then, compute the 'el' for each segment. An el might be null if the eventRender callback returned false.
+			$(html).each(function(i, node) {
+				var seg = segs[i];
+				var el = $(node);
+
+				if (hasEventRenderHandlers) { // optimization
+					el = _this.filterEventRenderEl(seg.footprint, el);
+				}
+
+				if (el) {
+					el.data('fc-seg', seg); // used by handlers
+					seg.el = el;
+					renderedSegs.push(seg);
+				}
+			});
+		}
+
+		return renderedSegs;
+	},
+
+
+	// Generates the HTML for the default rendering of a foreground event segment. Used by renderFgSegEls()
+	fgSegHtml: function(seg, disableResizing) {
+		// subclasses should implement
+	},
+
+
+	// Generic utility for generating the HTML classNames for an event segment's element
+	getSegClasses: function(seg, isDraggable, isResizable) {
+		var classes = [
+			'fc-event',
+			seg.isStart ? 'fc-start' : 'fc-not-start',
+			seg.isEnd ? 'fc-end' : 'fc-not-end'
+		].concat(this.getClasses(seg.footprint));
+
+		if (isDraggable) {
+			classes.push('fc-draggable');
+		}
+		if (isResizable) {
+			classes.push('fc-resizable');
+		}
+
+		// event is currently selected? attach a className.
+		if (this.view.isEventDefSelected(seg.footprint.eventDef)) {
+			classes.push('fc-selected');
+		}
+
+		return classes;
+	},
+
+
 	// Given an event and the default element used for rendering, returns the element that should actually be used.
 	// Basically runs events and elements through the eventRender hook.
 	filterEventRenderEl: function(eventFootprint, el) { // TODO: move this to EventRenderUtils!!!

src/common/SegChronoComponentMixin.js

@@ -93,51 +93,6 @@ var SegChronoComponentMixin = {
 	},
 
 
-	// Renders and assigns an `el` property for each foreground event segment.
-	// Only returns segments that successfully rendered.
-	// A utility that subclasses may use.
-	renderFgSegEls: function(segs, disableResizing) {
-		var _this = this;
-		var hasEventRenderHandlers = this.hasPublicHandlers('eventRender');
-		var html = '';
-		var renderedSegs = [];
-		var i;
-
-		if (segs.length) { // don't build an empty html string
-
-			// build a large concatenation of event segment HTML
-			for (i = 0; i < segs.length; i++) {
-				html += this.fgSegHtml(segs[i], disableResizing);
-			}
-
-			// Grab individual elements from the combined HTML string. Use each as the default rendering.
-			// Then, compute the 'el' for each segment. An el might be null if the eventRender callback returned false.
-			$(html).each(function(i, node) {
-				var seg = segs[i];
-				var el = $(node);
-
-				if (hasEventRenderHandlers) { // optimization
-					el = _this.eventRenderUtils.filterEventRenderEl(seg.footprint, el);
-				}
-
-				if (el) {
-					el.data('fc-seg', seg); // used by handlers
-					seg.el = el;
-					renderedSegs.push(seg);
-				}
-			});
-		}
-
-		return renderedSegs;
-	},
-
-
-	// Generates the HTML for the default rendering of a foreground event segment. Used by renderFgSegEls()
-	fgSegHtml: function(seg, disableResizing) {
-		// subclasses should implement
-	},
-
-
 	/* Background Segment Rendering
 	------------------------------------------------------------------------------------------------------------------*/
 
@@ -282,31 +237,6 @@ var SegChronoComponentMixin = {
 	eventRenderUtilsClass: EventRenderUtils,
 
 
-	// Generic utility for generating the HTML classNames for an event segment's element
-	getSegClasses: function(seg, isDraggable, isResizable) {
-		var view = this._getView();
-		var classes = [
-			'fc-event',
-			seg.isStart ? 'fc-start' : 'fc-not-start',
-			seg.isEnd ? 'fc-end' : 'fc-not-end'
-		].concat(this.eventRenderUtils.getClasses(seg.footprint));
-
-		if (isDraggable) {
-			classes.push('fc-draggable');
-		}
-		if (isResizable) {
-			classes.push('fc-resizable');
-		}
-
-		// event is currently selected? attach a className.
-		if (view.isEventDefSelected(seg.footprint.eventDef)) {
-			classes.push('fc-selected');
-		}
-
-		return classes;
-	},
-
-
 	sortEventSegs: function(segs) {
 		segs.sort(proxy(this, 'compareEventSegs'));
 	},

src/common/TimeGrid.events.js

@@ -33,6 +33,86 @@ TimeGrid.mixin({
 		// Computes a default `displayEventEnd` value if one is not expliclty defined
 		computeDisplayEventEnd: function() {
 			return true;
+		},
+
+
+		// Renders the HTML for a single event segment's default rendering
+		fgSegHtml: function(seg, disableResizing) {
+			var view = this.view;
+			var calendar = view.calendar;
+			var componentFootprint = seg.footprint.componentFootprint;
+			var isAllDay = componentFootprint.isAllDay;
+			var eventDef = seg.footprint.eventDef;
+			var isDraggable = view.isEventDefDraggable(eventDef);
+			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.getSkinCss(seg.footprint));
+			var timeText;
+			var fullTimeText; // more verbose time text. for the print stylesheet
+			var startTimeText; // just the start time text
+
+			classes.unshift('fc-time-grid-event', 'fc-v-event');
+
+			// if the event appears to span more than one day...
+			if (view.isMultiDayRange(componentFootprint.unzonedRange)) {
+				// Don't display time text on segments that run entirely through a day.
+				// That would appear as midnight-midnight and would look dumb.
+				// Otherwise, display the time text for the *segment's* times (like 6pm-midnight or midnight-10am)
+				if (seg.isStart || seg.isEnd) {
+					var zonedStart = calendar.msToMoment(seg.startMs);
+					var zonedEnd = calendar.msToMoment(seg.endMs);
+					timeText = this._getTimeText(zonedStart, zonedEnd, isAllDay);
+					fullTimeText = this._getTimeText(zonedStart, zonedEnd, isAllDay, 'LT');
+					startTimeText = this._getTimeText(zonedStart, zonedEnd, isAllDay, null, false); // displayEnd=false
+				}
+			}
+			else {
+				// Display the normal time text for the *event's* times
+				timeText = this.getTimeText(seg.footprint);
+				fullTimeText = this.getTimeText(seg.footprint, 'LT');
+				startTimeText = this.getTimeText(seg.footprint, null, false); // displayEnd=false
+			}
+
+			return '<a class="' + classes.join(' ') + '"' +
+				(eventDef.url ?
+					' href="' + htmlEscape(eventDef.url) + '"' :
+					''
+					) +
+				(skinCss ?
+					' style="' + skinCss + '"' :
+					''
+					) +
+				'>' +
+					'<div class="fc-content">' +
+						(timeText ?
+							'<div class="fc-time"' +
+							' data-start="' + htmlEscape(startTimeText) + '"' +
+							' data-full="' + htmlEscape(fullTimeText) + '"' +
+							'>' +
+								'<span>' + htmlEscape(timeText) + '</span>' +
+							'</div>' :
+							''
+							) +
+						(eventDef.title ?
+							'<div class="fc-title">' +
+								htmlEscape(eventDef.title) +
+							'</div>' :
+							''
+							) +
+					'</div>' +
+					'<div class="fc-bg"/>' +
+					/* TODO: write CSS for this
+					(isResizableFromStart ?
+						'<div class="fc-resizer fc-start-resizer" />' :
+						''
+						) +
+					*/
+					(isResizableFromEnd ?
+						'<div class="fc-resizer fc-end-resizer" />' :
+						''
+						) +
+				'</a>';
 		}
 
 	}),
@@ -246,7 +326,7 @@ TimeGrid.mixin({
 		var segsByCol;
 		var col;
 
-		segs = this.renderFgSegEls(segs); // will call fgSegHtml
+		segs = this.eventRenderUtils.renderFgSegEls(segs);
 		segsByCol = this.groupSegsByCol(segs);
 
 		for (col = 0; col < this.colCnt; col++) {
@@ -259,87 +339,6 @@ TimeGrid.mixin({
 	},
 
 
-	// Renders the HTML for a single event segment's default rendering
-	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;
-		var isDraggable = view.isEventDefDraggable(eventDef);
-		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.eventRenderUtils.getSkinCss(seg.footprint));
-		var timeText;
-		var fullTimeText; // more verbose time text. for the print stylesheet
-		var startTimeText; // just the start time text
-
-		classes.unshift('fc-time-grid-event', 'fc-v-event');
-
-		// if the event appears to span more than one day...
-		if (view.isMultiDayRange(componentFootprint.unzonedRange)) {
-			// Don't display time text on segments that run entirely through a day.
-			// That would appear as midnight-midnight and would look dumb.
-			// Otherwise, display the time text for the *segment's* times (like 6pm-midnight or midnight-10am)
-			if (seg.isStart || seg.isEnd) {
-				var zonedStart = calendar.msToMoment(seg.startMs);
-				var zonedEnd = calendar.msToMoment(seg.endMs);
-				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 = eventRenderUtils.getTimeText(seg.footprint);
-			fullTimeText = eventRenderUtils.getTimeText(seg.footprint, 'LT');
-			startTimeText = eventRenderUtils.getTimeText(seg.footprint, null, false); // displayEnd=false
-		}
-
-		return '<a class="' + classes.join(' ') + '"' +
-			(eventDef.url ?
-				' href="' + htmlEscape(eventDef.url) + '"' :
-				''
-				) +
-			(skinCss ?
-				' style="' + skinCss + '"' :
-				''
-				) +
-			'>' +
-				'<div class="fc-content">' +
-					(timeText ?
-						'<div class="fc-time"' +
-						' data-start="' + htmlEscape(startTimeText) + '"' +
-						' data-full="' + htmlEscape(fullTimeText) + '"' +
-						'>' +
-							'<span>' + htmlEscape(timeText) + '</span>' +
-						'</div>' :
-						''
-						) +
-					(eventDef.title ?
-						'<div class="fc-title">' +
-							htmlEscape(eventDef.title) +
-						'</div>' :
-						''
-						) +
-				'</div>' +
-				'<div class="fc-bg"/>' +
-				/* TODO: write CSS for this
-				(isResizableFromStart ?
-					'<div class="fc-resizer fc-start-resizer" />' :
-					''
-					) +
-				*/
-				(isResizableFromEnd ?
-					'<div class="fc-resizer fc-end-resizer" />' :
-					''
-					) +
-			'</a>';
-	},
-
-
 	/* Seg Position Utils
 	------------------------------------------------------------------------------------------------------------------*/
 

src/list/ListView.js

@@ -145,6 +145,66 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 		// like "4:00am"
 		computeEventTimeFormat: function() {
 			return this.opt('mediumTimeFormat');
+		},
+
+
+		// generates the HTML for a single event row
+		fgSegHtml: function(seg) {
+			var view = this.view;
+			var calendar = view.calendar;
+			var theme = calendar.theme;
+			var eventFootprint = seg.footprint;
+			var eventDef = eventFootprint.eventDef;
+			var componentFootprint = eventFootprint.componentFootprint;
+			var url = eventDef.url;
+			var classes = [ 'fc-list-item' ].concat(this.getClasses(seg.footprint));
+			var bgColor = this.getBgColor(seg.footprint);
+			var timeHtml;
+
+			if (componentFootprint.isAllDay) {
+				timeHtml = view.getAllDayHtml();
+			}
+			// if the event appears to span more than one day
+			else if (view.isMultiDayRange(componentFootprint.unzonedRange)) {
+				if (seg.isStart || seg.isEnd) { // outer segment that probably lasts part of the day
+					timeHtml = htmlEscape(this._getTimeText(
+						calendar.msToMoment(seg.startMs),
+						calendar.msToMoment(seg.endMs),
+						componentFootprint.isAllDay
+					));
+				}
+				else { // inner segment that lasts the whole day
+					timeHtml = view.getAllDayHtml();
+				}
+			}
+			else {
+				// Display the normal time text for the *event's* times
+				timeHtml = htmlEscape(this.getTimeText(eventFootprint));
+			}
+
+			if (url) {
+				classes.push('fc-has-url');
+			}
+
+			return '<tr class="' + classes.join(' ') + '">' +
+				(this.displayEventTime ?
+					'<td class="fc-list-item-time ' + theme.getClass('widgetContent') + '">' +
+						(timeHtml || '') +
+					'</td>' :
+					'') +
+				'<td class="fc-list-item-marker ' + theme.getClass('widgetContent') + '">' +
+					'<span class="fc-event-dot"' +
+					(bgColor ?
+						' style="background-color:' + bgColor + '"' :
+						'') +
+					'></span>' +
+				'</td>' +
+				'<td class="fc-list-item-title ' + theme.getClass('widgetContent') + '">' +
+					'<a' + (url ? ' href="' + htmlEscape(url) + '"' : '') + '>' +
+						htmlEscape(eventDef.title || '') +
+					'</a>' +
+				'</td>' +
+			'</tr>';
 		}
 
 	}),
@@ -170,7 +230,7 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 
 	// returns list of foreground segs that were actually rendered
 	renderFgSegs: function(segs) {
-		segs = this.renderFgSegEls(segs); // might filter away hidden events
+		segs = this.eventRenderUtils.renderFgSegEls(segs); // might filter away hidden events
 
 		if (!segs.length) {
 			this.renderEmptyMessage();
@@ -263,65 +323,6 @@ var ListView = View.extend(CoordChronoComponentMixin, SegChronoComponentMixin, {
 					'') +
 			'</td>' +
 		'</tr>';
-	},
-
-
-	// generates the HTML for a single event row
-	fgSegHtml: function(seg) {
-		var calendar = this.calendar;
-		var theme = calendar.theme;
-		var eventFootprint = seg.footprint;
-		var eventDef = eventFootprint.eventDef;
-		var componentFootprint = eventFootprint.componentFootprint;
-		var url = eventDef.url;
-		var classes = [ 'fc-list-item' ].concat(this.eventRenderUtils.getClasses(seg.footprint));
-		var bgColor = this.eventRenderUtils.getBgColor(seg.footprint);
-		var timeHtml;
-
-		if (componentFootprint.isAllDay) {
-			timeHtml = this.getAllDayHtml();
-		}
-		// 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.eventRenderUtils._getTimeText(
-					calendar.msToMoment(seg.startMs),
-					calendar.msToMoment(seg.endMs),
-					componentFootprint.isAllDay
-				));
-			}
-			else { // inner segment that lasts the whole day
-				timeHtml = this.getAllDayHtml();
-			}
-		}
-		else {
-			// Display the normal time text for the *event's* times
-			timeHtml = htmlEscape(this.eventRenderUtils.getTimeText(eventFootprint));
-		}
-
-		if (url) {
-			classes.push('fc-has-url');
-		}
-
-		return '<tr class="' + classes.join(' ') + '">' +
-			(this.eventRenderUtils.displayEventTime ?
-				'<td class="fc-list-item-time ' + theme.getClass('widgetContent') + '">' +
-					(timeHtml || '') +
-				'</td>' :
-				'') +
-			'<td class="fc-list-item-marker ' + theme.getClass('widgetContent') + '">' +
-				'<span class="fc-event-dot"' +
-				(bgColor ?
-					' style="background-color:' + bgColor + '"' :
-					'') +
-				'></span>' +
-			'</td>' +
-			'<td class="fc-list-item-title ' + theme.getClass('widgetContent') + '">' +
-				'<a' + (url ? ' href="' + htmlEscape(url) + '"' : '') + '>' +
-					htmlEscape(eventDef.title || '') +
-				'</a>' +
-			'</td>' +
-		'</tr>';
 	}
 
 });