[dw-free] jQuerify media embed expansion

[fu]

[commit: http://hg.dwscoalition.org/dw-free/rev/634318082e89]

http://bugs.dwscoalition.org/show_bug.cgi?id=3672

Move media embed expansion over to jQuery. Also make the link to the embed
work even without JS enabled (opens in the current tab).

Patch by fu.

Files modified:

• cgi-bin/DW/BetaFeatures/journaljquery.pm
• cgi-bin/LJ/EmbedModule.pm
• cgi-bin/LJ/S2.pm
• cgi-bin/weblib.pl
• htdocs/js/jquery.mediaplaceholder.js

--------------------------------------------------------------------------------
diff -r d94858266e5f -r 634318082e89 cgi-bin/DW/BetaFeatures/journaljquery.pm
--- a/cgi-bin/DW/BetaFeatures/journaljquery.pm	Thu May 12 16:38:51 2011 +0800
+++ b/cgi-bin/DW/BetaFeatures/journaljquery.pm	Thu May 12 16:42:01 2011 +0800
@@ -25,11 +25,11 @@
         "Quick reply",
         "Thread expander",
         "Same-page poll submission",
+        "Media embed placeholder expansion",
     );
 
     my @notimplemented = (
         "Contextual hover",
-        "Media embed placeholder expansion",
         "Icon browser",
         "Same-page comment tracking",
     );
diff -r d94858266e5f -r 634318082e89 cgi-bin/LJ/EmbedModule.pm
--- a/cgi-bin/LJ/EmbedModule.pm	Thu May 12 16:38:51 2011 +0800
+++ b/cgi-bin/LJ/EmbedModule.pm	Thu May 12 16:42:01 2011 +0800
@@ -342,7 +342,8 @@
     my $name = "${id}_" . LJ::make_auth_code( 5 );
 
     my $auth_token = LJ::eurl(LJ::Auth->sessionless_auth_token('embedcontent', moduleid => $moduleid, journalid => $journalid, preview => $preview,));
-    my $iframe_tag = qq {<iframe src="http://$LJ::EMBED_MODULE_DOMAIN/?journalid=$journalid&moduleid=$moduleid&preview=$preview&auth_token=$auth_token" } .
+    my $iframe_link = qq{http://$LJ::EMBED_MODULE_DOMAIN/?journalid=$journalid&moduleid=$moduleid&preview=$preview&auth_token=$auth_token};
+    my $iframe_tag = qq {<iframe src="$iframe_link" } .
         qq{width="$width" height="$height" allowtransparency="true" frameborder="0" class="lj_embedcontent" id="$id" name="$name"></iframe>};
 
     my $remote = LJ::get_remote();
@@ -368,6 +369,7 @@
     # placeholder
     return LJ::placeholder_link(
                                 placeholder_html => $iframe_tag,
+                                link             => $iframe_link,
                                 width            => $width,
                                 height           => $height,
                                 img              => "$LJ::IMGPREFIX/videoplaceholder.png",
diff -r d94858266e5f -r 634318082e89 cgi-bin/LJ/S2.pm
--- a/cgi-bin/LJ/S2.pm	Thu May 12 16:38:51 2011 +0800
+++ b/cgi-bin/LJ/S2.pm	Thu May 12 16:42:01 2011 +0800
@@ -199,6 +199,7 @@
 
                         js/login-jquery.js
                         js/jquery.poll.js
+                        js/jquery.mediaplaceholder.js
                     ) );
     }
 
diff -r d94858266e5f -r 634318082e89 cgi-bin/weblib.pl
--- a/cgi-bin/weblib.pl	Thu May 12 16:38:51 2011 +0800
+++ b/cgi-bin/weblib.pl	Thu May 12 16:42:01 2011 +0800
@@ -3740,7 +3740,7 @@
             <div class="LJ_Placeholder_Container" style="width: ${width}px; height: ${height}px;">
                 <div class="LJ_Placeholder_HTML" style="display: none;">$placeholder_html</div>
                 <div class="LJ_Container"></div>
-                <a href="$link" onclick="return false;">
+                <a href="$link">
                     <img src="$img" class="LJ_Placeholder" title="Click to show embedded content" />
                 </a>
             </div>
diff -r d94858266e5f -r 634318082e89 htdocs/js/jquery.mediaplaceholder.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/htdocs/js/jquery.mediaplaceholder.js	Thu May 12 16:42:01 2011 +0800
@@ -0,0 +1,32 @@
+(function($){
+
+$.widget("dw.mediaplaceholder", {
+    _create: function() {
+        var parent = this.element.closest(".LJ_Placeholder_Container");
+        var container = parent.find("div.LJ_Container");
+        var html = parent.find("div.LJ_Placeholder_HTML");
+
+        if ( parent.size == 0 || container.size == 0 || html.size == 0 ) return;
+
+        this.element.click(function(e){
+            e.stopPropagation();
+            e.preventDefault();
+
+            console.log(html);
+            var originalembed = $(unescape(html.html()))
+                .wrap("<span></span>"); // IE weirdness
+            container.append(originalembed);
+            $(this).hide();
+        });
+
+    }
+});
+
+})(jQuery);
+
+jQuery(document).ready(function($){
+    $("img.LJ_Placeholder").mediaplaceholder();
+    $(document.body).delegate("*","updatedcontent.entry", function(e) {
+        $(this).find("img.LJ_Placeholder").mediaplaceholder();
+    });
+});
--------------------------------------------------------------------------------