JSON Object recieving

javascripts/content_scripts/messagingJSON.md

@@ -0,0 +1,32 @@
+Sending and Recieving Messages API
+=======================================
+
+Any injected application can send messages to the content script (privly.js) to trigger it to resize, show or hide the iframe content. JSON is used for this communication. Injected application can use the following blueprint for sending messages :-
+
+An example of a message could be:
+```
+{command:"resize",
+	frameID:"name of iframe"
+	heightNEW:No. of pixels,
+	}
+```
+
+**A possible syntax for sending this message over the host would be:**
+```javascript
+var message = {command:"resize",
+	frameID:"name of iframe"
+	heightNEW:No. of pixels
+	};
+ msgJSON = JSON.stringify(message);
+ parent.postMessage(JSON.stringify(resizeData),"*");
+ ```
+
+##Possible set of options
+
+* command 	: "resize" | "hide" | "show" 
+* frameID  	: "<name of iframe>" 
+* heightNEW	: no. of pixels
+
+
+While using `hide` or `show` as the command, `heightNEW` doesn't matter and you may or may not include it in your message.
+

javascripts/content_scripts/privly.js

@@ -389,6 +389,9 @@ var privly = {
     //Set the source URL
     iFrame.setAttribute("src", applicationUrl);
 
+    //URL which it will be replacing
+    iFrame.setAttribute("data-privlyHref",object.getAttribute("data-privlyHref"));
+
     //The id and the name are the same so that the iframe can be
     //uniquely identified and resized
     var frameIdAndName = "ifrm" + id;
@@ -556,31 +559,59 @@ var privly = {
     }
   },
 
+
+  checkIframePostedMessage: function(message){
+
+    "use strict";
+
+    //check the format of the message
+     if (typeof(message.origin) !== "string"){
+        return;
+    }
+
+    var msg = JSON.parse(message.data);
+
+    if(msg.command === 'resize'){
+      privly.resizeIframePostedMessage(message);
+    }
+    else if(msg.command === 'hide'){
+      privly.hideIframePostedMessage(message);
+    }
+    else if(msg.command === 'show'){
+      privly.showIframePostedMessage(message);
+    }
+    else if(msg.command === 'remove'){
+      privly.removeIframePostedMessage(message);
+    }
+    else{
+      return;
+    }
+
+  },
+
   /**
    * Receive an iframe resize message sent by the iframe using postMessage.
    * Injected iframe elements need to know the height of the iframe's contents.
-   * This function receives a message containing the height of the iframe, and
+   * This function receives a message containing the height of the iframe(in px), and
    * resizes the iframe accordingly.
    *
-   * @param {message} message A posted message from one of the trusted domains
-   * it contains the name of the iframe, and height of the iframe's
-   * contents. Ex: "ifrm0,200"
+   * @param {message} message A posted message in JSON format from one of the 
+   * trusted domains. It contains the command, the name of the iframe, and 
+   * height of the iframe(optional).
+   * contents. Ex: {"command":"resize", "frameID":"ifrm0", "heightNEW":41}
    *
    */
   resizeIframePostedMessage: function(message){
 
     "use strict";
 
-    //check the format of the message
-    if (typeof(message.origin) !== "string" ||
-        typeof(message.data) !== "string" ||
-        message.data.indexOf(',') < 1) {
-      return;
-    }
-
+    var msg = JSON.parse(message.data);
+
     //Get the element by name.
-    var data = message.data.split(",");
-    var iframe = document.getElementsByName(data[0])[0];
+    var frameName = msg.frameID;
+    var heightNew = msg.heightNew;
+    var iframe = document.getElementsByName(frameName)[0];
+
     if (iframe === undefined) {
       return;
     }
@@ -601,10 +632,142 @@ var privly = {
     //make sure the message comes from the expected domain
     if (sourceURL.indexOf(originDomain) === 0)
     {
-      iframe.style.height = data[1]+'px';
+      iframe.style.height = heightNew + 'px';
+    }
+  },
+
+  /**
+   * Receive an iframe hide message sent by the iframe using postMessage.
+   * This function receives a message containing the hide command, and
+   * hides the iframe accordingly. After hiding the iframe, it replaces it
+   * with the original privly URL.
+   *
+   * @param {message} message A posted message in JSON format from one of the 
+   * trusted domains. It contains the command, the name of the iframe, and 
+   * height of the iframe(optional).
+   * contents. Ex: {"command":"hide", "frameID":"ifrm0"}
+   *
+   */
+  hideIframePostedMessage: function(message){
+
+    "use strict";
+
+    var msg = JSON.parse(message.data);
+
+    //Get the element by name.
+    var frameName = msg.frameID;
+    var iframe = document.getElementsByName(frameName)[0];
+    var url = iframe.getAttribute("data-privlyHref");
+
+    if (iframe === undefined) {
+      return;
+    }
+
+    //hides the iframe if it's not already hidden
+    if (iframe.getAttribute("data-privly-display") === "true") {
+        iframe.setAttribute("data-privly-display", "false");
+        iframe.style.display = "none";
+    }
+
+    //finds the link and displays it
+    var link = iframe.nextSibling;
+    if(link.getAttribute("data-privlyhref") === url){
+      //check if it is not already displayed
+      if(link.getAttribute("data-privly-display") === "false"){
+        link.setAttribute("data-privly-display","true");
+        link.style.display = "inherit";
+      }
     }
+
   },
 
+  /**
+   * Receive an iframe show message sent by the iframe using postMessage.
+   * This function receives a message containing the show command, and
+   * displays the hidden iframe accordingly. The URL appearing at the place while
+   * iframe was hidden gets replaced by the iframe. This is done by hiding the url.
+   *
+   * @param {message} message A posted message in JSON format from one of the 
+   * trusted domains. It contains the command, the name of the iframe, and 
+   * height of the iframe(optional).
+   * contents. Ex: {"command":"show", "frameID":"ifrm0"}
+   *
+   */
+  showIframePostedMessage: function(message){
+
+    "use strict";
+
+    var msg = JSON.parse(message.data);
+
+    //Get the element by name.
+    var frameName = msg.frameID;
+    var iframe = document.getElementsByName(frameName)[0];
+    var url = iframe.getAttribute("data-privlyHref");
+
+    if (iframe === undefined) {
+      return;
+    }
+
+    //shows the iframe
+    if (iframe.getAttribute("data-privly-display") === "false") {
+        iframe.setAttribute("data-privly-display", "true");
+        iframe.style.display = "";
+    }
+
+    //finds the link and hides it
+    var link = iframe.nextSibling;
+    if(link.getAttribute("data-privlyhref") === url){
+      if(link.getAttribute("data-privly-display") === "true"){
+        link.setAttribute("data-privly-display","false");
+        link.style.display = "none";
+      }
+    }
+
+  },
+
+
+  /**
+   * Receive an iframe remove message sent by the iframe using postMessage.
+   * This function receives a message containing the remove command and name of the iframe, 
+   * and removes the iframe accordingly. After removing it replaces iframe with the
+   * privly URL.
+   *
+   * @param {message} message A posted message in JSON format from one of the 
+   * trusted domains. It contains the command, the name of the iframe, and 
+   * height of the iframe(optional).
+   * contents. Ex: {"command":"remove", "frameID":"ifrm0"}
+   *
+   */
+  removeIframePostedMessage: function(message){
+
+    "use strict";
+
+    var msg = JSON.parse(message.data);
+
+    //Get the element by name.
+    var frameName = msg.frameID;
+    var iframe = document.getElementsByName(frameName)[0];
+    var url = iframe.getAttribute("data-privlyHref");
+
+    if (iframe === undefined) {
+      return;
+    }
+
+    //finds the link and displays it
+    var link = iframe.nextSibling;
+    if(link.getAttribute("data-privlyhref") === url){
+      //check if it is not already displayed
+      if(link.getAttribute("data-privly-display") === "false"){
+        link.setAttribute("data-privly-display","true");
+        link.style.display = "inherit";
+      }
+    }
+
+    //removes the iframe
+    iframe.parentElement.removeChild(iframe);
+  },
+
+
   /**
    * Indicates whether the script is waiting to run again.
    * This prevents DOMNodeInserted from sending hundreds of extension runs
@@ -686,7 +849,7 @@ var privly = {
     //The content's iframe will post a message to the hosting document.
     //This listener sets the height  of the iframe according to the messaged
     //height
-    window.addEventListener("message", privly.resizeIframePostedMessage,
+    window.addEventListener("message", privly.checkIframePostedMessage,
       false, true);
 
     privly.runPending = true;
@@ -716,7 +879,7 @@ var privly = {
 
     "use strict";
 
-    window.removeEventListener("message", privly.resizeIframePostedMessage,
+    window.removeEventListener("message", privly.checkIframePostedMessage,
       false);
 
     privly.observer.disconnect();