lib/shutterbug/shutterbug.js in shutterbug-0.0.7 vs lib/shutterbug/shutterbug.js in shutterbug-0.0.8

@@ -1,11 +1,14 @@
 /*global $ */
 (function(){
+
   var getBaseUrl = function() {
-    var base = window.location.protocol +  "//" + window.location.host + "/";
-    var root_path = window.location.pathname.split("/").slice(1,-1).join("/");
-    return base + root_path;
+    // var base = window.location.protocol +  "//" + window.location.host + "/";
+    // var root_path = window.location.pathname.split("/").slice(1,-1).join("/");
+    // return base + root_path;
+    var base = window.location.href;
+    return base;
   };
 
   var cloneDomItem =function(elem, elemTag) {
     var width   = elem.width();
     var height  = elem.height();
@@ -17,28 +20,30 @@
     returnElm.attr('width', width);
     returnElm.attr('height', height);
     return returnElm;
   };
 
-  var getDomSnapshot = function(element, imgDst, callback) {
-    var css     = $('<div>').append($('link[rel="stylesheet"]').clone()).html();
-    var width   = element.width();
-    var height  = element.height();
+  var getHtmlFragment = function() {
+    var $element = $(this.element);
+
+    var css     = $('<div>').append($('link[rel="stylesheet"]').clone()).append($('style').clone()).html();
+    var width   = $element.width();
+    var height  = $element.height();
+    var element = null;
     var html_content;
 
-    var replacementImgs = element.find('canvas').map( function(count,elem) {
+    var replacementImgs = $element.find('canvas').map( function(count,elem) {
         var dataUrl = elem.toDataURL('image/png');
         var img = cloneDomItem($(elem),"<img>");
         img.attr('src', dataUrl);
         return img;
     });
 
-    element = element.clone();
+    element = $element.clone();
     element.find('canvas').each(function(i,elm) {
       var backgroundDiv = cloneDomItem($(elm),"<div>");
-      // we should also add a backing (background) dom element
-      // $('canvas.overlay').css('background')
+      // Add a backing (background) dom element for BG canvas property
       $(elm).replaceWith(replacementImgs[i]);
       backgroundDiv.insertBefore($(elm));
     });
 
     element.css({
@@ -47,28 +52,90 @@
       'margin':0,
       'width':width,
       'height':height
     });
 
-    html_content = $('<div>').append(element).html();
+    html_content = {
+      content: $('<div>').append(element).html(),
+      css: css,
+      width: width,
+      height: height,
+      base_url: getBaseUrl()
+    };
+    return html_content;
+  };
 
+  var getPng = function(html) {
+    if(typeof html === 'undefined') {
+      if($(this.element)[0] && $(this.element)[0].contentWindow) {
+        this.requestHtmlFrag();
+        return;
+      }
+      else {
+        html = this.getHtmlFragment();
+      }
+    }
+    var self = this;
     $.ajax({
       url: "CONVERT_PATH",
       type: "POST",
-      data: {
-        'content': html_content,
-        'css': css,
-        'width': width,
-        'height': height,
-        'base_url': getBaseUrl()
-      }
+      data: html
     }).done(function(msg) {
-      if(imgDst) {
-        imgDst.html(msg);
+      if(self.imgDst) {
+        $(self.imgDst).html(msg);
       }
-      if (callback) {
-        callback(msg);
+      if (self.callback) {
+        self.callback(msg);
       }
     });
   };
-  window.getDomSnapshot = getDomSnapshot;
+
+  var requestHtmlFrag = function() {
+    var destination = $(this.element)[0].contentWindow;
+    var message  = {
+      type: 'htmlFragRequest'
+    };
+    destination.postMessage(JSON.stringify(message),"*");
+  };
+
+  window.Shutterbug = function(selector,imgDst,callback) {
+    var shutterbugInstance = {
+      element: selector,
+      imgDst: imgDst,
+      callback: callback,
+      getDomSnapshot: getPng,
+      getPng: getPng,
+      getHtmlFragment: getHtmlFragment,
+      requestHtmlFrag: requestHtmlFrag
+    };
+
+    var htmlFragRequestListen = function(message) {
+      var data = message.data;
+      if (typeof data === 'string') {
+        data = JSON.parse(data);
+      }
+      if(data.type === 'htmlFragRequest') {
+        var response = {
+          type: 'htmlFragResponse',
+          value: shutterbugInstance.getHtmlFragment()
+        };
+        message.source.postMessage(JSON.stringify(response),"*");
+      }
+    };
+
+    var htmlFragResponseListen = function(message) {
+      var data = message.data;
+      if (typeof data === 'string') {
+        data = JSON.parse(data);
+      }
+      var html = null;
+      if(data.type === 'htmlFragResponse') {
+        html = data.value;
+        shutterbugInstance.getPng(html);
+      }
+    };
+    window.addEventListener('message', htmlFragRequestListen, false);
+    window.addEventListener('message', htmlFragResponseListen, false);
+    return shutterbugInstance;
+  };
+
 })();
\ No newline at end of file