Merge pull request #5102 from Faldrian/feature/4474-fix_lightbox_thumbnails

Feature/4474 fix lightbox thumbnails

Changelog.md

@@ -22,6 +22,7 @@
 * Port admin pages to bootstrap, polish user search results, allow accounts to be closed from the backend [#5046](https://github.com/diaspora/diaspora/pull/5046)
 * Reference Salmon endpoint in Webfinger XRD to aid discovery by alternative implementations [#5062](https://github.com/diaspora/diaspora/pull/5062)
 * Change minimal birth year for the birthday field to 1910 [#5083](https://github.com/diaspora/diaspora/pull/5083)
+* Add scrolling thumbnail switcher in the lightbox [#5102](https://github.com/diaspora/diaspora/pull/5102)
 
 # 0.4.0.1
 

app/assets/javascripts/app/views/content_view.js

@@ -22,7 +22,8 @@ app.views.Content = app.views.Base.extend({
   smallPhotos : function() {
     var photos = this.model.get("photos")
     if(!photos || photos.length < 2) { return }
-    return photos
+    photos.splice(0, 1); // remove first photo as it is already shown as largePhoto
+    return photos;
   },
 
 

app/assets/javascripts/widgets/lightbox.js

@@ -28,9 +28,12 @@ jQuery.fn.center = (function() {
     this.subscribe("widget/ready", function(evt) {
       $.extend(self, {
         lightbox: $("#lightbox"),
+        navigation: $("#lightbox-navigation"),
         imageset: $("#lightbox-imageset"),
         backdrop: $("#lightbox-backdrop"),
         closelink: $("#lightbox-close-link"),
+        scrollleft: $("#lightbox-scrollleft"),
+        scrollright: $("#lightbox-scrollright"),
         image: $("#lightbox-image"),
         body: $(document.body),
         window: $(window)
@@ -47,7 +50,6 @@ jQuery.fn.center = (function() {
         evt.preventDefault();
         self.resetLightbox();
       });
-      self.backdrop.click(self.resetLightbox);
       self.lightbox.click(self.resetLightbox);
 
       self.backdrop.click(function(evt) {
@@ -55,6 +57,20 @@ jQuery.fn.center = (function() {
         self.resetLightbox();
       });
 
+      self.scrollleft.click(function(evt){
+        evt.preventDefault();
+        evt.stopPropagation();
+        self.navigation.animate({scrollLeft: (self.navigation.scrollLeft()
+           - (self.window.width() - 150))}, 200, 'swing');
+      });
+
+      self.scrollright.click(function(evt){
+        evt.preventDefault();
+        evt.stopPropagation();
+        self.navigation.animate({scrollLeft: (self.navigation.scrollLeft()
+           + (self.window.width() - 150))}, 200, 'swing');
+      });
+
       self.body.keydown(function(evt) {
         var imageThumb = self.imageset.find("img.selected");
 
@@ -122,6 +138,8 @@ jQuery.fn.center = (function() {
       self
         .selectImage(imageThumb)
         .revealLightbox();
+
+      self.scrollToThumbnail(imageThumb);
     };
 
     this.imagesetImageClicked = function(evt) {
@@ -131,11 +149,18 @@ jQuery.fn.center = (function() {
       self.selectImage($(this));
     };
 
+    this.scrollToThumbnail = function(imageThumb) {
+      self.navigation.animate({scrollLeft: (self.navigation.scrollLeft()
+         + imageThumb.offset().left +35 - (self.window.width() / 2))}, 200, 'swing');
+    }
+
     this.selectImage = function(imageThumb) {
       $(".selected", self.imageset).removeClass("selected");
       imageThumb.addClass("selected");
       self.image.attr("src", imageThumb.attr("data-full-photo"));
 
+      self.scrollToThumbnail(imageThumb);
+
       return self;
     };
 

app/assets/stylesheets/lightbox.css.scss

@@ -88,16 +88,44 @@
   display: none;
 }
 
-#lightbox-imageset{
+#lightbox-navigation{
   z-index: 1004;
   position: fixed;
   width: 100%;
   left: 0;
   bottom: 0;
-  display: none;
   text-align: center;
   background-color: rgba(0,0,0,0.4);
   padding: 5px 0;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#lightbox-scrollleft, #lightbox-scrollright{
+  z-index: 1005;
+  color: #fff;
+  background-color: #0f0f0f;
+  display: inline-block;
+  height: 70px;
+  width: 30px;
+  position: fixed;
+  cursor: pointer;
+  font-size: 3em;
+}
+
+#lightbox-scrollleft{
+  left: 0px;
+}
+
+#lightbox-scrollright{
+  right: 0px;
+}
+
+#lightbox-imageset{
+  display: inline-block;
+  vertical-align: bottom;
+  padding-left: 50px;
+  padding-right: 50px;
 
   img{
     @include transition(opacity, 0.2s);
@@ -120,8 +148,7 @@
 
 body.lightboxed{
   overflow: hidden;
-  #lightbox-backdrop,
-  #lightbox-imageset{
+  #lightbox-backdrop{
     display: block;
   }
 }

app/assets/templates/header_tpl.jst.hbs

@@ -114,7 +114,11 @@
     <div id="lightbox-content">
       <a href="#" id="lightbox-close-link">[x] {{t "header.close"}}</a>
       <img id="lightbox-image">
+      <div id="lightbox-navigation">
+        <div id="lightbox-scrollleft">«</div>
         <div id="lightbox-imageset"></div>
+        <div id="lightbox-scrollright">»</div>
+      </div>
     </div>
   </div>
   <div id="lightbox-backdrop"></div>

spec/javascripts/app/views/content_view_spec.js

@@ -0,0 +1,15 @@
+describe("app.views.Content", function(){
+  beforeEach(function(){
+    this.post = new app.models.StatusMessage();
+    this.view = new app.views.Content({model : this.post})
+  });
+
+  describe("rendering", function(){
+
+    it("should return all but the first photo from the post", function() {
+      this.post.set({photos : [1,2]}) // set 2 Photos
+      expect(this.view.smallPhotos().length).toEqual(1)
+    });
+
+  });
+});