v1.0.5

Author: worldoptimizer

HypeReactiveContent.js

@@ -1,5 +1,5 @@
 /*!
-Hype Reactive Content 1.0.4
+Hype Reactive Content 1.0.5
 copyright (c) 2022 Max Ziebell, (https://maxziebell.de). MIT-license
 */
 /*
@@ -9,15 +9,16 @@ copyright (c) 2022 Max Ziebell, (https://maxziebell.de). MIT-license
 * 1.0.2 This version is being released to get JsDelivr to update
 * 1.0.3 Changed listener syntax to sentence structure
 * 1.0.4 Fixed falsy values not being updated
+* 1.0.5 Added Hype Action Events support, running code through triggerAction
 */
 if("HypeReactiveContent" in window === false) window['HypeReactiveContent'] = (function () {
 	/**
- 	 * @function enableReactiveObject
- 	 * @param {object} obj - the object to be made reactive.
- 	 * @param {function} callback - the function to be called when a property of the object is changed.
- 	 * @returns {object} - the reactive object.
- 	 */
- 	function enableReactiveObject(obj, callback) {
+	  * @function enableReactiveObject
+	  * @param {object} obj - the object to be made reactive.
+	  * @param {function} callback - the function to be called when a property of the object is changed.
+	  * @returns {object} - the reactive object.
+	  */
+	 function enableReactiveObject(obj, callback) {
 		const handler = {
 			get(target, key, receiver) {
 				const result = Reflect.get(target, key, receiver);
@@ -57,41 +58,65 @@ if("HypeReactiveContent" in window === false) window['HypeReactiveContent'] = (f
 		};
 	}
 
+	/**
+	 * @function runCode 
+	 * This is used if there Hype Action Events isn't found
+	 * @param {string} code JavaScript to run
+	 * @param {HYPE.documents.API} hypeDocument for context
+	 */
+	function runCode(code, hypeDocument) {
+		try {
+			return new Function('hypeDocument', 'customData', 'with(customData){ ' + code + '}')(hypeDocument, hypeDocument.customData);
+		} catch (e) {
+			console.error(e)
+		}
+	}
+	
 	/**
 	 * @function HypeDocumentLoad
 	 * @param {object} hypeDocument - the hypeDocument
 	 * @param {object} element - the element
 	 * @param {object} event - the event
 	 */
-	function HypeDocumentLoad(hypeDocument, element, event){
+	function HypeDocumentLoad(hypeDocument, element, event) {
+		
 		hypeDocument.updateContent = function(key, value) {
 			if (key!==undefined && value!==undefined) hypeDocument.triggerCustomBehaviorNamed(key + ' equals ' + (typeof value === 'string' ? '"' + value + '"' : value))
 			if (key!==undefined) hypeDocument.triggerCustomBehaviorNamed(key + ' was updated')
 			let sceneElm = document.getElementById(hypeDocument.currentSceneId());
 			sceneElm.querySelectorAll('[data-content], [data-visibility]').forEach(function(elm){
-				var content = elm.getAttribute('data-content');
-				var contentReturn = hypeDocument.runCode(content, true);
-				if (content) elm.innerHTML =  contentReturn!==undefined? contentReturn : '';
-				var visibility = elm.getAttribute('data-visibility');
-				if (visibility) elm.style.visibility = hypeDocument.runCode(visibility, true)? 'visible': 'hidden';
-				
+				let content = elm.getAttribute('data-content');
+				let visibility = elm.getAttribute('data-visibility');
+				if ("HypeActionEvents" in window === false) {
+					if (content) {
+						let contentReturn = runCode('return '+content, hypeDocument);
+						elm.innerHTML =  contentReturn!==undefined? contentReturn : '';
+					}
+					if (visibility) {
+						let visibilityReturn = runCode('return '+visibility, hypeDocument);
+						elm.style.visibility = visibilityReturn? 'visible': 'hidden';
+					}
+				} else {
+					if (content) {
+						let contentReturn = hypeDocument.triggerAction ('return '+content, { element: elm, event: {type:'HypeReactiveContent'}});
+						elm.innerHTML = contentReturn!==undefined? contentReturn : '';
+					}
+					if (visibility) {
+						let visibilityReturn = hypeDocument.triggerAction ('return '+visibility, { element: elm, event: {type:'HypeReactiveContent'}});
+						elm.style.visibility = visibilityReturn? 'visible': 'hidden';
+					}
+				}
 			})	
 		}
-		hypeDocument.runCode = function(code, ret){			
-			try {
-				if (ret) code = 'return '+code;
-				return new Function('hypeDocument', 'customData', 'with(customData){ ' + code + '}')(hypeDocument, hypeDocument.customData);
-			} catch (e) {
-				console.error(e)
-			}
-		}
+		
 		hypeDocument.customData = enableReactiveObject(hypeDocument.customData, debounceByRequestFrame(hypeDocument.updateContent));
 		if (hypeDocument.functions().HypeReactiveContent) hypeDocument.functions().HypeReactiveContent(hypeDocument, element, event);
 	}
 
 	function HypeTriggerCustomBehavior(hypeDocument, element, event) {
+		if ("HypeActionEvents" in window !== false) return;
 		var code = event.customBehaviorName;
-		if (/[;=()]/.test(code)) hypeDocument.runCode(code);
+		if (/[;=()]/.test(code)) runCode(code, hypeDocument);
 	}
 
 	function HypeScenePrepareForDisplay(hypeDocument, element, event) {
@@ -100,10 +125,12 @@ if("HypeReactiveContent" in window === false) window['HypeReactiveContent'] = (f
 
 	if ("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
 	window.HYPE_eventListeners.push({ "type": "HypeDocumentLoad", "callback": HypeDocumentLoad });
-	window.HYPE_eventListeners.push({ "type": "HypeTriggerCustomBehavior", "callback": HypeTriggerCustomBehavior });
 	window.HYPE_eventListeners.push({type: "HypeScenePrepareForDisplay", callback: HypeScenePrepareForDisplay});
-	
+	if ("HypeActionEvents" in window === false) {
+		window.HYPE_eventListeners.push({ "type": "HypeTriggerCustomBehavior", "callback": HypeTriggerCustomBehavior });
+	}
+		
 	return {
-		version: '1.0.4'
+		version: '1.0.5'
 	};
 })();