Merge pull request #2916 from Raven24/photos-lightbox

make lightbox work for photos page (+tests)

public/javascripts/app/views/photos_view.js

@@ -7,7 +7,7 @@ app.views.Photos = Backbone.View.extend({
     this.collection = this.model.photos;
 
     this.setupEvents();
-    //this.setupLightbox(); ERROR: "imageThumb is undefined" ...
+    this.setupLightbox();
   },
 
   setupEvents : function(){
@@ -50,6 +50,10 @@ app.views.Photos = Backbone.View.extend({
 
   setupLightbox : function(){
     this.lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
+    this.lightbox.set({
+      imageParent: '#main_stream',
+      imageSelector: 'img.photo'
+    });
     $(this.el).delegate("a.photo-link", "click", this.lightbox.lightboxImageClicked);
   },
 

public/javascripts/widgets/lightbox.js

@@ -20,6 +20,11 @@ jQuery.fn.center = (function() {
   var Lightbox = function() {
     var self = this;
 
+    self.options = {
+      imageParent: '.stream_element',
+      imageSelector: 'img.stream-photo'
+    };
+
     this.subscribe("widget/ready", function(evt) {
       $.extend(self, {
         lightbox: $("#lightbox"),
@@ -88,9 +93,9 @@ jQuery.fn.center = (function() {
     this.lightboxImageClicked = function(evt) {
       evt.preventDefault();
 
-      var selectedImage = $(this).find("img.stream-photo"),
+      var selectedImage = $(this).find(self.options.imageSelector),
         imageUrl = selectedImage.attr("data-full-photo"),
-        images = selectedImage.parents('.stream_element').find('img.stream-photo'),
+        images = selectedImage.parents(self.options.imageParent).find(self.options.imageSelector),
         imageThumb;
 
       if( $.browser.msie ) {
@@ -147,6 +152,10 @@ jQuery.fn.center = (function() {
       self.lightbox.hide();
       self.body.removeClass("lightboxed");
     };
+
+    this.set = function(opts) {
+      $.extend(self.options, opts);
+    };
   };
 
   Diaspora.Widgets.Lightbox = Lightbox;

spec/javascripts/widgets/lightbox-spec.js

@@ -0,0 +1,95 @@
+/*   Copyright (c) 2010-2012, Diaspora Inc.  This file is
+ *   licensed under the Affero General Public License version 3 or later.  See
+ *   the COPYRIGHT file.
+ */
+
+describe("Diaspora.Widgets.Lighbox", function() {
+  var photos;
+
+  var createDummyMarkup = function(opts){
+    var defaults = {
+      linkClass: 'stream-photo-link',
+      imageParent: 'stream_element',
+      imageClass: 'stream-photo'
+    };
+
+    classes = _.extend(defaults, opts);
+    
+    var output = $('<div/>').addClass(classes.imageParent);
+    _.each(photos, function(photo){
+      output.append(
+        $('<a />')
+          .attr('href', '#')
+          .addClass(classes.linkClass)
+          .append(
+            $('<img />')
+              .attr('src', photo.sizes.large)
+              .addClass(classes.imageClass)
+              .data({
+                'small-photo': photo.sizes.small,
+                'full-photo': photo.sizes.large
+              })
+          )
+      );
+    });
+    
+    return output;
+  };
+  
+  beforeEach(function(){
+    $("#jasmine_content").html(
+      '<div id="lightbox" style="display: none;">TESTCONTENT</div>' +
+      '<div id="lightbox-imageset"></div>' +
+      '<div id="lightbox-backdrop"></div>' +
+      '<div id="lightbox-close-link"></div>'
+    );
+
+    photos = $.parseJSON(spec.readFixture("photos_json"))["photos"];
+  });
+  
+  context("opens the lightbox correctly", function() {
+    var lightbox, page, photoElement;
+    
+    beforeEach(function() {
+      $("#jasmine_content").append(createDummyMarkup());
+      photoElement = $('.stream-photo').first();
+      
+      lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
+      $('.stream_element').delegate("a.stream-photo-link", "click", lightbox.lightboxImageClicked);
+    });
+      
+    it("shows the lightbox when a photo is clicked", function() {
+      spyOn(lightbox, 'revealLightbox');
+      photoElement.trigger('click');
+      expect(lightbox.revealLightbox).toHaveBeenCalled();
+    });
+    
+  });
+
+  context("opens lightbox for differently named elements", function(){
+    var lightbox, page, photoElement;
+
+    beforeEach(function() {
+      $("#jasmine_content").append(createDummyMarkup({
+        linkClass: 'photo-link',
+        imageParent: 'main_stream',
+        imageClass: 'photo'
+      }));
+      photoElement = $('.photo').first();
+
+      lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
+      lightbox.set({
+        imageParent: '.main_stream',
+        imageSelector: 'img.photo'
+      });
+      $('.main_stream').delegate("a.photo-link", "click", lightbox.lightboxImageClicked);
+    });
+
+    it("shows the lightbox when a photo is clicked", function() {
+      spyOn(lightbox, 'revealLightbox');
+      photoElement.trigger('click');
+      expect(lightbox.revealLightbox).toHaveBeenCalled();
+    });
+  });
+  
+});