From ca20323b87a2cb664d65dcd07b251d630288d171 Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Sun, 10 Mar 2013 13:30:41 -0700
Subject: [PATCH] Preload images in Pholio and fix dimension rendering

Summary:
Preload all the images when viewing a pholio. Fixes T2692.

We should probably use lower-resolution previews on mobile and only show full resolution when the user taps. We should also suppress the thumbnails from loading on mobile since they aren't visible. But neither is critical for the moment.

Test Plan: Added logging, verified everything loaded.

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2692

Differential Revision: https://secure.phabricator.com/D5316
---
 src/__celerity_resource_map__.php             |  2 +-
 .../pholio/behavior-pholio-mock-view.js       | 58 +++++++++++++++++--
 2 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php
index 2552c6e460..755648e2d1 100644
--- a/src/__celerity_resource_map__.php
+++ b/src/__celerity_resource_map__.php
@@ -1963,7 +1963,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-pholio-mock-view' =>
   array(
-    'uri' => '/res/fb05d457/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'uri' => '/res/eefc43b3/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
     'type' => 'js',
     'requires' =>
     array(
diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
index fbf1e20a6a..22511c976d 100644
--- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
@@ -674,13 +674,37 @@ JX.behavior('pholio-mock-view', function(config) {
       image.desc);
     info.push(desc);
 
-    var visible = null;
+    // Render image dimensions and visible size. If we have this infomation
+    // from the server we can display some of it immediately; otherwise, we need
+    // to wait for the image to load so we can read dimension information from
+    // it.
+
+    var image_x = image.width;
+    var image_y = image.height;
+    var display_x = null;
     if (image.tag) {
-      var area = Math.round(100 * (image.tag.width / image.width));
-      area = ['(' + area + '%' + ')'];
-      visible = [' ', JX.$N('span', {className: 'pholio-visible-size'}, area)];
+      image_x = image.tag.naturalWidth;
+      image_y = image.tag.naturalHeight;
+      display_x = image.tag.width;
+    }
+
+    var visible = [];
+    if (image_x) {
+      visible.push([image_x, '\u00d7', image_y, 'px']);
+      if (display_x) {
+        var area = Math.round(100 * (display_x / image_x));
+        visible.push(' ');
+        visible.push(
+          JX.$N(
+            'span',
+            {className: 'pholio-visible-size'},
+            ['(', area, '%', ')']));
+      }
+    }
+
+    if (visible.length) {
+      info.push(visible);
     }
-    info.push([image.width, '\u00d7', image.height, 'px', visible]);
 
     var full_link = JX.$N(
       'a',
@@ -773,4 +797,28 @@ JX.behavior('pholio-mock-view', function(config) {
     return el;
   }
 
+
+/* -(  Preload  )------------------------------------------------------------ */
+
+  var preload = [];
+  for (var ii = 0; ii < config.images.length; ii++) {
+    preload.push(config.images[ii].fullURI);
+  }
+
+  function preload_next() {
+    next_src = preload[0];
+    if (!next_src) {
+      return;
+    }
+    preload.splice(0, 1);
+
+    var img = JX.$N('img');
+    img.onload = preload_next;
+    img.onerror = preload_next;
+    img.src = next_src;
+  }
+
+  preload_next();
+
+
 });