adblockpluschrome: Open share page in lightbox

firstRun.js

Index: firstRun.js
===================================================================
--- a/firstRun.js
+++ b/firstRun.js
@@ -3,6 +3,62 @@
 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 = $("<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 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.

+  {
+    body.append(iframe);
+  });
+}
+
+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);
+        });
+  });
+}
+
 function init()
 {
   // Choose a share text variant randomly
@@ -24,13 +80,7 @@
   setLinks("acceptableAdsExplanation", getDocLink("acceptable_ads", "criteria"),
       backgroundPage.openOptions);
 
-  var facebookLinks = document.getElementsByClassName("share-facebook");
-  for (var i = 0; i < facebookLinks.length; i++)
-    facebookLinks[i].href = getDocLink("facebook") + "&variant=" + variant;
-
-  var twitterLinks = document.getElementsByClassName("share-twitter");
-  for (var i = 0; i < twitterLinks.length; i++)
-    twitterLinks[i].href = getDocLink("twitter") + "&variant=" + variant;
+  initSocialLinks(variant);
 
   var donateLink = document.getElementById("share-donate");
   donateLink.href = getDocLink("donate") + "&variant=" + variant;