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(
+				goToPost(oFocusPost);
-					$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'))
-					*/
-				);
-
 				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,

script/lightbox.js

@@ -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) {