From 9d02b0a586962d1fcd329b5caa46c3b500ad8013 Mon Sep 17 00:00:00 2001 From: Faldrian Date: Sun, 3 Aug 2014 12:47:44 +0200 Subject: [PATCH 1/6] remove first thumbnail; duplicate of big photo --- app/assets/javascripts/app/views/content_view.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/app/views/content_view.js b/app/assets/javascripts/app/views/content_view.js index 73982a9b7..d4a57d684 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 in big + return photos; }, From f9215ce7ddc958779d25753f6427a1d2de422f28 Mon Sep 17 00:00:00 2001 From: Faldrian Date: Sun, 3 Aug 2014 14:41:12 +0200 Subject: [PATCH 2/6] images are shown in a single row and can be scrolled using buttons on sides --- app/assets/javascripts/widgets/lightbox.js | 16 ++++++++++- app/assets/stylesheets/lightbox.css.scss | 32 +++++++++++++++++++--- app/assets/templates/header_tpl.jst.hbs | 6 +++- 3 files changed, 48 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/widgets/lightbox.js b/app/assets/javascripts/widgets/lightbox.js index 6152762de..f75ddf92a 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,18 @@ jQuery.fn.center = (function() { self.resetLightbox(); }); + self.scrollleft.click(function(evt){ + evt.preventDefault(); + evt.stopPropagation(); + self.navigation.scrollLeft(self.navigation.scrollLeft() - (self.window.width() - 150)); + }); + + self.scrollright.click(function(evt){ + evt.preventDefault(); + evt.stopPropagation(); + self.navigation.scrollLeft(self.navigation.scrollLeft() + (self.window.width() - 150)); + }); + self.body.keydown(function(evt) { var imageThumb = self.imageset.find("img.selected"); diff --git a/app/assets/stylesheets/lightbox.css.scss b/app/assets/stylesheets/lightbox.css.scss index b5aca7a19..7e65ee856 100644 --- a/app/assets/stylesheets/lightbox.css.scss +++ b/app/assets/stylesheets/lightbox.css.scss @@ -88,16 +88,41 @@ 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; + margin: 0 30px 0 30px; + overflow: hidden; +} + +#lightbox-scrollleft, #lightbox-scrollright{ + color: #fff; + display: inline-block; + height: 70px; + width: 30px; + position: fixed; +} + +#lightbox-scrollleft{ + left: 0px; +} + +#lightbox-scrollright{ + right: 0px; +} + +#lightbox-imageset{ + display: inline-block; + vertical-align: bottom; + padding-right: 100px; + padding-left: 40px; img{ @include transition(opacity, 0.2s); @@ -120,8 +145,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 @@
[x] {{t "header.close"}} - +
From 172bc80ec162e746d61b6667be8c65ca9d4fc580 Mon Sep 17 00:00:00 2001 From: Faldrian Date: Sun, 3 Aug 2014 15:32:57 +0200 Subject: [PATCH 3/6] thumbnails scroll to currently selected image smoothly --- app/assets/javascripts/widgets/lightbox.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/widgets/lightbox.js b/app/assets/javascripts/widgets/lightbox.js index f75ddf92a..f7f8d1f15 100644 --- a/app/assets/javascripts/widgets/lightbox.js +++ b/app/assets/javascripts/widgets/lightbox.js @@ -60,13 +60,13 @@ jQuery.fn.center = (function() { self.scrollleft.click(function(evt){ evt.preventDefault(); evt.stopPropagation(); - self.navigation.scrollLeft(self.navigation.scrollLeft() - (self.window.width() - 150)); + self.navigation.animate({scrollLeft: (self.navigation.scrollLeft() - (self.window.width() - 150))}, 200, 'swing'); }); self.scrollright.click(function(evt){ evt.preventDefault(); evt.stopPropagation(); - self.navigation.scrollLeft(self.navigation.scrollLeft() + (self.window.width() - 150)); + self.navigation.animate({scrollLeft: (self.navigation.scrollLeft() + (self.window.width() - 150))}, 200, 'swing'); }); self.body.keydown(function(evt) { @@ -136,6 +136,8 @@ jQuery.fn.center = (function() { self .selectImage(imageThumb) .revealLightbox(); + + self.scrollToThumbnail(imageThumb); }; this.imagesetImageClicked = function(evt) { @@ -145,11 +147,17 @@ 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; }; From a3811f767c3251085d590fc1af695d1d1c88d7b8 Mon Sep 17 00:00:00 2001 From: Faldrian Date: Sun, 3 Aug 2014 15:53:38 +0200 Subject: [PATCH 4/6] style fixes for prev / next buttons --- app/assets/stylesheets/lightbox.css.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/lightbox.css.scss b/app/assets/stylesheets/lightbox.css.scss index 7e65ee856..9fc9f50bd 100644 --- a/app/assets/stylesheets/lightbox.css.scss +++ b/app/assets/stylesheets/lightbox.css.scss @@ -98,16 +98,19 @@ background-color: rgba(0,0,0,0.4); padding: 5px 0; white-space: nowrap; - margin: 0 30px 0 30px; 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{ @@ -121,8 +124,8 @@ #lightbox-imageset{ display: inline-block; vertical-align: bottom; - padding-right: 100px; - padding-left: 40px; + padding-left: 50px; + padding-right: 50px; img{ @include transition(opacity, 0.2s); From 7a4dbc8b677118cf5c71f2390a8cf927b75f62ce Mon Sep 17 00:00:00 2001 From: Faldrian Date: Sun, 3 Aug 2014 16:00:11 +0200 Subject: [PATCH 5/6] fixed ugly comment --- app/assets/javascripts/app/views/content_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/app/views/content_view.js b/app/assets/javascripts/app/views/content_view.js index d4a57d684..e2ec64cd3 100644 --- a/app/assets/javascripts/app/views/content_view.js +++ b/app/assets/javascripts/app/views/content_view.js @@ -22,7 +22,7 @@ app.views.Content = app.views.Base.extend({ smallPhotos : function() { var photos = this.model.get("photos") if(!photos || photos.length < 2) { return } - photos.splice(0, 1); // remove first photo as it is already shown in big + photos.splice(0, 1); // remove first photo as it is already shown as largePhoto return photos; }, From 9636f372a4910834b117502de5157e37a18fa38c Mon Sep 17 00:00:00 2001 From: Faldrian Date: Sun, 3 Aug 2014 17:17:12 +0200 Subject: [PATCH 6/6] inserted line breaks and wrote a test for app.views.Content.smallPhotos --- app/assets/javascripts/widgets/lightbox.js | 9 ++++++--- spec/javascripts/app/views/content_view_spec.js | 15 +++++++++++++++ 2 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 spec/javascripts/app/views/content_view_spec.js diff --git a/app/assets/javascripts/widgets/lightbox.js b/app/assets/javascripts/widgets/lightbox.js index f7f8d1f15..d896937fc 100644 --- a/app/assets/javascripts/widgets/lightbox.js +++ b/app/assets/javascripts/widgets/lightbox.js @@ -60,13 +60,15 @@ jQuery.fn.center = (function() { self.scrollleft.click(function(evt){ evt.preventDefault(); evt.stopPropagation(); - self.navigation.animate({scrollLeft: (self.navigation.scrollLeft() - (self.window.width() - 150))}, 200, 'swing'); + 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.navigation.animate({scrollLeft: (self.navigation.scrollLeft() + + (self.window.width() - 150))}, 200, 'swing'); }); self.body.keydown(function(evt) { @@ -148,7 +150,8 @@ jQuery.fn.center = (function() { }; this.scrollToThumbnail = function(imageThumb) { - self.navigation.animate({scrollLeft: (self.navigation.scrollLeft() + imageThumb.offset().left +35 - (self.window.width() / 2))}, 200, 'swing'); + self.navigation.animate({scrollLeft: (self.navigation.scrollLeft() + + imageThumb.offset().left +35 - (self.window.width() / 2))}, 200, 'swing'); } this.selectImage = function(imageThumb) { 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