Provides access to event properties as JSON in relevant widgets

core/modules/utils/dom/dom.js

@@ -352,25 +352,29 @@ exports.collectDOMVariables = function(selectedNode,domNode,event) {
 		variables["tv-widgetnode-width"] = domNode.offsetWidth.toString();
 		variables["tv-widgetnode-height"] = domNode.offsetHeight.toString();
 	}
+	if(event) {
+		var eventProperties = $tw.utils.copyObjectPropertiesSafe(event);
+		variables["event-properties"] = JSON.stringify(eventProperties,null,2);
+
+		if(("clientX" in event) && ("clientY" in event)) {
+			if(selectedNode) {
+				// Add variables for event X and Y position relative to selected node
+				selectedNodeRect = selectedNode.getBoundingClientRect();
+				variables["event-fromselected-posx"] = (event.clientX - selectedNodeRect.left).toString();
+				variables["event-fromselected-posy"] = (event.clientY - selectedNodeRect.top).toString();
+			}
 
-	if(event && ("clientX" in event) && ("clientY" in event)) {
-		if(selectedNode) {
-			// Add variables for event X and Y position relative to selected node
-			selectedNodeRect = selectedNode.getBoundingClientRect();
-			variables["event-fromselected-posx"] = (event.clientX - selectedNodeRect.left).toString();
-			variables["event-fromselected-posy"] = (event.clientY - selectedNodeRect.top).toString();
-		}
-
-		if(domNode) {
-			// Add variables for event X and Y position relative to event catcher node
-			domNodeRect = domNode.getBoundingClientRect();
-			variables["event-fromcatcher-posx"] = (event.clientX - domNodeRect.left).toString();
-			variables["event-fromcatcher-posy"] = (event.clientY - domNodeRect.top).toString();
-		}
+			if(domNode) {
+				// Add variables for event X and Y position relative to event catcher node
+				domNodeRect = domNode.getBoundingClientRect();
+				variables["event-fromcatcher-posx"] = (event.clientX - domNodeRect.left).toString();
+				variables["event-fromcatcher-posy"] = (event.clientY - domNodeRect.top).toString();
+			}
 
-		// Add variables for event X and Y position relative to the viewport
-		variables["event-fromviewport-posx"] = event.clientX.toString();
-		variables["event-fromviewport-posy"] = event.clientY.toString();
+			// Add variables for event X and Y position relative to the viewport
+			variables["event-fromviewport-posx"] = event.clientX.toString();
+			variables["event-fromviewport-posy"] = event.clientY.toString();
+		}
 	}
 	return variables;
 };

core/modules/utils/utils.js

@@ -292,6 +292,48 @@ exports.extendDeepCopy = function(object,extendedProperties) {
 	return result;
 };
 
+exports.copyObjectPropertiesSafe = function(object) {
+	var seen = new Set();
+
+	function isDOMElement(value) {
+	  return value instanceof Node || value instanceof Window;
+	}
+
+	function safeCopy(obj) {
+		//skip ciruclar references
+		if(seen.has(obj)) {
+			return "[Circular reference]";
+		}
+		//skip functions
+		if(typeof obj !== "object" || obj === null) {
+			return obj;
+		}
+		//skip DOM elements
+		if(isDOMElement(obj)) {
+			return "[DOM Element]";
+		}
+		//copy each element of the array
+		if(Array.isArray(obj)) {
+			return obj.map(safeCopy);
+		}
+
+		seen.add(obj);
+		var copy = {}, key;
+		for(key in obj) {
+			try{
+				copy[key] = safeCopy(obj[key]);
+			} catch(e) {
+				copy[key] = "[Unserializable]";
+			}
+		}
+		return copy;
+	}
+
+	var result = safeCopy(object);
+	seen.clear();
+	return result;
+};
+
 exports.deepFreeze = function deepFreeze(object) {
 	var property, key;
 	if(object) {

core/modules/widgets/eventcatcher.js

@@ -50,8 +50,6 @@ EventWidget.prototype.render = function(parent,nextSibling) {
 				actions = self.getAttribute("$"+type) || self.getAttribute("actions-"+type),
 				stopPropagation = self.getAttribute("stopPropagation","onaction"),
 				selectedNode = event.target,
-				selectedNodeRect,
-				catcherNodeRect,
 				variables = {};
 			// Firefox can fire dragover and dragenter events on text nodes instead of their parents
 			if(selectedNode.nodeType === 3) {
@@ -70,13 +68,10 @@ EventWidget.prototype.render = function(parent,nextSibling) {
 				if(selectedNode === domNode) {
 					return false;
 				}
-				// Only set up variables if we have actions to invoke
-				if(actions) {
-					variables = $tw.utils.collectDOMVariables(selectedNode,self.domNode,event);
-				}
 			}
 			// Execute our actions with the variables
 			if(actions) {
+				variables = $tw.utils.collectDOMVariables(selectedNode,self.domNode,event);
 				// Add a variable for the modifier key
 				variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
 				// Add a variable for the mouse button