Fix full size dimensions after rotating an image on the photo view page.

The photo view page caches the dimensions of the full size and then
renders it in Javascript.  But after rotation, those dimensions are no
longer valid.  Create a new function on the items controller that
returns the appropriate dimensions, then add a hook on
$.gallery_replace_image and implement the hook on the photo view page
to have it make an async call to get the new dimensions.

Fixes ticket #1317

3 files changed, 26 insertions, 1 deletions

diff --git a/lib/gallery.common.js b/lib/gallery.common.js
index a8b237bf..69452f39 100644
--- a/lib/gallery.common.js
+++ b/lib/gallery.common.js
@@ -121,6 +121,9 @@
   // Ajax handler for replacing an image, used in Ajax thumbnail rotation
   $.gallery_replace_image = function(data, thumb) {
     $(thumb).attr({src: data.src, width: data.width, height: data.height});
+    if (typeof gallery_image_replaced_hook == 'function') {
+      gallery_image_replaced_hook(data, thumb);
+    }
   };
 
   // Initialize context menus
diff --git a/modules/gallery/controllers/items.php b/modules/gallery/controllers/items.php
index f205bf86..39b0f638 100644
--- a/modules/gallery/controllers/items.php
+++ b/modules/gallery/controllers/items.php
@@ -31,4 +31,13 @@ class Items_Controller extends Controller {
     access::required("view", $item);
     url::redirect($item->abs_url());
   }
+
+  // Return the width/height dimensinons for the given item
+  public function dimensions($id) {
+    $item = ORM::factory("item", $id);
+    access::required("view", $item);
+    json::reply(array("thumb" => array((int)$item->thumb_width, (int)$item->thumb_height),
+                      "resize" => array((int)$item->resize_width, (int)$item->resize_height),
+                      "full" => array((int)$item->width, (int)$item->height)));
+  }
 }
diff --git a/themes/wind/views/photo.html.php b/themes/wind/views/photo.html.php
index f8b5511c..cb830e23 100644
--- a/themes/wind/views/photo.html.php
+++ b/themes/wind/views/photo.html.php
@@ -4,10 +4,23 @@
 <!-- Use javascript to show the full size as an overlay on the current page -->
 <script type="text/javascript">
   $(document).ready(function() {
+    full_dims = [<?= $theme->item()->width ?>, <?= $theme->item()->height ?>];
     $(".g-fullsize-link").click(function() {
-      $.gallery_show_full_size(<?= html::js_string($theme->item()->file_url()) ?>, "<?= $theme->item()->width ?>", "<?= $theme->item()->height ?>");
+      $.gallery_show_full_size(<?= html::js_string($theme->item()->file_url()) ?>, full_dims[0], full_dims[1]);
       return false;
     });
+
+    // After the image is rotated or replaced we have to reload the image dimensions
+    // so that the full size view isn't distorted.
+    gallery_image_replaced_hook = function(data, thumb) {
+      $.ajax({
+        url: "<?= url::site("items/dimensions/" . $theme->item()->id) ?>",
+        dataType: "json",
+        success: function(data, textStatus) {
+          full_dims = data.full;
+        }
+      });
+    }
   });
 </script>
 <? endif ?>