adblockpluschrome: Open share page in lightbox

firstRun.js

 var backgroundPage = chrome.extension.getBackgroundPage();
 var require = backgroundPage.require;
 var Prefs = require("prefs").Prefs;
 var Utils = require("utils").Utils;
 
-jQuery.fn.center = function()
-{
-  return this.css({
-    position: "absolute",
-    top: Math.max(0, (($(window).height() - this.outerHeight()) / 2)
-                  + $(window).scrollTop()),
-    left: Math.max(0, (($(window).width() - this.outerWidth()) / 2)
-                   + $(window).scrollLeft())
-  });
-};
-
 function openSharePopup(url)
 {
-  var glassPane = $("<div/>").addClass("share-popup-glass-pane");
+  var iframe = document.getElementById("share-popup");
+  var glassPane = document.getElementById("glass-pane");
 
-  var iframe = $("<iframe/>")
-      .addClass("share-popup")
-      .attr({
-        src: url,
-        scrolling: "no"
-      })
-      .on("load", function()
-      {
-        iframe.center().fadeIn(150);
-        $(document).click(function()
-        {
-          iframe.fadeOut(100, iframe.remove);
-          glassPane.fadeOut(200, glassPane.remove);

[Wladimir Palant, 2012/10/25 07:12:00]

I think that using CSS transitions for fade-in/fade-out is a cleaner solution...

-        });
-      });

[Wladimir Palant, 2012/10/25 07:12:00]

Generally I'm trying to avoid creating non-trivial elements dynamically, for
sake of proper markup separation. Why not put this frame into firstRun.html with
attribute hidden="true"? Then you can simply remove that attribute whenever
necessary. Same goes for the glass pane of course.

+  var popupMessageListener = function(event)
+  {
+    if (event.origin !== url)
+      return;
 
-  var body = $(document.body);
-  body.append(glassPane);
-  glassPane.fadeIn(200, function()

[Felix Dahlke, 2012/10/24 14:57:33]

I would have loved to use Function.bind here, but the alternatives are:

Function.prototype.bind.call(body.append, body, iframe);

document.body.appendChild.bind(document.body, iframe[0])

I think what I have uploaded is more readable than any of those.

[Wladimir Palant, 2012/10/25 07:12:00]

I agree - bind() is good for the obvious cases, this isn't one of them.

+    console.log(event);

[Wladimir Palant, 2012/10/25 13:31:04]

Debug code?

+    iframe.width = event.data.width;
+    iframe.height = event.data.height;
+    window.removeEventListener("message", popupMessageListener);
+  };
+  window.addEventListener("message", popupMessageListener, false);
+
+  var popupLoadListener = function()
   {
-    body.append(iframe);
-  });
+    iframe.className = "visible";
+
+    var popupCloseListener = function()
+    {
+      iframe.className = glassPane.className = "";
+      document.removeEventListener("click", popupCloseListener);
+    };
+    document.addEventListener("click", popupCloseListener, false);
+    iframe.removeEventListener("load", popupLoadListener);
+  };
+  iframe.addEventListener("load", popupLoadListener, false);
+
+  iframe.src = url;
+  glassPane.className = "visible";
 }
 
 function initSocialLinks(variant)
 {
   var networks = ["twitter", "facebook"];
   networks.forEach(function(network)
   {
     var links = document.getElementsByClassName("share-" + network);
     for (var i = 0; i < links.length; i++)
-      $(links[i])
-        .attr("href", "#")

[Wladimir Palant, 2012/10/25 07:12:00]

Why does this attribute need to be defined dynamically?

-        .click(function(e)
-        {
-          e.preventDefault();
-          openSharePopup(getDocLink(network) + "&variant=" + variant);
-        });
+    {
+      links[i].addEventListener("click", function(e)
+      {
+        e.preventDefault();
+        openSharePopup(getDocLink("share-" + network) + "&variant=" + variant);
+      }, false);
+    }
   });
 }
 
 function init()
 {
   // Choose a share text variant randomly
   var variant = Math.floor(Math.random() * 2) + 1;
   document.documentElement.setAttribute("share-variant", variant);
 
   // Set up page title
@@ skipping 39 matching lines @@
     }
   }
 }
 
 function getDocLink(page, anchor)
 {
   return Prefs.documentation_link
               .replace(/%LINK%/g, page)
               .replace(/%LANG%/g, Utils.appLocale) + (anchor ? "#" + anchor : "");
 }