Merge pull request #406 from rdsubhas/release1

1546 | Add new button in photo management page to view full size photo

app/views/child_media/manage_photos.html.erb

@@ -1,20 +1,16 @@
-
 <h1><%= link_to 'Children', children_path %> &gt; <%= link_to @child.name, child_path(@child) %> (<%= @child.short_id %>) &gt; Manage photo</h1>
 <script type="text/javascript">
-    $(function() {
-      window.Photos.refresh(<%= @photos_details.to_json.html_safe %>);
-  });
+$(function() {
+  window.Photos.refresh(<%= @photos_details.to_json.html_safe %>);
+});
 </script>
- <div class="clearfix"></div>
+<div class="clearfix"></div>
 <div class="manage_photos">
-
-
-<div class="thumbnails">
-  <div class="flash" style="display:none"><div id="notice" class="error"></div></div><br class="clearfix" />
-</div>
+  <div class="thumbnails">
+    <div class="flash" style="display:none"><div id="notice" class="error"></div></div><br class="clearfix" />
+  </div>
   <div class="clearfix"></div>
   <a href="#" id="selectPrimaryPhotoButton" class="btn"><span class="photo">Choose as primary photo</span></a>
+  <a href="#" id="viewFullSizePhotoButton" class="btn"><span class="photo">View full size photo</span></a>
   <div class="clearfix"></div>
 </div>
-
-

public/javascripts/manage_photos.js

@@ -1,7 +1,6 @@
 var ManagePhotos = ManagePhotos || {};
 
 ManagePhotos.init = function() {
-
   _.templateSettings = {
     interpolate : /\{\{(.+?)\}\}/g
   };
@@ -89,7 +88,6 @@ ManagePhotos.init = function() {
   });
 
   window.AppView = Backbone.View.extend({
-
     // Instead of generating a new element, bind to the existing skeleton of
     // the App already present in the HTML.
     el: '.thumbnails',
@@ -101,19 +99,6 @@ ManagePhotos.init = function() {
       Photos.bind('refresh', this.addAll);
 
       $("#selectPrimaryPhotoButton").click(function(e) {
-
-        var showMessage = function(msg, msgType) {
-          var noticeElement = $('#notice');
-          noticeElement.text(msg);
-          noticeElement.addClass(msgType);
-          setTimeout(function() {
-            $('.flash').fadeOut(function() {
-              noticeElement.removeClass(msgType);
-            });
-          }, 5000);
-          $('.flash').fadeIn();
-        }
-
         e.preventDefault();
         var selectedPhoto = Photos.getSelectedPhoto();
         if (selectedPhoto) {
@@ -124,6 +109,16 @@ ManagePhotos.init = function() {
           showMessage(I18n.t('messages.select_photo'), 'error');
         }
       });
+
+      $("#viewFullSizePhotoButton").click(function(e) {
+        e.preventDefault();
+        var selectedPhoto = Photos.getSelectedPhoto();
+        if (selectedPhoto) {
+          window.open(selectedPhoto.attributes.photo_url);
+        } else {
+          showMessage(I18n.t('messages.select_photo'), 'error');
+        }
+      });
     },
 
     addOne: function(photo) {
@@ -134,10 +129,21 @@ ManagePhotos.init = function() {
     addAll: function() {
       Photos.each(this.addOne);
     },
-
   });
 
   window.App = new AppView;
+
+  window.showMessage = function(msg, msgType) {
+    var noticeElement = $('#notice');
+    noticeElement.text(msg);
+    noticeElement.addClass(msgType);
+    setTimeout(function() {
+      $('.flash').fadeOut(function() {
+        noticeElement.removeClass(msgType);
+      });
+    }, 5000);
+    $('.flash').fadeIn();
+  };
 }
 
 $(function() {

spec/javascripts/fixtures/manage_photos.html

@@ -1,10 +1,8 @@
-
 <div class="profile-tools">
   <ul>
     <li class=""><a href="#" id="selectPrimaryPhotoButton">Choose as primary photo</a></li>
+    <li class=""><a href="#" id="viewFullSizePhotoButton">View full size photo</a></li>
   </ul>
 </div>
-
 <div class="thumbnails">
-
 </div>

spec/javascripts/manage_photos.spec.js

@@ -1,16 +1,16 @@
 describe("Manage Photos", function() {
+  beforeEach(function() {
+    loadFixtures('manage_photos.html');
+    ManagePhotos.init();
+    window.Photos.refresh([{ 'photo_url': '/spec/resources/jorge.jpg', 'thumbnail_url': '/spec/resources/jorge.jpg', 'select_primary_photo_url': '/make/jorge/primary/photo'}]);
+  });
 
   //demonstrates use of expected exceptions
   describe("choosing primary photo button", function() {
-
     var ajaxSpy;
 
     beforeEach(function() {
-      loadFixtures('manage_photos.html');
-      ManagePhotos.init();
-      window.Photos.refresh([{ 'photo_url': '/spec/resources/jorge.jpg', 'thumbnail_url': '/spec/resources/jorge.jpg', 'select_primary_photo_url': '/make/jorge/primary/photo'}]);
       ajaxSpy = sinon.spy(jQuery, "ajax");
-
     });
 
     afterEach(function() {
@@ -24,14 +24,36 @@ describe("Manage Photos", function() {
       expect(ajaxSpy).toHaveBeenCalled();
       expect(ajaxSpy.getCall(0).args[0].type).toEqual("PUT");
       expect(ajaxSpy.getCall(0).args[0].url).toEqual("/make/jorge/primary/photo");
-
-
     });
 
     it("doesn't do anything if no photo is selected", function() {
       $('#selectPrimaryPhotoButton').click();
       expect(ajaxSpy).not.toHaveBeenCalled();
     });
+  });
+
+  describe("viewing full size photo button", function() {
+    var ajaxSpy;
+
+    beforeEach(function() {
+      windowSpy = sinon.spy(window, "open");
+    });
+
+    afterEach(function() {
+      window.open.restore();
+    });
+
+    it("opens a new tab with the full size image", function() {
+      $('.thumbnail').click();
+      $('#viewFullSizePhotoButton').click();
+
+      expect(windowSpy).toHaveBeenCalled();
+      expect(windowSpy.getCall(0).args[0]).toEqual(window.Photos.getSelectedPhoto().attributes.photo_url);
+    });
 
+    it("doesn't do anything if no photo is selected", function() {
+      $('#viewFullSizePhotoButton').click();
+      expect(windowSpy).not.toHaveBeenCalled();
+    });
   });
 });