Mercurial > mozilla-the-big-picture

changeset 43:1909896414d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
changed microformat to not use img tags anymore, since we can't control the loading of these images on many browsers, which means all pictures are loaded at all resolutions by them.
author Atul Varma <varmaa@toolness.com>
date Mon, 14 Dec 2009 11:20:11 -0800
parents 831e6516b5d2
children 9c7c3cb5f776
files mbp.html mbp.js
diffstat 2 files changed, 79 insertions(+), 73 deletions(-) [+]
line wrap: on
line diff
--- a/mbp.html	Fri Dec 11 17:35:45 2009 -0800
+++ b/mbp.html	Mon Dec 14 11:20:11 2009 -0800
@@ -14,11 +14,11 @@
 <h1>mozilla: the big picture</h1>
 <div class="mbp-entry">
   <a class="link"
-     href="http://blog.mozilla.com/blog/2009/11/06/firefox-goes-mobile-winner-announced-plus-a-new-design-challenge/">
-    <img width="580" height="647"
-         src="http://creative.mozilla.org/images/designs/0/346/346_lg.jpg"
-         style="clip: rect(136, 375, 261, 250);"/>
-  </a>
+     href="http://blog.mozilla.com/blog/2009/11/06/firefox-goes-mobile-winner-announced-plus-a-new-design-challenge/"></a>
+  <a class="picture"
+     data-width="580" data-height="647"
+     href="http://creative.mozilla.org/images/designs/0/346/346_lg.jpg"
+     data-crop="rect(136, 375, 261, 250)"></a>
   <div class="title">Pocketfox</div>
   <div class="date">11.6.09</div>
   <div class="caption">Yaroslaff Chekunov's winning entry for the
@@ -28,15 +28,17 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://www.flickr.com/photos/nois3lab/4088072729/in/set-72157622640597827/">
-    <img width="3720" height="2480"
-         src="http://farm3.static.flickr.com/2567/4088072729_0286a1611c_o.jpg"/>
-    <img width="1024" height="683"
-         src="http://farm3.static.flickr.com/2567/4088072729_57e0e4c513_b.jpg"/>
-    <img width="500" height="333"
-         src="http://farm3.static.flickr.com/2567/4088072729_57e0e4c513.jpg"
-         style="clip: rect(36, 293, 160, 169);"/>
-  </a>
+     href="http://www.flickr.com/photos/nois3lab/4088072729/in/set-72157622640597827/"></a>
+  <a class="picture"
+     data-width="3720" data-height="2480"
+     href="http://farm3.static.flickr.com/2567/4088072729_0286a1611c_o.jpg"></a>
+  <a class="picture"
+     data-width="1024" data-height="683"
+     href="http://farm3.static.flickr.com/2567/4088072729_57e0e4c513_b.jpg"></a>
+  <a class="picture"
+     data-width="500" data-height="333"
+     href="http://farm3.static.flickr.com/2567/4088072729_57e0e4c513.jpg"
+     data-crop="rect(36, 293, 160, 169)"></a>
   <div class="title">Colosseo</div>
   <div class="date">11.8.09</div>
   <div class="caption">In this bold entry to the “Light the World
@@ -45,13 +47,14 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://www.flickr.com/photos/rogeliocalamaya/4090865406/">
-    <img width="663" height="848"
-         src="http://farm3.static.flickr.com/2778/4090865406_2cc961098e_o.jpg"/>
-    <img width="391" height="500"
-         src="http://farm3.static.flickr.com/2778/4090865406_76ed2868d9.jpg"
-         style="clip: rect(163, 240, 290, 113);"/>
-  </a>
+     href="http://www.flickr.com/photos/rogeliocalamaya/4090865406/"></a>
+  <a class="picture"
+     data-width="663" data-height="848"
+     href="http://farm3.static.flickr.com/2778/4090865406_2cc961098e_o.jpg"></a>
+  <a class="picture"
+     data-width="391" data-height="500"
+     href="http://farm3.static.flickr.com/2778/4090865406_76ed2868d9.jpg"
+     data-crop="rect(163, 240, 290, 113)"></a>
   <div class="title">Birthday</div>
   <div class="date">11.9.09</div>
   <div class="caption">Rogelio Calamaya's entry in the “Five Years of
@@ -59,11 +62,11 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://antennasoft.net/robcee/2009/11/12/firebug-1-5-new-features-revealed/">
-    <img width="749" height="401"
-         src="http://farm3.static.flickr.com/2527/4098694166_44025231d6_o.png"
-         style="clip: rect(141, 133, 270, 4);"/>
-  </a>
+     href="http://antennasoft.net/robcee/2009/11/12/firebug-1-5-new-features-revealed/"></a>
+  <a class="picture"
+     data-width="749" data-height="401"
+     href="http://farm3.static.flickr.com/2527/4098694166_44025231d6_o.png"
+     data-crop="rect(141, 133, 270, 4)"></a>
   <div class="title">Break</div>
   <div class="date">11.12.09</div>
   <div class="caption">Rob Campbell shows off Firebug's new
@@ -72,11 +75,11 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://www.womoz.org/blog/?p=142">
-    <img width="420" height="300"
-         src="http://womoz.org/wiki/lib/exe/fetch.php?cache=&media=logos:logo9.jpg"
-         style="clip: rect(48, 255, 250, 53);"/>
-  </a>
+     href="http://www.womoz.org/blog/?p=142"></a>
+  <a class="picture"
+     data-width="420" data-height="300"
+     href="http://womoz.org/wiki/lib/exe/fetch.php?cache=&media=logos:logo9.jpg"
+     data-crop="rect(48, 255, 250, 53)"></a>
   <div class="title">WoMoz</div>
   <div class="date">11.19.09</div>
   <div class="caption">Anamaria Stoica's submission was chosen as the new
@@ -84,13 +87,14 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://blog.stephenhorlander.com/2009/11/20/sketch-day/">
-    <img width="1172" height="906"
-         src="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-large.jpg"/>
-    <img width="490" height="375"
-         src="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-small.jpg"
-         style="clip: rect(16, 206, 197, 25);"/>
-  </a>
+     href="http://blog.stephenhorlander.com/2009/11/20/sketch-day/"></a>
+  <a class="picture"
+     data-width="1172" data-height="906"
+     href="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-large.jpg"></a>
+  <a class="picture"
+     data-width="490" data-height="375"
+     href="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-small.jpg"
+     data-crop="rect(16, 206, 197, 25)"></a>
   <div class="title">Sketch Day</div>
   <div class="date">11.20.09</div>
   <div class="caption">Stephen Horlander, visual designer extraordinaire,
@@ -99,11 +103,11 @@
 </div>
 <div class="mbp-entry">
   <a class="link"
-     href="http://www.azarask.in/blog/post/identity-in-the-browser-firefox/">
-    <img width="1000" height="1500"
-         src="http://farm3.static.flickr.com/2552/4128966575_9876fdb834_o.png"
-         style="clip: rect(411, 720, 573, 558);"/>
-  </a>
+     href="http://www.azarask.in/blog/post/identity-in-the-browser-firefox/"></a>
+  <a class="picture"
+     width="1000" height="1500"
+     href="http://farm3.static.flickr.com/2552/4128966575_9876fdb834_o.png"
+     data-crop="rect(411, 720, 573, 558)"></a>
   <div class="title">Identity</div>
   <div class="date">11.24.09</div>
   <div class="caption">Aza Raskin, Mozilla's Head of User Experience,
--- a/mbp.js	Fri Dec 11 17:35:45 2009 -0800
+++ b/mbp.js	Mon Dec 14 11:20:11 2009 -0800
@@ -1,52 +1,61 @@
 $(window).ready(
   function() {
     var containerWidth = $("#container").width();
-    var rectRegexp = /rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)/;
+    var rectRegexp = /rect\((\d+),? (\d+),? (\d+),? (\d+)\)/;
+
+    function dWidth(element) {
+      return parseInt($(element).attr("data-width"));
+    }
 
     // Each entry may have multiple resolutions of the same image;
     // choose the one that's best for our display device, and
-    // make sure we have a clipping area for its thumbnail.
+    // make sure we have a cropping area for its thumbnail.
     $(".mbp-entry").each(
       function() {
-        var images = $(this).find("img");
-        var lastClip = null;
+        var pictures = $(this).find(".picture");
+        var lastCrop = null;
         var best = null;
-        images.each(
+        pictures.each(
           function() {
-            var clip = $(this).css("clip");
-            if (clip != "auto")
-              lastClip = this;
+            var crop = $(this).attr("data-crop");
+            if (crop)
+              lastCrop = this;
             if (best) {
               // The "best" image is the lowest-resolution image
               // that's still bigger than the width of our container:
               // this way we never upscale, but we also don't waste
               // bandwidth getting a massive image that we won't
               // see.
-              if (this.width < best.width &&
-                  this.width >= containerWidth) {
+              if (dWidth(this) < dWidth(best) &&
+                  dWidth(this) >= containerWidth) {
                 best = this;
               }
             } else
               best = this;
           });
 
-        // If our best image doesn't have a CSS clipping rect associated
-        // with it, we'll use the scaled clipping rect of another
+        // If our best picture doesn't have a cropping rect associated
+        // with it, we'll use the scaled cropping rect of another
         // resolution.
-        if ($(best).css("clip") == "auto" && lastClip) {
-          var scaling = best.width / lastClip.width;
-          var parts = $(lastClip).css("clip").match(rectRegexp);
+        if (!$(best).attr("data-crop") && lastCrop) {
+          var scaling = dWidth(best) / dWidth(lastCrop);
+          var parts = $(lastCrop).attr("data-crop").match(rectRegexp);
           if (!parts)
-            throw new Error("Invalid 'clip' CSS for " + lastClip.src);
+            throw new Error("Invalid 'data-crop' for " + lastCrop.href);
 
           var newParts = [];
           for (var i = 1; i <= 4; i++)
-            newParts.push(Math.floor(parts[i] * scaling) + "px");
-          $(best).css({clip: "rect(" + newParts.join(", ") + ")"});
+            newParts.push(Math.floor(parts[i] * scaling));
+          $(best).attr("data-crop", "rect(" + newParts.join(", ") + ")");
         }
 
-        // Remove all the non-ideal images we don't need.
-        images.each(function() { if (this != best) $(this).remove(); });
+        var image = $("<img/>");
+        image.attr("src", best.href);
+        image.attr("width", $(best).attr("data-width"));
+        image.attr("height", $(best).attr("data-height"));
+        image.attr("data-crop", $(best).attr("data-crop"));
+        $(this).find(".link").empty().append(image);
+        pictures.remove();
       });
 
     var images = $(".mbp-entry img");
@@ -58,17 +67,10 @@
         function onLoaded() {
           $("#countdown").text(--loadsLeft);
 
-          while (this.previousSibling &&
-                 this.previousSibling.isElementContentWhitespace)
-            $(this.previousSibling).remove();
-          while (this.nextSibling &&
-                 this.nextSibling.isElementContentWhitespace)
-            $(this.nextSibling).remove();
-
-          var clip = $(this).css("clip");
-          var parts = clip.match(rectRegexp);
+          var crop = $(this).attr("data-crop");
+          var parts = crop.match(rectRegexp);
           if (!parts)
-            throw new Error("Invalid 'clip' CSS for " + this.src);
+            throw new Error("Invalid 'data-crop' for " + this.src);
 
           var crop = {top: parts[1],
                       right: parts[2],