Adjusting parameter on syncMessageResponseInit function to accept an actionName:dataFunctionReference pair object to allow for many postMessage action listeners.

Fil Peyton · Fil Peyton · commit 1baa31794f0b · 2015-11-05T14:48:25.000-08:00
diff --git a/SyncMessage.js b/SyncMessage.js
@@ -45,19 +45,18 @@ var SyncMessage = function(){
         }
     }
 
-    _SyncMessage.syncMessageResponseInit = function(responseWindow, responseOrigin, requestWindow, returnCallback){
+    _SyncMessage.syncMessageResponseInit = function(responseWindow, responseOrigin, requestWindow, actions){
         _SyncMessage.responseWindow = responseWindow;
         _SyncMessage.responseOrigin = responseOrigin;
         _SyncMessage.requestWindow = requestWindow;
 
         // Retrieve, then send
         $(_SyncMessage.responseWindow).on('message onmessage', function(){
-            if(event.data.action.indexOf(_SyncMessage.actionKeyword) > -1){
-                // Allow object of actionName:dataFunctionReference
-                // Amend check in message handler to loop through object and 
-                // match action vs object of actions
-
-                event.data.data.returnObject = returnCallback();
+            var actionName = event.data.action.split('_')[1];
+            if(event.data.action.indexOf(_SyncMessage.actionKeyword) > -1 &&
+                actions.hasOwnProperty(actionName)){
+                
+                event.data.data.returnObject = actions[actionName]();
 
                 _SyncMessage.requestWindow.postMessage(event.data, _SyncMessage.responseOrigin);
             }
diff --git a/example/pageA.html b/example/pageA.html
@@ -5,13 +5,27 @@
 	<script type="text/javascript" src="../SyncMessage.js"></script>
 	<script type="text/javascript">
 	$(function(){
-		$('#sendMessage').on('click', function(){
-			var syncMessage = new SyncMessage();
-			var syncMessageRequestObject = syncMessage.syncMessageRequestInit($('#responderWindowIframe')[0].contentWindow, '*', window);
+		var syncMessage = new SyncMessage();
+		var syncMessageRequestObject = syncMessage.syncMessageRequestInit($('#responderWindowIframe')[0].contentWindow, '*', window);
 
+		$('#getItems').on('click', function(){
 			// Send postMessage to Window B
 			var syncMessageRequest = syncMessageRequestObject.postMessageRequest({
-			    action: 'yourAction',
+			    action: 'getItems',
+			    data: {}
+			});
+
+			// Do something on resolution of syncMessageRequest
+			syncMessageRequest.done(function(data){
+			    console.log(data);
+				$('#messageOutput').html(JSON.stringify(data, null, 4));
+			});
+		});
+
+		$('#getName').on('click', function(){
+			// Send postMessage to Window B
+			var syncMessageRequest = syncMessageRequestObject.postMessageRequest({
+			    action: 'getName',
 			    data: {}
 			});
 
@@ -32,7 +46,8 @@
 <body>
 	<h3>Page A</h3>
 	<pre id="messageOutput"></pre>
-	<button id="sendMessage">Get Items</button>
+	<button id="getItems">Get Items</button>
+	<button id="getName">Get Name</button>
 
 	<h3>Page B embedded in Iframe</h3>
 	<iframe id="responderWindowIframe" src="pageB.html" width="500" height="500"></iframe>
diff --git a/example/pageB.html b/example/pageB.html
@@ -6,11 +6,22 @@
 	<script type="text/javascript">
 	$(function(){
 		var items = 5;
-		$('#messageOutput').html('Number of Items: ' + items);
+		var name = 'Foo';
+		$('#messageOutput').html('Name: ' + name + '<br/>' +
+								 'Number of Items: ' + items);
 
-		var syncMessage = new SyncMessage();
-		syncMessage.syncMessageResponseInit(window, '*', window.parent, function(){
+		function getItems(){
 			return items;
+		}
+
+		function getName(){
+			return name;
+		}
+
+		var syncMessage = new SyncMessage();
+		syncMessage.syncMessageResponseInit(window, '*', window.parent, {
+			'getItems': getItems,
+			'getName': getName,
 		});
 
 	});
