diff --git a/Changelog.md b/Changelog.md index 118dabe21..6f9c7c479 100644 --- a/Changelog.md +++ b/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 diff --git a/app/assets/javascripts/app/views/content_view.js b/app/assets/javascripts/app/views/content_view.js index 73982a9b7..e2ec64cd3 100644 --- a/app/assets/javascripts/app/views/content_view.js +++ b/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; }, diff --git a/app/assets/javascripts/widgets/lightbox.js b/app/assets/javascripts/widgets/lightbox.js index 6152762de..d896937fc 100644 --- a/app/assets/javascripts/widgets/lightbox.js +++ b/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; }; diff --git a/app/assets/stylesheets/lightbox.css.scss b/app/assets/stylesheets/lightbox.css.scss index b5aca7a19..9fc9f50bd 100644 --- a/app/assets/stylesheets/lightbox.css.scss +++ b/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; } } diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs index 99d64aedd..1eb8fbee3 100644 --- a/app/assets/templates/header_tpl.jst.hbs +++ b/app/assets/templates/header_tpl.jst.hbs @@ -114,7 +114,11 @@ diff --git a/spec/javascripts/app/views/content_view_spec.js b/spec/javascripts/app/views/content_view_spec.js new file mode 100644 index 000000000..d7a4442d6 --- /dev/null +++ b/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) + }); + + }); +}); \ No newline at end of file