Просмотр исходного кода

better helperrenderer, dragrenderer, resizerenderer

Adam Shaw 8 лет назад
Родитель
Сommit
bcf16e2c91

+ 3 - 3
src/agenda/AgendaView.js

@@ -334,13 +334,13 @@ var AgendaView = FC.AgendaView = View.extend({
 
 
 	// A returned value of `true` signals that a mock "helper" event has been rendered.
-	renderDrag: function(eventFootprints, seg) {
+	renderDrag: function(eventFootprints, seg, isTouch) {
 		if (eventFootprints.length) {
 			if (!eventFootprints[0].componentFootprint.isAllDay) {
-				return this.timeGrid.renderDrag(eventFootprints, seg);
+				return this.timeGrid.renderDrag(eventFootprints, seg, isTouch);
 			}
 			else if (this.dayGrid) {
-				return this.dayGrid.renderDrag(eventFootprints, seg);
+				return this.dayGrid.renderDrag(eventFootprints, seg, isTouch);
 			}
 		}
 	},

+ 6 - 5
src/agenda/TimeGrid.js

@@ -570,14 +570,15 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 
 	// Renders a visual indication of an event being dragged over the specified date(s).
 	// A returned value of `true` signals that a mock "helper" event has been rendered.
-	renderDrag: function(eventFootprints, seg) {
+	renderDrag: function(eventFootprints, seg, isTouch) {
 		var i;
 
 		if (seg) { // if there is event information for this drag, render a helper event
 
-			// returns mock event elements
+			this.helperRenderer.renderEventDraggingFootprints(eventFootprints, seg, isTouch);
+
 			// signal that a helper has been rendered
-			return this.helperRenderer.renderEventFootprints(eventFootprints);
+			return true;
 		}
 		else { // otherwise, just render a highlight
 
@@ -600,8 +601,8 @@ var TimeGrid = FC.TimeGrid = InteractiveDateComponent.extend(StandardInteraction
 
 
 	// Renders a visual indication of an event being resized
-	renderEventResize: function(eventFootprints, seg) {
-		return this.helperRenderer.renderEventFootprints(eventFootprints, seg); // returns mock event elements
+	renderEventResize: function(eventFootprints, seg, isTouch) {
+		this.helperRenderer.renderEventResizingFootprints(eventFootprints, seg, isTouch);
 	},
 
 

+ 4 - 30
src/agenda/TimeGridHelperRenderer.js

@@ -1,29 +1,12 @@
 
 var TimeGridHelperRenderer = HelperRenderer.extend({
 
-	helperEls: null,
 
-
-	// Renders a mock "helper" event. `sourceSeg` is the original segment object and might be null (an external drag)
-	renderFootprintEls: function(eventFootprints, sourceSeg) {
-		var segs = this.component.eventFootprintsToSegs(eventFootprints);
-
-		return this.renderHelperSegs( // returns mock event elements
-			segs,
-			sourceSeg
-		);
-	},
-
-
-	renderHelperSegs: function(segs, sourceSeg) {
+	renderSegs: function(segs, sourceSeg) {
 		var helperNodes = [];
 		var i, seg;
 		var sourceEl;
 
-		// assigns each seg's el and returns a subset of segs that were rendered
-		// TODO: not good to call eventRenderer this way
-		segs = this.eventRenderer.renderFgSegEls(segs);
-
 		// TODO: not good to call eventRenderer this way
 		this.eventRenderer.renderFgSegsIntoContainers(
 			segs,
@@ -33,6 +16,7 @@ var TimeGridHelperRenderer = HelperRenderer.extend({
 		// Try to make the segment that is in the same row as sourceSeg look the same
 		for (i = 0; i < segs.length; i++) {
 			seg = segs[i];
+
 			if (sourceSeg && sourceSeg.col === seg.col) {
 				sourceEl = sourceSeg.el;
 				seg.el.css({
@@ -42,21 +26,11 @@ var TimeGridHelperRenderer = HelperRenderer.extend({
 					'margin-right': sourceEl.css('margin-right')
 				});
 			}
+
 			helperNodes.push(seg.el[0]);
 		}
 
-		return ( // must return the elements rendered
-			this.helperEls = $(helperNodes) // array -> jQuery set
-		);
-	},
-
-
-	// Unrenders any mock helper event
-	unrender: function() {
-		if (this.helperEls) {
-			this.helperEls.remove();
-			this.helperEls = null;
-		}
+		return $(helperNodes); // must return the elements rendered
 	}
 
 });

+ 6 - 4
src/basic/DayGrid.js

@@ -344,7 +344,7 @@ var DayGrid = FC.DayGrid = InteractiveDateComponent.extend(StandardInteractionsM
 
 	// Renders a visual indication of an event or external element being dragged.
 	// `eventLocation` has zoned start and end (optional)
-	renderDrag: function(eventFootprints, seg) {
+	renderDrag: function(eventFootprints, seg, isTouch) {
 		var i;
 
 		for (i = 0; i < eventFootprints.length; i++) {
@@ -353,7 +353,9 @@ var DayGrid = FC.DayGrid = InteractiveDateComponent.extend(StandardInteractionsM
 
 		// if a segment from the same calendar but another component is being dragged, render a helper event
 		if (seg && seg.component !== this) {
-			return this.helperRenderer.renderEventFootprints(eventFootprints, seg); // returns mock event elements
+			this.helperRenderer.renderEventDraggingFootprints(eventFootprints, seg, isTouch);
+
+			return true; // signal that a helper was rendered
 		}
 	},
 
@@ -370,14 +372,14 @@ var DayGrid = FC.DayGrid = InteractiveDateComponent.extend(StandardInteractionsM
 
 
 	// Renders a visual indication of an event being resized
-	renderEventResize: function(eventFootprints, seg) {
+	renderEventResize: function(eventFootprints, seg, isTouch) {
 		var i;
 
 		for (i = 0; i < eventFootprints.length; i++) {
 			this.renderHighlight(eventFootprints[i].componentFootprint);
 		}
 
-		return this.helperRenderer.renderEventFootprints(eventFootprints, seg); // returns mock event elements
+		this.helperRenderer.renderEventResizingFootprints(eventFootprints, seg, isTouch);
 	},
 
 

+ 2 - 20
src/basic/DayGridHelperRenderer.js

@@ -1,19 +1,12 @@
 
 var DayGridHelperRenderer = HelperRenderer.extend({
 
-	helperEls: null, // set of cell skeleton elements for rendering the mock event "helper"
-
 
 	// Renders a mock "helper" event. `sourceSeg` is the associated internal segment object. It can be null.
-	renderFootprintEls: function(eventFootprints, sourceSeg) {
-		var segs = this.component.eventFootprintsToSegs(eventFootprints);
+	renderSegs: function(segs, sourceSeg) {
 		var helperNodes = [];
 		var rowStructs;
 
-		// assigns each seg's el and returns a subset of segs that were rendered
-		// TODO: not good to call eventRenderer this way
-		segs = this.eventRenderer.renderFgSegEls(segs);
-
 		// TODO: not good to call eventRenderer this way
 		rowStructs = this.eventRenderer.renderSegRows(segs);
 
@@ -39,18 +32,7 @@ var DayGridHelperRenderer = HelperRenderer.extend({
 			helperNodes.push(skeletonEl[0]);
 		});
 
-		return ( // must return the elements rendered
-			this.helperEls = $(helperNodes) // array -> jQuery set
-		);
-	},
-
-
-	// Unrenders any visual indication of a mock helper event
-	unrender: function() {
-		if (this.helperEls) {
-			this.helperEls.remove();
-			this.helperEls = null;
-		}
+		return $(helperNodes); // must return the elements rendered
 	}
 
 });

+ 3 - 22
src/component/DateComponent.js

@@ -245,26 +245,8 @@ var DateComponent = Component.extend({
 	// Renders a visual indication of a event or external-element drag over the given drop zone.
 	// If an external-element, seg will be `null`.
 	// Must return elements used for any mock events.
-	renderDrag: function(eventFootprints, seg) {
-		var dragEls = null;
-		var children = this.children;
-		var i;
-		var childDragEls;
-
-		for (i = 0; i < children.length; i++) {
-			childDragEls = children[i].renderDrag(eventFootprints, seg);
-
-			if (childDragEls) {
-				if (!dragEls) {
-					dragEls = childDragEls;
-				}
-				else {
-					dragEls = dragEls.add(childDragEls);
-				}
-			}
-		}
-
-		return dragEls;
+	renderDrag: function(eventFootprints, seg, isTouch) {
+		this.callChildren('renderDrag', eventFootprints, seg, isTouch);
 	},
 
 
@@ -279,8 +261,7 @@ var DateComponent = Component.extend({
 
 
 	// Renders a visual indication of an event being resized.
-	// Must return elements used for any mock events.
-	renderEventResize: function(eventFootprints, seg) {
+	renderEventResize: function(eventFootprints, seg, isTouch) {
 		// subclasses must implement
 	},
 

+ 4 - 19
src/component/interactions/EventDragging.js

@@ -160,7 +160,6 @@ var EventDragging = Interaction.extend({
 				var origFootprint;
 				var footprint;
 				var mutatedEventInstanceGroup;
-				var dragHelperEls;
 
 				// starting hit could be forced (DayGrid.limit)
 				if (seg.hit) {
@@ -197,18 +196,14 @@ var EventDragging = Interaction.extend({
 				// if a valid drop location, have the subclass render a visual indication
 				if (
 					eventDefMutation &&
-					(dragHelperEls = view.renderDrag(
+					view.renderDrag( // truthy if rendered something
 						component.eventRangesToEventFootprints(
 							mutatedEventInstanceGroup.sliceRenderRanges(view.renderUnzonedRange, calendar)
 						),
-						seg
-					))
+						seg,
+						dragListener.isTouch
+					)
 				) {
-					dragHelperEls.addClass('fc-dragging');
-					if (!dragListener.isTouch) {
-						_this.applyDragOpacity(dragHelperEls);
-					}
-
 					mouseFollower.hide(); // if the subclass is already using a mock event "helper", hide our own
 				}
 				else {
@@ -320,16 +315,6 @@ var EventDragging = Interaction.extend({
 		eventDefMutation.setDateMutation(dateMutation);
 
 		return eventDefMutation;
-	},
-
-
-	// Utility for apply dragOpacity to a jQuery set
-	applyDragOpacity: function(els) {
-		var opacity = this.opt('dragOpacity');
-
-		if (opacity != null) {
-			els.css('opacity', opacity);
-		}
 	}
 
 });

+ 13 - 3
src/component/renderers/BusinessHourRenderer.js

@@ -6,6 +6,8 @@ var BusinessHourRenderer = Class.extend({
 	component: null,
 	fillRenderer: null,
 
+	segs: null,
+
 
 	/*
 	component implements:
@@ -25,9 +27,10 @@ var BusinessHourRenderer = Class.extend({
 
 
 	renderFootprints: function(eventFootprints) {
-		this.renderSegs(
-			this.component.eventFootprintsToSegs(eventFootprints)
-		);
+		var segs = this.component.eventFootprintsToSegs(eventFootprints);
+
+		this.renderSegs(segs);
+		this.segs = segs;
 	},
 
 
@@ -46,6 +49,13 @@ var BusinessHourRenderer = Class.extend({
 		if (this.fillRenderer) {
 			this.fillRenderer.unrender('businessHours');
 		}
+
+		this.segs = null;
+	},
+
+
+	getSegs: function() {
+		return this.segs || [];
 	},
 
 

+ 6 - 1
src/component/renderers/FillRenderer.js

@@ -11,9 +11,14 @@ var FillRenderer = Class.extend({ // use for highlight, background events, busin
 
 
 	render: function(type, segs, props) {
+		var els;
+
 		segs = this.buildSegEls(type, segs, props); // assignes `.el` to each seg. returns successfully rendered segs
+		els = this.attachSegEls(type, segs);
 
-		this.reportEls(type, this.attachSegEls(type, segs));
+		if (els) {
+			this.reportEls(type, els);
+		}
 
 		return segs;
 	},

+ 49 - 9
src/component/renderers/HelperRenderer.js

@@ -4,6 +4,7 @@ var HelperRenderer = Class.extend({
 	view: null,
 	component: null,
 	eventRenderer: null,
+	helperEls: null,
 
 
 	constructor: function(component, eventRenderer) {
@@ -14,27 +15,66 @@ var HelperRenderer = Class.extend({
 
 
 	renderComponentFootprint: function(componentFootprint) {
-		return this.renderEventFootprints([
+		this.renderEventFootprints([
 			this.fabricateEventFootprint(componentFootprint)
 		]);
 	},
 
 
-	renderEventFootprints: function(eventFootprints, sourceSeg) {
-		return this.renderFootprintEls(eventFootprints, sourceSeg)
-			.addClass('fc-helper');
+	renderEventDraggingFootprints: function(eventFootprints, sourceSeg, isTouch) {
+		this.renderEventFootprints(
+			eventFootprints,
+			sourceSeg,
+			'fc-dragging',
+			isTouch ? null : this.view.opt('dragOpacity')
+		);
 	},
 
 
-	renderFootprintEls: function(eventFootprints, sourceSeg) {
-		// Subclasses must implement.
-		// Must return all mock event elements.
+	renderEventResizingFootprints: function(eventFootprints, sourceSeg, isTouch) {
+		this.renderEventFootprints(
+			eventFootprints,
+			sourceSeg,
+			'fc-resizing'
+		);
+	},
+
+
+	renderEventFootprints: function(eventFootprints, sourceSeg, extraClassNames, opacity) {
+		var segs = this.component.eventFootprintsToSegs(eventFootprints);
+		var classNames = 'fc-helper ' + (extraClassNames || '');
+		var i;
+
+		// assigns each seg's el and returns a subset of segs that were rendered
+		segs = this.eventRenderer.renderFgSegEls(segs);
+
+		for (i = 0; i < segs.length; i++) {
+			segs[i].el.addClass(classNames);
+		}
+
+		if (opacity != null) {
+			for (i = 0; i < segs.length; i++) {
+				segs[i].el.css('opacity', opacity);
+			}
+		}
+
+		this.helperEls = this.renderSegs(segs, sourceSeg);
+	},
+
+
+	/*
+	Must return all mock event elements
+	*/
+	renderSegs: function(segs, sourceSeg) {
+		// Subclasses must implement
 	},
 
 
-	// Unrenders a mock event
 	unrender: function() {
-		// subclasses must implement
+		if (this.helperEls) {
+			this.helperEls.remove();
+			this.helperEls = null;
+		}
 	},