Sync feed scroll with lightbox

masks/project.html

@@ -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,