Touch.js

define([
	"dcl/dcl",
	"dojo/dom",
	"dojo/dom-geometry",
	"delite/on",
	"./ViewBase"
], function (dcl, dom, domGeometry, on, ViewBase) {

	function stopEvent(e) {
		e.stopPropagation();
		e.preventDefault();
	}

	return dcl(ViewBase, {
		// summary:
		//		This mixin manages the touch interactions on item renderers displayed by a calendar view.

		// touchStartEditingTimer: Integer
		//		The delay of one touch over the renderer before setting the item in editing mode.
		touchStartEditingTimer: 500,

		// touchEndEditingTimer: Integer
		//		The delay after which the item is leaving the editing mode after the previous editing gesture,
		//		in touch context.
		touchEndEditingTimer: 10000,

		constructor: function () {
			this.on("renderer-created", function (irEvent) {
				var renderer = irEvent.renderer.renderer;

				this.own(renderer.on("touchstart", function (e) {
					this._onRendererTouchStart(e, renderer);
				}.bind(this)));
			}.bind(this));
		},

		_onRendererTouchStart: function (e, renderer) {
			// tags:
			//		private

			var p = this._edProps;

			if (p && p.endEditingTimer) {
				clearTimeout(p.endEditingTimer);
				p.endEditingTimer = null;
			}

			var theItem = renderer.item.item;

			if (p && p.endEditingTimer) {
				clearTimeout(p.endEditingTimer);
				p.endEditingTimer = null;
			}

			if (p != null && p.item != theItem) {
				// another item is edited.
				// stop previous item
				if (p.startEditingTimer) {
					clearTimeout(p.startEditingTimer);
				}

				this._endItemEditing("touch", false);
				p = null;
			}

			// initialize editing properties
			if (!p) {
				// register event listeners to manage gestures.
				var handles = [];

				handles.push(on(this.ownerDocument, "touchend", this._docEditingTouchEndHandler.bind(this)));
				handles.push(on(this.itemContainer, "touchmove", this._docEditingTouchMoveHandler.bind(this)));

				this._setEditingProperties({
					touchMoved: false,
					item: theItem,
					renderer: renderer,
					rendererKind: renderer.rendererKind,
					event: e,
					handles: handles,
					liveLayout: this.liveLayout
				});

				p = this._edProps;
			}

			if (this._isEditing) {
				// get info on touches
				var touches = this._getTouchesOnRenderers(e, p.editedItem);
				for (var key in touches) {
					p[key] = touches[key];
				}

				// start an editing gesture.
				this._startTouchItemEditingGesture(e);
			} else {
				// initial touch that will trigger or not the editing

				if (e.touches.length > 1) {
					stopEvent(e);
					return;
				}

				// set the selection state without dispatching (on touch end) after a short amount of time.
				// to allow a bit of time to scroll without selecting (graphically at least)
				this._touchSelectionTimer = this.defer(function () {
					this._saveSelectedItems = this.selectedItems;

					var changed = this.selectFromEvent(e, theItem._item, renderer, false);

					if (changed) {
						this._pendingSelectedItem = theItem;
					} else {
						delete this._saveSelectedItems;
					}
					this._touchSelectionTimer = null;
				}, 200);

				p.start = {x: e.touches[0].screenX, y: e.touches[0].screenY};

				if (this.isItemEditable(p.item, p.rendererKind)) {

					// editing gesture timer
					this._edProps.startEditingTimer = this.defer(function () {
						// we are editing, so the item *must* be selected.
						if (this._touchSelectionTimer) {
							clearTimeout(this._touchSelectionTimer);
							delete this._touchSelectionTime;
						}
						if (this._pendingSelectedItem) {
							this.dispatchChange(this._saveSelectedItems == null ? null :
								this._saveSelectedItems[0], this._pendingSelectedItem, null, e);
							delete this._saveSelectedItems;
							delete this._pendingSelectedItem;
						} else {
							this.selectFromEvent(e, theItem._item, renderer);
						}

						this._startItemEditing(p.item, "touch", e);

						p.moveTouchIndex = 0;

						// A move gesture is initiated even if we don't move
						this._startItemEditingGesture([this.getTime(e)], "move", "touch", e);

					}, this.touchStartEditingTimer);
				}
			}
		},

		_docEditingTouchMoveHandler: function (e) {
			// tags:
			//		private
			var p = this._edProps;

			// When the screen is touched, it can dispatch move events if the
			// user press the finger a little more...
			var touch = {x: e.touches[0].screenX, y: e.touches[0].screenY};
			if (p.startEditingTimer &&
				(Math.abs(touch.x - p.start.x) > 25 ||
				Math.abs(touch.y - p.start.y) > 25)) {

				// scroll use case, do not edit
				clearTimeout(p.startEditingTimer);
				p.startEditingTimer = null;

				clearTimeout(this._touchSelectionTimer);
				this._touchSelectionTimer = null;

				if (this._pendingSelectedItem) {
					delete this._pendingSelectedItem;
					this.selectFromEvent(e, null, null, false);
				}
			}

			// 10px tolerance to select the item (#105)
			if (!p.touchMoved &&
				(Math.abs(touch.x - p.start.x) > 10 ||
				Math.abs(touch.y - p.start.y) > 10)) {
				p.touchMoved = true;
			}

			if (this._editingGesture) {
				stopEvent(e);

				if (p.itemBeginDispatched) {

					var times = [];
					var d = p.editKind == "resizeEnd" ? p.editedItem.endTime : p.editedItem.startTime;
					var subColumn = p.editedItem.subColumn;

					switch (p.editKind) {
					case "move":
						var touchIndex = p.moveTouchIndex == null || p.moveTouchIndex < 0 ? 0 : p.moveTouchIndex;
						times[0] = this.getTime(e, -1, -1, touchIndex);
						subColumn = this.getSubColumn(e, -1, -1, touchIndex);
						break;
					case "resizeStart":
						times[0] = this.getTime(e, -1, -1, p.resizeStartTouchIndex);
						break;
					case "resizeEnd":
						times[0] = this.getTime(e, -1, -1, p.resizeEndTouchIndex);
						break;
					case "resizeBoth":
						times[0] = this.getTime(e, -1, -1, p.resizeStartTouchIndex);
						times[1] = this.getTime(e, -1, -1, p.resizeEndTouchIndex);
						break;
					}

					this._moveOrResizeItemGesture(times, "touch", e, subColumn);

					if (p.editKind == "move") {
						if (p.editedItem.startTime < d) {
							this.ensureVisibility(p.editedItem.startTime, p.editedItem.endTime, "start",
								this.autoScrollTouchMargin);
						} else {
							this.ensureVisibility(p.editedItem.startTime, p.editedItem.endTime, "end",
								this.autoScrollTouchMargin);
						}
					} else if (e.editKind == "resizeStart" || e.editKind == "resizeBoth") {
						this.ensureVisibility(p.editedItem.startTime, p.editedItem.endTime, "start",
							this.autoScrollTouchMargin);
					} else {
						this.ensureVisibility(p.editedItem.startTime, p.editedItem.endTime, "end",
							this.autoScrollTouchMargin);
					}

				}
			} // else scroll, if any, is delegated to sub class
		},

		// autoScrollTouchMargin: Integer
		//		The minimum number of minutes of margin around the edited event.
		autoScrollTouchMargin: 10,

		_docEditingTouchEndHandler: function (e) {
			// tags:
			//		private
			stopEvent(e);

			var p = this._edProps;

			if (p.startEditingTimer) {
				clearTimeout(p.startEditingTimer);
				p.startEditingTimer = null;
			}

			if (this._isEditing) {
				var touches = this._getTouchesOnRenderers(e, p.editedItem);
				for (var key in touches) {
					p[key] = touches[key];
				}

				if (this._editingGesture) {
					if (p.touchesLen === 0) {
						// all touches were removed => end of editing gesture
						this._endItemEditingGesture("touch", e);

						if (this.touchEndEditingTimer > 0) {

							// Timer that trigger the end of the item editing mode.
							p.endEditingTimer = this.defer(function () {
								this._endItemEditing("touch", false);
							}, this.touchEndEditingTimer);
						} // else validation must be explicit
					} else {
						if (this._editingGesture) {
							this._endItemEditingGesture("touch", e);
						}
						// there touches of interest on item, process them.
						this._startTouchItemEditingGesture(e);
					}
				}
			} else if (!p.touchMoved) {
				stopEvent(e);

				p.handles.forEach(function (handle) {
					handle.remove();
				});

				if (this._touchSelectionTimer) {
					// selection timer was not reached to a proper selection.
					clearTimeout(this._touchSelectionTimer);
					this.selectFromEvent(e, p.item._item, p.renderer, true);
				} else if (this._pendingSelectedItem) {
					// selection timer was reached, dispatch change event
					this.dispatchChange(this._saveSelectedItems.length === 0 ? null : this._saveSelectedItems[0],
						this._pendingSelectedItem, null, e); // todo renderer ?
					delete this._saveSelectedItems;
					delete this._pendingSelectedItem;
				}

				if (this._pendingDoubleTap && this._pendingDoubleTap.item == p.item) {
					this.emit("item-double-click", {
						triggerEvent: e,
						renderer: p.renderer,
						item: p.item._item
					});

					clearTimeout(this._pendingDoubleTap.timer);

					delete this._pendingDoubleTap;
				} else {
					this._pendingDoubleTap = {
						item: p.item,
						timer: this.defer(function () {
							delete this._pendingDoubleTap;
						}, this.doubleTapDelay)
					};

					this.emit("item-click", {
						triggerEvent: e,
						renderer: p.renderer,
						item: p.item._item
					});
				}

				this._edProps = null;
			} else {
				// scroll view has finished.

				if (this._saveSelectedItems) {

					// selection without dipatching was done, but the view scrolled,
					// so revert last selection
					this.selectedItems = this._saveSelectedItems;
					delete this._saveSelectedItems;
					delete this._pendingSelectedItem;
				}

				p.handles.forEach(function (handle) {
					handle.remove();
				});

				this._edProps = null;
			}
		},

		_startTouchItemEditingGesture: function (e) {
			// summary:
			//		Determines if a editing gesture is starting according to touches.
			// tags:
			//		private

			var p = this._edProps;

			var fromResizeStart = p.resizeStartTouchIndex != -1;
			var fromResizeEnd = p.resizeEndTouchIndex != -1;

			if (fromResizeStart && fromResizeEnd || // initial gesture using two touches
				this._editingGesture && p.touchesLen == 2 &&
				(fromResizeEnd && p.editKind == "resizeStart" ||
				fromResizeStart && p.editKind == "resizeEnd")) { // gesture one after the other touch

				if (this._editingGesture && p.editKind != "resizeBoth") { // stop ongoing gesture
					this._endItemEditingGesture("touch", e);
				}

				p.editKind = "resizeBoth";

				this._startItemEditingGesture([this.getTime(e, -1, -1, p.resizeStartTouchIndex),
						this.getTime(e, -1, -1, p.resizeEndTouchIndex)],
					p.editKind, "touch", e);
			} else if (fromResizeStart && p.touchesLen == 1 && !this._editingGesture) {
				this._startItemEditingGesture([this.getTime(e, -1, -1, p.resizeStartTouchIndex)],
					"resizeStart", "touch", e);
			} else if (fromResizeEnd && p.touchesLen == 1 && !this._editingGesture) {
				this._startItemEditingGesture([this.getTime(e, -1, -1, p.resizeEndTouchIndex)],
					"resizeEnd", "touch", e);
			} else {
				// A move gesture is initiated even if we don't move
				this._startItemEditingGesture([this.getTime(e)], "move", "touch", e);
			}
		},

		_getTouchesOnRenderers: function (e, item) {
			// summary:
			//		Returns the touch indices that are on a editing handles or body of the renderers
			// tags:
			//		private
			// item: Object
			//		The render item.
			// e: Event
			//		The touch event.
			// tags:
			//		private

			var irs = this._getStartEndRenderers(item);

			var resizeStartTouchIndex = -1;
			var resizeEndTouchIndex = -1;
			var moveTouchIndex = -1;
			var hasResizeStart = irs[0] != null && irs[0].resizeStartHandle != null;
			var hasResizeEnd = irs[1] != null && irs[1].resizeEndHandle != null;
			var len = 0;
			var touched = false;
			var list = this.rendererManager.itemToRenderer[item.id];

			for (var i = 0; i < e.touches.length; i++) {
				if (resizeStartTouchIndex == -1 && hasResizeStart) {
					touched = dom.isDescendant(e.touches[i].target, irs[0].resizeStartHandle);
					if (touched) {
						resizeStartTouchIndex = i;
						len++;
					}
				}

				if (resizeEndTouchIndex == -1 && hasResizeEnd) {
					touched = dom.isDescendant(e.touches[i].target, irs[1].resizeEndHandle);
					if (touched) {
						resizeEndTouchIndex = i;
						len++;
					}
				}

				if (resizeStartTouchIndex == -1 && resizeEndTouchIndex == -1) {

					for (var j = 0; j < list.length; j++) {
						touched = dom.isDescendant(e.touches[i].target, list[j].container);
						if (touched) {
							moveTouchIndex = i;
							len++;
							break;
						}
					}
				}

				if (resizeStartTouchIndex != -1 && resizeEndTouchIndex != -1 && moveTouchIndex != -1) {
					// all touches of interest were found, ignore other ones.
					break;
				}
			}

			return {
				touchesLen: len,
				resizeStartTouchIndex: resizeStartTouchIndex,
				resizeEndTouchIndex: resizeEndTouchIndex,
				moveTouchIndex: moveTouchIndex
			};
		}
	});
});