CocoRoboDesktop/course-design/libs/mottle-0.4.js

;(function() {

	"use strict";

	var Sniff = {
		android:navigator.userAgent.toLowerCase().indexOf("android") > -1
	};

	var matchesSelector = function(el, selector, ctx) {
			ctx = ctx || el.parentNode;
			var possibles = ctx.querySelectorAll(selector);
			for (var i = 0; i < possibles.length; i++) {
				if (possibles[i] === el) {
					return true;
				}
			}
			return false;
		},
		_gel = function(el) { return typeof el == "string" ? document.getElementById(el) : el; },
		_t = function(e) { return e.srcElement || e.target; },
		_d = function(l, fn) {
			for (var i = 0, j = l.length; i < j; i++) {
				if (l[i] == fn) break;
			}
			if (i < l.length) l.splice(i, 1);
		},
		guid = 1,
		//
		// this function generates a guid for every handler, sets it on the handler, then adds
		// it to the associated object's map of handlers for the given event. this is what enables us 
		// to unbind all events of some type, or all events (the second of which can be requested by the user, 
		// but it also used by Mottle when an element is removed.)
		_store = function(obj, event, fn) {
			var g = guid++;
			obj.__ta = obj.__ta || {};
			obj.__ta[event] = obj.__ta[event] || {};
			// store each handler with a unique guid.
			obj.__ta[event][g] = fn;
			// set the guid on the handler.
			fn.__tauid = g;
			return g;
		},
		_unstore = function(obj, event, fn) {
			obj.__ta && obj.__ta[event] && delete obj.__ta[event][fn.__tauid];
			// a handler might have attached extra functions, so we unbind those too.
			if (fn.__taExtra) {
				for (var i = 0; i < fn.__taExtra.length; i++) {
					_unbind(obj, fn.__taExtra[i][0], fn.__taExtra[i][1]);
				}
				fn.__taExtra.length = 0;
			}
			// a handler might have attached an unstore callback
			fn.__taUnstore && fn.__taUnstore();
		},
		_curryChildFilter = function(children, obj, fn, evt) {
			if (children == null) return fn;
			else {
				var c = children.split(","),
					_fn = function(e) {
						_fn.__tauid = fn.__tauid;
						var t = _t(e);
						for (var i = 0; i < c.length; i++) {
							if (matchesSelector(t, c[i], obj)) {
								fn.apply(t, arguments);
							}
						}
					};
				registerExtraFunction(fn, evt, _fn);
				return _fn;
			}
		},
		//
		// registers an 'extra' function on some event listener function we were given - a function that we
		// created and bound to the element as part of our housekeeping, and which we want to unbind and remove
		// whenever the given function is unbound.
		registerExtraFunction = function(fn, evt, newFn) {
			fn.__taExtra = fn.__taExtra || [];
			fn.__taExtra.push([evt, newFn]);
		},
		DefaultHandler = function(obj, evt, fn, children) {
			// TODO: this was here originally because i wanted to handle devices that are both touch AND mouse. however this can cause certain of the helper
			// functions to be bound twice, as - for example - on a nexus 4, both a mouse event and a touch event are fired.  the use case i had in mind
			// was a device such as an Asus touch pad thing, which has a touch pad but can also be controlled with a mouse.
			//if (isMouseDevice)
			//	_bind(obj, evt, _curryChildFilter(children, obj, fn, evt), fn);
			
			if (isTouchDevice && touchMap[evt]) {
				_bind(obj, touchMap[evt], _curryChildFilter(children, obj, fn, touchMap[evt]), fn);
			}
			else
				_bind(obj, evt, _curryChildFilter(children, obj, fn, evt), fn);
		},
		SmartClickHandler = function(obj, evt, fn, children) {
			if (obj.__taSmartClicks == null) {
				var down = function(e) { obj.__tad = _pageLocation(e); },
					up = function(e) { obj.__tau = _pageLocation(e); },
					click = function(e) {
						if (obj.__tad && obj.__tau && obj.__tad[0] === obj.__tau[0] && obj.__tad[1] === obj.__tau[1]) {
							for (var i = 0; i < obj.__taSmartClicks.length; i++)
								obj.__taSmartClicks[i].apply(_t(e), [ e ]);
						}
					};
				DefaultHandler(obj, "mousedown", down, children);
				DefaultHandler(obj, "mouseup", up, children);
				DefaultHandler(obj, "click", click, children);
				obj.__taSmartClicks = [];
			}
			
			// store in the list of callbacks
			obj.__taSmartClicks.push(fn);
			// the unstore function removes this function from the object's listener list for this type.
			fn.__taUnstore = function() {
				_d(obj.__taSmartClicks, fn);
			};
		},
		_tapProfiles = {
			"tap":{touches:1, taps:1},
			"dbltap":{touches:1, taps:2},
			"contextmenu":{touches:2, taps:1}
		},
		TapHandler = function(clickThreshold, dblClickThreshold) {
			return function(obj, evt, fn, children) {
				// if event is contextmenu, for devices which are mouse only, we want to
				// use the default bind. 
				if (evt == "contextmenu" && isMouseDevice)
					DefaultHandler(obj, evt, fn, children);
				else {
                    // the issue here is that this down handler gets registered only for the
                    // child nodes in the first registration. in fact it should be registered with
                    // no child selector and then on down we should cycle through the regustered
                    // functions to see if one of them matches. on mouseup we should execute ALL of
                    // the functions whose children are either null or match the element.
					if (obj.__taTapHandler == null) {
						var tt = obj.__taTapHandler = {
							tap:[],
							dbltap:[],
							contextmenu:[],
							down:false,
							taps:0,
                            downSelectors:[]
						};
						var down = function(e) {
                                var target = e.srcElement || e.target;
                                for (var i = 0; i < tt.downSelectors.length; i++) {
                                    if (tt.downSelectors[i] == null || matchesSelector(target, tt.downSelectors[i], obj)) {
                                        tt.down = true;
                                        setTimeout(clearSingle, clickThreshold);
                                        setTimeout(clearDouble, dblClickThreshold);
                                        break; // we only need one match on mousedown
                                    }
                                }
							},
							up = function(e) {
								if (tt.down) {
                                    var target = e.srcElement || e.target;
									tt.taps++;
									var tc = _touchCount(e);
									for (var eventId in _tapProfiles) {
										var p = _tapProfiles[eventId];
										if (p.touches === tc && (p.taps === 1 || p.taps === tt.taps)) {
											for (var i = 0; i < tt[eventId].length; i++) {
                                                if (tt[eventId][i][1] == null || matchesSelector(target, tt[eventId][i][1], obj))
												    tt[eventId][i][0].apply(_t(e), [ e ]);
											}
										}
									}
								}
							},
							clearSingle = function() {
								tt.down = false;
							},
							clearDouble = function() {
								tt.taps = 0;
							};
						
						DefaultHandler(obj, "mousedown", down/*, children*/);
						DefaultHandler(obj, "mouseup", up/*, children*/);
					}
                    // add this child selector (it can be null, that's fine).
                    obj.__taTapHandler.downSelectors.push(children);

					obj.__taTapHandler[evt].push([fn, children]);
					// the unstore function removes this function from the object's listener list for this type.
					fn.__taUnstore = function() {
						_d(obj.__taTapHandler[evt], fn);
					};
				}
			};
		},
		meeHelper = function(type, evt, obj, target) {
			for (var i in obj.__tamee[type]) {
				obj.__tamee[type][i].apply(target, [ evt ]);
			}
		},
		MouseEnterExitHandler = function() {
			var activeElements = [];
			return function(obj, evt, fn, children) {
				if (!obj.__tamee) {
					// __tamee holds a flag saying whether the mouse is currently "in" the element, and a list of
					// both mouseenter and mouseexit functions.
					obj.__tamee = { over:false, mouseenter:[], mouseexit:[] };
					// register over and out functions
					var over = function(e) {
							var t = _t(e);
							if ( (children== null && (t == obj && !obj.__tamee.over)) || (matchesSelector(t, children, obj) && (t.__tamee == null || !t.__tamee.over)) ) {
								meeHelper("mouseenter", e, obj, t);
								t.__tamee = t.__tamee || {};
								t.__tamee.over = true;
								activeElements.push(t);
							}
						},
						out = function(e) {
							var t = _t(e);
							// is the current target one of the activeElements? and is the 
							// related target NOT a descendant of it?
							for (var i = 0; i < activeElements.length; i++) {
								if (t == activeElements[i] && !matchesSelector((e.relatedTarget || e.toElement), "*", t)) {
									t.__tamee.over = false;
									activeElements.splice(i, 1);
									meeHelper("mouseexit", e, obj, t);
								}
							}
						};
						
					_bind(obj, "mouseover", _curryChildFilter(children, obj, over, "mouseover"), over);
					_bind(obj, "mouseout", _curryChildFilter(children, obj, out, "mouseout"), out);
				}

				fn.__taUnstore = function() {
					delete obj.__tamee[evt][fn.__tauid];
				};

				_store(obj, evt, fn);
				obj.__tamee[evt][fn.__tauid] = fn;
			};
		},
		isTouchDevice = "ontouchstart" in document.documentElement,
		isMouseDevice = "onmousedown" in document.documentElement,
		touchMap = { "mousedown":"touchstart", "mouseup":"touchend", "mousemove":"touchmove" },
		touchstart="touchstart",touchend="touchend",touchmove="touchmove",
		ta_down = "__MottleDown", ta_up = "__MottleUp", 
		ta_context_down = "__MottleContextDown", ta_context_up = "__MottleContextUp",
		iev = (function() {
			var rv = -1; 
			if (navigator.appName == 'Microsoft Internet Explorer') {
				var ua = navigator.userAgent,
					re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
				if (re.exec(ua) != null)
					rv = parseFloat(RegExp.$1);
			}
			return rv;
		})(),
		isIELT9 = iev > -1 && iev < 9, 
		_genLoc = function(e, prefix) {
			if (e == null) return [ 0, 0 ];
			var ts = _touches(e), t = _getTouch(ts, 0);
			return [t[prefix + "X"], t[prefix + "Y"]];
		},
		_pageLocation = function(e) {
			if (e == null) return [ 0, 0 ];
			if (isIELT9) {
				return [ e.clientX + document.documentElement.scrollLeft, e.clientY + document.documentElement.scrollTop ];
			}
			else {
				return _genLoc(e, "page");
			}
		},
		_screenLocation = function(e) {
			return _genLoc(e, "screen");
		},
		_clientLocation = function(e) {
			return _genLoc(e, "client");
		},
		_getTouch = function(touches, idx) { return touches.item ? touches.item(idx) : touches[idx]; },
		_touches = function(e) {
			return e.touches && e.touches.length > 0 ? e.touches : 
				   e.changedTouches && e.changedTouches.length > 0 ? e.changedTouches :
				   e.targetTouches && e.targetTouches.length > 0 ? e.targetTouches :
				   [ e ];
		},
		_touchCount = function(e) { return _touches(e).length; },
		//http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
		_bind = function( obj, type, fn, originalFn) {
			_store(obj, type, fn);
			originalFn.__tauid = fn.__tauid;
			if (obj.addEventListener)
				obj.addEventListener( type, fn, false );
			else if (obj.attachEvent) {
				var key = type + fn.__tauid;
				obj["e" + key] = fn;
				// TODO look at replacing with .call(..)
				obj[key] = function() { 
					obj["e"+key] && obj["e"+key]( window.event ); 
				};
				obj.attachEvent( "on"+type, obj[key] );
			}
		},
		_unbind = function( obj, type, fn) {
			if (fn == null) return;
			_each(obj, function() {
				var _el = _gel(this);
				_unstore(_el, type, fn);
				// it has been bound if there is a tauid. otherwise it was not bound and we can ignore it.
				if (fn.__tauid != null) {
					if (_el.removeEventListener)
						_el.removeEventListener( type, fn, false );
					else if (this.detachEvent) {
						var key = type + fn.__tauid;
						_el[key] && _el.detachEvent( "on"+type, _el[key] );
						_el[key] = null;
						_el["e"+key] = null;
					}
				}
			});
		},
		_devNull = function() {},
		_each = function(obj, fn) {
			if (obj == null) return;
			// if a list (or list-like), use it. if a string, get a list 
			// by running the string through querySelectorAll. else, assume 
			// it's an Element.
			obj = (typeof obj !== "string") && (obj.tagName == null && obj.length != null) ? obj : typeof obj === "string" ? document.querySelectorAll(obj) : [ obj ];
			for (var i = 0; i < obj.length; i++)
				fn.apply(obj[i]);
		};

	/**
	* Event handler.  Offers support for abstracting out the differences
	* between touch and mouse devices, plus "smart click" functionality
	* (don't fire click if the mouse has moved betweeb mousedown and mouseup),
	* and synthesized click/tap events.
	* @class Mottle
	* @constructor
	* @param {Object} params Constructor params
	* @param {Integer} [params.clickThreshold=150] Threshold, in milliseconds beyond which a touchstart followed by a touchend is not considered to be a click.
	* @param {Integer} [params.dblClickThreshold=350] Threshold, in milliseconds beyond which two successive tap events are not considered to be a click.
	* @param {Boolean} [params.smartClicks=false] If true, won't fire click events if the mouse has moved between mousedown and mouseup. Note that this functionality
	* requires that Mottle consume the mousedown event, and so may not be viable in all use cases.
	*/
	this.Mottle = function(params) {
		params = params || {};
		var self = this, 
			clickThreshold = params.clickThreshold || 150,
			dblClickThreshold = params.dblClickThreshold || 350,
			mouseEnterExitHandler = new MouseEnterExitHandler(),
			tapHandler = new TapHandler(clickThreshold, dblClickThreshold),
			_smartClicks = params.smartClicks,
			_doBind = function(obj, evt, fn, children) {
				if (fn == null) return;
				_each(obj, function() {
					var _el = _gel(this);
					if (_smartClicks && evt === "click")
						SmartClickHandler(_el, evt, fn, children);
					else if (evt === "tap" || evt === "dbltap" || evt === "contextmenu") {
						tapHandler(_el, evt, fn, children);
					}
					else if (evt === "mouseenter" || evt == "mouseexit")
						mouseEnterExitHandler(_el, evt, fn, children);
					else 
						DefaultHandler(_el, evt, fn, children);
				});
			};

		/**
		* Removes an element from the DOM, and unregisters all event handlers for it. You should use this
		* to ensure you don't leak memory.
		* @method remove
		* @param {String|Element} el Element, or id of the element, to remove.
		* @return {Mottle} The current Mottle instance; you can chain this method.
		*/
		this.remove = function(el) {
			_each(el, function() {
				var _el = _gel(this);
				if (_el.__ta) {
					for (var evt in _el.__ta) {
						for (var h in _el.__ta[evt]) {
							_unbind(_el, evt, _el.__ta[evt][h]);
						}
					}
				}
				_el.parentNode && _el.parentNode.removeChild(_el);
			});
			return this;
		};

		/**
		* Register an event handler, optionally as a delegate for some set of descendant elements. Note
		* that this method takes either 3 or 4 arguments - if you supply 3 arguments it is assumed you have 
		* omitted the `children` parameter, and that the event handler should be bound directly to the given element.
		* @method on
		* @param {Element[]|Element|String} el Either an Element, or a CSS spec for a list of elements, or an array of Elements.
		* @param {String} [children] Comma-delimited list of selectors identifying allowed children.
		* @param {String} event Event ID.
		* @param {Function} fn Event handler function.
		* @return {Mottle} The current Mottle instance; you can chain this method.
		*/
		this.on = function(el, event, children, fn) {
			var _el = arguments[0],
				_c = arguments.length == 4 ? arguments[2] : null,
				_e = arguments[1],
				_f = arguments[arguments.length - 1];

			_doBind(_el, _e, _f, _c);
			return this;
		};	

		/**
		* Cancel delegate event handling for the given function. Note that unlike with 'on' you do not supply
		* a list of child selectors here: it removes event delegation from all of the child selectors for which the
		* given function was registered (if any).
		* @method off
		* @param {Element[]|Element|String} el Element - or ID of element - from which to remove event listener.
		* @param {String} event Event ID.
		* @param {Function} fn Event handler function.
		* @return {Mottle} The current Mottle instance; you can chain this method.
		*/
		this.off = function(el, evt, fn) {
			_unbind(el, evt, fn);
			return this;
		};

		/**
		* Triggers some event for a given element.
		* @method trigger
		* @param {Element} el Element for which to trigger the event.
		* @param {String} event Event ID.
		* @param {Event} originalEvent The original event. Should be optional of course, but currently is not, due
		* to the jsPlumb use case that caused this method to be added.
		* @param {Object} [payload] Optional object to set as `payload` on the generated event; useful for message passing.
		* @return {Mottle} The current Mottle instance; you can chain this method.
		*/
		this.trigger = function(el, event, originalEvent, payload) {
			var eventToBind = (isTouchDevice && touchMap[event]) ? touchMap[event] : event;
			var pl = _pageLocation(originalEvent), sl = _screenLocation(originalEvent), cl = _clientLocation(originalEvent);
			_each(el, function() {
				var _el = _gel(this), evt;
				originalEvent = originalEvent || {
					screenX:sl[0],
					screenY:sl[1],
					clientX:cl[0],
					clientY:cl[1]
				};

				var _decorate = function(_evt) {
					if (payload) _evt.payload = payload;
				};

				var eventGenerators = {
					"TouchEvent":function(evt) {
						var t = document.createTouch(window, _el, 0, pl[0], pl[1], 
									sl[0], sl[1],
									cl[0], cl[1],
									0,0,0,0);

						evt.initTouchEvent(eventToBind, true, true, window, 0, 
							sl[0], sl[1],
							cl[0], cl[1],
							false, false, false, false, document.createTouchList(t));
					},
					"MouseEvents":function(evt) {
						evt.initMouseEvent(eventToBind, true, true, window, 0,
							sl[0], sl[1],
							cl[0], cl[1],
							false, false, false, false, 1, _el);
						
						if (Sniff.android) {
							// Android's touch events are not standard.
							var t = document.createTouch(window, _el, 0, pl[0], pl[1], 
										sl[0], sl[1],
										cl[0], cl[1],
										0,0,0,0);

							evt.touches = evt.targetTouches = evt.changedTouches = document.createTouchList(t);
						}
					}
				};

				if (document.createEvent) {
					var ite = (isTouchDevice && touchMap[event] && !Sniff.android), evtName = ite ? "TouchEvent" : "MouseEvents";
					evt = document.createEvent(evtName);
					eventGenerators[evtName](evt);
					_decorate(evt);
					_el.dispatchEvent(evt);
				}
				else if (document.createEventObject) {
					evt = document.createEventObject();
					evt.eventType = evt.eventName = eventToBind;
					evt.screenX = sl[0];
					evt.screenY = sl[1];
					evt.clientX = cl[0];
					evt.clientY = cl[1];
					_decorate(evt);
					_el.fireEvent('on' + eventToBind, evt);
				}
			});
			return this;
		}
	};

	/**
	* Static method to assist in 'consuming' an element: uses `stopPropagation` where available, or sets `e.returnValue=false` where it is not.
	* @method Mottle.consume
	* @param {Event} e Event to consume
	* @param {Boolean} [doNotPreventDefault=false] If true, does not call `preventDefault()` on the event.
	*/
	Mottle.consume = function(e, doNotPreventDefault) {
		if (e.stopPropagation)
			e.stopPropagation();
		else 
			e.returnValue = false;

		if (!doNotPreventDefault && e.preventDefault)
			 e.preventDefault();
	};

	/**
	* Gets the page location corresponding to the given event. For touch events this means get the page location of the first touch.
	* @method Mottle.pageLocation
	* @param {Event} e Event to get page location for.
	* @return {Integer[]} [left, top] for the given event.
	*/
	Mottle.pageLocation = _pageLocation;

}).call(this);