refactor event resizer CSS, for touch

src/Calendar.js

@@ -518,9 +518,9 @@ function Calendar_constructor(element, overrides) {
 			element.addClass('fc-ltr');
 		}
 
-		if (FC.isTouchEnabled) {
-			element.addClass('fc-touch');
-		}
+		element.addClass(
+			FC.isTouchEnabled ? 'fc-touch' : 'fc-cursor'
+		);
 
 		if (options.theme) {
 			element.addClass('ui-widget');

src/agenda/agenda.css

@@ -200,6 +200,12 @@ be a descendant of the grid when it is being dragged.
 	overflow: hidden; /* don't let the bg flow over rounded corners */
 }
 
+.fc-time-grid-event.fc-selected {
+	/* need to allow touch resizers to extend outside event's bounding box */
+	/* common fc-selected styles hide the fc-bg, so don't need this anyway */
+	overflow: visible;
+}
+
 .fc-time-grid-event .fc-time,
 .fc-time-grid-event .fc-title {
 	padding: 0 1px;
@@ -241,9 +247,9 @@ be a descendant of the grid when it is being dragged.
 	padding: 0; /* undo padding from above */
 }
 
-/* resizer */
+/* resizer (mouse device) */
 
-.fc-time-grid-event .fc-resizer {
+.fc-mouse .fc-time-grid-event .fc-resizer {
 	left: 0;
 	right: 0;
 	bottom: 0;
@@ -256,10 +262,28 @@ be a descendant of the grid when it is being dragged.
 	cursor: s-resize;
 }
 
-.fc-time-grid-event .fc-resizer:after {
+.fc-mouse .fc-time-grid-event .fc-resizer:after {
 	content: "=";
 }
 
+/* resizer (touch device) */
+
+.fc-touch .fc-time-grid-event .fc-resizer {
+	/* 10x10 dot */
+	border-radius: 5px;
+	border-width: 1px;
+	width: 8px;
+	height: 8px;
+	border-style: solid;
+	border-color: inherit;
+	background: #fff;
+	/* horizontally center */
+	left: 50%;
+	margin-left: -5px;
+	/* center on the bottom edge */
+	bottom: -5px;
+}
+
 
 /* Now Indicator
 --------------------------------------------------------------------------------------------------*/

src/common/Grid.events.js

@@ -284,7 +284,7 @@ Grid.mixin({
 			subjectCenter: true,
 			interactionStart: function(ev) {
 				mouseFollower = new MouseFollower(seg.el, {
-					additionalClass: 'fc-event-dragging',
+					additionalClass: 'fc-dragging',
 					parentEl: view.el,
 					opacity: dragListener.isTouch ? null : view.opt('dragOpacity'),
 					revertDuration: view.opt('dragRevertDuration'),
@@ -321,7 +321,7 @@ Grid.mixin({
 				// if a valid drop location, have the subclass render a visual indication
 				if (dropLocation && (dragHelperEls = view.renderDrag(dropLocation, seg))) {
 
-					dragHelperEls.addClass('fc-event-dragging');
+					dragHelperEls.addClass('fc-dragging');
 					if (!dragListener.isTouch) {
 						_this.applyDragOpacity(dragHelperEls);
 					}
@@ -774,7 +774,7 @@ Grid.mixin({
 		// event references might change on refetchEvents(), while selectedEvent doesn't,
 		// so compare IDs
 		if (selectedEvent && selectedEvent._id === event._id) {
-			classes.push('fc-event-selected');
+			classes.push('fc-selected');
 		}
 
 		return classes;

src/common/View.js

@@ -925,7 +925,7 @@ var View = FC.View = Class.extend(EmitterMixin, ListenerMixin, {
 		if (!this.selectedEvent || this.selectedEvent !== event) {
 			this.unselectEvent();
 			this.renderedEventSegEach(function(seg) {
-				seg.el.addClass('fc-event-selected');
+				seg.el.addClass('fc-selected');
 			}, event);
 			this.selectedEvent = event;
 		}
@@ -935,7 +935,7 @@ var View = FC.View = Class.extend(EmitterMixin, ListenerMixin, {
 	unselectEvent: function() {
 		if (this.selectedEvent) {
 			this.renderedEventSegEach(function(seg) {
-				seg.el.removeClass('fc-event-selected');
+				seg.el.removeClass('fc-selected');
 			}, this.selectedEvent);
 			this.selectedEvent = null;
 		}
@@ -984,7 +984,7 @@ var View = FC.View = Class.extend(EmitterMixin, ListenerMixin, {
 
 	processEventUnselect: function(ev) {
 		if (this.selectedEvent) {
-			if (!$(ev.target).closest('.fc-event-selected').length) {
+			if (!$(ev.target).closest('.fc-selected').length) {
 				this.unselectEvent();
 			}
 		}

src/common/common.css

@@ -549,24 +549,48 @@ temporary rendered events).
 	z-index: 2;
 }
 
+/* resizer (cursor AND touch devices) */
+
 .fc-event .fc-resizer {
 	position: absolute;
 	z-index: 3;
 }
 
+/* resizer (touch devices) */
+
+.fc-touch .fc-event .fc-resizer {
+	display: none; /* only show when selected */
+}
+
+.fc-touch .fc-event.fc-selected .fc-resizer {
+	display: block;
+}
+
+.fc-touch .fc-event .fc-resizer:after {
+	/* 20x20 touch area */
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	width: 20px;
+	height: 20px;
+	margin-left: -10px;
+	margin-top: -10px;
+}
+
 
 /* Event Selection
 --------------------------------------------------------------------------------------------------*/
 
-.fc-event-selected {
+.fc-event.fc-selected {
 	z-index: 9999 !important;
 }
 
-.fc-event-selected.fc-event-dragging {
+.fc-event.fc-selected.fc-dragging {
 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* will appear to float */
 }
 
-.fc-event-selected .fc-bg {
+.fc-event.fc-selected .fc-bg {
 	display: none; /* hide semi-transparent bg. will make the event look darker */
 }
 
@@ -594,38 +618,57 @@ temporary rendered events).
 	border-bottom-right-radius: 0;
 }
 
-/* resizer */
-
-.fc-h-event .fc-resizer { /* positioned it to overcome the event's borders */
-	top: -1px;
-	bottom: -1px;
-	left: -1px;
-	right: -1px;
-	width: 5px;
-}
+/* resizer (cursor AND touch devices) */
 
 /* left resizer  */
 .fc-ltr .fc-h-event .fc-start-resizer,
-.fc-ltr .fc-h-event .fc-start-resizer:before,
-.fc-ltr .fc-h-event .fc-start-resizer:after,
-.fc-rtl .fc-h-event .fc-end-resizer,
-.fc-rtl .fc-h-event .fc-end-resizer:before,
-.fc-rtl .fc-h-event .fc-end-resizer:after {
-	right: auto; /* ignore the right and only use the left */
+.fc-rtl .fc-h-event .fc-end-resizer {
 	cursor: w-resize;
 }
 
 /* right resizer */
 .fc-ltr .fc-h-event .fc-end-resizer,
-.fc-ltr .fc-h-event .fc-end-resizer:before,
-.fc-ltr .fc-h-event .fc-end-resizer:after,
-.fc-rtl .fc-h-event .fc-start-resizer,
-.fc-rtl .fc-h-event .fc-start-resizer:before,
-.fc-rtl .fc-h-event .fc-start-resizer:after {
-	left: auto; /* ignore the left and only use the right */
+.fc-rtl .fc-h-event .fc-start-resizer {
 	cursor: e-resize;
 }
 
+/* resizer (cursor devices) */
+
+.fc-cursor.fc-ltr .fc-h-event .fc-resizer {
+	width: 7px;
+	top: 0;
+	bottom: 0;
+	/* more specific classes are responsible for left/right */
+}
+
+/* resizer (touch devices) */
+
+.fc-touch .fc-h-event .fc-resizer {
+	/* 8x8 little dot */
+	border-radius: 4px;
+	border-width: 1px;
+	width: 6px;
+	height: 6px;
+	border-style: solid;
+	border-color: inherit;
+	background: #fff;
+	/* vertically center */
+	top: 50%;
+	margin-top: -4px;
+}
+
+/* left resizer  */
+.fc-touch.fc-ltr .fc-h-event .fc-start-resizer,
+.fc-touch.fc-rtl .fc-h-event .fc-end-resizer {
+	left: -4px; /* centers the 8x8 dot on the left edge */
+}
+
+/* right resizer */
+.fc-touch.fc-ltr .fc-h-event .fc-end-resizer,
+.fc-touch.fc-rtl .fc-h-event .fc-start-resizer {
+	right: -4px; /* centers the 8x8 dot on the right edge */
+}
+
 
 /* DayGrid events
 ----------------------------------------------------------------------------------------------------
@@ -648,17 +691,24 @@ be a descendant of the grid when it is being dragged.
 	font-weight: bold;
 }
 
-.fc-day-grid-event .fc-resizer { /* enlarge the default hit area */
-	left: -3px;
-	right: -3px;
-	width: 7px;
+/* resizer (cursor devices) */
+
+/* left resizer  */
+.fc-cursor.fc-ltr .fc-day-grid-event .fc-start-resizer,
+.fc-cursor.fc-rtl .fc-day-grid-event .fc-end-resizer {
+	left: -3px; /* to the day cell's edge */
+}
+
+/* right resizer */
+.fc-cursor.fc-ltr .fc-day-grid-event .fc-end-resizer,
+.fc-cursor.fc-rtl .fc-day-grid-event .fc-start-resizer {
+	right: -3px; /* to the day cell's edge */
 }
 
 /* event selection */
 
-.fc-day-grid-event.fc-event-selected .fc-content {
+.fc-day-grid-event.fc-selected .fc-content {
 	background-color: rgba(0, 0, 0, .2); /* will appear darker */
-		/* TODO: improve visuals of this technique! */
 }