From 63bfcb7c98e540b1e53cdc74d45687e89d05084a Mon Sep 17 00:00:00 2001 From: augier Date: Wed, 5 Aug 2015 22:02:15 +0200 Subject: [PATCH] Using Blueimp image gallery --- Gemfile | 1 + Gemfile.lock | 2 + .../app/pages/single-post-viewer.js | 10 - app/assets/javascripts/app/views.js | 2 +- .../javascripts/app/views/content_view.js | 8 + .../javascripts/app/views/gallery_view.js | 41 ++++ .../app/views/infinite_stream_view.js | 5 +- .../javascripts/app/views/photo_view.js | 4 +- .../javascripts/app/views/photos_view.js | 20 +- .../single_post_content_view.js | 8 +- .../javascripts/app/views/stream_view.js | 8 +- app/assets/javascripts/main.js | 1 + app/assets/javascripts/widgets/lightbox.js | 186 ------------------ app/assets/stylesheets/_application.scss | 5 +- .../stylesheets/bootstrap-complete.scss | 4 + app/assets/stylesheets/gallery.scss | 59 ++++++ app/assets/stylesheets/lightbox.scss | 147 -------------- app/assets/templates/header_tpl.jst.hbs | 13 -- app/assets/templates/photo_tpl.jst.hbs | 6 +- .../templates/status-message_tpl.jst.hbs | 14 +- app/views/layouts/_header.html.haml | 9 - app/views/layouts/application.html.haml | 12 ++ app/views/people/show.html.haml | 2 +- config/.jshint.json | 1 + ...lightbox.feature => photo_gallery.feature} | 6 - features/step_definitions/gallery_steps.rb | 11 ++ features/step_definitions/lightbox_steps.rb | 19 -- spec/javascripts/widgets/lightbox-spec.js | 95 --------- 28 files changed, 172 insertions(+), 527 deletions(-) create mode 100644 app/assets/javascripts/app/views/gallery_view.js delete mode 100644 app/assets/javascripts/widgets/lightbox.js create mode 100644 app/assets/stylesheets/gallery.scss delete mode 100644 app/assets/stylesheets/lightbox.scss rename features/desktop/{photo_lightbox.feature => photo_gallery.feature} (76%) create mode 100644 features/step_definitions/gallery_steps.rb delete mode 100644 features/step_definitions/lightbox_steps.rb delete mode 100644 spec/javascripts/widgets/lightbox-spec.js diff --git a/Gemfile b/Gemfile index 39220ce17..3c25be7a2 100644 --- a/Gemfile +++ b/Gemfile @@ -114,6 +114,7 @@ source "https://rails-assets.org" do gem "rails-assets-perfect-scrollbar", "0.6.4" gem "rails-assets-jakobmattsson--jquery-elastic", "1.6.11" gem "rails-assets-autosize", "3.0.8" + gem "rails-assets-blueimp-gallery", "2.16.0" end # Localization diff --git a/Gemfile.lock b/Gemfile.lock index c21d4079d..c8fe7b06c 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -546,6 +546,7 @@ GEM railties (= 4.2.4) sprockets-rails rails-assets-autosize (3.0.8) + rails-assets-blueimp-gallery (2.16.0) rails-assets-colorbox (1.6.3) rails-assets-jquery (>= 1.3.2) rails-assets-diaspora_jsxc (0.1.4.develop.1) @@ -863,6 +864,7 @@ DEPENDENCIES rack-ssl (= 1.4.1) rails (= 4.2.4) rails-assets-autosize (= 3.0.8)! + rails-assets-blueimp-gallery (= 2.16.0)! rails-assets-diaspora_jsxc (~> 0.1.4.develop)! rails-assets-highlightjs (= 8.6.0)! rails-assets-jakobmattsson--jquery-elastic (= 1.6.11)! diff --git a/app/assets/javascripts/app/pages/single-post-viewer.js b/app/assets/javascripts/app/pages/single-post-viewer.js index 21be997f5..c5a30f1c9 100644 --- a/app/assets/javascripts/app/pages/single-post-viewer.js +++ b/app/assets/javascripts/app/pages/single-post-viewer.js @@ -12,16 +12,6 @@ app.pages.SinglePostViewer = app.views.Base.extend({ this.model = new app.models.Post({ id : gon.post.id }); this.model.preloadOrFetch().done(_.bind(this.initViews, this)); this.model.interactions.fetch(); //async, yo, might want to throttle this later. - this.setupLightbox(); - }, - - setupLightbox : function(){ - this.lightbox = Diaspora.BaseWidget.instantiate("Lightbox"); - this.lightbox.set({ - imageParent: '.photo_attachments', - imageSelector: 'img.stream-photo' - }); - this.$el.delegate("a.stream-photo-link", "click", this.lightbox.lightboxImageClicked); }, initViews : function() { diff --git a/app/assets/javascripts/app/views.js b/app/assets/javascripts/app/views.js index 043800d08..a5b0ec706 100644 --- a/app/assets/javascripts/app/views.js +++ b/app/assets/javascripts/app/views.js @@ -53,7 +53,7 @@ app.views.Base = Backbone.View.extend({ this.postRenderTemplate(); }, - postRenderTemplate : $.noop, //hella callbax yo + postRenderTemplate: $.noop, //hella callbax yo renderSubviews : function(){ var self = this; diff --git a/app/assets/javascripts/app/views/content_view.js b/app/assets/javascripts/app/views/content_view.js index e93f6bfa6..bd00d36a4 100644 --- a/app/assets/javascripts/app/views/content_view.js +++ b/app/assets/javascripts/app/views/content_view.js @@ -73,6 +73,10 @@ app.views.Content = app.views.Base.extend({ postRenderTemplate : function(){ _.defer(_.bind(this.collapseOversized, this)); + var photoAttachments = this.$(".photo_attachments"); + if(photoAttachments.length > 0) { + new app.views.Gallery({ el: photoAttachments }); + } } }); @@ -82,6 +86,10 @@ app.views.StatusMessage = app.views.Content.extend({ app.views.ExpandedStatusMessage = app.views.StatusMessage.extend({ postRenderTemplate : function(){ + var photoAttachments = this.$(".photo_attachments"); + if(photoAttachments.length > 0) { + new app.views.Gallery({ el: photoAttachments }); + } } }); diff --git a/app/assets/javascripts/app/views/gallery_view.js b/app/assets/javascripts/app/views/gallery_view.js new file mode 100644 index 000000000..d5f5b7538 --- /dev/null +++ b/app/assets/javascripts/app/views/gallery_view.js @@ -0,0 +1,41 @@ +app.views.Gallery = app.views.Base.extend({ + events: { + "click a.gallery-picture": "showGallery" + }, + + pictures: function(){ + return this.$el.find("a.gallery-picture"); + }, + + showGallery: function(event){ + event = event || window.event; + var target = event.target || event.srcElement; + var link = target.src ? target.parentNode : target; + var links = this.pictures(); + blueimp.Gallery(links, this.options(event, link)); + }, + + preventHideControls: function(){ + var lightbox = $("#blueimp-gallery"); + var onEvent = function(ev){ + ev.preventDefault(); + ev.stopPropagation(); + }; + + lightbox.find(".slide").click(onEvent); + }, + + options: function(event, link) { + return { + index: link, + event: event, + stretchImages: true, + hidePageScrollbars: false, + disableScroll: true, + continuous: true, + toggleControlsOnReturn: false, + onopened: this.preventHideControls, + slideshowInterval: 2000 + }; + } +}); diff --git a/app/assets/javascripts/app/views/infinite_stream_view.js b/app/assets/javascripts/app/views/infinite_stream_view.js index bac823ccc..29e590f3a 100644 --- a/app/assets/javascripts/app/views/infinite_stream_view.js +++ b/app/assets/javascripts/app/views/infinite_stream_view.js @@ -28,10 +28,6 @@ app.views.InfScroll = app.views.Base.extend({ this.prependedPosts = document.createDocumentFragment(); }, - postRenderTemplate : function() { - if(this.stream.isFetching()) { this.showLoader() } - }, - createPostView : function(post){ var postView = new this.postClass({ model: post, stream: this.stream }); if (this.collection.at(0).id === post.id) { @@ -85,6 +81,7 @@ app.views.InfScroll = app.views.Base.extend({ this.$el.prepend(this.prependedPosts); this.$el.append(this.appendedPosts); this._resetPostFragments(); + this.postRenderTemplate(); }, finishedLoading: function() { diff --git a/app/assets/javascripts/app/views/photo_view.js b/app/assets/javascripts/app/views/photo_view.js index 286d3fe98..c4602a40f 100644 --- a/app/assets/javascripts/app/views/photo_view.js +++ b/app/assets/javascripts/app/views/photo_view.js @@ -4,7 +4,7 @@ app.views.Photo = app.views.Base.extend({ templateName: "photo", - className : "photo loaded", + className : "photo loaded col-md-4 clearfix", events: { "click .remove_post": "destroyModel" @@ -19,7 +19,7 @@ app.views.Photo = app.views.Base.extend({ presenter : function() { return _.extend(this.defaultPresenter(), { - authorIsCurrentUser : app.currentUser.isAuthorOf(this.model), + authorIsCurrentUser : app.currentUser.isAuthorOf(this.model) }); } }); diff --git a/app/assets/javascripts/app/views/photos_view.js b/app/assets/javascripts/app/views/photos_view.js index 5d5969ef1..e1053e663 100644 --- a/app/assets/javascripts/app/views/photos_view.js +++ b/app/assets/javascripts/app/views/photos_view.js @@ -1,26 +1,24 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later app.views.Photos = app.views.InfScroll.extend({ + className: "clearfix", + + postClass : app.views.Photo, + initialize : function() { this.stream = this.model; this.collection = this.stream.items; // viable for extraction this.stream.fetch(); - - this.setupLightbox(); this.setupInfiniteScroll(); }, - postClass : app.views.Photo, - - 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); + postRenderTemplate: function(){ + var photoAttachments = $("#main_stream > div"); + if(photoAttachments.length > 0) { + new app.views.Gallery({ el: photoAttachments }); + } } }); // @license-end diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js index 967b72f9f..57bbbb791 100644 --- a/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js +++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js @@ -1,17 +1,17 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later app.views.SinglePostContent = app.views.Base.extend({ - templateName: 'single-post-viewer/single-post-content', + templateName: "single-post-viewer/single-post-content", tooltipSelector: "time, .post_scope", subviews : { "#single-post-actions" : "singlePostActionsView", - '#single-post-moderation': "singlePostModerationView", - '#real-post-content' : 'postContentView', + "#single-post-moderation": "singlePostModerationView", + "#real-post-content" : "postContentView", ".oembed" : "oEmbedView", ".opengraph" : "openGraphView", ".status-message-location" : "postLocationStreamView", - '.poll': 'pollView', + ".poll": "pollView" }, initialize : function() { diff --git a/app/assets/javascripts/app/views/stream_view.js b/app/assets/javascripts/app/views/stream_view.js index 9d5d036ca..6ee1fbbe9 100644 --- a/app/assets/javascripts/app/views/stream_view.js +++ b/app/assets/javascripts/app/views/stream_view.js @@ -4,7 +4,7 @@ app.views.Stream = app.views.InfScroll.extend(_.extend( app.views.StreamShortcuts, { - + initialize: function() { this.stream = this.model; this.collection = this.stream.items; @@ -12,7 +12,6 @@ app.views.Stream = app.views.InfScroll.extend(_.extend( this.postViews = []; this.setupNSFW(); - this.setupLightbox(); this.setupInfiniteScroll(); this.setupShortcuts(); this.markNavSelected(); @@ -20,11 +19,6 @@ app.views.Stream = app.views.InfScroll.extend(_.extend( postClass : app.views.StreamPost, - setupLightbox : function(){ - this.lightbox = Diaspora.BaseWidget.instantiate("Lightbox"); - this.$el.delegate("a.stream-photo-link", "click", this.lightbox.lightboxImageClicked); - }, - setupNSFW : function(){ function reRenderPostViews() { _.map(this.postViews, function(view){ view.render() }); diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 096355269..93891fb97 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -44,3 +44,4 @@ //= require bootstrap //= require osmlocator //= require bootstrap-switch +//= require blueimp-gallery diff --git a/app/assets/javascripts/widgets/lightbox.js b/app/assets/javascripts/widgets/lightbox.js deleted file mode 100644 index c2bcf7113..000000000 --- a/app/assets/javascripts/widgets/lightbox.js +++ /dev/null @@ -1,186 +0,0 @@ -// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later - -/* Copyright (c) 2010-2011, Diaspora Inc. This file is - * licensed under the Affero General Public License version 3 or later. See - * the COPYRIGHT file. - */ - - -jQuery.fn.center = (function() { - var $window = $(window); - return function () { - this.css({ - position: "absolute", - top: ($window.height() - this.height()) / 2 + $window.scrollTop() + "px", - left:($window.width() - this.width()) / 2 + $window.scrollLeft() + "px" - }); - return this; - }; -})(); - -(function() { - var Lightbox = function() { - var self = this; - - self.options = { - imageParent: '.stream_element', - imageSelector: 'img.stream-photo' - }; - - this.subscribe("widget/ready", function() { - $.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) - }); - - //self.post.delegate("a.stream-photo-link", "click", self.lightboxImageClicked); - self.imageset.delegate("img", "click", self.imagesetImageClicked); - - self.window.resize(function() { - self.lightbox.css("max-height", (self.window.height() - 100) + "px"); - }).trigger("resize"); - - self.closelink.click(function(evt){ - evt.preventDefault(); - self.resetLightbox(); - }); - self.lightbox.click(self.resetLightbox); - - self.backdrop.click(function(evt) { - evt.preventDefault(); - 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"); - - switch(evt.keyCode) { - case 27: - self.resetLightbox(); - break; - case 37: - //left - self.selectImage(self.prevImage(imageThumb)); - break; - case 39: - //right - self.selectImage(self.nextImage(imageThumb)); - break; - } - }); - }); - - this.nextImage = function(thumb){ - var next = thumb.next(); - if (next.length === 0) { - next = self.imageset.find("img").first(); - } - return(next); - }; - - this.prevImage = function(thumb){ - var prev = thumb.prev(); - if (prev.length === 0) { - prev = self.imageset.find("img").last(); - } - return(prev); - }; - - this.lightboxImageClicked = function(evt) { - evt.preventDefault(); - - var selectedImage = $(this).find(self.options.imageSelector), - imageUrl = selectedImage.attr("data-full-photo"), - images = selectedImage.parents(self.options.imageParent).find(self.options.imageSelector), - imageThumb; - - self.imageset.html(""); - images.each(function(index, image) { - image = $(image); - var thumb = $("", { - src: image.attr("data-small-photo"), - "data-full-photo": image.attr("data-full-photo") - }); - - if(image.attr("data-full-photo") === imageUrl) { - imageThumb = thumb; - } - - self.imageset.append(thumb); - }); - - self - .selectImage(imageThumb) - .revealLightbox(); - - self.scrollToThumbnail(imageThumb); - }; - - this.imagesetImageClicked = function(evt) { - evt.preventDefault(); - evt.stopPropagation(); - - 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; - }; - - this.revealLightbox = function() { - self.body.addClass("lightboxed"); - self.lightbox - .css("max-height", (self.window.height() - 100) + "px") - .show(); - - return self; - }; - - this.resetLightbox = function() { - self.lightbox.hide(); - self.body.removeClass("lightboxed"); - self.image.attr("src", ImagePaths.get("ajax-loader2.gif")); - self.imageset.html(""); - }; - - this.set = function(opts) { - $.extend(self.options, opts); - }; - }; - - Diaspora.Widgets.Lightbox = Lightbox; -})(); -// @license-end diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index c866c1534..b47584a22 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -16,7 +16,6 @@ @import 'new_styles/base'; @import 'new_styles/interactions'; @import 'spinner'; -@import 'lightbox'; @import 'timeago'; @import 'vendor/fileuploader'; @import 'vendor/autoSuggest'; @@ -94,4 +93,6 @@ /* statistics */ @import 'statistics'; -@import "bootstrap3-switch"; +/* gallery */ +@import "blueimp-gallery"; +@import "gallery"; diff --git a/app/assets/stylesheets/bootstrap-complete.scss b/app/assets/stylesheets/bootstrap-complete.scss index 5319f637a..df03c6ad0 100644 --- a/app/assets/stylesheets/bootstrap-complete.scss +++ b/app/assets/stylesheets/bootstrap-complete.scss @@ -2,3 +2,7 @@ @import "bootstrap-sprockets"; @import "bootstrap-variables"; //our overwrites of bootstrap variables @import "bootstrap"; + +// Plugins + +@import "bootstrap3-switch"; diff --git a/app/assets/stylesheets/gallery.scss b/app/assets/stylesheets/gallery.scss new file mode 100644 index 000000000..3276dcb4f --- /dev/null +++ b/app/assets/stylesheets/gallery.scss @@ -0,0 +1,59 @@ +$thumbnail-size: 12px; +$thumbnail-margin: 2px; +$thumbnail-active-size: $thumbnail-size + $thumbnail-margin; + +#blueimp-gallery { + .slides { + height: calc(100% - 40px); + padding: 20px 0 0 0; + margin: 0; + } + + [class^="entypo-"], [class*="entypo-"] { + color: $text-grey; + width: 40px; + height: 40px; + margin: 0; + padding: 0; + } + + .play-pause { + z-index: 2; + color: $text-grey; + } + + .prev, .next { + border-color: $text-grey; + } + + .prev [class^="entypo-"], .prev [class*="entypo-"] { + padding-right: 6px; + } + + .next [class^="entypo-"], .next [class*="entypo-"] { + padding-left: 6px; + } + + .indicator { + margin: 8px 0; + position: unset; + height: $thumbnail-size + 5px; + li { + border: none; + margin: $thumbnail-margin; + vertical-align: middle; + width: $thumbnail-size; + height: $thumbnail-size; + border-radius: $thumbnail-size / 2; + + &.active, &:hover{ + margin: $thumbnail-margin / 2; + width: $thumbnail-active-size; + height: $thumbnail-active-size; + border-radius: $thumbnail-active-size / 2; + transition: linear 0.2s; + transition-property: height, width, margin; + } + } + } +} diff --git a/app/assets/stylesheets/lightbox.scss b/app/assets/stylesheets/lightbox.scss deleted file mode 100644 index 872126eb0..000000000 --- a/app/assets/stylesheets/lightbox.scss +++ /dev/null @@ -1,147 +0,0 @@ -#lightbox{ - z-index: 1003; - position: fixed; - top: 0; - right: 0; - display: none; - overflow-y: auto; - width: 100%; - text-align: center; - padding-top: 80px; - padding-bottom: 20px; - - color: $text-dark-grey; - text-shadow: none; - font-size: 12px; - - &.show{ - position: absolute; - display: block; - } - - #lightbox-image{ - box-shadow: 0 10px 20px black; - top: 0; - display: block; - margin-bottom: 120px; - background: white; - } - - #lightbox-content{ - text-align: left; - display: inline-block; - } - - #lightbox-links{ - margin-top: 12px; - - .attribution{ - float: right; - } - - #lightbox-attribution-link{ - color: #999; - font-weight: bold; - &:hover{ - color: #eee; - } - } - } - - #lightbox-close-link, - #lightbox-attribution-link, - #lightbox-short-link{ - display: inline-block; - color: #333; - text-decoration: none; - line-height: 14px; - - &:hover{ - color: #eee; - } - } - - #lightbox-close-link{ - color: $text-dark-grey; - margin-bottom: 12px; - } -} - -#lightbox-backdrop{ - box-shadow:inset 0 0 50px #000000; - - z-index: 1002; - position: fixed; - height: 100%; - width: 100%; - top: 0; - left: 0; - background-color: rgba(0,0,0,0.9); - display: none; -} - -#lightbox-navigation{ - z-index: 1004; - position: fixed; - width: 100%; - left: 0; - bottom: 0; - 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{ - transition: opacity 0.2s; - opacity: 0.2; - height: 70px; - width: 70px; - margin-right: 5px; - cursor: pointer; - background-color: white; - - &:last-child{ - margin-right: 0; - } - - &.selected{ - opacity: 1; - } - } -} - -body.lightboxed{ - overflow: hidden; - #lightbox-backdrop{ - display: block; - } -} - diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs index e835337a1..b3c633c9a 100644 --- a/app/assets/templates/header_tpl.jst.hbs +++ b/app/assets/templates/header_tpl.jst.hbs @@ -108,18 +108,5 @@ - - - diff --git a/app/assets/templates/photo_tpl.jst.hbs b/app/assets/templates/photo_tpl.jst.hbs index ef7b54064..fc83528dc 100644 --- a/app/assets/templates/photo_tpl.jst.hbs +++ b/app/assets/templates/photo_tpl.jst.hbs @@ -1,4 +1,4 @@ -
+
{{#if loggedIn}}
@@ -21,8 +21,8 @@ {{/if}}
- - + +
diff --git a/app/assets/templates/status-message_tpl.jst.hbs b/app/assets/templates/status-message_tpl.jst.hbs index 31a098277..14ee8889a 100644 --- a/app/assets/templates/status-message_tpl.jst.hbs +++ b/app/assets/templates/status-message_tpl.jst.hbs @@ -24,15 +24,15 @@ {{#if largePhoto}}
- - {{#with largePhoto}} - - {{/with}} - + {{#with largePhoto}} + + + + {{/with}} {{#each smallPhotos}} - - + + {{/each}}
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index e244caca5..2f281b09e 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -23,12 +23,3 @@ - if AppConfig.settings.enable_registrations? && !current_page?(controller: "/registrations", action: :new) %li= link_to t("devise.shared.links.sign_up"), new_user_registration_path, class: 'login' %li= link_to t('devise.shared.links.sign_in'), new_user_session_path, class: 'login' - - #lightbox - #lightbox-content - %a#lightbox-close-link(href='#') - [x] - =t('javascripts.header.close') - %img#lightbox-image - #lightbox-imageset - #lightbox-backdrop diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 5f55aa1be..d1ff94243 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -57,3 +57,15 @@ = include_chartbeat = include_mixpanel_guid + + .blueimp-gallery.blueimp-gallery-controls#blueimp-gallery + .slides + %h3.title + %a.prev + .entypo-chevron-small-left + %a.next + .entypo-chevron-small-right + %a.close + .entypo-cross + %a.play-pause + %ol.indicator diff --git a/app/views/people/show.html.haml b/app/views/people/show.html.haml index 0d634d10f..56b51eb53 100644 --- a/app/views/people/show.html.haml +++ b/app/views/people/show.html.haml @@ -26,7 +26,7 @@ -if user_signed_in? && current_page?(person_path(current_user.person)) = render 'publisher/publisher', publisher_aspects_for(nil) - #main_stream.stream + .stream.clearfix#main_stream -# JS #paginate diff --git a/config/.jshint.json b/config/.jshint.json index 676c0f1f6..15675a257 100644 --- a/config/.jshint.json +++ b/config/.jshint.json @@ -52,6 +52,7 @@ "parse_url", "punycode", "qq", + "blueimp", "loginAs", "logout", diff --git a/features/desktop/photo_lightbox.feature b/features/desktop/photo_gallery.feature similarity index 76% rename from features/desktop/photo_lightbox.feature rename to features/desktop/photo_gallery.feature index 264280829..6ed648c33 100644 --- a/features/desktop/photo_lightbox.feature +++ b/features/desktop/photo_gallery.feature @@ -19,9 +19,3 @@ Feature: viewing the photo lightbox And I press the attached image And I press the close lightbox link Then I should not see the photo lightbox - - Scenario: closing the lightbox by clicking the backdrop - Then I should see an image attached to the post - And I press the attached image - And I press the lightbox backdrop - Then I should not see the photo lightbox diff --git a/features/step_definitions/gallery_steps.rb b/features/step_definitions/gallery_steps.rb new file mode 100644 index 000000000..2dc5e262f --- /dev/null +++ b/features/step_definitions/gallery_steps.rb @@ -0,0 +1,11 @@ +Then "I should see the photo lightbox" do + step %(I should see a "#blueimp-gallery" within "body") +end + +Then "I should not see the photo lightbox" do + step %(I should not see a "#blueimp-gallery" within "body") +end + +Then "I press the close lightbox link" do + find(:css, "#blueimp-gallery .close").click +end diff --git a/features/step_definitions/lightbox_steps.rb b/features/step_definitions/lightbox_steps.rb deleted file mode 100644 index 6efdd8546..000000000 --- a/features/step_definitions/lightbox_steps.rb +++ /dev/null @@ -1,19 +0,0 @@ -Then 'I should see the photo lightbox' do - step %{I should see a "img" within "#lightbox-imageset"} - step %{I should see a "#lightbox-backdrop" within "body"} - step %{I should see a "#lightbox-image" within "body"} -end - -Then 'I should not see the photo lightbox' do - step %{I should not see a "#lightbox-imageset" within "body"} - step %{I should not see a "#lightbox-backdrop" within "body"} - step %{I should not see a "#lightbox-image" within "body"} -end - -Then 'I press the close lightbox link' do - find(:css, "#lightbox-close-link").click -end - -Then 'I press the lightbox backdrop' do - find(:css, "#lightbox-backdrop").click -end diff --git a/spec/javascripts/widgets/lightbox-spec.js b/spec/javascripts/widgets/lightbox-spec.js deleted file mode 100644 index 52d5ee7f9..000000000 --- a/spec/javascripts/widgets/lightbox-spec.js +++ /dev/null @@ -1,95 +0,0 @@ -/* 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.Lightbox", function() { - var photos; - - var createDummyMarkup = function(opts){ - var defaults = { - linkClass: 'stream-photo-link', - imageParent: 'stream_element', - imageClass: 'stream-photo' - }; - - var classes = _.extend(defaults, opts); - - var output = $('
').addClass(classes.imageParent); - _.each(photos, function(photo){ - output.append( - $('') - .attr('href', '#') - .addClass(classes.linkClass) - .append( - $('') - .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( - '' + - '' + - '' + - '' - ); - - photos = $.parseJSON(spec.readFixture("photos_json"))["photos"]; - }); - - context("opens the lightbox correctly", function() { - var lightbox, 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, 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(); - }); - }); - -});