Task #16018: Add own 'tap' recognizion to prevent accidental clicks.

HTML DOM Document objects onclick method and touchend, touchmove and
touchstart events has been overwritten in order to prevent accidental
clicks on media elements like images or videos.

src/main/webapp/app/app.js

@@ -154,9 +154,7 @@ Ext.application({
 
 		this.checkLocalStorage();
 		this.checkBrowser();
-
 		this.taskManager = new TaskRunner();
-
 		this.initRestProxy();
 		this.initSocket();
 		this.initModels();

src/main/webapp/app/controller/Application.js

@@ -80,36 +80,72 @@ Ext.define("ARSnova.controller.Application", {
 	 * overrides onclick event handler in order to change behavior when an tag is clicked
 	 */
 	initializeOnClickOverride: function () {
+		var touchStarted = false,
+			currX = 0,
+			currY = 0,
+			cachedX = 0,
+			cachedY = 0;
+
 		document.onclick = function (e) {
-			e = e || window.event;
-			var element = e.target || e.srcElement;
-			var controller = ARSnova.app.getController('Application');
-			var videoLink = false;
+			return false;
+		};
 
-			if (element.tagName === 'IMG' && element.className === 'resizeableImage') {
-				controller.showLargerImage(element);
-			}
+		Ext.get(document).on('touchend', function (e) {
+			e.preventDefault();
+			touchStarted = false;
+		});
 
-			if (element.tagName === 'SPAN' && element.className === 'videoImageContainer') {
-				videoLink = controller.checkVideoContent(element);
-			}
+		Ext.get(document).on('touchmove', function (e) {
+			e.preventDefault();
+			var pointer = e.targetTouches ? e.targetTouches[0] : e;
+			currX = pointer.pageX;
+			currY = pointer.pageY;
+		});
 
-			if (element.tagName === 'A' && element.className !== "session-export" || videoLink) {
-				var url = !!videoLink ? videoLink : element.href;
-				var title = !!videoLink ? element.title : element.innerHTML;
+		Ext.get(document).on('touchstart', function (e) {
+			e.preventDefault();
+			var pointer = e.targetTouches ? e.targetTouches[0] : e;
+			cachedX = currX = pointer.pageX;
+			cachedY = currY = pointer.pageY;
+			touchStarted = true;
 
-				if (controller.checkHrefProtocol(url)) {
-					if (!controller.hrefPanelActive) {
-						controller.toggleHrefPanelActive();
-						controller.handleInternEmbeddedPageLoading(controller, title, url);
-					}
+			setTimeout(function () {
+				if ((cachedX === currX) && !touchStarted && (cachedY === currY)) {
+					ARSnova.app.getController('Application').internalElementRefHandler(e);
+				}
+			}, 200);
+		});
+	},
 
-					return false; // prevent default action and stop event propagation
-				} else {
-					element.target = '_blank'; // open link in new tab
+	internalElementRefHandler: function (e) {
+		e = e || window.event;
+		var element = e.target || e.srcElement;
+		var controller = ARSnova.app.getController('Application');
+		var videoLink = false;
+
+		if (element.tagName === 'IMG' && element.className === 'resizeableImage') {
+			controller.showLargerImage(element);
+		}
+
+		if (element.tagName === 'SPAN' && element.className === 'videoImageContainer') {
+			videoLink = controller.checkVideoContent(element);
+		}
+
+		if (element.tagName === 'A' && element.className !== "session-export" || videoLink) {
+			var url = !!videoLink ? videoLink : element.href;
+			var title = !!videoLink ? element.title : element.innerHTML;
+
+			if (controller.checkHrefProtocol(url)) {
+				if (!controller.hrefPanelActive) {
+					controller.toggleHrefPanelActive();
+					controller.handleInternEmbeddedPageLoading(controller, title, url);
 				}
+
+				return false; // prevent default action and stop event propagation
+			} else {
+				element.target = '_blank'; // open link in new tab
 			}
-		};
+		}
 	},
 
 	checkVideoContent: function (element) {

src/main/webapp/app/view/FreetextAnswerPanel.js

@@ -350,7 +350,6 @@ Ext.define('ARSnova.view.FreetextAnswerPanel', {
 	},
 
 	zoomButtonHandler: function () {
-		console.log('here?');
 		if (this.zoomButton.isActive) {
 			this.initializeZoomComponents();
 		} else {

src/main/webapp/app/view/speaker/ShowcaseQuestionPanel.js

@@ -141,7 +141,6 @@ Ext.define('ARSnova.view.speaker.ShowcaseQuestionPanel', {
 			ARSnova.app.innerScrollPanel = this;
 			var screenWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
 
-			console.log('painted');
 			if (screenWidth > 700) {
 				this.getActiveItem().setZoomLevel(ARSnova.app.globalZoomLevel);
 			}