Sync feed scroll with lightbox
This commit is contained in:
@@ -183,7 +183,11 @@ function initPage(asHash) {
|
||||
imageFadeDuration: 400,
|
||||
positionFromTop: 0,
|
||||
resizeDuration: 400,
|
||||
hasVideo: true
|
||||
hasVideo: true,
|
||||
onMediaChange: (oMedia) => {
|
||||
oSpot.updateHash('media', oMedia.id);
|
||||
goToPost({type: 'media', id: oMedia.id});
|
||||
}
|
||||
});
|
||||
|
||||
//Assign Track Type Colors
|
||||
@@ -789,8 +793,6 @@ function updateFeed(bFirstChunk, bDiscrete, fCallback) {
|
||||
self.tmp('updatable', false);
|
||||
if(!bDiscrete) $('#loading').show();
|
||||
|
||||
var $Posts = $('<div>');
|
||||
|
||||
self.get(
|
||||
'next_feed',
|
||||
function(asData) {
|
||||
@@ -807,9 +809,10 @@ function updateFeed(bFirstChunk, bDiscrete, fCallback) {
|
||||
//Add posts
|
||||
if(bFirstChunk === true) self.tmp('$PostList').empty();
|
||||
$.each(asData.feed, function(iKey, asPost){
|
||||
$Posts.append(getPost(asPost));
|
||||
var $Post = getPost(asPost);
|
||||
self.tmp('$PostList').append($Post);
|
||||
if(asPost.type == 'media' && isLightboxOpen()) lightbox.addToAlbum($Post.find('.media-link'));
|
||||
});
|
||||
self.tmp('$PostList').append($Posts.children());
|
||||
self.tmp('$PostList').find('img').waitForImages(true).done(fCallback);
|
||||
|
||||
self.tmp('updatable', true);
|
||||
@@ -831,17 +834,7 @@ function focusOnPost(oFocusPost) {
|
||||
var $Post = oSpot.tmp('$PostList').find(sElemId);
|
||||
var bGetToTop = (oSpot.tmp('$PostList').height() - (($Post.length > 0)?$Post.position().top:0) >= $(window).height());
|
||||
if($Post.length > 0 && (bGetToTop || self.tmp('out-of-data'))) {
|
||||
self.tmp('simple-bar').getScrollElement().scrollTop = Math.round(
|
||||
$Post.offset().top
|
||||
- parseInt($('#feed-panel').css('padding-top'))
|
||||
/*
|
||||
$Post.position().top
|
||||
+ parseInt($Post.css('margin-top'))
|
||||
+ self.tmp('$Poster').outerHeight(true)
|
||||
+ parseInt($('#feed-panel').css('padding-top'))
|
||||
*/
|
||||
);
|
||||
|
||||
goToPost(oFocusPost);
|
||||
if(oFocusPost.type=='media' || oFocusPost.type=='message') $Post.find('a.drill').click();
|
||||
}
|
||||
else if(!self.tmp('out-of-data')) updateFeed(false, false, function() {focusOnPost(oFocusPost);});
|
||||
@@ -853,6 +846,24 @@ function focusOnPost(oFocusPost) {
|
||||
}
|
||||
}
|
||||
|
||||
function goToPost(oPost) {
|
||||
var sElemId = '#'+oPost.type+'-'+oPost.id;
|
||||
var $Post = oSpot.tmp('$PostList').find(sElemId);
|
||||
if($Post.length > 0) {
|
||||
self.tmp('simple-bar').getScrollElement().scrollTop += Math.round(
|
||||
$Post.offset().top
|
||||
- parseInt($('#feed-panel').css('padding-top'))
|
||||
/*
|
||||
$Post.position().top
|
||||
+ parseInt($Post.css('margin-top'))
|
||||
+ self.tmp('$Poster').outerHeight(true)
|
||||
+ parseInt($('#feed-panel').css('padding-top'))
|
||||
*/
|
||||
);
|
||||
}
|
||||
else console.log('Missing element ID '+sElemId);
|
||||
}
|
||||
|
||||
function getRelativeTime(sLocalTime, iOffset) {
|
||||
let $Time = $('<span>').text(sLocalTime.substr(-5));
|
||||
if(iOffset != '0') $Time.append($('<sup>', {'title': iOffset+' '+oSpot.lang('unit_day')+' ('+sLocalTime.substr(0, 5)+')'}).text(' '+iOffset));
|
||||
@@ -1000,7 +1011,7 @@ function getMediaLink(asData, sType) {
|
||||
var $Title = $('<div>').append($Comment).append(sType=='marker'?$TakenOn:$PostedOn).append(sType=='marker'?$PostedOn:$TakenOn);
|
||||
var $Link =
|
||||
$('<a>', {
|
||||
'class': 'drill',
|
||||
'class': 'media-link drill',
|
||||
'href': asData.media_path,
|
||||
'data-lightbox': sType+'-medias',
|
||||
'data-type': asData.subtype,
|
||||
|
||||
@@ -64,6 +64,7 @@
|
||||
sanitizeTitle: false
|
||||
//ADDED-START
|
||||
, hasVideo: true
|
||||
, onMediaChange: (oMedia) => {}
|
||||
//ADDED-END
|
||||
};
|
||||
|
||||
@@ -122,10 +123,10 @@
|
||||
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />\
|
||||
<div class="lb-nav">\
|
||||
<div class="lb-prev-area">\
|
||||
<a class="lb-prev" aria-label="Previous image" href="" ></a>\
|
||||
<a class="lb-prev" aria-label="Previous image" href="" role="button"></a>\
|
||||
</div>\
|
||||
<div class="lb-next-area">\
|
||||
<a class="lb-next" aria-label="Next image" href="" ></a>\
|
||||
<a class="lb-next" aria-label="Next image" href="" role="button"></a>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="lb-loader">\
|
||||
@@ -140,7 +141,7 @@
|
||||
<span class="lb-number"></span>\
|
||||
</div>\
|
||||
<div class="lb-closeContainer">\
|
||||
<a class="lb-close"></a>\
|
||||
<a class="lb-close" role="button"></a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
@@ -325,25 +326,9 @@
|
||||
}
|
||||
//ADDED-END
|
||||
|
||||
this.album = [];
|
||||
//this.album = [];
|
||||
var imageNumber = 0;
|
||||
|
||||
function addToAlbum($link) {
|
||||
self.album.push({
|
||||
alt: $link.attr('data-alt'),
|
||||
link: $link.attr('href'),
|
||||
title: $link.attr('data-title') || $link.attr('title')
|
||||
//ADDED-START
|
||||
, orientation: $link.attr('data-orientation')
|
||||
, type: $link.attr('data-type')
|
||||
, id: $link.attr('data-id')
|
||||
, $Media: $link.attr('data-type')=='video'?self.$video:self.$image
|
||||
, width: $link.find('img').attr('width')
|
||||
, height: $link.find('img').attr('height')
|
||||
//ADDED-END
|
||||
});
|
||||
}
|
||||
|
||||
// Support both data-lightbox attribute and rel attribute implementations
|
||||
var dataLightboxValue = $link.attr('data-lightbox');
|
||||
var $links;
|
||||
@@ -351,7 +336,7 @@
|
||||
if (dataLightboxValue) {
|
||||
$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
|
||||
for (var i = 0; i < $links.length; i = ++i) {
|
||||
addToAlbum($($links[i]));
|
||||
this.addToAlbum($($links[i]));
|
||||
if ($links[i] === $link[0]) {
|
||||
imageNumber = i;
|
||||
}
|
||||
@@ -359,12 +344,12 @@
|
||||
} else {
|
||||
if ($link.attr('rel') === 'lightbox') {
|
||||
// If image is not part of a set
|
||||
addToAlbum($link);
|
||||
this.addToAlbum($link);
|
||||
} else {
|
||||
// If image is part of a set
|
||||
$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
|
||||
for (var j = 0; j < $links.length; j = ++j) {
|
||||
addToAlbum($($links[j]));
|
||||
this.addToAlbum($($links[j]));
|
||||
if ($links[j] === $link[0]) {
|
||||
imageNumber = j;
|
||||
}
|
||||
@@ -390,6 +375,23 @@
|
||||
this.changeImage(imageNumber);
|
||||
};
|
||||
|
||||
Lightbox.prototype.addToAlbum = function($link) {
|
||||
if(!this.album) this.album = [];
|
||||
this.album.push({
|
||||
alt: $link.attr('data-alt'),
|
||||
link: $link.attr('href'),
|
||||
title: $link.attr('data-title') || $link.attr('title')
|
||||
//ADDED-START
|
||||
, orientation: $link.attr('data-orientation')
|
||||
, type: $link.attr('data-type')
|
||||
, id: $link.attr('data-id')
|
||||
, $Media: $link.attr('data-type')=='video'?this.$video:this.$image
|
||||
, width: $link.find('img').attr('width')
|
||||
, height: $link.find('img').attr('height')
|
||||
//ADDED-END
|
||||
});
|
||||
}
|
||||
|
||||
//ADDED-START
|
||||
Lightbox.prototype.getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
|
||||
var iWindowWidth = $(window).width();
|
||||
@@ -487,7 +489,7 @@
|
||||
this.$outerContainer.addClass('animating');
|
||||
this.$container.removeClass('moveable moving');
|
||||
|
||||
oSpot.updateHash('media', self.album[imageNumber].id);
|
||||
this.options.onMediaChange(self.album[imageNumber]);
|
||||
|
||||
var $hasVideoNav = this.$container.hasClass('lb-video-nav');
|
||||
switch(self.album[imageNumber].type) {
|
||||
|
||||
Reference in New Issue
Block a user