diff --git a/www/themes/jason-williamsca/assets/javascript/feed.js b/www/themes/jason-williamsca/assets/javascript/feed.js index ac96425..11f6207 100644 --- a/www/themes/jason-williamsca/assets/javascript/feed.js +++ b/www/themes/jason-williamsca/assets/javascript/feed.js @@ -1,47 +1,68 @@ (function($) { "use strict"; // Start of use strict - + const min = 60; const hour = min * 60; const day = hour * 24; + const week = day * 7; const month = day * 30; const ninemonth = month * 9; - - // If the feed is loaded immediadely on page load (i.e. we're not using ajax), reset the layout on each image load - $('.feeditem img').each(function() { - $(this).one('load', () => { - $('.masonry').masonry() - }) - }) - - // Apply masonry layout to feed cards after content (including images) has been loaded - $(window).on('feedLoaded', function() { - if (!feedItemClass) feedItemClass = 'col-sm-12 col-md-6 col-xl-4' - - $('.masonry-item').addClass(feedItemClass) - $('.show-onfeedloaded').removeClass('d-none') - $('.masonry').masonry('reloadItems') - $('.masonry').masonry() - - // Every time an image loads, reset the layout - $('.masonry img').each(function() { + function addImageLoadHandler() { + $('.feeditem img').each(function() { $(this).one('load', () => { $('.masonry').masonry() }) }) - }) - - // Render the tag cloud if/when tag data is loaded by the component + } + + function setFriendlyTime() { + // Loop through each feeditem (assuming they're loaded when the page loads) and set the friendlytime + var nowts = Math.floor(new Date().getTime() / 1000) + $('.feeditem').each(function() { + var elapsed = nowts - $(this).attr('data-timestamp') + var friendlytime = false + + if (elapsed < min) friendlytime = elapsed + ' seconds' + else if (elapsed < hour) friendlytime = Math.floor(elapsed/min) + ' minutes' + else if (elapsed < day) friendlytime = Math.floor(elapsed/hour) + ' hours' + else if (elapsed < week) friendlytime = Math.floor(elapsed/day) + ' days' + else if (elapsed < month) friendlytime = Math.floor(elapsed/week) + ' weeks' + else if (elapsed < ninemonth) friendlytime = Math.floor(elapsed/month) + ' months' + + if (friendlytime && friendlytime.startsWith('1 ')) friendlytime = friendlytime.slice(0, -1) + + if (friendlytime) $(this).find('.friendlytime').html(friendlytime) + }) + } + + // If there are feed items present on page load, do the things... + if ($('.feeditem').length > 0) { + addImageLoadHandler() + setFriendlyTime() + } + + // If feeditems are added to the page asynchronously, do the things... + $(window).on('feedLoaded', () => { + if (!feedItemClass) feedItemClass = 'col-sm-12 col-md-6 col-xl-4' + $('.feeditem').addClass(feedItemClass) + $('.show-onfeedloaded').removeClass('d-none') + + $('.masonry').masonry('reloadItems') + $('.masonry').masonry() + + addImageLoadHandler() + setFriendlyTime() + }) + + // When a tag data is loaded, render the cloud $(window).on('tagsLoaded', function(event, data) { - console.log(data.responseJSON) - var cloudWords = [] - + data.responseJSON.forEach((tag) => { cloudWords.push({text: tag.tag, weight: tag.count, link: '/feed/all/' + tag.tag}) }) - + $('#tagcloud').html('').height($('#tagcloud').width() * 4/3) $('#tagcloud').jQCloud(cloudWords, { @@ -50,38 +71,4 @@ delay: 2 }) }) - - $(function() { - // If there's tag data set once the page is loaded, create a tag cloud - if(typeof tagData !== 'undefined') { - var cloudWords = [] - - tagData.forEach((tag) => { - cloudWords.push({text: tag.tag, weight: tag.count, link: '/feed/all/' + tag.tag}) - }) - - $('#tagcloud').jQCloud(cloudWords, { - autoResize: true, - removeOverflowing: true, - delay: 2 - }) - } - - // Loop through each feeditem (assuming they're loaded when the page loads) and set the friendlytime - var nowts = Math.floor(new Date().getTime() / 1000) - $('.feeditem').each(function() { - var elapsed = nowts - $(this).attr('data-timestamp') - var friendlytime = false - - if (elapsed < min) friendlytime = elapsed + ' seconds' - else if (elapsed < hour) friendlytime = Math.floor(elapsed/min) + ' minutes' - else if (elapsed < day) friendlytime = Math.floor(elapsed/hour) + ' hours' - else if (elapsed < month) friendlytime = Math.floor(elapsed/day) + ' days' - else if (elapsed < ninemonth) friendlytime = Math.floor(elapsed/month) + ' months' - - if (friendlytime && friendlytime.startsWith('1 ')) friendlytime = friendlytime.slice(0, -1) - - if (friendlytime) $(this).find('.friendlytime').html(friendlytime) - }) - }) })(jQuery); // End of use strict \ No newline at end of file