Commit 63bfcb7c authored by augier's avatar augier

Using Blueimp image gallery

parent e0ad53e4
......@@ -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
......
......@@ -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)!
......
......@@ -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() {
......
......@@ -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;
......
......@@ -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 });
}
}
});
......
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
};
}
});
......@@ -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() {
......
......@@ -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)
});
}
});
......
// @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
// @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() {
......
......@@ -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() });
......
......@@ -44,3 +44,4 @@
//= require bootstrap
//= require osmlocator
//= require bootstrap-switch
//= require blueimp-gallery
// @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 = $("<img/>", {
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
......@@ -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";
......@@ -2,3 +2,7 @@
@import "bootstrap-sprockets";
@import "bootstrap-variables"; //our overwrites of bootstrap variables
@import "bootstrap";
// Plugins
@import "bootstrap3-switch";
$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;
}
}
}
}
#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;
}
}
......@@ -108,18 +108,5 @@
</div>
</div>
</div>
<div id="lightbox">
<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>
</div>
</nav>
<div class="media col-md-4">
<div class="media">
<div class="bd">
{{#if loggedIn}}
<div class="control-icons">
......@@ -21,8 +21,8 @@
{{/if}}
<div class="thumbnail img-thumbnail">
<a href="#" class="photo-link">
<img src="{{sizes.large}}" class="photo big_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
<a href="{{sizes.large}}" class="photo-link gallery-picture">
<img src="{{sizes.large}}" class="photo big_photo">
</a>
</div>
......