diff --git a/masks/project.html b/masks/project.html index bedd556..0c4c5f2 100644 --- a/masks/project.html +++ b/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 = $('
'); - 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 = $('').text(sLocalTime.substr(-5)); if(iOffset != '0') $Time.append($('', {'title': iOffset+' '+oSpot.lang('unit_day')+' ('+sLocalTime.substr(0, 5)+')'}).text(' '+iOffset)); @@ -1000,7 +1011,7 @@ function getMediaLink(asData, sType) { var $Title = $('
').append($Comment).append(sType=='marker'?$TakenOn:$PostedOn).append(sType=='marker'?$PostedOn:$TakenOn); var $Link = $('', { - 'class': 'drill', + 'class': 'media-link drill', 'href': asData.media_path, 'data-lightbox': sType+'-medias', 'data-type': asData.subtype, diff --git a/script/lightbox.js b/script/lightbox.js index 2932b89..1975946 100644 --- a/script/lightbox.js +++ b/script/lightbox.js @@ -64,6 +64,7 @@ sanitizeTitle: false //ADDED-START , hasVideo: true + , onMediaChange: (oMedia) => {} //ADDED-END }; @@ -122,10 +123,10 @@ \
\
\ - \ + \
\
\ - \ + \
\
\
\ @@ -140,7 +141,7 @@ \
\
\ - \ + \
\
\
\ @@ -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) {